In der Vergangenheit hat sich gezeigt, daß es durchaus nicht immer einfach ist, ein Template nach den eigenen Vorstellungen zu erstellen.
Eine generelle Lösung kann leider nicht aufgezeigt werden, da insbesondere bei der Website-Navigation, immer wieder neue Anforderungen gestellt werden.
Bei dem folgenden Beispiel wird anhand des aktuellen Templates unserer Website eine Möglichkeit aufgezeigt, wie man eine dynamische Navigation erstellen kann ohne auf die sich bietenden Vorteile eines CMS zu verzichten.
Die Anforderung an das Layout stand insofern fest, als das möglichst wenig Platz mit der Navigation verschwendet werden sollte.
Daraus ergab es sich, daß das oder die Menüs als Layer sichtbar oder unsichtbar geschaltet werden sollten. Im unsichtbaren Zustand würde kein Platz verschwendet und im sichtbaren Zustand stehen alle Links zur Verfügung und liegen über dem Content.
In der Vorüberlegung wurde auch darüber nachgedacht, ob der Einsatz von Frames Sinn macht. Dieser Gedanke wurde jedoch wieder verworfen, da es keine Gründe gab die Frames rechtfertigen würden. Alle denkbaren Funktionen waren in unserem Fall ohne Frames umsetzbar.
Die Anforderung Menüs ein- bzw. auszublenden brachte den Einsatz von Javascript und CSS-Layern mit sich. Auf Tabellen zur Postionierung wurde vollständig verzichtet, so daß das Erscheinungsbild in jedem HTML 4.0 Browser identisch sein sollte.
Optimiert wurde das Layout für eine Bildschirmauflösung von 1024x768 Pixeln, da kaum noch Surfer mit kleineren Auflösungen unterwegs sind.
Durch den Einsatz von Javascript zur Steuerung der Navigation konnte natürlich nicht mehr darauf vertraut werden, daß die Suchmaschinen Spider unsere Seite indizieren. Aus diesem Grund wurde eine Sitemap erstellt, von welcher die Spider jedem Link in unserem Content folgen können.
In der folgenden Beschreibung werde ich nicht näher auf einzelne HTML Elemente eingehen. Wem dennoch etwas unklar erscheint, kann sich gern per Email an mich wenden.
...
<meta name="author" content="[THISAUTHORFNAME], [THISAUTHORLNAME]">
- Hier werden der Autorname und Vorname eingesetzt. Man hätte statt der verwendeten Platzhalter auch [NOPARSE:CMS:SHOW $THISAUTHORFNAME] verwenden können, jedoch ist in der älteren Form die Schreibweise einfacher und erfüllt den gleichen Zweck.
...
<meta name="generator" content="[GENERATOR]">
- [NOPARSE:GENERATOR] setzt die verwendete CMS.R. Version ein.
...
<META NAME="description" CONTENT="[THISDESCRIPTION]">
<META NAME="keywords" CONTENT="[THISKEYWORD]">
- Hier werden die Beschreibung und die Schlüßelwörter der Website eingesetzt. Diese Informationen stammen aus den Feldern Beschreibung und Keywords des Artikeleditors. Diese sogenannten Metainformation werden von vielen Spidern zur Indizierung der Webseite benutzt.
...
<META NAME="Creation_Date" CONTENT="[THISDATE]">
- Das Erstelldatum des Artikels wird hier eingesetzt.
...
<meta name="revisit-after" content="15 days">
<title>[THISTITLE]</title>
- Hier wird der Titel des Artikels eingesetzt. Diese Information stammt aus dem Feld 'Titel der Seite' im Artikeleditor.
...
<DIV ID="map"> <A HREF="[LINK:6124ea8ec13ac8b5dd5b8cfb27e81341]"
ONMOUSEOVER="changeImages('map', 'templateimage/map-over.gif'); return true;"
ONMOUSEOUT="changeImages('map', 'templateimage/map.gif'); return true;">
- Mit dem Platzhalter LINK und der folgenden Artikelid wird ein gültiger Link zu einem Artikel generiert. Das Aussehen des Links hat nach der Generierung die Form "vs/quot;
...
<table width="100%" cellspacing="2" cellpadding="3" class="slidemenu">
[CMS: SHOW INCLUDE("MENU", "07cf03b4d163bd3d8a9f60810095fa4a")]
- An dieser Stelle wird das Menü des Artikels mit der benannten ID eingebunden. Diese Funktion wird für alle angezeigten Menüs verwendet. Das Aussehen der Menüs wird am Ende des Templates mit den bekannten Menü-Blöcken festgelegt.
Wird nun das Menü mittels der Include Anweisung von dem Artikel angefordert, stellt dieser sein Menü zur Vergfügung. Mit der Anweisung Show wird es angezeigt. Da alle Artikel das gleiche Template verwenden, ist die Verwendung problemlos möglich, da alle Menüs die gleiche Erscheinungsform haben.
...
<DIV ID="vorlage13-20"><span style="font-family: Verdana, Arial, Helvetica, sans-serif;">
<table cellspacing=0 cellpadding=4 style="background-color:#FFFFCE; BORDER-right: #c0c0c0 1px dotted; BORDER-left: #c0c0c0 1px dotted; BORDER-BOTTOM: #c0c0c0 1px dotted;" width="100%">
[CMS: if ($THISHEAD){]<tr>
<td width=5><img src="templates/none.gif" border="0" width="5" height="10"></td>
<td><H1>[THISHEAD]</H1></td>
</tr>[CMS:}]
- Durch die If Bedingung wird überprüft, ob zu dem Artikel eine Überschrift vorhanden ist. Ist das Feld leer, ist die If Bedingung nicht erfüllt und die Zeile der Tabelle wird nicht angezeigt.
...
<tr>
<td width=5><img src="templates/none.gif" border="0" width="5" height="30"></td>
<td><div ID="content">[THISCONTENT]</div></td>
</tr>
- Der eigentliche Inhalt des Artikels wird angezeigt.
...
<DIV ID="WARENKORB"> [CMS: if (REACT_TO_MODULE("SHOP","QUANTITY")) {]
<table width="200" border=0 style="border:1px solid white;font-size:10pt;color:white;font-weight:bold;font-family: Verdana, Arial, Helvetica, sans-serif;">
<tr>
<td align="center" style="font-size:13pt;">[CMS: SHOW REACT_TO_MODULE("SHOP","QUANTITY")]</td>
</tr>
<tr>
<td align="center"><a href="[CMS_SELF]?id=b63ac22b18b34aced942c69ae1805fde" style="font-size:8pt;color:white;font-family: Verdana, Arial, Helvetica, sans-serif;"><u>Artikel
im Warenkorb</u></a></td>
</tr>
</table>
[CMS:} ELSE {]
- Die If Bedingung prüft, ob im Warenkorb Artikel gespeichert sind. Ist dies der Fall, wird der Code zwischen den If ...{ ... } ausgeführt bzw. angezeigt. Wird der Code angezeigt, wird gleichzeit die Anzahl der Artikel im Warenkorb angezeigt - [CMS: SHOW REACT_TO_MODULE("SHOP","QUANTITY")].
Die Funktion des Warenkorbes ist nicht fester Bestandteil des CMS, sondern wird über das Shopping-Modul zur Verfügung gestellt.
Am Ende der If Anweisung steht ein ELSE, dies bedeutet, wenn Bedingung 1 nicht erfüllt ist, wird der in ELSE folgende code angezeigt, bzw. ausgeführt.
Mit Hilfe dieser Bedingung wurde ein wechselndes Anzeigen zwischen dem Warenkorb, im oberen Teil der Seite, und der Volltextsuche realisiert. Dies bedeutet, befinden sich keine Artikel im Warenkorb, wird die Volltextsuche angezeigt. Sobald ein Artikel im Warenkorb abgelegt ist, wird der Warenkorb angezeigt.
Der Grund für diese Vorgehensweise ist wieder einmal der Platz und die Anordnung von Elementen auf der Website. Besucher erwarten in der Regel oben rechts oder auf der linken Seite eine Möglichkeit nach bestimmten Inhalten zu suchen. Dies ist gewährleistet, so lange keine Artikel im Warenkorb sind, da die Suchbox oben rechts sichtbar ist. Beim Warenkorb verhält es sich ähnlich. Er wird im oberen Teil der Webseite gesucht und dort angezeigt, wenn Artikel dort abgelegt wurden.
...
[CMS:} ELSE {]
<table width="200" border="0" cellspacing="0" cellpadding="1" style="border:1px solid white; font-size:10pt;color:white;font-weight:bold;font-family: Verdana, Arial, Helvetica, sans-serif;">
<tr>
<td colspan=2 align="center">Volltextsuche</td>
</tr><tr>
<FORM action="index.php" method="post" name="suche">
<INPUT type=hidden value="900f9c7264081e1d5a04625f01d7fe2c" name="id">
<td align="center"><div class="gboxtitle">
<INPUT type=text size=25 name=searchquery value="[POST:searchquery]" class="suche" style="font-size:9pt;">
</div></td>
<td align="center"><a href="javascript:document.suche.submit();" style="color : white; font-size:7pt;">finden</a></td></tr>
</form>
</table>
[CMS:}] </DIV>
- Hier wird das zuvor beschriebene Suchformular angezeigt.
Wurde ein Suchbegriff eingegeben, wird diese in der Suchbox mit [POST:searchquery] wieder angezeigt.
...
[CMS: if ($THISID != "0e21e69953466ebdef8e06c315b07961") {]
<DIV ID="BANNER"> <a href="http://www.dotcommedia.de" target="_blank"><img border="0" src="http://www.dotcommedia.de/Bilder/anzeige.gif" alt="www.dotcommedia.de - Professionell und zielgerichtet Werben!" width="10" height="60"></a><a href=sponsorlink target="_blank"><img border="0" src="http://adserver.dotcommedia.de/cgi-bin/dotcommedia.pl?banner=sruttloff" alt="www.dotcommedia.de - Professionell und zielgerichtet Werben!" width="468" height="60">
</DIV>
[CMS:}]
- Um auch Werbebanner auf der Seite unterzubringen, wurde ein Layer geschaffen der ein Banner im mittleren oberen Teil der Seite anzeigt. Jedoch sollte das Banner nicht auf der ersten Seite erscheinen, die die Besucher sehen. Aus diesem Grund wurde mit einem If abgefragt, ob der Artikel die Startseite ist. Wenn ja, wird der HTML Code nicht ausgegeben und es ist kein Banner zu sehen. Andernfalls, ist das Banner sichtbar.
...
[MENU_LOWER_THREAD] [/MENU_LOWER_THREAD] [MENU_UPPER_THREAD] [/MENU_UPPER_THREAD]
- Um zu verhindern, das Upper- und Lowerthreads mit in das Menü einfliessen, wurden die Blöcke aufgeführt und nur mit einem Leerzeichen gefüllt. Somit stören diese nicht mehr und machen sich nur als Space bemerkbar.
[MENU_ARTICLES]
<tr>
<td class="slidemenurow" onMouseOver="clearTimeout(delayhide); overit (this);" onMouseOut="slideclean(this);" onClick="location='[LINK:[ID]]'">[NOPARSE:LINKTEXT]<img src="templateimage/none.gif" class="dummypic"></td>
</tr>
[/MENU_ARTICLES]
- Das eigentliche Menü wird hier erzeugt. Jeder Eintrag im Menü läuft hier durch und ersetzt die entsprechenden Platzhalter. [Linktext] zum Beispiel präsentiert den Linktext eines Artikels. [NOPARSE:LINK:[NOPARSE:ID]] erzeugt einen gültigen Link auf den Artikel.
Die so erstellte Navigation wird nun mit den SHOW INCLUDE Anweisungen an den entsprechenden Stellen im Template angezeigt.
Autor: S.Ruttloff, 22.01.2004