1 XHTML en CSS Deel 3 Ruud Koortens Frans Peeters januari Lyceum Sancta Maria 12 23 Inhoudsopgave Het opmaken van hyperlinks Kleur Het gebruik van kle...
xhtml en css Inhoudsopgave 1.1.1. Het opmaken van hyperlinks ........................................................................ 1 1.1.2. Kleur .......................................................................................................... 1 1.1.3. Het gebruik van kleuren bij het ontwerp van een website ............................. 2 1.1.4. De kleur van de body instellen ..................................................................... 4 1.1.5. Transparantie en kleuren ............................................................................. 4 1.1.6. Wetenswaardigheden over kleur en achtergrondafbeeldingen ....................... 5 2. CSS lay-outs ....................................................................................................... 7 2.1. Twee kolommen voorbeeld lay-out met CSS ........................................................ 7 2.2. Voorbereiding .................................................................................................... 7 2.3. Stap 1: body eigenschappen instellen in het stijlblad ........................................... 7 2.4. Stap 2: division container definiëren .................................................................... 7 2.5. Stap 3: HTML document maken en stijldefinities toepassen ................................. 8 2.6. Stap 4: kopregel definiëren en toepassen ............................................................ 9 2.7. Stap 5: de hoofdsectie met de inhoud en zijbalk ................................................. 12 2.8. En nu verder … ................................................................................................. 17 Bijlage: Nuttige links .............................................................................................. 18
i
xhtml en css
1.1.1.
Het opmaken van hyperlinks
Hyperlinks vormen speciale tekstelementen op een webpagina. Links zijn actieve elementen. Je kunt de volgende vier pseudoklassen gebruiken om het uiterlijk van de hyperlinks naar eigen smaak op te maken: link: visited: active:
legt de stijl van een hyperlink vast die nog niet bezocht is; legt de stijl van een hyperlink vast die al bezocht is; bepaalt de stijl van een hyperlink op het moment dat de gebruiker deze activeert door erop te klikken; bepaalt de stijl van een element op het moment dat de gebruiker er met de muisaanwijzer boven komt of er weer vanaf gaat;
Er zijn verschillende manieren om kleuren vast te leggen. In onderstaand voorbeeld is blauw gemaakt op verschillende manieren. color color color color color color
xhtml en css Je kunt kleuren vast leggen door middel van: 1. Beschrijvende kleurnamen 2. Systeemkleurnamen 3. RGB decimale kleurwaarden 4. RGB percentage waarden 5. Hexadecimale kleurwaarden 6. Hexadecimale kleurwaarden (afgekort) 1. Er zijn 17 officiële beschrijvende kleurnamen die door HTML en CSS ondersteund worden. Momenteel worden door de meeste browsers 140 beschrijvende kleurnamen ondersteund. De 17 officiële namen zijn: black, white, aqua, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal en yellow. De andere 133 namen worden niet door W3C ondersteund. Door de kleurnamen te gebruiken heb je vooraf een aardig idee van hoe de kleur er uit zal zien. 2. Er zijn 28 systeemkleurnamen. Deze kleurnamen komen overeen met kleurnamen die door het besturingssysteem worden gebruikt. De kleurnamen zijn specifiek voor het bedoelde besturingssysteem. Je kunt deze kleurnamen gebruiken om web interfaces te maken die overeen komen met het besturingssysteem van de gebruiker. Zie http://w3.org/TR/CSS21/ui.html voor een overzicht van de kleurnamen (system colors). 3. Kleuren die op een computerscherm worden getoond worden samengesteld uit drie basiskleuren, rood, groen en blauw. Deze drie kleuren kunnen gemengd worden tot een bijna eindeloze reeks kleurschakeringen. De RGB functie kan gebruikt worden door voor iedere kleur een waarde op te geven, gescheiden door een komma (van 0 tot en met 255). 4. Je kunt de RGB kleurwaarden ook in percentages opgeven. 5. De hexadecimale notatiewijze loopt van zwart (#000000) tot wit (#ffffff). De eerste twee tekens achter # staan voor rood, de tweede voor groen, de derde voor blauw. #0000ff staat voor géén rood, géén blauw, maximaal blauw. De hexadecimale notatie geeft de grootste controle over de kleurspecificatie, webdesigners zullen deze notatiewijze het liefst gebruiken. Als je echter snel een eenvoudige site wilt maken kies je wellicht liever voor de beschrijvende kleurnamen. 6. De afkorting kan alleen gebruikt worden wanneer de hexadecimale cijfers per paar gelijk zijn (#0000ff = #00f).
1.1.3.
Het gebruik van kleuren bij het ontwerp van een website
Het kiezen van een combinatie van kleuren die goed werken is een vak apart. Vooral het gebruik van kleur van de tekst in combinatie met een gekleurde achtergrond kan de leesbaarheid van de tekst bemoeilijken. Kies daarvoor in beginsel kleurenparen die complementair zijn aan elkaar. Je kunt daarvoor een kleurenwiel gebruiken.
2
xhtml en css Je kunt het kleurenwiel ook gebruiken om kleuren te zoeken die goed bij elkaar passen. Dit doe je door kleurcombinaties voor de vormgeving van de site te kiezen die dicht bij elkaar liggen. Kies twee of drie bij elkaar liggende kleuren en gebruik deze voor grote gebieden als achtergronden en bijvoorbeeld menu’s. Zo kun je zorgen voor een mooie site met esthetische effecten. Houdt bij het kiezen van kleuren ook rekening met bezoekers die kleurenblind zijn. Tip: Kijk op www.color-wheel-pro. Daar vind je een programma met een handig kleurenwiel en met informatie over kleurentheorie en kleurenschema’s.
.
Color Wheel Pro met een complementair kleurenschema en het helpbestand (kleurentheorie) Het kiezen van een geschikte kleurencombinatie (denk bijvoorbeeld aan tekst boven een gekleurde achtergrond) kan lastig zijn. Probeer verschillende combinaties uit. Dit kost tijd maar is de moeite waard. Je kunt hulp zoeken op het internet. Gebruik bijvoorbeeld Pixy’s Color Scheme Generator. Dit programma bevat ook een lijst van verschillende soorten kleurenblindheid. Je kunt zien hoe jouw schema er uit ziet voor bezoekers van je website die een bepaalde soort kleurenblindheid hebben. Zorg er ook voor dat – naast onbruikbaarheid van de site door verkeerde kleurencombinaties – de site niet alleen begrepen kan worden door de kleurencombinaties. Zorg er voor dat er naast gekleurde knoppen of afbeeldingen ook tekstuele informatie is.
3
xhtml en css Het zoeken naar een geschikt en fraai kleurenschema voor je site is een leuk en creatief proces. Zoek naar nieuwe combinaties, laat je niet uitsluitend leiden door dat wat gebruikelijk is.
1.1.4.
De kleur van de body instellen
Je kunt de kleur van de body tekst door middel van een extern stijlblad instellen met: body { color: red; }
Een betere manier is: body { color: white; background-color: maroon }
Verklaring: als je een voorgrondkleur (body tekst) instelt, stel dan ook een achtergrond kleur in. Je weet immers niet of de bezoeker de browser zo heeft ingesteld dat er een andere standaard achtergrond kleur getoond wordt, door via het stijlblad de achtergrondkleur in te stellen, voorkom je dat je pagina er mogelijk niet goed uit ziet.
Kleuren instellen in Microsoft Explorer 7 (links) en Firefox (rechts) Bedenk dat de ingestelde voorgrondkleur ook gebruikt gaat worden voor andere tekstelementen als kopregels, paragrafen en lijsten, tenzij je de kleuren voor deze elementen door middel van een CSS definitie zelf instelt.
1.1.5.
Transparantie en kleuren
Je kunt ervoor zorgen dat de achtergrondkleur van elk HTML element dezelfde is als de achtergrondkleur van de body. Dit doe je door de achtergrondkleur van het HTML element als transparant in te stellen: 4
xhtml en css #transparanteRechthoek { color: white; background-color: transparant; }
1.1.6.
Wetenswaardigheden over kleur en achtergrondafbeeldingen
Je kunt op een webpagina de aandacht van de bezoeker voor bepaalde secties op de pagina trekken door middel van kleur. Je kunt in je stijlblad klasse definities opnemen als: .waarschuwing of .gevaar. Een dergelijke klasse definieert een achtergrondkleur, lettertype en voorgrondkleur en eventueel een kader, zo gekozen dat de aandacht van de bezoeker getrokken wordt. .gevaar { font-size: 1.3em; text-align: center; background-color: red; font-weight: bold; color: white; border: 2px solid black; }
Je kunt rijen in een tabel afwisselende kleuren geven om de leesbaarheid en aantrekkelijkheid van de tabel te bevorderen. In de stijldefinitie neem je op: .even { background-color: lightgrey; } .oneven { background-color: yellow;}
En in de html code:
rij 1, cel 1
rij 1, cel 2
rij 1, cel 1
rij 2, cel 1
rij 2, cel 2
rij 2, cel 1
rij 3, cel 1
rij 3, cel 2
rij 3, cel 1
5
xhtml en css Als je een achtergrond afbeelding voor de body gebruikt, stel dan ook een achtergrondkleur in. Als de pagina geladen wordt, zal eerst de achtergrondkleur getoond worden, daarna de afbeelding. De achtergrondafbeelding zal zich (standaard effect) horizontaal en verticaal herhalen. Je kunt met CSS er ook voor zorgen dat de afbeelding zich niet herhaalt. Je kunt er ook voor zorgen dat de achtergrondafbeelding op een vaste plaats blijft, ook tijdens het scrollen. De tekst zal dan over de afbeelding heen schuiven bij het scrollen. CSS: body { background-color: white; color: red; background-image: url(plaatje.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: left top; }
Je kunt background-repeat ook zó instellen: • •
repeat-x: de afbeelding zal horizontaal herhaald worden. repeat-y: de afbeelding zal verticaal herhaald worden.
De background-position gebruikt twee waarden: de eerste voor de horizontale positie, de tweede voor de verticale positie. De mogelijke waarden zijn: left, right, center en top, center en bottom. Je kunt ook een percentage gebruiken voor elk van deze waarden, bijvoorbeeld: background-position: 50% 50%;
6
xhtml en css
2.
CSS lay-outs
2.1.
Twee kolommen voorbeeld lay-out met CSS
De indeling van de webpagina zal bestaan uit een middelgebied met twee kolommen met daarboven een kopregel en daaronder een voetregel. Het geheel krijgt een zekere afstand ten opzichte van de randen van het browservenster.
Het resultaat moet correct worden getoond in Firefox, daarna wordt het ontwerp – indien nodig – aangepast om ook correct te werken in Explorer 6 en 7 en Safari. Firefox voldoet meer aan de eisen die gesteld worden aan een voor CSS2 geschikte browser, daarom wordt het ontwerp het liefst eerst in Firefox getest.
2.2.
Voorbereiding
Maak een stijlblad en sla deze op als stijl.css in de map ‘stijl’. Koppel dit stijlblad aan het HTML document met:
2.3.
Stap 1: body eigenschappen instellen in het stijlblad
Voor het gemak wordt er meestal een division gemaakt waarin alle andere elementen worden geplaatst. Deze division krijgt een achtergrondkleur, een voorgrondkleur en marges. Een dergelijke division wordt vaak een container genoemd. 7
xhtml en css
#container{ /* plaatshouder voor alle pagina-elementen */ /* achtergrondkleur: bijna wit */ background-color: #fdf8f2; color: #000000; margin: 30px 40px 30px 40px; /* padding creëert ruimte tussen de inhoud en de rand van de division */ padding: 10px; }
2.5.
Stap 3: HTML document maken en stijldefinities toepassen
In het stijlblad wordt opgenomen: #kopregel{ } #kopregel_onder{ border-top:solid 1px #333333; background-color:#fdf8f2; border-bottom: 1px solid #333333; }
De body in het HTML bestand wordt:
kopregel onder
Je plaatst de afbeelding in de kopregel div, daarin plaats je ook een andere div: kopregel_onder. In deze kopregel plaats je testregels tekst om na te kunnen gaan wat het resultaat is. De verschillende divisions zijn in elkaar geplaatst, dit wordt nesten genoemd. De divisions moeten in de juiste volgorde worden afgesloten. Geef bij elke afsluitende tag aan welke division wordt afgesloten. Zo blijft de structuur van de code duidelijk.
Voorbeeld in Firefox De kopregel onder gaat de koppelingen naar andere pagina’s bevatten, de tekst voor de links wordt geplaatst:
9
xhtml en css
Titel
Home | Sitemap | Contact
Voorbeeld in Firefox De koppelingen worden daadwerkelijk aangebracht:
De links krijgen het standaard uiterlijk van een hyperlink, dit past niet goed in het ontwerp.
10
xhtml en css
Voorbeeld in Firefox Het stijlblad wordt uitgebreid met definities voor a: link en a:visited. De onderlijning die aangeeft dat de tekst een link bevat kan worden opgelost door text-decoration: none. #kopregel_onder a:link a:visited text-decoration: none; background-color:#fdf8f2; color: #333333; font-style:oblique; }
{
De paginatitel valt weinig op, de h1 tag voor deze division krijgt de volgende definitie: #kopregel_onder h1 { color: #333333; font-size:14px; font-style:oblique; font-weight: bold;}
De hoofdsectie wordt na de kopregel geplaatst. De hoofdsectie bevat een zijbalk en een sectie voor de inhoud van de pagina. Na de inhoud-definitie wordt nog een voetregel geplaatst. Het stijlblad wordt uitgebreid met:
12
xhtml en css #zijbalk { float: left; border: 1px solid #000059; width: 230px; background-color: #FFFFFF; color: #000000; margin: 0; padding: 0; } #inhoud { /* top right bottom left, in de richting van de klok */ margin: 0 0 0 240px; padding: 0; border: 1px solid #000059; background-color: #FFFFFF; color: #000000; } #voetregel { clear: both; border: 1px solid #000059; margin-top: 10px; }
Je kunt nu, gewapend met de kennis uit deze reader, sites ontwerpen en maken zonder gebruik te maken van tabellen voor de lay-out. Je kunt XHTML sites maken waarbij de opmaak en paginastructuur door CSS wordt bepaald. Het is nu aan jou om te zoeken naar creatieve oplossingen voor het ontwerpen en maken van een site waar de bezoekers graag naar terug komen en waarvan de gebruikers vinden dat het vooral een aantrekkelijke, interessante en goed ontworpen site is. Kijk kritisch en nieuwsgierig naar de sites die bezoekt, je wordt zo wellicht op leuke en goede ideeën gebracht. Veel succes!
