Webmaster Training: CSS CSS2 & XHTML By Frederik Van Outryve.

Presentatie over: "Webmaster Training: CSS CSS2 & XHTML By Frederik Van Outryve."— Transcript van de presentatie:

1 Webmaster Training: CSS CSS2 & XHTML By Frederik Van Outryve

2 Webmaster Training: CSS Agenda Inleiding CSS / XHTML –XHTML vs. HTML –Semantische markup –CSS linken met HTML –De CSS-syntaxis –CSS-selectoren –CSS box-model Een CSS-layout maken –Gebruik van floats –DIV’s positioneren –Layout testen Een CSS-menu ontwikkelen –Semantische markup –CSS toevoegen Meer info

3 Webmaster Training: CSS Inleiding CSS & XHTML

4 Webmaster Training: CSS XHTML vs. HTML Huidige HTML 4.x specificaties –Bepaalde tags bevatten informatie over de presentatie, bv. –Niet compatibel met XML-standaard XHTML 1.0 –Compatibel met XML Alle tags in kleine hoofdletters Alle tags moeten gesloten worden, bv. –Enkel semantische markup XHTML toont het type en de structuur van de informatie CSS bevat alle info over de presentatie

5 Webmaster Training: CSS Semantische markup XML beschrijft de informatie: –Over welke informatie gaat het? –Welke structuur heeft de informatie? XML geeft geen info over de presentatie Presentatie kan afhankelijk zijn van: –gebruikte kanaal –instrument dat gebruikt wordt om toegang te hebben tot de informatie –persoonlijke instellingen van de gebruiker –...

6 Webmaster Training: CSS CSS linken met HTML 3 manieren om CSS te linken –Externe style sheets tag @import rule –In de tag van de webpagina –Als attribuut in de bestaande HTML tag Cascading system

7 Webmaster Training: CSS De CSS-syntaxis selector { property: value; }

8 Webmaster Training: CSS CSS-selectoren CSS-classes –Kunnen in één document verschillende keren worden gebruikt –Hebben hun eigen naam, bv. “.selected” CSS-ID’s –Kunnen in één document slechts één keer worden gebruikt –Hebben hun eigen naam, bv. “#navigation” Child selectors –Bevatten een “pad” naar de doeltag –Bv. “ul#navigation li” Bestaande HTML tags –Herdefinieert de presentatie van een bestaande HTML tag –Meestal gebruikt voor algemene presentatie & in child selectors

9 Webmaster Training: CSS Het CSS Box-Model

10 Webmaster Training: CSS Het CSS Box-Model

11 Webmaster Training: CSS Een CSS-layout maken

12 Webmaster Training: CSS Een CSS-layout maken 1.HTML-document creëren met semantische markup 2.CSS-bestand linken 3.Body padding & marge op 0 afstellen 4.Voeg wrapper-DIV toe 5.Definieer presentatie van de header 6.Menu floaten 7.Body positioneren

13 Webmaster Training: CSS Het XHTML-document Begin met DOCTYPE definitie DOCTYPE zou zich steeds op de eerste lijn van het document moeten bevinden XHTML-types –Strict –Transitional XHTML doctype plaatst IE in de juiste rendering engine

14 Webmaster Training: CSS Structuur van XHTML-document site title site menu site content

15 Webmaster Training: CSS Regel de BODY Elke browser voegt padding en/of marge toe aan de tag Om het veld voor alle browsers te regelen stellen we de marge & padding af op 0 BODY { padding:0px; margin:0px; }

16 Webmaster Training: CSS De wrapper DIV De wrapper DIV bevat al de inhoud van de pagina Hij wordt gebruikt om de pagina op het scherm te centreren #wrapper{ width: 770px; background-color:#FFFFFF; margin:10px auto; border: 1px solid #000000; text-align:left; }

17 Webmaster Training: CSS Het menu floaten “float” haalt de DIV uit de “page flow” We kunnen nu de DIV plaatsen waar we willen. “Breedte” nog toevoegen. #menu{ float: left; width: 170px; background-color:#FFFF00; }

18 Webmaster Training: CSS De inhoud positioneren Positioneer de inhoud door aan het menu een linkermarge toe te voegen #content { margin-left: 200px; border-left: 1px solid gray; }

19 Webmaster Training: CSS Een CSS-menu ontwikkelen

20 Webmaster Training: CSS Een CSS-menu ontwikkelen 1.Creëer het XHTML-document met semantische markup 2.Regel het veld 3.Presenteer list-items als inline 4.Float de links 5.Formateer de links 6.Voeg een roll-overkleur toe

21 Webmaster Training: CSS Het XHTML-document menu1 menu2 menu3 menu4

22 Webmaster Training: CSS Regel het veld Sommige browsers voegen marges of padding toe aan list-items We hebben geen bullet nodig ul#navlist { margin: 0; padding: 0; list-style-type: none; }

23 Webmaster Training: CSS Float de links Om de list-items naast elkaar te plaatsen zonder tussenruimtes ul#navlist li a { float: left; width: 5em; }

24 Webmaster Training: CSS Presenteer inline Breng de list-items samen in één lijn. Nu zijn ze blok-elementen. ul#navlist li { display: inline; }

25 Webmaster Training: CSS Formateer de links Formateer de links om ze op knopjes te doen lijken color: #fff; background-color: #036; padding: 0.2em 1em; text-decoration: none; border-right: 1px solid #fff;

26 Webmaster Training: CSS Voeg een roll-overkleur toe Zorg ervoor dat de achtergrond verandert wanneer de gebruiker met zijn cursor over een knop gaat. ul#navlist li a:hover { background-color: #369; color: #fff; }

27 Webmaster Training: CSS Meer info http://webguide.fgov.be