Tag 18 – HTML-Vorlagen

Heute möchte ich etwas über die verwendeten Templates schreiben. Wie schon im Artikel über die Template“-Klasse geschrieben habe, setzt sich die Website aus verschiedenen Code-Schnipsel zusammen. Sie werden ineinander verschachtelt.

Index-Seite

In der Index-Seite steht das gesamte Grundgerüst. Neben dem allgemeinen Aufbau der HTML-Seite werden hier auch alle CSS-Dateien und JavaScript-Dateien geladen.

  1. <!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN“ „http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
  2. <html xmlns=„http://www.w3.org/1999/xhtml“ xml:lang=„de“ lang=„de“>
  3. <head>
  4. <meta http-equiv=„Content-Type“ content=„text/html; charset=utf-8“ />
  5. <title>##TITLEBAR##</title>
  6. <link rel=„stylesheet“ href=„##BASEURL##/templates/styles/reset.css“ />
  7. <link rel=„stylesheet“ href=„##BASEURL##/templates/styles/layout.css“ />
  8. <link rel=„stylesheet“ href=„##BASEURL##/templates/styles/design.css“ />
  9. <script type=„text/javascript“ src=„##BASEURL##/templates/scripts/script.js“></script>
  10. <style type=„text/css“></style>
  11. </head>
  12. <body lang=„de“ dir=„ltr“>
  13. <div id=„page“>
  14. <div id=„branding“>
  15. <h1>##WEBSITETITLE##</h1>
  16. <h2>##TAGLINE##</h2>
  17. </div>
  18. <div id=„main“>
  19. <div id=„content“>
  20. ##CONTENT##
  21. </div>
  22. <div id=„sidebar“>
  23. ##SIDEBAR##
  24. </div>
  25. </div>
  26. <div id=„copyright“>
  27. <p>&copy; 2008 &ndash; <a href=„http://www.re-design.de“>RE-Design</a></p>
  28. <ul class=„valid“>
  29. <li><a href=„http://validator.w3.org/check?uri=referer“><img src=„http://www.w3.org/Icons/valid-xhtml10“ alt=„Valid XHTML 1.0 Transitional“ height=„31“ width=„88“ /></a></li>
  30. <li><a href=„http://jigsaw.w3.org/css-validator/“><img style=„border:0;width:88px;height:31px“ src=„http://jigsaw.w3.org/css-validator/images/vcss“ alt=„CSS ist valide!“ /></a></li>
  31. </ul>
  32. </div>
  33. </div>
  34. </body>
  35. </html>

In dieser Datei gibt es eigentlich nur zwei Schlüsselworte die durch neue Schnipsel ersetzt werden: ##CONTENT## und ##SIDEBAR##. Die restlichen Schlüsselworte werden direkt in der Application“-Klasse mit Inhalt gefüllt.

Content-Bereich

Da der Content-Bereich sehr viele verschiedene Aufgaben erfüllen muss, gibt es auch sehr viele verschiedene Code-Schnipsel die an diesem Platz eingesetzt werden:

  • page.tpl.html
  • page.form.tpl.html
  • menu.form.tpl.html
  • box.form.tpl.html

Der wohl wichtigste Bereich in diesem System ist die „page.tpl.html“-Datei, weswegen ich sie hier auch näher mal beschreibe.

Page-Bereich

Der „Page“-Vorlage wird von der „Page“-Klasse benutzt und mit Inhalt gefüllt. Aber zusätzlich wird in der „Page“-Klasse auch die Inhalte für die einzelnen Boxen gesammelt. Deshalb wird das „##BOXES##“-Schlüsselwort nicht direkt von der „Page“-Klasse gefüllt.

  1. <div class=„page“ id=„page_##ID##“>

  2. <h2>##TITLE## ##ADMIN##</h2>
  3. <ul class=„meta“>
  4. <li>##AUTHOR##</li>
  5. <li>##MODIFIED##</li>
  6. </ul>
  7. <div class=„teaser“>
  8. ##TEASER##
  9. </div>
  10. <div class=„boxes“>
  11. ##BOXES##
  12. </div>
  13. </div>

Box-Bereich

Wie gerade beschrieben, füllt die „Box“-Klasse die „Box“-Vorlage und gibt sie dann an die „Page“-Klasse weiter, die diese dann an den richtigen Platz innerhalb der „Page“-Vorlage einsetzt.

  1. <div class=„teaserbox“ id=„box_##ID##“>
  2. <h3>##TITLE## ##ADMIN##</h3>
  3. <ul class=„meta“>
  4. <li>##MODIFIED##</li>
  5. </ul>
  6. <div class=„teaser“>##TEASER##</div>
  7. <div class=„body“>##BODY##</div>
  8. </div>

Sidebar-Bereich

Auch die „Sidebar“-Vorlage wird von eine Klasse benutzt. Allerdings gibt es hier keine eigene Klasse sondern es ist die gleiche wie schon bei der „Index“-Vorlage. Es ist die „Application“-Klasse.

  1. <h3>Sidebar</h3>
  2. <div class=„box“ id=„navigation“>
  3. ##NAVIGATION##
  4. </div>
  5. <div class=„box“ id=„login“>
  6. ##LOGIN##
  7. </div>
  8. <div class=„box“ id=„about_us“>
  9. <h4>Über das Projekt</h4>
  10. <p>Die ist nur ein kleines CMS-Beispiel. Ich hoffe ihr habt Spaß dieses zu benutzen. Falls ihr Fehler findet dann schreibt eine Nachricht an: <a href=„mailto:enrico@re-design.de“ class=„nowrap“>enrico@re-design.de</a></p>
  11. </div>

Die „Application“-Klasse füllt dabei 2 Schlüsselworte mit Inhalt. Auf der einen Seite (##NAVIGATION##) ist es die Menüstruktur und auf der anderen Seite (##LOGIN##) der Administrationskasten. Zusätzlich ist hier auch noch ein fester Kasten eingetragen. Er kann später entweder mit mehr, bzw. anderen Inhalt gefüllt oder gelöscht werden.

Downloads

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.