Een verticale vormgeving is makkelijker en sneller te realiseren dan een horizontale.

Maat: px

Weergave met pagina beginnen:

Download "Een verticale vormgeving is makkelijker en sneller te realiseren dan een horizontale."

Alexander van de Veen
8 jaren geleden
Aantal bezoeken:

1 Een HTML-sjabloon Denk goed na hoe je webpagina er moet uitzien. Wil je een webpagina met een horizontale vormgeving (zoals bij een schermpresentatie)? Wil je een webpagina met een verticale vormgeving (zoals bij een klassiek blad papier)? Een verticale vormgeving is makkelijker en sneller te realiseren dan een horizontale. Wil je een pagina met een vaste breedte (fixed)? VOORDELEN NADELEN De webpagina ziet er in alle browsers en in alle schermresoluties hetzelfde uit. De webpagina is soms te groot of te klein bij andere schermresoluties. De verhoudingen tussen de tekst en de afbeeldingen blijft steeds dezelfde. Tekst en afbeeldingen zien er te groot of te klein uit bij andere resoluties.... Je kan een pixelafbeelding met een vaste grootte gebruiken in de 'banner'... Wil je een pagina met een flexibele breedte (fluid)? VOORDELEN De webpagina schaalt mee met de grootte van de schermresolutie. NADELEN De verhoudingen tussen de tekst en de afbeeldingen zien er anders uit bij andere resoluties. Je kan moeilijk een pixelafbeelding met een vaste grootte gebruiken in de banner. Wanneer je op internet rondsurft, zal u merken dat heel wat professionele websites kiezen voor een verticale layout met een vaste breedte. Door de opkomst van de mobiele browsers kan hier verandering in komen. 51

Wil je een pagina met een vaste breedte (fixed)? VOORDELEN NADELEN De webpagina ziet er in alle browsers en in alle schermresoluties hetzelfde uit.

2 Een voorbeeld van fixed layout Een voorbeeld van fixed layout 52

3 Een voorbeeld van een fixed-layout waarbij gebruikgemaakt wordt van een afbeelding. Die afbeelding heeft een vaste pixelgrootte en zal niet meeschalen bij hogere schermresoluties. Fixed layout 53

4 Een voorbeeld van een 'fluid' ontwerp. De pagina rekt mee met de shermresolutie. De balk met links aan de linkerkant behoudt een vaste breedte. Bovenaan in de banner is eveneens een pixelafbeelding geplaatst. De afbeelding blijft links staan. De banner is even hoog als de afbeelding. Ook al zal de banner mee rekken in de breedte, hij zal nooit mee rekken in de hoogte. M.a.w. de banner heeft een 'fixed' hoogte, maar een 'fluid' breedte. Een voorbeeld van een horizontaal 'fluid' ontwerp. De breedte van de website bedraagt steeds 100%. De hoogte van de banner, de knoppenbalk en de footer heeft een vaste (pixel)waarde. Het gedeelte waar de inhouden staan, kan afhankelijk van de schermresolutie mee schalen. Bij kleinere resoluties verschijnt er automatisch een schuifbalk (scrollbar). 54

Ook al zal de banner mee rekken in de breedte, hij zal nooit mee rekken in de hoogte. M.a.w. de banner heeft een 'fixed' hoogte, maar een 'fluid' breedte.

5 Een sjabloon tekenen 1. Neem een blad papier of gebruik een tekenprogramma om het sjabloon van uw website uit te tekenen. 2. Voor het voorbeeld hieronder hebben we een schermafbeelding gemaakt van een browser en die als afbeelding in een tekenprogramma geplakt. 3. Bovenop de schermafbeelding die een browser op 100% schermbreedte moet voorstellen, hebben we een gekleurde rechthoek getekend. Die rechthoek heeft hier een breedte van ongeveer 80%. Binnen die container zullen alle onderdelen van onze webpagina geplaatst worden. 4. In HTML kan u het als volgt vertalen: <html> <head> <style type= text/css > body{ padding:0; margin:0; #container{ width:80%; background:#669b67; </style> </head> <body> <div id= container > </body> </html> 55

Bovenop de schermafbeelding die een browser op 100% schermbreedte moet voorstellen, hebben we een gekleurde rechthoek getekend. Die rechthoek heeft hier een breedte van ongeveer 80%.

6 Let echter op: Wanneer je het voorbeeld in een webbrowser zou uitproberen, zal de 'container' niet de ganse hoogte van het browservenster vullen, maar enkel een smalle strook. De container zal mee rekken wanneer je inhoud in de container plaatst. 5. We verdelen de container nu in diverse onderdelen. Wanneer we het in een 'stamboom' zouden onderbrengen zou de paginabeschrijving er zo uitzien: body div: container banner knoppenbalk links rechts inhoud footer Zoals u hierboven reeds zal gemerkt hebben gebruiken we in de HTML-opmaakcodes de markering (tag) DIV om onderverdelingen aan te brengen in de webpagina. We plaatsen meerder DIV's (divisions) in elkaar om tot het gewenste sjabloon te komen. 56

Wanneer we het in een 'stamboom' zouden onderbrengen zou de paginabeschrijving er zo uitzien: body div: container banner knoppenbalk links rechts inhoud footer Zoals u

7 In HTML ziet het er zo uit: <body> <div id= container > <div id= banner > <div id= knoppenbalk > <div id= links > <div id= rechts > <div id= inhoud > <div id= footer > </body> 6. Wanneer je het bovenstaande voorbeeld in de browser bekijkt, zal je merken dat de onderdelen zonder meer onder elkaar worden geplaatst. Meer nog: vermoedelijk krijgt u enkel een witte pagina te zien. We moeten immers nog bepalen hoe elk onderdeel moet geplaatst en opgemaakt worden. Daarvoor gebruiken we CSS. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <style type="text/css"> html, body{ text-align:center; /*Hierdoor cnetreert IE alle inhoud van de pagina*/ padding:0; /*geen marges*/ margin:0; /*geen marges*/ height:100%; /*inhoud krijgt 100% hoogte*/ font-family:arial, helvetica; #container{ 80%*/ width:80%; /*In de pagina plaatsen we een container-div met een breedte van margin: 0 auto; /*bovenaan is de marge gelijk aan 0, de andere marges kiest hij automatisch*/ position: relative; /*de positie is relatief tov de pagina*/ background:#cccccc; /*Achtergrondkleur*/ text-align:left; /*Alle tekst en inhouden worden links uitgelijnd*/ #banner{ height:120px; /*de div met id "header" is 120 pixels hoog*/ clear:both; staan*/ /*Links en rechts van de banner mogen geen inhouden of div's background:#303c58; #knoppenbalk{ height:20px; 57

We moeten immers nog bepalen hoe elk onderdeel moet geplaatst en opgemaakt worden. Daarvoor gebruiken we CSS. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.

8 margin:0px; padding:0px; background:#303c58; color:white; #links{ float:left; staan*/ width:30%; /*de DIV met id "links" gaat hierdoor links in de container /*de div krijgt een breedte van 30%*/ padding:0; margin:0; #rechts{ float:right; /*de div met id "rechts" gaat rechts staan*/ width:70%; /*de div krijgt een breedte van 70%*/ margin:0; padding:0; background:#3c485e; #inhoud{ margin:2%; /*in de div "rechts" zit de div "inhoud". Hierin komen alle inhouden te staan. Ze staan 2% van de kant af*/ text-align:justify; #footer{ clear:both; width:100%; margin:0; padding:0; height:10%; position:relative; bottom: 0; /* heel belangrijk */ background:yellow; </style> </head> <body> <div id="container"> <div id="banner">welkom <div id="knoppenbalk">link - link - link - link <div id="links"> <ul> <li>link</li> <li>link</li> </ul> <div id="rechts"> <div id="inhoud"> 58

/*in de div "rechts" zit de div "inhoud". Hierin komen alle inhouden te staan.

9 Hier komt mijn tekst <div id="footer">copyright Kris Merckx </body> </html> Het bovenstaande voorbeeld moet er in de browser als volgt uitzien: HTML en CSS in aparte bestanden Wanneer uw HTML-sjabloon en CSS-stijl klaar is slaat u het document best op onder de naam sjabloon.html. Toch is het zeer belangrijk dat u het HTML-sjabloon en de CSScode van elkaar scheidt en in aparte documenten opslaat. sjabloon.html stijl.css 1. Knip alles wat zich tussen <style type= text/css > en </style> in bevindt en plak het in een apart document. Sla dit nieuwe document op onder de naam stijl.css Let op: Wanneer we zeggen knippen en plakken, dan bedoelen we dat u de code moet knippen: in Dreamweaver moet u het knippen in het codevenster en vervolgens een leeg CSSbestand aanmaken 59

Toch is het zeer belangrijk dat u het HTML-sjabloon en de CSScode van elkaar scheidt en in aparte documenten opslaat. sjabloon.html stijl.css 1.

10 U kan het ook knippen en plakken in een teksteditor zoals Microsoft Kladblok, Scite of Smultron (Mac OS X) 2. Vervolgens moet u de stijl aan het html-sjabloon linken. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <style "stijl.css"; </style> </head> <body> <div id="container"> <div id="banner">welkom <div id="knoppenbalk">link - link - link - link <div id="links"> <ul> <li>link</li> <li>link</li> </ul> <div id="rechts"> <div id="inhoud"> Hier komt mijn tekst <div id="footer">copyright Kris Merckx </body> </html> Zorg er voor dat de beide bestanden zich in dezelfde map bevinden. 60

css"; </style> </head> <body> <div id="container"> <div id="banner">welkom <div id="knoppenbalk">link - link - link - link <div id="links"> <ul> <li>link</li> <li>link</li> </ul> <div

Vergelijkbare documenten

HTML krijgt een standaard opmaak van de browser

1 HTML krijgt een standaard opmaak van de browser Een link in HTML In HTML maakt u een link met de HTML-markering (HTML-tag) . Een a-tag (anchor, anker) heeft een attribuutwaarde nodig om de link te