weballey logo
 
left Tables - mijn layout backnext right
homesearchsite mape-mail
basics
columns
alignment
title bars
faster pages
< my layout >
epilogue
      Nu je alle tags gezien hebt, en weet hoe je ze moet gebruiken, zul je je eigen pagina's ermee willen bouwen. Na het lezen van deze tutorial zou je dat ook moeten kunnen. Maar er zijn nog een paar struikelblokken. Om je een beetje te helpen, zal ik je uitleggen hoe mijn pagina's in elkaar zitten. Kijk eerst eens naar deze pagina met de borders aan. Ga daarna terug naar de pagina zonder borders. Lees vervolgens verder voor de uitleg. Je zult het nodig hebben, geloof me.
    Kijk eerst eens naar de breedte. Omdat er nog veel VGA schermen worden gebruikt, moeten je pagina's daarop passen. VGA is 640 bij 480 pixels, wat ruimte voor vensterranden en schuifbalken, en je houdt 600 pixels over om mee te werken.
    Ik hou van een layout met een smalle navigatiestrook links, en het tekstgedeelte en de afbeeldingen rechts. Er zijn diverse andere mogelijkheden, maar deze layout wordt het meeste gebruikt en gewaardeerd. Meestal hou ik ongeveer 150 pixels aan voor de navigatie, soms minder, afhankelijk van wat erin moet. Ik wilde mijn logo niet kleiner hebben, dus dat is de bepalende factor hier. De lichtblauwe achtergrond is gedaan met het BGCOLOR attribuut van de TD tag. Ik heb het VALIGN gebruikt om het menu naar de bovenkant van de pagina te drukken.
    Direct ernaast een strook wit, die de tekst van de strook scheidt. Ik gebruik een lege cel om dit te doen, 25 pixels breed, met slechts een "non breakable space" erin (&nbsp;). Zou ook gedaan kunnen worden met een grotere cellspacing, maar dat neemt ook boven ruimte in.
    Deze cel moet een beetje breder als je een achtergrondplaatje gebruikt voor de strook. Simpelweg omdat niet alle browsers de pagina precies hetzelfde neerzetten. Een beetje speelruimte aanhouden dus.
    Tenslotte een cel voor de tekst rechts. 400 pixels breed, verticaal uitgelijnd naar boven. Ik heb alle breedten aangegeven, voor zowel tabel als cellen, om ongewenste uitzetting van cellen tegen te gaan. Soms zijn cellen niet geheel gevuld, zodat de naastliggende cellen kunnen gaan uitzetten.
    Om de tabel verder te fixeren heb ik cellspacing en cellpadding op nul gezet. Anders zou je ook een randje buiten de ronde hoeken bij mijn logo te zien krijgen. Sommige oudere browsers laten standaard de tabelrand zien, dus heb ik het border attribuut toegevoegd en op nul gezet. De tabel ziet er als volgt uit.

<table width="575" border="0" cellspacing="0" cellpadding="0">
<tr>
<TD WIDTH=150 VALIGN=TOP ALIGN="CENTER" BGCOLOR="#99FFFF">
Logo and menu hier...
</td>
<td width="25">&nbsp;</TD>
<td valign="top" width="400">
Pagina inhoud hier...
</td>
</tr>
</table>

    Met deze opzet kun je de meeste pagina's goed doen. Bij langere pagina's, of bij veel afbeeldingen, splits ik de pagina in meerdere tabellen. Normaliter komt een tabel pas tevoorschijn als deze geheel geladen en geïnterpreteerd is. Dus als de sluitende </TABLE> tag is gevonden. De pagina blijft tot dan gewoon wit. Ik heb diverse tabellen gebruikt, een voor het logo en het menu boven, een voor het zijmenu en de tekst, en een voor de strook onderaan. De top verschijnt vrijwel meteen, zelfs op grote pagina's. De pagina zelf hoeft niet op de credits (derde tabel) te wachten.
    Kijk nu nog eens naar de pagina met borders aan en vervolgens weer uit. Het zou nu een stuk duidelijker moeten zijn. Als je de code van deze pagina bestudeert, zie je dat ik ook nog tabellen heb gebruikt voor de titelstroken boven en onderaan. Op die manier kan ik gewoon tekst gebruiken op de stroken, en de pijltjes toevoegen zonder veel plaatjes of image maps te gebruiken.

goto top  
leftCopyright © Gerben Hoekstra - Alle rechten voorbehouden backnext right