Stelle des Platzhalters Templates generieren

Um aus dem bestehenden Design ein Template für eforia® web manager zu erstellen bedarf es nicht viel. Wir müssen nur dafür sorgen, dass alle Bereiche, die sich später von Seite zu Seite unterscheiden, dynamisch aufgebaut werden.

Dazu arbeiten wir mit verschiedenen Platzhaltern. Diese sind an den geschweiften Klammern leicht zu erkennen.

Für den Seitentitel nehmen wir den Platzhalter {title}.
Aus:
<title>Titel</title>
wird:
<title>{title}</title>

Der Haupttext kommt an die Stelle des Platzhalters {main}.
Aus:
<div id="main" style="background-color:#ffffcc;">
Haupttext Haupttext Haupttext Haupttext Haupttext Haupttext Haupttext Haupttext Haupttext Haupttext Haupttext Haupttext Haupttext Haupttext Haupttext Haupttext Haupttext
</div>
wird:
<div id="main" style="background-color:#ffffcc;">{main}</div>

Das Menü wird generiert durch {execmacro="menu"}.
Aus:
<div id="menu">
<a class="men" href=""><img src="../images/symbol.gif" border="0"> Menüpunkt 1</a><br>
<a class="men" href=""><img src="../images/symbol.gif" border="0"> Menüpunkt 2</a><br>
<a class="menakt" href=""><img src="../images/symbol_filled.gif" border="0"> Menüpunkt 3</a><br>
<a class="men" href=""><img src="../images/spacer.gif" width="16" height="8" border="0"><img src="../images/symbol.gif" border="0"> Punkt 3.1</a><br>
<a class="men" href=""><img src="../images/spacer.gif" width="16" height="8" border="0"><img src="../images/symbol.gif" border="0"> Punkt 3.2</a><br>
<a class="men" href=""><img src="../images/spacer.gif" width="16" height="8" border="0"><img src="../images/symbol.gif" border="0"> Punkt 3.3</a><br>
<a class="men" href=""><img src="../images/symbol.gif" border="0"> Menüpunkt 4</a><br>
</div>
wird:
<div id="menu">{execmacro="menu"}</div>


Nicht vergessen dürfen wir die Meta-Angaben. Die Werte für Keywords und Description sollen auch aus der jeweiligen Seite stammen:
<meta name="DESCRIPTION" content="{description}">
<meta name="KEYWORDS" content="{keywords}">


Für das Extramenü fehlen eigentlich nur noch die Links. Diese geben wir in der Notation {link="Linkziel"} an. Statt Linkzielkönnen wir die Seite in der Struktur angeben. Der Aufbau ähnelt einer Verzeichnisstruktur. Als Trennung zwischen den einzelnen Ebenen benutzen wir den Schrägstrich "/". Die Startseite selbst wird durch einen Schrägstrich bestimmt. Also komplett: {link="/"}.
Es gibt Seiten, die nicht direkt ins Menü einzuordnen sind, aber von überall erreichbar sein sollen. Das sind z.B. das Impressum oder eine Suchfunktion. Es hat sich als empfehlenswert herausgestellt, diese Seiten unter einem Obermenüpunkt zusammenzufassen. Dieser wird im Menü auf "nicht sichtbar" geschaltet. Wir nennen den Obermenüpunkt "Spezial". Nun legen wir die Impressumseite unter Spezial an. Daraus ergibt sich dann der Link: {link="/Spezial/Impressum"}.
<div id="extramenu">
<a class="extramenu" href="{link="/"}"><img src="../images/symb_home.gif" border="0"> Startseite</a><br>
<a class="extramenu" href="{link="/Spezial/Impressum"}"><img src="../images/symb_i.gif" border="0"> Impressum</a><br>
</div>

Damit ist das Haupttemplate bereits fertig.

Hier noch mal komplett:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta name="AUTHOR" content="Horst Klier / tdb Software Service GmbH">
<meta name="DESCRIPTION" content="{description}">
<meta name="KEYWORDS" content="{keywords}">
<meta name="LANGUAGE" content="deutsch, de">
<meta name="ROBOTS" content="follow">
<meta name="ROBOTS" content="index">
<meta name="GENERATOR" content="eforia® web manager / tdb Software Service GmbH">
<style type="text/css">
<!--
* {font-family: verdana, arial, helvetica, sans-serif; text-decoration: none; color: #000000;}
body {font-size:80%;margin:0px;padding:0px;overflow:none;font-family: verdana, arial, helvetica, sans-serif;background-color:#1D77DD;}

#blaubg {position:absolute; top:3%; left:10%;width:80%;height:94%;color:#ffffff;background-color:#0000a0;overflow:none;}
#gelbbg {position:absolute; top:5%; left:34%;width:54%;height:90%;color:#000000;background-color:#ffffcc;overflow:none;}
#main {position:absolute; top:6%; left:36%;width:50%;height:86%;color: #000000;background-color:#ffffcc;overflow:auto;}
#toplogo {position:absolute;top:7%;left:22%;margin-left:-62px;}
#menu {position:absolute; top:28%; left:12%;width:20%;height:50%;color:#ffff00;overflow:auto;}
#extramenu {position:absolute; bottom:5%; left:12%;width:20%;color:#ffff00;overflow:auto;height:17%;}
#cornertr {position:absolute;top:3%;left:10%;margin-left:-3px;margin-top:-3px;}
#cornertl {position:absolute;top:3%;right:10%;margin-right:-3px;margin-top:-3px;}
#cornerbr {position:absolute;bottom:3%;left:10%;margin-left:-3px;margin-bottom:-3px;}
#cornerbl {position:absolute;bottom:3%;right:10%;margin-right:-3px;margin-bottom:-3px;}

input {border:2px solid #0000a0;height:1.5em;}
textarea {border:2px solid #0000a0;height:7.5em;}
input.btn {color:#ffff00;background-color:#0000a0;border:2px solid #ffff00;}
input.nb {border:0px solid #000000;}
ul {margin-top:0px;}
img {border:0px solid #000000;}

/* Links */
a {color:#0000a0;text-decoration: underline;}
a:link {color:#0000a0;text-decoration: underline;}
a:visited {color:#0000a0;text-decoration: underline;}
a:hover {color:#0000ff;text-decoration: none;}
a:active {color:#bb0000;text-decoration: none;}

span.headline {font-weight: bold;font-size: 1.2em;color:#0000a0;}
span.subline {font-weight: bold;color:#0000a0;}
span.highlighted {font-weight: bold;}
.citation {font-style: italic; text-decoration: none;}
.small {font-size: 0.6em; text-decoration: none;}

/* Menu */
a.men, a.men:link, a.men:visited, a.men:hover, a.men:active {color : #ffff00;font-weight: bold;text-decoration: none;background-color:#0000a0;}
a.men:hover {color: #cccccc}
a.men:active {color: #ff0000}

/* Menu Aktiv */
a.menakt, a.menakt:link, a.menakt:visited {color : #cccc00;font-weight: bold;text-decoration: none;background-color:#0000a0;}
a.menakt:hover {color: #cccccc;}
a.menakt:active {color: #ff0000;}

a.extramenu, a.extramenu:link, a.extramenu:visited, a.extramenu:hover, a.extramenu:active {text-decoration: none;color : #ffff00;}
a.extramenu:hover {color: #cccccc}
a.extramenu:active {color: #ff0000}

//-->
</style>
<title>{title}</title>
</head>

<body bgcolor="#ffffff" text="#000000">

<div id="blaubg"> </div>
<div id="gelbbg"> </div>
<img id="cornertr" src="../images/corner_tr.gif">
<img id="cornertl" src="../images/corner_tl.gif">
<img id="cornerbr" src="../images/corner_br.gif">
<img id="cornerbl" src="../images/corner_bl.gif">
<img id="toplogo" src="../images/wwwlogo.gif">
<div id="main" style="background-color:#ffffcc;">{main}</div>
<div id="menu">{execmacro="menu"}</div>
<div id="extramenu">
<a class="extramenu" href="{link="/"}"><img src="../images/symb_home.gif" border="0"> Startseite</a><br>
<a class="extramenu" href="{link="/Spezial/Impressum"}"><img src="../images/symb_i.gif" border="0"> Impressum</a><br>
</div>
</body>
</html>

Es fehlen noch die Templates für den Aufbau des Menüs.

Das Menü setzt man aus mehrerern Templates zusammen. Für jede Ebene des Menüs existierren drei Templates.
button_n - Wird ausgegeben, wenn der Menüpunkt gerade nicht angewählt ist
button_aktiv_n - Wird ausgegeben, wenn der Menüpunkt gerade angewählt ist
between_button_n - Wird zwischen zwei menüpunkten der Ebene n ausgegeben

n steht für die Ebene. Üblicherweise sind Menüpunkte tieferer Ebenen weiter eingedrückt. Für unser Menü definierten wir 3 Ebenen. Das reicht normalerweise, hängt aber natürlich von der generellen Struktur der fertigen Website ab.

Im Template können wieder Platzhalter verwendet werden. Z.B. {link} fügt einen Link zu dem aktuellen Punkt ein. {name} setzt seinen namen ein. Eine genaue Beschriebung finden Sie in der Dokumentatino zum Modul Menü.

button_1
<a class="men" href="{link}"><img src="../images/symbol.gif" border="0"> {name}</a><br>
button_aktiv_1
<a class="menakt" href="{link}"><img src="../images/symbol_filled.gif" border="0"> {name}</a><br>
between_button_1
bleibt leer

button_2
<a class="men" href="{link}"><img src="../images/spacer.gif" width="16" height="8" border="0"><img src="../images/symbol.gif" border="0"> {name}</a><br>
button_aktiv_2
<a class="menakt" href="{link}"><img src="../images/spacer.gif" width="16" height="8" border="0"><img src="../images/symbol_filled.gif" border="0"> {name}</a><br>
between_button_2
bleibt leer
button_3
<a class="men" href="{link}"><img src="../images/spacer.gif" width="32" height="8" border="0"><img src="../images/symbol.gif" border="0"> {name}</a><br>
button_aktiv_3
<a class="menakt" href="{link}"><img src="../images/spacer.gif" width="32" height="8" border="0"><img src="../images/symbol_filled.gif" border="0"> {name}</a><br>
between_button_3
bleibt leer

Damit haben wir alle Templates zusammen.
eforia® web manager Dokumentation
Stand V 3.01 / 20.12.2010
© Horst Klier
http://www.klier.net
Impressum