XHTML en CSS. Deel 3. januari Lyceum Sancta Maria. Ruud Koortens Frans Peeters

Transcriptie

1 XHTML en CSS Deel 3 Ruud Koortens Frans Peeters januari Lyceum Sancta Maria 1

2 2

3 Inhoudsopgave Het opmaken van hyperlinks Kleur Het gebruik van kleuren bij het ontwerp van een website De kleur van de body instellen Transparantie en kleuren Wetenswaardigheden over kleur en achtergrondafbeeldingen CSS lay-outs Twee kolommen voorbeeld lay-out met CSS Voorbereiding Stap 1: body eigenschappen instellen in het stijlblad Stap 2: division container definiëren Stap 3: HTML document maken en stijldefinities toepassen Stap 4: kopregel definiëren en toepassen Stap 5: de hoofdsectie met de inhoud en zijbalk En nu verder Bijlage: Nuttige links i

4 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: hover: 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; Voorbeeldcode: a:link { color: blue; background-color: yellow; a:visited { color: black; background-color: yellow; a:active { color: yellow; background-color: red; a:hover { color: red; background-color: blue; Zie verder: Kleur Er zijn verschillende manieren om kleuren vast te leggen. In onderstaand voorbeeld is blauw gemaakt op verschillende manieren. color : blue; color : AppWorkspace; color : rgb(0, 0, 255); color : rgb(0%, 0%, 100%); color : #0000ff; color : #00f; h1 { color: #0000ff; 1

5 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 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) 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

6 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 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

7 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 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 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

8 #transparanterechthoek { color: white; background-color: transparant; 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: <table> <tr class = oneven > <td> rij 1, cel 1</td> <td> rij 1, cel 2</td> <td> rij 1, cel 1</td> </tr> <tr class = even > <td> rij 2, cel 1</td> <td> rij 2, cel 2</td> <td> rij 2, cel 1</td> </tr> <tr class = oneven > <td> rij 3, cel 1</td> <td> rij 3, cel 2</td> <td> rij 3, cel 1</td> </tr><table> 5

9 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

10 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 Voorbereiding Maak een stijlblad en sla deze op als stijl.css in de map stijl. Koppel dit stijlblad aan het HTML document met: <head> <link href= stijl/stijl.css rel= stylesheet type= text/css /> </head> 2.3. Stap 1: body eigenschappen instellen in het stijlblad body { /* rand, achtergrond, lettertype instellen */ margin: 0; padding: 0; background-color: #000059; background-image: url(../images/picture.jpg) background-repeat: repeat-x; font: small Arial, Helvetica, sans-serif; 2.4. Stap 2: division container definiëren 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

11 #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 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="nl" lang="nl"> <head> <title> Een XHTML 1.0 Strict standaard template </title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-style-type" content="text/css" /> <link href="stijl/stijl.css" rel="stylesheet" type="text/css" media="all" /> </head> <body> <div id= container > <p>plaatshouder voor alle andere elementen</p> <!-- einde div container --> </div> </body> </html> Voorbeeld in Firefox 8

12 2.6. Stap 4: kopregel definiëren en 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: <body> <div id= container > <div id= kopregel ><img src=../images/logo.jpg alt= Logo /> <div id= kopregel_onder >kopregel onder </div><!-- einde div kopregel_onder --> </div><!-- einde div kopregel --> </div><!-- einde div container --> 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

13 <body> <div id= container > <div id= kopregel ><img src=../images/logo.jpg alt= Logo /> <div id= kopregel_onder > <p>titel</p> Home Sitemap Contact </div><!-- einde div kopregel_onder --> </div><!-- einde div kopregel --> </div><!-- einde div container --> </body> Voorbeeld in Firefox De koppelingen worden daadwerkelijk aangebracht: <body> <div id= container > <div id= kopregel ><img src=../images/logo.jpg alt= Logo /> <div id= kopregel_onder > <p>welkom op onze site</p> <a href= # >Home</a> <a href= # >Sitemap</a> <a href= # >Contact</a> </div> </div><!-- einde div kopregel_onder --> </div><!-- einde div kopregel --> </div><!-- einde div container --> </body> De links krijgen het standaard uiterlijk van een hyperlink, dit past niet goed in het ontwerp. 10

14 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 HTML code wordt: <body> <div id= container > <div id= kopregel ><img src=../images/logo.jpg alt= Logo /> <div id= kopregel_onder > <h1>welkom op onze site</h1> <a href= # >Home</a> <a href= # >Sitemap</a> <a href= # >Contact</a> </div><!-- einde div kopregel_onder --> </div><!-- einde div kopregel --> </div><!-- einde div container --> </body> 11

15 Voorbeeld in Firefox 2.7. Stap 5: de hoofdsectie met de inhoud en zijbalk 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

16 #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: px; padding: 0; border: 1px solid #000059; background-color: #FFFFFF; color: #000000; #voetregel { clear: both; border: 1px solid #000059; margin-top: 10px; De HTML code wordt nu zó uitgebreid: <body> <div id= container > <div id= kopregel ><img src=../images/logo.jpg alt= Logo /> <div id= kopregel_onder > <h1>welkom op onze site</h1> <a href= # >Home</a> <a href= # >Sitemap</a> <a href= # >Contact</a> </div><!-- einde div kopregel_onder --> </div><!-- einde div kopregel --> <div id= hoofdsectie > <div id= zijbalk > <p>inhoud zijbalk</p> </div><!-- einde div zijbalk --> <div id= inhoud > <p>inhoud</p> </div><!-- einde div inhoud --> </div><!-- einde div hoofdsectie --> <div id= voetregel > Copyright 2007 Alle rechten gereserveerd. </div> </div><!-- einde div container --> </body> </html> 13

17 Voorbeeld in Firefox Voorbeeld in Internet Explorer 6 14

18 HTML code twee_kolommen_layout.html <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="nl" lang="nl"> <head> <title> Twee kolommen lay-out </title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-style-type" content="text/css" /> <link href="stijl/stijl.css" rel="stylesheet" type="text/css" media="all" /> </head> <body> <div id="container"> <div id="kopregel"><img src="../images/logo.jpg" alt="logo" /> <div id="kopregel_onder"> <h1>welkom op onze site</h1> <a href="#">home</a> <a href="#">sitemap</a> <a href="#">contact</a> </div><!-- einde div kopregel_onder --> </div><!-- einde div kopregel --> <div id="hoofdsectie"> <div id="zijbalk"> <p>inhoud zijbalk</p> </div><!-- einde div zijbalk --> <div id="inhoud"> <p>inhoud</p> </div><!-- einde div inhoud --> </div><!-- einde div hoofdsectie --> <div id="voetregel"> Copyright 2007 Alle rechten gereserveerd. </div> </div><!-- einde div container --> </body> </html> 15

19 CSS regels stijl.css: /* CSS stijl */ body { /* rand, uitvulling, achtergrond, lettertype instellen */ margin: 0; padding: 0; background-color: #666666; font: small Arial, Helvetica, sans-serif; color: white; #container { /* plaatshouder voor alle pagina-elementen */ /* achtergrondkleur: bijna wit */ background-color: #ffffff; color: #000000; margin: 30px 40px 30px 40px; /* padding creëert ruimte tussen de elementen en de rand van de division */ padding: 10px; border: 1px; /* division met elementen voor de kopsectie */ #kopregel { background-color:#ffffff; height: 1%; #kopregel_onder { border-top:solid 1px #333333; background-color:#ffffff; border-bottom: 1px solid #333333; height: 1%; #kopregel_onder a:link, #kopregel_onder a:visited { text-decoration: none; background-color:#ffffff; color: #333333; font-style:oblique; #kopregel_onder h1 { color: #333333; font-size:14px; font-style:oblique; font-weight: bold; #hoofdsectie { /*position: relative; top:0; left: 0;*/ width: 100%; margin-top: 10px; #inhoud { /* top right bottom left, in de richting van de klok */ margin: px; padding: 0; border: 1px solid #000059; background-color: #FFFFFF; color: #000000; 16

20 #zijbalk { float: left; /*position: absolute;*/ /*top: 0;*/ /*left: 0;*/ border: 1px solid #000059; width: 230px; background-color: #FFFFFF; color: #000000; margin: 0; padding: 0; #voetregel { clear: both; border: 1px solid #000059; margin-top: 10px; 2.8. En nu verder 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! 17

21 Bijlage: Nuttige links W3C XHTML 1.0 W3Schools HandleidingHTML Webdesign.about.com Madness.nl Websitemaken.be Sitemasters.be TopStyle Lite webdesign.about.com/od/advancedcss/a/aa htm

22 19