In deel 1 van deze webcursus hebben we de basiskennis uitgelegd en hebben we met behulp van een kant-en-klaar template een fraaie website gemaakt. In deel 2 hebben we uitgelegd hoe het zit met kleurgebruik en lettertypes. Nu is het tijd om de juiste layout te kiezen: kiest u voor twee, drie of meer kolommen? Met een moderne webeditor zoals Nvu kunt u een complete website ontwerpen, zonder ook maar iets van html te weten. Maar als zo'n template niet helemaal aan uw wensen voldoet is het wel zo handig als u kleine wijzigingen kunt aanbrengen. Gelukkig is het gemakkelijk om wat basiskennis van html op te doen, zonder ingewikkelde code te leren. Zoals we eerder al hebben uitgelegd, heeft html zich langzamerhand ontwikkeld naar xhtml, een opvolger die aan strengere regels moet voldoen en daardoor gemakkelijker in te lezen is door de browser. In deel 1 van deze cursus hebben we u al eenvoudige voorbeelden laten zien. Dat breiden we nu uit naar iets ingewikkelder voorbeelden. Hebt u al eerder met html gewerkt, dan is het belangrijk te realiseren dat oude html-labels eigenlijk niet meer zijn toegestaan: in plaats van <b></b>voor vetgedrukte tekst gebruikt u nu <strong></strong>en voor cursieve tekst gebruikt u geen <i></i>meer maar <em></em>.
Css
Ook css is eerder ter sprake gekomen. De grootste beperking van html is dat het nooit bedoeld was om er documenten mee op te maken. Het aantal html-labels om opmaak in te stellen is beperkt en daar komt bij dat verschillende browsers de opmaaklabels verschillend interpreteren. Stel bijvoorbeeld dat u een kop maakt met het label <h2>, dan weet u niet hoe die er in de praktijk uit zal zien, tenzij u dit nauwkeurig definieert. In een document met veel koppen kan het een enorme klus zijn om steeds opnieuw de juiste kleur, grootte en lettertype van de kop te definiëren. Het kan er ook voor zorgen dat de bezoeker van uw webpagina enorm lang moet wachten tot alle code is geladen. En als u achteraf besluit dat de kopteksten toch nog iets groter moeten zijn, moet u alle labels op de pagina langslopen en stuk voor stuk aanpassen.
Makkelijk: in één keer klaar
Met css hoeft u de opmaak van een kop maar op één plaats te bepalen. Overal op uw website waar u een kop wilt tonen zet u simpelweg <h2>en </h2> rondom de koptekst. Als uw website groeit naar honderden pagina’s, hoeft u maar op één plaats de kleur of de lettergrootte aan te passen. Met een kleine wijziging kunt u uw website direct een nieuw gezicht geven.
Zoekmachines en css
Css is ook bruikbaar om de paginaopmaak te definiëren. Dat levert fraaie mogelijkheden op, zoals uitklapbare menu's, maar er is nog een betere reden om css te gebruiken: zoekmachines. Zoekmachines zien webpagina’s niet op dezelfde manier als mensen. Het oog van een menselijke bezoeker valt meteen op een mooie afbeelding of op een knipperende tekst midden op de pagina. Een zoekmachine leest webpagina’s echter in de volgorde waarin u de inhoud hebt gedefinieerd; dat begint meestal linksboven bij het navigatiemenu om pas veel later bij de hoofdtekst te belanden. Met css kunt u de hoofdinhoud eerder in het bestand plaatsen, waardoor deze eerder door de zoekmachine wordt gelezen.
Een goede manier om het effect van CSS te zien, is om te spelen met de Chrispederick.com/work/web-developer of met de Internet Explorer Developer Toolbar. U kunt hiermee informatie over de css-formattering van een webpagina bekijken, de css-instellingen wijzigen en vervolgens kijken wat er gebeurt.
Opmaak definiëren
Er zijn drie manieren om de opmaak van uw website te definiëren met css:
- * Externe stylesheet (.css-bestand);
- * Interne stylesheet;
- * Inline stijlen.
Alle drie manieren zijn goed, als u ze maar op de juiste wijze weet te gebruiken.
Extern stylesheet
Een externe stylesheet is ideaal wanneer u de stijl wilt toepassen op meerdere pagina’s. Bij een externe stylesheet legt u de opmaak vast in een apart bestand met de bestandsextensie .css, bijvoorbeeld style.css. Elke pagina van uw website moet in de header een verwijzing bevatten naar de stylesheet, op de volgende manier:
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
Denk om een reservekopie!
Het voert te ver om uit te leggen hoe u zelf een stylesheet maakt. Webontwikkelaars beginnen ook zelden met een leeg document; ze gebruiken een sjabloon en passen daarin onderdelen aan. Bij het website-template dat u eerder hebt gebruikt om uw eigen website te maken, is ook een css-bestand meegeleverd. Bekijk het eens en probeer eens iets te wijzigen - bijvoorbeeld de lettergrootte of de kleur van de tekst. Zorg dat u een reservekopie van uw originele css-bestand achter de hand houdt, zodat u altijd terug kunt. U kunt een externe stylesheet in elke teksteditor maken en bewerken. Een heel eenvoudige externe stylesheet zou er bijvoorbeeld zo uit kunnen zien:
body { background-color: beige; }
p { color: blue; }
h2 { color: chocolate; }
Deze stylesheet geeft aan dat de achtergrondkleur van de pagina beige wordt, met blauwe tekst en chocoladebruine kopteksten. Welke kleurnamen u zoal mag gebruiken kunt u opzoeken op www.w3schools.com/css/css_colornames.asp. Deze drie regels code slaat u op als eenvoudig tekstbestand onder de naam style.css, waarna u er vanuit uw html-bestand naar verwijst. Dat is alles. U kunt uw css-bestand later zo ingewikkeld maken als u zelf wilt.
Interne stylesheet
Code controleren
Bij het bouwen van uw website hebt u zich precies aan alle regels gehouden. Maar hoe weet u zeker dat u alles goed hebt gedaan? Simpel: u laat uw website valideren door de W3C, de organisatie die de webstandaarden beheert. Er komt geen papierwerk aan te pas en u bent binnen een minuutje klaar: ga in uw browser naar Validator.w3.org, vul de URL van uw website in en u ziet meteen welke fouten u hebt gemaakt. Dezelfde organisatie kan ook uw CSS-kunsten controleren: daarvoor moet u op Jigsaw.w3.org/css-validator/ zijn. Als beloning mag u een logo op uw website zetten.
Een tweede manier om uw opmaak met css te definiëren is een interne stylesheet. Deze is handig wanneer één pagina van uw website een afwijkende opmaak moet krijgen. Bij een interne stylesheet definieert u alle opmaak eenmalig, in de header van uw html-bestand. Dat doet u als volgt:
<head>
<style type="text/css">
body {color: black; background-color: grey;}
p {color: blue; margin-left: 15px}
</style>
</head>
In dit geval hebt u gekozen voor een witte achtergrondkleur. Elke alinea (aangegeven met de p) krijgt de tekstkleur blauw. Natuurlijk kunt u nog veel meer definiëren, bijvoorbeeld het lettertype en de lettergrootte, onderstreping, cursief en dergelijke.
Inline stijlen
Wilt u een bepaalde opmaak die maar eenmalig, op één plaats in uw website voorkomt? Kies voor een inline stijl! Eigenlijk is hierbij niet zoveel verschil met opmaak die vroeger rechtstreeks in html werd aangebracht. Maar zoals u weet: html mag niet meer van de webpolitie. In het volgende voorbeeld maakt u uw tekst tijdelijk wit en uw achtergrond donkerblauw:
<p style="color: white; background-color: blue"; margin-left: 15px”>
Hier staat uw tekst.
</p>
Nog een waarschuwing tot slot: het luistert nogal nauw met het gebruik van spaties en aanhalingsteken. Gebruik de css-code daarom precies zo, als u ze in voorbeelden ziet staan. Anders kan het later een lastige klus worden om fouten terug te zoeken. Op de website Sitemasters.be vindt u onder Tutorials > css- uitleg hoe u bepaalde opmaak toepast.
Verschillende browsers
Een website ziet er in de ene browser anders uit dan in een andere browser. Helaas worden html en css niet altijd op dezelfde manier geïnterpreteerd door verschillende browsers. Neem bijvoorbeeld de manier waarop eerdere versies van Internet Explorer kaders weergeeft die met css waren gemaakt. De kaders kregen andere afmetingen dan in andere browsers, waardoor blokken lelijk ten opzichte van elkaar waren verschoven. Het gevolg kan zijn dat delen van een pagina niet goed aansluiten of zelfs van het scherm vallen. Latere versies van Internet Explorer herstelden dit probleem. Natuurlijk hoeft u geen rekening meer te houden met heel oude browserversies, maar het is verstandig om uw website in zoveel mogelijk browsers te testen, voordat u 'live' gaat. Kijk in ieder geval hoe uw website eruit ziet in Internet Explorer 6/7 en Firefox en liefst ook in Safari en Opera.
Schermresoluties
Vroeger werden websites aangepast aan een schermresolutie van 800x600 pixels, maar dat is alleen nog nodig als u een website voor senioren maakt. In alle andere gevallen optimaliseert u voor 1024x768 waarbij u zorgt dat de layout zich dynamisch aanpast wanneer de gebruiker de afmetingen van het browservenster wijzigt (dit wordt 'floating' genoemd). Ook bij 800x600 en 1280x1024 wordt uw website dan nog goed getoond. Voor een dynamische schermaanpassing is het belangrijk dat u met percentages werkt. U definieert deze percentages voor elk overkoepelend div-element in de stylesheet. Let erop dat alle percentages opgeteld steeds op 100 moeten uitkomen. Een goed voorbeeld van zo'n dynamische lay-out vindt u hier. Belangrijk is dat alle noodzakelijke informatie zich 'boven de vouw' bevindt. Dat wil zeggen: bij het openen een pagina moet alle belangrijke content meteen al gedeeltelijk zichtbaar zijn. De gebruiker wil niet door een reeks reclamebanners en vaste welkomstboodschappen bladeren om pas verderop de eigenlijke content te zien. U staat dus voor de uitdaging om bovenin uw webpagina zoveel mogelijk nuttige content te stoppen, zonder dat de overzichtelijkheid en leesbaarheid in gevaar komt.
Verschillende lay-outs
Meer weten over websites bouwen?
Bestel dan nu de workshopgids Zelf Websites Bouwen & Onderhouden. Deze gids bevat talloze tips, verrassende ideeën en stap-voor-stap workshops voor iedereen die voor het eerst een website bouwt en voor iedereen die na eerdere pogingen de draad weer op wil pakken. Ook besteedt de gids uitgebreid aandacht aan de promotie en mogelijkheden om met uw site geld te verdienen. Bestellen? Klik dan hier.
Hoeveel informatie u 'boven de vouw' kwijt kunt, is afhankelijk van de layout die u kiest. En die is weer op zijn beurt afhankelijk van het soort website dat u wilt maken. Voor een nieuwssite ontkomt u niet aan drie of meer kolommen, terwijl u voor een website waarop uw uw fotografieportfolio tentoonstelt maar aan één blok genoeg hebt. Op Mycelly.com ziet u een aantal voorbeelden van mogelijke indelingen: drie kolommen met en zonder bovenbalk, één gecentreerd blok, twee kolommen met vaste en dynamische menu's, enzovoorts. Klikt u op één van de lay-outs, dan krijgt u voorbeeldcode te zien waarmee u de betreffende lay-out kunt namaken.
Bouwen met div-blokken
Hoe zorgt u nu eigenlijk dat de juiste kolommen en blokken op de juiste plaats op de webpagina verschijnen? Daarvoor gebruikt u tegenwoordig geen tabellen of frames meer, maar zogenaamde div-blokken. Div staat voor division, een apart stuk webpagina-inhoud die u heel precies op een pagina kunt positioneren. U kunt in de definitie van het div-blok ook de grootte instellen. U kunt een div-blok absoluut of relatief positioneren. De meest eenvoudige webpagina met één div-blok ziet er zo uit:
<style type=”text/css”>
body {background-color: beige; color: blue;}
#content {position: absolute; top: 20px; left: 15px; width: 600px}
</style>
<div id=”content”>
<h2>Koptekst</h2> Hier komt de tekst van uw webpagina.
</div>
Op de website Ssi-developer.net vindt u onder CSS Templates de benodigde templates voor een twee- en driekolomsindeling.
In de volgende aflevering:
In deel 4 gaan we het hebben over de menustructuur: hoe bouwt u uw website zó dat uw bezoekers er makkelijk de weg vinden?
Klik hier om naar deel 1 van deze cursus te gaan.
Klik hier om naar deel 2 van deze cursus te gaan.
