Pagina met menu in html

Content:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi, nietwaar?


Structuur

Alle code van de pagina-onderdelen zit in deze ene pagina.

Code van deze pagina-met-menu.htm

(zonder de code van deze verklaring erbij)

<!Doctype ... enz.>
<html ... enz.>
<head>
   ... met meta's, stylesheet-link, enz.
</head>

<body>
   <h1>Pagina met menu in html</h1>

   <div id="menu">
      <h2>Menu:</h2>
      <ul>
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
      </ul>
   </div>

   <div id="content">
      <h2>Content:</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer ...
      ... enz.
      quas molestias excepturi, nietwaar?
      </p>
   </div>

</body>
</html>

Probleem...

Op deze manier moet de code van het menu (inclusief eventuele submenu's en sub-submenu's, al dan niet uitklapbaar) op elke pagina opnieuw worden ingeplakt. En erger: bij een wijziging in het menu moet de menu-code ook op elke pagina afzonderlijk aangepast worden!

Oplossing kan zijn: frames gaan gebruiken (een frameset-website maken, of het menu in een <iframe> zetten). Voor Dreamweaver-bouwers kan ook een oplossing zijn: een Dreamweaver-template gaan gebruiken, waar de menu-code in zit. Beide oplossingen zijn echter af te raden... (zie voetnoten 1 en 2)

Alternatief!

Gelukkig is er een alternatief: een knipsel (html-fragment) maken van het menu of een ander steeds terugkomend element op elke pagina, en dat fragment er op de server door PHP in laten plakken.

Bij vrijwel alle betaalde hosting-pakketten wordt PHP ondersteund (sommige gratis webruimtes doen het niet, zie voetnoot 3).

Vervolg: Pagina met knipsel. (Vorige pagina: PHP-includes in een notendop)


Voetnoten:

  1. Framesets en iframes zijn slecht voor Google en de gebruiksvriendelijkheid en toegankelijkheid van een website. Zie "Alles over frames" op de site van webrichtlijnen.nl.
  2. Een Dreamweaver-template (.dwt-bestand) heeft als nadelen: op de server staan alle pagina's met steeds dezelfde menu-code (onnodige ballast), en bij wijziging van het menu/.dwt-bestand moet Dreamweaver alle pagina's van de hele site gaan her-uploaden. Zie verder: Dreamweaver/PHP verschil.
  3. Mocht een server onverhoopt geen php ondersteunen, dan kan misschien gebruik gemaakt worden van een "SSI", een ServerSideInclude met een .shtml-pagina. Dit gaat vrijwel hetzelfde als een PHP-include, alleen de code voor het aanroepen en de pagina-extensie zijn anders. Zie bv.: Beginner's Guide to SSI.