Hoi Ed,
Ja, lastig; maar we gaan maar onverdroten verder.
Als eerste stap voor het includen gaan we aan aantal partjes "excluden", want ze moeten uit de gewone pagina.
10. Het uitknippen van de php-fragmenten
Werkpagina
We maken als werkpagina eerst een kopie van de laatste complete versie
aspartaam-bouw-09.htm.
Daarin reizen we de html-code door: op zoek naar wat dezelfde fragmenten zijn die op elke pagina terug moeten komen.
De eerste knip
Het eerste dat we tegenkomen is de
<div id="header"> met het menu:
HTML:
<div id="header">
<h1 class="hiddenText">Feitelijke informatie over de zoetstof Aspartaam</h1>
<span class="hiddenText"><a href="#content">Sla menu over.</a></span>
<div id="menu">
<h2 class="hiddenText">Menu.</h2>
<ul>
... enz.
</ul>
</div><!-- eind #menu -->
</div><!-- eind #header -->
Hier kan de schaar in!
Alleen het binnenwerk van deze <div> gaat uitgeknipt worden, de
<div id="header"> zelf blijft in de pagina staan. Dan blijft de hoofd-structuur van de pagina overeind.
- Selecteer de code met ingang van de regel <h1 class="hiddenText"> tot en met de regel </div><!-- eind #menu -->.
- Knip!
- Open Kladblok, en plak daar (zonder iets erbij) het uitgeknipte fragment in.
- Sla dit bestand op in een mapje "includes", met de naam aspartaam-fragment-header-en-menu.php.
- Belangrijk! Bij het opslaan moet de codering op UTF-8 gezet worden (staat standaard op "ANSI"):
- Je kunt ook zo'n fragment-bestand aanmaken in een html-editor: als er maar geen andere code bij komt, en als het maar als UTF-8 opgeslagen wordt.
- Vervolgens kan het fragment geüpload worden naar een aangemaakt mapje includes op de server.
Terug naar de pagina. Waar het fragment stond, zetten we nu een commentaar-regeltje:
<!-- hier header-fragment invoegen -->. We houden dus over:
HTML:
<div id="header">
<!-- hier header-fragment invoegen -->
</div><!-- eind #header -->
Tussenresultaat
- Zou je de pagina nu gaan bekijken (hier: bouw-10a), dan zie je dat het knippen goed gelukt is. Het hele menu is weg! Maar de rest van de pagina, inclusief de opmaak, staat er nog keurig in.
- Als je het losse fragment op de server gaat bekijken, zie je deze kale platte tekst. De hele opmaak is weg! Maar kijk je naar de broncode, dan staan de hele menu-structuur en alle opmaak-aanwijzingen (ID's, classes) er nog keurig in.
- Zou je het losse fragment door de html-validator laten toetsen, dan zou die je bestraffend toespreken. Maar het is de bedoeling dat het in de pagina teruggeplakt wordt, dus dat is niet erg.
- De css-validator is daarentegen uitermate tevreden over dit losse fragment: klopt, want er staat helemaal geen css in! (dat wordt in de hoofdpagina aangehaakt)
We maken ons niet ongerust!
Verder met het knipwerk
Op dezelfde manier als bij de header halen we nu ook de andere standaard-fragmenten er uit: de Google-advertenties bovenin, de linkerkolom, de rechterkolom en de footer.
Ook die codes plakken we stuk voor stuk in een eigen fragment-bestandje, en de fragmenten zetten we alvast op de server.
De automatische update-datum in de footer
Bij het apart zetten van het footer-fragment kan daarin in plaats van:
HTML:
<p>© aspartaam.nl / Ontwerp: CSShunter / Deze pagina is voor het laatst bijgewerkt op
30-08-2012 om 01:10</p>
... meteen de php-code gezet worden die de datum er automatisch in zet:
HTML:
<p>© aspartaam.nl / Ontwerp: CSShunter / Deze pagina is voor het laatst bijgewerkt op
<?php
echo date ("d-m-Y ", getlastmod()) . " om " . date ("H:i", getlastmod());
?>
</p>
- Dit soort handige codes zijn te vinden in het online PHP-manual, o.a. over de hier gebruikte php datum-functie .
- Het php-manual is erg groot, maar dat hebben we gelukkig allemaal niet nodig voor het includen!
Het overblijfsel
Er is nu een erg lege pagina overgebleven (de bouw-10): alle fragmenten weg en eigenlijk alleen de paginastructuur en inhoud van de middenkolom is er nog:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="nl">
<head>
... enz.
</head>
<body class="home">
<div id="header">
<!-- hier header-fragment invoegen -->
</div><!-- eind #header -->
<div id="topAdvertenties">
<!-- hier Google-top-fragment invoegen -->
</div><!-- einde #topAdvertenties -->
<div id="hoofdsectie"><!-- voor de drie kolommen naast elkaar -->
<div id="wrapper"><!-- Bevat de middenkolom met de content (eerst) en de linkerkolom (erna) -->
<div id="content">
<h1>Welkom bij de Aspartaam informatie-site</h1>
<p>"Aspartaam" is ...
...
enz. enz.
...
</div><!-- einde #content -->
<div id="linkerkolom">
<!-- hier linkerkolom-fragment invoegen -->
</div><!-- einde #linkerkolom -->
<div class="clearB"></div>
</div><!-- einde #wrapper -->
<div id="rechterkolom">
<!-- hier rechterkolom-fragment invoegen -->
</div><!-- einde #rechterkolom -->
<div class="clearB"></div>
</div><!-- einde #hoofdsectie -->
<div id="footer">
<!-- hier footer-fragment invoegen -->
</div><!-- einde #footer -->
</body>
</html>
Ook het javascript voor de video's werkt niet meer, want dat zit in het verwijderde footer-fragment.
Maar in deze
aspartaam-bouw-10.htm staat voor de rest nog alles overeind.
Alleen de regels
<!-- hier fragment invoegen --> moeten nog vervangen worden door iets wat de fragmenten daadwerkelijk laat invoegen!
Maar dat komt de volgende keer!
Wordt vervolgd,
CSShunter
