Hoe maak je een... Lay-out
Gepubliceerd op 8 maart 2006
Functie
Een website kan niet zonder een bepaalde ordening, net als een tijdschrift of een boek. In deze ordening ofwel lay-out moeten de standaardelementen van een website als een titel, navigatiemenu en de hoofdtekst etc. makkelijk te vinden zijn.
Gerelateerde kennis:
Bruikbare website (Hoe maak je een..)
Uitklapmenu (Hoe maak je een..)
Inhoudsopgave (Hoe maak je een..)
Opmaak met CSS (Hoe maak je een..)
Versiering met CSS (Hoe maak je een..)
Methode 1: Een lay-out met CSS blocks [ aangeraden]
Download voorbeeld lay-out 1 met CSS (relatieve posities)
[Onbekend
0 Kb
]
Bekijk dit voorbeeld hier
Download voorbeeld lay-out 2 met CSS (absolute posities)
[Onbekend
0 Kb
]
Bekijk dit voorbeeld hier
In het verleden werden lay-outs vooral gemaakt met frames of tabellen. Frames worden tegenwoordig helemaal niet meer gebruikt vanwege hun inefficiëntie en geringe grafische mogelijkheden. Het gebruik van tabellen voor een lay-out is nu ook erg verouderd omdat ze alle voordelen van de scheiding van inhoud/structuur, opmaak en gedrag missen (meer daarover bij beschrijving methode 2).
Lay-out in CSS
Een lay-out opzetten in CSS doe je met zogenaamde 'CSS-blocks'. Iedere HTML-tag (bijvoorbeeld < h1 >< ul >) wordt gezien als een blokje ('block). Meestal heb je aan paar extra blokken nodig om een lay-out op te zetten. Hiervoor kun je gebruik maken van zogenaamde DIV-tags. Div is een afkorting van division, dat scheiding betekent. Deze tags scheiden dus: ze ordenen.
Je plaatst dus tags rondom bepaalde onderdelen van je pagina en kunt dan met CSS (in een apart bestand) aangeven hoe ze zich tot elkaar verhouden, hoe groot ze zijn etc. Belangrijk is daarbij om iedere een id mee te geven. Dit id (identiteit) wordt gebruikt om in het CSS bestand de eigenschappen toe te wijzen.
Er zijn eigenlijk twee manieren om CSS-blokken (tags) te plaatsen: relatief (in een relatie tot elkaar) of absoluut (positie in coordinaten). Voor meer controle over ingewikkelde lay-outs heeft de absolute positiemethode de voorkeur.
Beide methoden zijn hierboven te downloaden.
Methode 2: Een lay-out met tabellen
Download hier de lay-out met tabellen
[Onbekend
0 Kb
]
Bekijk dit voorbeeld hier
Deze methode houdt zich niet aan de 'scheiding tussen structuur/inhoud (HTML), opmaak (CSS)' maar kent toch een paar voordelen:
- tabellen zijn vaak stabieler, makkelijker te controleren dan CSS blocks [Dit komt door een paar browserinconsequenties t.o.v. van CSS blocks]
- iets makkelijker
Dat neemt niet weg dat de nadelen zwaarder wegen:
- niet flexibel - wil je bijvoorbeeld de lay-out aanpassen moet je al je HTML bestanden aanpassen
- meer HTMLcode - dus meer te downloaden
- niet multimediaal - je dient een aparte printversie te maken - toegang met mobiele telefonie is vrijwel onmogelijk zonder aparte versie
Een lay-out met tabellen is alleen aan te raden voor beginners.
|
ThinkQuest Lounge