Structuur van de website

Bezint er gij begint

Voor we beginnen met het bouwen van een website dienen we een aantal zaken vooraf te bepalen. Te denken valt aan:

Het aantal onderwerpen
Het aantal pagina's
Gebruiken we plaatjes die alleen voor een bepaalde pagina zijn bedoeld
Gebruiken we plaatjes die op meerdere pagina's worden gebruikt
Hoe willen we onze pagina's indelen
Pixelbreedte van de site

Hoewel het eenvoudig is later iets toe te voegen kan het toch verstandig zijn globale plaatjes en logo's van te voren op het juiste formaat te maken en al in de juiste map te plaatsen.

Om een aantal zaken te bepalen maken we een prototype pagina aan. Deze pagina noem je test.html of proto.html en hierin ga je zaken plaatsen en uitproberen. Ook je stylesheet kun je hierin ontwikkelen.

Voorbeeld

We willen een online kookboek maken met een ruime keuze uit gerechten en gerecht groepen en verwachten dat er geregeld recepten zullen worden toegevoegd.

We gaan er van uit de de hosting voor de website geregeld is en dat er ook toegang tot is. Verder hebben we ook de software die we nodig hebben.

We gaan in de site root (www.uwsite.nl) enkele mappen maken. Omdat we lokaal werken maken we op de harde schijf een map (Mijn documenten\uwsite) die deze siteroot vervangt. We maken vier mappen aan, n.l. kookboek, picture_library, styles en scripts. In de siteroot komt later nog de homepage (index.html) te staan en het robot.txt bestand.

Nu we de basis structuur hebben kan je de globale plaatjes en logo's in de picture_library plaatsen.

Omdat we nog geen stylesheet hebben maken we in de map styles een bestand aan met de naam super.css in kladblok. Dit bestand kan voorlopig leeg blijven.

Scripts hebben we niet dus deze map blijft voorlopig leeg. Hier komen de .js (javascript) en .swf (shockwave flash) bestanden in te staan die voor de hele site gebruikt kunnen worden.

Nu de basis klaar staat gaan we mappen voor de gerechtgroepen maken zoals voorgerechten, rundvleesgerechten en ga zo maar door, in de map kookboek. Dit hoeft niet allemaal te gelijk, maar als u later een nieuwe groep wilt toevoegen kan dat ook. Gerecht groepen later uitsplitsen wordt afgeraden omdat de zoekmachines de bezoekers naar niet bestaande pagina's zal leiden (de beruchte 404 errors). Dus beter eerst een uur bedenken hoe je de indeling wilt maken dan achteraf een hoop geschuif met de nodige problemen (zoekmachines die gaan verwijzen naar de verkeerde of niet meer bestaande pagina's).

We besluiten ook gelijk dat ieder recept een eigen pagina krijgt maar niet een eigen map. Ook komt er bij iedere groep een menu met alle gerechten voor de groep in alfabetische volgorde. De foto van het gerecht komt ook in deze map en krijgt dezelfde naam als het recept, dus cock_a_leekie.html en cock_a_leekie.jpg beide in de map kip.

Het gebruik van spaties in bestandsnamen wordt afgeraden omdat het tot problemen kan leiden. Het web is van oorsprong in een Unix omgeving ontwikkeld, die geen spaties in bestandsnamen toestaat. We kunnen dit vervangen door het laag liggende streepje (_) te gebruiken.

Indeling van een pagina

We gaan nu beginnen met het plaatsen van de teksten op de pagina.

We beperken ons even tot de recepten, maar het principe geld voor allerlei soorten gebruik.

Layout voorbeeld

Boven in zit de kop van van de pagine welke de volle breedte gebruikt en bestaat uit twee delen n.l. de naam van het kookboek en daaronder de naam van het gerecht met de franse naam (voorzover bekend).

Onder de kop zit een vak met twee kolommen welke ieder hun eigen gebruik hebben gekregen. In de rechter kolom kan boven de bereidingswijze nog een foto van het gerecht geplaatst worden.

Maak op een stuk papier een vakken tekening. Deze gebruiken we later weer als we de code gaan maken.

Navigatie door de site

Indien we het recept bereiken via een zoekmachine zal deze rechtstreeks naar de juiste pagina verwijzen. Willen we als bezoeker verder op de site kijken dan krijgen we een probleem. De vorige knop van de browser brengt ons terug naar de zoekmachine en niet naar het boven liggende menu (de gerechtgroep). Om in de URL balk van de browser delen weg te halen is voor de meeste surfers een stap te ver en vaak werkt deze methode niet als de webmaster verkeerde bestandsnamen kiest.

Komen we via de homepage binnen of halen alles na de .nl/ weg (wat ook voor vele een stap te ver is) dan komen we op de homepage terecht en kunnen we wel met de vorige toets van de browser aan de gang.

Om een optimale situatie te krijgen maken we een navigatieregel aan op de pagina. In de rechter kolom van het recept zien we in de bovenste regel de navigatie gezien vanaf de siteroot tot de huidige pagina. Iedere stap is een link naar die betreffende pagina. Het zelfde gaat ook op voor deze pagina, zie boven.

Voorbeeld van een navigatiebalk.

De code hiervoor is
<div id="nav-tak">
<p><a href="/index.html">Home</a> - <a href="../index.html">Kookboek</a> - <a href="index.html">Kipgerechten</a> - Cock à leekie</p>
</div>.

Iedere pagina met de naam index.html heeft in dit voorbeeld de functie van menupagina. Meestal gebruik je index.html ook als je een onderwerp maakt die je in een map plaatst, zoals deze pagina, zie URL-regel op uw browser.

Mappen zonder index.html