Hoe zorg ik ervoor dat iedere pagina dezelfde layout heeft?

Veel beginnende webmasters vragen zich af hoe je ervoor zorgt dat iedere pagina er hetzelfde uitziet zonder dat dit al te veel werk kost. Ik wil drie mogelijkheden bespreken, de html-manier, de php-manier en de wordpress manier.

De html manier

Wanneer je start met het maken van een website moet je er eerst voor zorgen dat je een degelijke layout hebt. Deze hoeft er echt niet direct fabtastisch uit te zien, maar heeft wel een paar basisvoorwaarden nodig.

Op iedere pagina een menu, een logo, de tekst op iedere pagina op dezelfde plek en eventueel wat plaatjes om het uiterlijk er wat leuke uit te laten zien. Er zijn sites die op de homepagina een uitgebreid menu hebben staan, op een andere pagina staat alleen maar een linkje naar de homepagina. Niet goed natuurlijk, maar je komt ze nog erg veel tegen dit soort sites

Je moet je namelijk realiseren dat een bezoeker op iedere willekeurige pagina kan binnenkomen. Het kan zijn dat hij op de homepagina binnenkomt, maar een andere pagina is natuurlijk ook mogelijk. Een bezoeker moet dan direct weten waar hij heen kan en dat kan alleen met een goede navigatie.

Binnen HTML kun je twee dingen doen. Je maakt een soort templatepagina, waar alles gewoon hetzelfde is (de code), behalve het stuk waar het artikel staat. Dus je maakt een hoofdpagina waarbij de hele pagina een opmaak heeft, het gedeelte met daarin de tekst of het artikel haal je weg, en dan heb je een template of een sjabloon.

Tweede mogelijkheid is het gebruiken van een iframe. Hiermee kun je een pagina opzetten met daarin de code van een iframe. Hierin verschijnt een nieuwe pagina, wanneer je klikt op een van de links in de eigenlijke pagina. Voordeel is dat alleen de pagina in het frame veranderd en niet het stuk er omheen.

Groot nadeel is dat Google de pagina die in een iframe wordt gezet apart indexeert, grote kans dat alleen die pagina (zonder de pagina eromheen) wordt gevonden en dan heb je weer precies wat je niet moest hebben.

Hoe het precies werkt lees je in het artikel over het iframe.

Opzet in php

Met php heb je wat meer mogelijkheden, je kunt namelijk stukken code oproepen die in een pagina wordt geplaatst. Wanneer je deze code vult met de basisopzet van je webpagina hoef je deze niet steeds opnieuw te maken voor iedere pagina die je aanmaakt.

Dat moet met HTML namelijk wel, elke keer als je bijvoorbeeld een nieuw onderdeel aan je menu moet toevoegen, moet je alle pagina’s die je hebt gemaakt, langs om dit onderdeel toe te voegen. In php hoef je maar 1 bestand te vervangen met de nieuwe code en alle pagina’s hebben het nieuwe onderdeel zichtbaar, de output is namelijk weer gewone HTML.

Hoe je dat concreet doet lees je in het volgende artikel: http://localhost:8888/bestand_includen.php

En wat dan met WordPress?

WordPress werkt ook met het systeem van includen en templates. Templates vormen steeds de basis voor iedere pagina. Elke afzonderlijke webpagina ziet er hetzelfde uit. Voordeel van WordPress is dat jet alles niet meer zelf hoeft te doen, maar dat het al voor je gedaan is. Je weet zeker dat alle onderdelen er in zitten, dat zelfs nieuwe pagina’s aan een menu worden toegevoegd.

Speciale plugins zorgen ervoor dat je nog beter kunt doen wat je met een website wilt bereiken.

Maar, om af te ronden, welke vorm je ook kiest, zorg ervoor dat het herkenbaar is, dat je een eenduidige layout gebruikt, dat de basis van iedere pagina hetzelfde is. Dat is voorwaarde voor je bezoeker om zijn weg te vinden op je site en om er met plezier weer terug te komen.

1 Reactie

  1. Om eerlijk te zijn vind ik dit een minder goed artikel 😉 Het gebruik van Iframes is volgens mij ook niet meer valid W3C, en komt bovendien erg amateuristisch over. Leuk voor beginners die de alternatieven nog niet snappen, maar ik vind het eigenlijk slecht dat veel beginners op die manier beginnen.

    De PHP manier is dan al beter. Al moet ik eerlijk zijn dat deze manier nog niet het handigste is. De manier met index.php?inc=blaat vind ik persoonlijk beter. En met htaccess kan je dit ook SEO maken. Ook dat heb ik in mijn tutorial verwerkt:
    http://localhost:8888/forum/24_18237_0.html

    Dan is er nog een AJAX manier, maar dat is misschien leuk voor een volgend artikel 🙂

Een reactie achterlaten

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *