Hoi ibowts,
Een uitgebreider handleiding staat in de:
Mini-tutorial: de opzet van een php-site.
Als je dat gelezen hebt, kunnen we het toepassen (ik ga er van uit dat op de server het gebruik van php mogelijk is). We constateren: in jouw geval is er (o.a.) een verticaal menu dat op elke pagina hetzelfde is. Wat gaan we doen?
Stap 1
Je neemt één van die pagina's, en kopieert daarvan de hele table-cel waar het menu in staat. Dus het stuk:
HTML:
<td width="130" rowspan="7" valign="top">
<ul id="MenuBar" class="MenuBarVertical">
<li><a href="index_.html">Home</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Aston Martin</a>
<ul>
<li><a href="xtreme aston martin db7.html">DB7</a></li>
<li><a href="aston_martin_db9.html">DB9</a></li>
<li><a href="aston_martin_dbs.html">DBS</a></li>
<li><a href="aston_martin_rapide.html">Rapide</a></li>
<li><a href="xtreme aston martin v12 vantage.html">V12 Vantage</a></li>
<li><a href="xtreme aston martin volante.html">Volante</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Audi</a>
... t/m ...
<li><a href="#" class="MenuBarItemSubmenu">VW</a>
<ul>
<li><a href="xtreme vw golf.html">Golf</a></li>
<li><a href="xtreme vw touareg.html">Touareg</a></li>
</ul>
</li>
</ul>
</td>
Stap 2
Dit fragment plak je in een nieuw html-document. Maar dan wel
als enige inhoud van dat document: geen <html>, geen <head>, geen <body> enz.
Je slaat het op als bv.: xtreme-menufragment.htm
Als je 'm zo bekijkt, ziet het er nogal kaal uit, en ook de submenu's worden meteen al prijsgegeven i.p.v. dat ze uitgeklapt kunnen worden. Maar dat klopt, want in dit fragment zitten helemaal geen opmaak-codes. Niets aan de hand!
Stap 3
Terug naar de pagina waar je mee begon. Daar knip je die tabel-cel uit. Daar staat dus nu:
HTML:
<hr />
<table width="1321" height="906" border="0" align="left" cellpadding="0" cellspacing="20">
<!-- lege regel waar de menu-cel in stond, en dan de volgende cel -->
<td width="204" height="130" valign="top"><a href="bugatti_veyron_ss.html"><img src="walls/bugatti/supersport/2011-bugatti-veyron-16-4--1_1600x0w.jpg" width="200" height="130" /></a></td>
... enz.
Stap 4
Op de lege regel zet je nu de verwijscode naar het menu-fragment. Dat doe je met een php-instructie, waardoor de server weet dat die eerst het fragment in de pagina moet plakken ("pre-processing"), voordat de pagina naar de bezoeker wordt gestuurd. De instructie is in dit geval:
HTML:
<?php include("xtreme-menufragment.htm"); ?>
Stap 5
Er moet nu nog één ding gebeuren. Dezelfde pagina moet opgeslagen worden met
.php als extensie in plaats van
.htm. Anders weet de server niet dat eerst de php-inplakmachinerie in werking gezet moet worden, voordat de pagina naar de bezoeker gezonden mag worden.
Als je dat doet, en 'm upload naar de server, krijg je de volgende.
- Testpagina met ingevoegd php-menu: www.developerscorner.nl/csshunter/tests/test-2_xtremecars.php
- In niets te onderscheiden van de pagina waar we mee begonnen.
- Als je als bezoeker de broncode bekijkt, staat de menu-cel gewoon waar ie moet staan.
- Maar in de pagina op de server staat die hele cel er niet in: die staat alleen in het ingeplakte fragment.
Dan kan je nu met een gerust geweten ook de menu-cel uit alle andere pagina's knippen, en daar hetzelfde regeltje php-verwijzing in zetten.
Klaar is Kees!
Als er nu eens iets in het menu moet veranderen, hoef je alleen het bestandje
xtreme-menufragment.htm aan te passen en even te uploaden.
Klik daarna op een willekeurige pagina, en ja hoor: overal staat je nieuwe menu er in.
De kracht van php! :d
Met vriendelijke groet,
CSShunter
PS: In de testpagina's heb ik
de html-fouten er in laten staan, omdat het hier om het php-principe gaat. Die horen nog gecorrigeerd te worden.
Hetzelfde geldt voor
de css-fouten, die ook nog gecorrigeerd horen te worden.
O.a. het bestand
www.xtremecars.be/Menu.css is helemaal geen /* CSS Document */, maar is html-code. De link:
HTML:
<link href="Menu.css" rel="stylesheet" type="text/css" />
moet dan ook geschrapt worden uit de <head> van je html/php-pagina's.
Het aardige hiervan is, dat het wel het html-fragment voor de header van elke pagina is (als je de eerste twee regels er uit haalt).
Oftewel: als je nu op de goede plek in je pagina's de verwijzing:
HTML:
<?php include("xtreme-headerfragment.htm"); ?>
er in zet, staat meteen op elke pagina dezelfde header met afbeelding en het horizontale menu. Ook dat is dan simpel in 1 klap aan te passen, als dat nodig is.
