Vorlage | RE-Design - Enrico Reinsdorf

Tag 18 – HTML-Vorlagen

18. Dezember 2008 |

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.

Downloads

REDcms_13.zip

Veröffentlicht in Adventskalender 2008 |

Schlagworte: 2008, adventskalender, html, redcms, vorlage |

Keine Kommentare »

RE-Design – Enrico Reinsdorf