Tja, voor wat hoort wat!
Maar je kan het jezelf een stuk eenvoudiger maken: met PHP.
Principe
In de praktijk
Je knipt uit onze model-pagina het code-fragment van de header en het menu, dat op alle pagina's hetzelfde moet zijn:
HTML:
<div id="header">
<img src="voorpagina%20foto's/perro_logo_nl.jpg" width="1000" height="90" alt="" />
<img src="voorpagina%20foto's/perro_banner.jpg" width="1000" height="109" alt="" />
</div>
<div class="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="wie_zijn_wij.html">Wie zijn wij</a></li>
<li><a href="onze_honden">Onze honden</a></li>
<li><a href="nieuws.html">Nieuws</a></li>
<li><a href="nesten.html">Nesten</a></li>
<li><a href="puppies.html">Puppies</a></li>
<li><a href="fokplan.html">Fokplan</a></li>
<li><a href="hondensport.html">Hondensport</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="gastenboek.html">Gastenboek</a></li>
<li><a href="avar_foto_eng.html"><img src="images/engelse%20vlag.jpg" width="32" height="18" alt="" /></a></li>
</ul>
</div>
Dit fragment sla je apart op (gewoon de kale regels, zonder doctype, <head> of <body>), in een mapje "includes", met bv. de naam
perro-topfragment.htm
Op de pagina zelf zet je op de lege plek de code-regel:
HTML:
<?php include("includes/perro-topfragment.htm"); ?>
Hetzelfde doe je met de staart van de pagina, die ook voor alle pagina's hetzelfde is:
HTML:
<div class="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="wie_zijn_wij.html">Wie zijn wij</a></li>
<li><a href="onze_honden">Onze honden</a></li>
<li><a href="nieuws.html">Nieuws</a></li>
<li><a href="nesten.html">Nesten</a></li>
<li><a href="puppies.html">Puppies</a></li>
<li><a href="fokplan.html">Fokplan</a></li>
<li><a href="hondensport.html">Hondensport</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="gastenboek.html">Gastenboek</a></li>
<li><a href="avar_foto_eng.html"><img src="images/engelse%20vlag.jpg" width="32" height="18" alt="" /></a></li>
</ul>
</div>
<div id="footer">
<div id="OneStatTag"><!-- inhoud ingevuld met javascript -->
<noscript><div><a href="http://www.onestat.com"><img src="http://stat.onestat.com/stat.aspx?tagver=2&sid=389933&js=No&" alt="web site analysis" /></a></div></noscript>
</div>
<div id="copyright">
© 2007-<span id="huidigJaar">heden: <!-- jaartal ingevuld met javascript --></span> E. Bronsema, J. Laffra
</div>
<div id="update">
<!-- datum en tijd ingevuld met javascript -->
</div>
<a id="jeblsite" href="http://www.jebl.nl/">
<img src="voorpagina%20foto's/jebl_logo_rood.jpg" width="145" height="19" alt="" />
</a>
</div>
<script type="text/javascript" src="http://bliksekaters.nl/tests/scripts/perro-scripts.js"></script>
<script type="text/javaScript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javaScript" src="js/lightbox.js"></script>
Dit knip je ook uit, en noemt het bv.:
perro-eindfragment.htm (en ook uploaden naar in het mapje "includes").
Op de lege plaats zet je hier, je raadt het al:
HTML:
<?php include("includes/perro-eindfragment.htm"); ?>
Van de pagina is nu alleen nog maar de <head> en de inhoud overgebleven:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Foto's van Avar Perro de la Casa Negra: kennel Groenendaeler werkhond (Belgische herder)</title>
<link rel="shortcut icon" type="image/x-icon" href="http://bliksekaters.nl/tests/images/perro-favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/lightbox.css" />
<link rel="stylesheet" type="text/css" href="http://bliksekaters.nl/tests/stylesheets/perro-styles.css" />
</head>
<body>
<?php include("includes/perro-topfragment.htm"); ?>
<!-- pagina-inhoud -->
..... enz.
<!-- einde pagina-inhoud -->
<?php include("includes/perro-eindfragment.htm"); ?>
</body>
</html>
Deze gedecimeerde pagina geef je nu de .php-uitgang ipv de .html uitgang:
avar_foto-nw.php.
Uploaden en klaar!
De php-machine op de server plakt nu automatisch de twee fragmenten er in.
Ook in de broncode zie je geen enkel verschil met de complete html-pagina die we eerst hadden.
- NB: Dit werkt alleen op de server, waar php op staat (lokaal doet ie het niet; tenzij je lokaal een php-server installeert).
Conclusie:
Voor alle andere pagina's maak je een een kopie van deze pagina, zet de andere inhoud er in, en klaar is Jebl.
Dat scheelt het telkens moeten inplakken van de header, het menu (2x), de footer en de script-aanroepen.
- Bijkomend voordeel: moet er later iets in bv. het menu veranderen (of bv. een andere afbeelding in de kop), dan hoeft alleen het topfragment aangepast te worden (voor het menu ook het eindfragment).
- Daarna werkt het nieuwe menu meteen op alle pagina's!
Dit hoeft dus niet op alle pagina's afzonderlijk veranderd te worden: met php ben je toekomstbestendig! *)
Succes!
CSShunter
_________
*) Hetzelfde geldt voor het css-bestand: wil je bv. de achtergrond knalgeel maken (of iets anders), dan doe je dat één keer in het css-bestand, en alle pagina's worden dan knalgeel.
Niets geen gerommel meer in de html van alle pagina's, zoals met de tabellen en de inline styles die er in zaten.
Zo probeer ik zieltjes te winnen voor css en php.
dit om de gallery in het midden van het scherm te krijgen.
