Een opzet met DIV elementen is nogal anders dan met frames; je kan de inhoud van een div namelijk niet los van de rest van de pagina verversen (tenzij je heel moeilijk met JavaScript gaat zitten doen maar dat is eigenlijk geen optie).
Het leukst (en meest praktisch; het gebruik van DIVs kunnen we dan direct weer laten vallen) is om PHP te gaan gebruiken. We kunnen daar heel simpel mee beginnen. Neem bijvoorbeeld de code van Rimsic:
PHP:
<?
include ("header.html")
?>
Wat dit in feite doet is dat het header.html inleest en in een nieuwe pagina plakt. Dit is dus precies wat we nodig hebben: een deel van de pagina die aan de bezoeker wordt gepresenteerd is standaard, de rest is steeds weer anders.
Om het werkend te krijgen hebben we een aantal zaken nodig:
- Een server die PHP ondersteunt (ik kon zo gauw niet ontdekken of XS4All dat doet)
- Eén of meerdere onderdelen die de standaardlayout van de site vormen (bijvoorbeeld header.html en footer.html)
- Een .php-bestand dat de layout en de inhoud samenvoegt
Het eerste item zal je zelf even moeten checken. Het tweede kan ik je alvast een beetje voorkauwen. In header.html zetten we wat bovenaan iedere pagina op jouw site moet komen, dus het logo + het menu + de foto's:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="100%" border="0" cellspacing="0">
<tr>
<td><div align="left"><img src="caravan.gif" width="177" height="100" hspace="10"></div></td>
<td><div align="center"><img src="tekst.gif" width="274" height="62"></div></td>
<td><div align="right"><img src="zeilboot.gif" width="105" height="100" hspace="10"></div></td>
</tr>
<tr>
<td colspan="3"><table border="0" align="center" cellspacing="0">
<tr>
<td class="navi"><a href="welkom.htm" target="main">Home</a></td>
<td class="navi"><a href="activiteiten.htm" target="main">Activiteiten</a></td>
<td class="navi"><a href="welkom.htm" target="main">Foto's</a></td>
<td class="navi"><a href="welkom.htm" target="main">Zeiluitslagen</a></td>
<td class="navi"><a href="welkom.htmm" target="main">Over de Camping </a></td>
<td class="navi"><a href="welkom.htmm" target="main">Top 20 </a></td>
<td class="navi-right"><a href="welkom.htm" target="main">Links</a></td>
</tr>
</table></td>
</tr>
</table>
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
WIDTH="1100" HEIGHT="120" id="fotobar" ALIGN="">
<PARAM NAME=movie VALUE="fotobar.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="fotobar.swf" quality=high bgcolor=#FFFFFF WIDTH="1100" HEIGHT="120" NAME="fotobar" ALIGN=""
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>
Merk op dat ik de "fotobar" alvast hierbij heb getrokken.
Als we dan toch bezig zijn kunnen we ook footer.html gauw opzetten:
Deze is nu erg simpel (want we hoeven alleen maar de HTML-code netjes af te sluiten), maar je kan zelf als je dat wil altijd nog wat toevoegen, bijvoorbeeld in de trant van "Copyright relisys 2006".
Om nu de uiteindelijke pagina die aan de bezoeker gepresenteerd wordt op te stellen gaan we PHP gebruiken. Maak een bestand index.php en zet dit daarin:
PHP:
<?
include("header.html");
?>
Hallo wereld!
<?
include("footer.html");
?>
De vraagtekens zijn er om de server duidelijk te maken wat PHP-code is en wat niet. Zoals je denk ik wel begrijpt pakt het script alles uit header.html, plakt het onze tekst erbij en sluit het het geheel af met footer.html
Zet index.php bij de .html-bestanden op de server en zie het resultaat
Om nu het "Hallo wereld"-gedeelte te variëren gaan we ook dát stuk uit een los HTML-bestand halen; index.php pakt dan dus eerst header.html, dan verhaaltje-over-de-camping.html (ik noem maar wat) en dan footer.html
Zie mijn volgende post
en.
, misschien moet je eerst zelf websites maken, oefenen, fouten maken en dan pas voor iemand een website maken 
