18. Dezember 2008 | 
Autor: 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.
- <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
- <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“de” lang=“de”>
- <head>
- <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″ />
- <title>##TITLEBAR##</title>
- <link rel=“stylesheet” href=“##BASEURL##/templates/styles/reset.css” />
- <link rel=“stylesheet” href=“##BASEURL##/templates/styles/layout.css” />
- <link rel=“stylesheet” href=“##BASEURL##/templates/styles/design.css” />
- <script type=“text/javascript” src=“##BASEURL##/templates/scripts/script.js”></script>
- <style type=“text/css”></style>
- </head>
- <body lang=“de” dir=“ltr”>
- <div id=“page”>
- <div id=“branding”>
- <h1>##WEBSITETITLE##</h1>
- <h2>##TAGLINE##</h2>
- </div>
- <div id=“main”>
- <div id=“content”>
- ##CONTENT##
- </div>
- <div id=“sidebar”>
- ##SIDEBAR##
- </div>
- </div>
- <div id=“copyright”>
- <p>© 2008 – <a href=“http://www.re-design.de”>RE-Design</a></p>
- <ul class=“valid”>
- <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>
- <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>
- </ul>
- </div>
- </div>
- </body>
- </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.
-
<div class=“page” id=“page_##ID##”>
- <h2>##TITLE## ##ADMIN##</h2>
- <ul class=“meta”>
- <li>##AUTHOR##</li>
- <li>##MODIFIED##</li>
- </ul>
- <div class=“teaser”>
- ##TEASER##
- </div>
- <div class=“boxes”>
- ##BOXES##
- </div>
- </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.
- <div class=“teaserbox” id=“box_##ID##”>
- <h3>##TITLE## ##ADMIN##</h3>
- <ul class=“meta”>
- <li>##MODIFIED##</li>
- </ul>
- <div class=“teaser”>##TEASER##</div>
- <div class=“body”>##BODY##</div>
- </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.
- <h3>Sidebar</h3>
- <div class=“box” id=“navigation”>
- ##NAVIGATION##
- </div>
- <div class=“box” id=“login”>
- ##LOGIN##
- </div>
- <div class=“box” id=“about_us”>
- <h4>Über das Projekt</h4>
- <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>
- </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.
Veröffentlicht in 
Schlagworte: 