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.
Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License
51
Een voorbeeld van fixed layout
Een voorbeeld van fixed layout
Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License
52
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
Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License
53
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).
Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License
54
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: <style type=”text/css”> body{ padding:0; margin:0; } #container{ width:80%; background:#669b67; }
Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License
55
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.
Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License
56
In HTML ziet het er zo uit:
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. <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;
Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License
57
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; }
Welkom
link - link - link - link
Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License
58
Hier komt mijn tekst
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 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
Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License
59
–
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. <style type="text/css">
@import "stijl.css";
Welkom
link - link - link - link
Zorg er voor dat de beide bestanden zich in dezelfde map bevinden.
Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License
60
