WEBalley - layout

Layout - intro

< basics >
columns
alignment
title bars
faster pages
my layout
epilogue

Als je deze pagina bekijkt, kun je je afvragen hoe die is opgezet. Er zijn diverse dingen te zien, die je niet met gewone HTML kunt doen. Er staan bijvoorbeeld kolommen op de pagina. Een navigatiestrook links, een tekstkolom rechts. De breedte van beide is gefixeerd, wijziging van het browservenster beïnvloedt de layout niet. Er zijn kleurvlakken die niet met afbeeldingen gemaakt zijn. Als je de tables tutorial hebt gelezen, vermoed je waarschijnlijk al, dat dit is gedaan met tabellen. Deze tutorial zal je laten zien hoe.

<HTML>
<HEAD><TITLE>title</TITLE></HEAD>
<BODY>
<TABLE BORDER="0">
<TR>
<TD>
page contents
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Een eenvoudige webpagina, weinig nieuws onder de zon. In eenvoudig html zou je je pagina tussen BODY tags zetten. Hier staan echter een paar extra tags, de pagina inhoud staat in zijn geheel in een tabel. Een cel is voorlopig voldoende, later zullen er meer worden toegevoegd. Om de tabel zelf te zien kun je het BORDER attribuut gebruiken. Nul is uit, één is aan.
Webpagina's dienen altijd te worden gemaakt met de bezoeker in gedachten. Veel mensen gebruiken hogere resoluties, maar er zijn nog veel standaard VGA schermen in omloop. Volgens mijn statistieken rond de 25 procent. Bredere pagina's zijn onpraktisch op dergelijke schermen. Als je rekening houdt met scrollbalken en vensterranden, kom je op 500 tot 600 pixels uit. Dus je tabel moet daarop aangepast worden.

De paginabreedte is nu gefixeerd. Kopiëer de code hierboven in een tekst editor, en bekijk het resultaat in je browser. Zet een paar regels tekst in de tabel en kijk wat het effect is op de breedte. Speel wat met de grootte van het browservenster en kijk wat het effect is op de tabel. Zowel wanneer deze gefixeerd is als wanneer niet. Je zult zien dat het venster geen invloed heeft op de gefixeerde tabel.