|
Nog een stapje verder kunnen we gaan als we de lay-out gaan opsplitsen naargelang op welk medium de website wordt bekeken.
Websites kunnen bekeken worden:
- op papier;
- op een projectiescherm;
- door een spraakbrowser voor blinden en slechtzienden
- ...
Elk medium heeft zo zijn specifieke eigenschappen: voor elk medium kunnen we
een aparte stylesheet ontwerpen die zo geschikt mogelijk is.
Je hebt wellicht al gemerkt dat lezen op een beeldscherm veel vermoeiender is
dan lezen op papier.
Op beeldschermen gebruik je best lettertypes zonder
schreef, die zijn het beste leesbaar. (Arial, Verdana) Op papier kun je beter
wel lettertypes met schreef gebruiken, bijvoorbeeld Times New Roman.
We kunnen nu een stylesheet gaan opstellen voor weergave op een beeldscherm
en eentje voor weergave op papier.
De verschillende stylesheets koppelen doen we op de gebruikelijke manier, maar
we voegen er een attribuut aan toe, namelijk media. Het attribuut
media kan verschillende waarden bevatten:
- screen: voor weergave op een beeldscherm
- speech: voor weergave door een spraakbrowser
- print: voor weergave op papier
- projection: voor weergave door projectors
- braille: voor weergave door braillesystemen
- all: voor alle media
Als we nu voortbouwen op bovenstaand voorbeeld, krijgen we deze code tussen
<head> en </head>:
<link rel="stylesheet" href="mijnzicht.css" type="text/css" media="screen">
<link rel="stylesheet" href="mijnafdruk.css" type="text/css" media="print">
Het is ook mogelijk om stylesheets voor media te combineren. Dit los je op
door simpelweg een komma te plaatsen tussen de verschillende media. Voorbeeld:
<link rel="stylesheet" href="style5.css" type="text/css" media="print,projection">
Nu heb je het voornaamste over CSS
geleerd! Veel succes!
|
Ontwerp je site