Aufbau von Templates

CELLstudio lässt eine große Freiheit in der Organisation eines Templates. Eine wesentliches Konzept dabei ist die Möglichkeit, Templates in Layout und Stil aufzuspalten. Die Trennung fungiert als Multiplikator für viele Darstellungsvarianten von Seiten. Es ist aber nicht erforderlich dieses zweischichtige Modell zu verwenden. Layout und Stil können einer Seite separat zugweisen und bei bestehenden Inhalt geändert werden.

Layout und Stil werden separat vom Webdesigner definiert und liegen im Verzeichnissystem als separate Ordner vor. Die Aufspaltung ist aber nicht erforderlich, d.h. ein Layoutordner muss, und ein Stilordner muss nicht existieren. Der Stilordner wird nicht durch das Framework sondern zur das Layout eingebunden. Das Framework bieltet aber dem Webautor eine Möglichkeit, den Stilordner für einen Seitembaum auszuwählen. Der Webdesigner muss aber dafür sorgen, dass das Layout den Stilordner einbindet und swählbare Layouts und Stile kompatibel sind.

Stile können in Sonderfällen auch HTML-Ressourcen enthalten. Mit Umschalten des Stiles können in der Seite damit CSS-, Bild- und HTML-Ressourcen ausgetauscht werden.

C = CSS-Dateien

Durch CSS-Dateien wird das generelle Erscheinungsbild der Seite definiert, jedoch nicht deren Inhalte. Dazu gehören Layout (Positionen, Abstände), Abgrenzungslinien, Hintergrundgrafiken, Hintergrundfarben, Farben, Schriftarten- und größen, Aufzählungszeichen, Tabellengitter. Die Einbindung erfolgt durch das link-Tag:

< link rel="stylesheet" type="text/css" href="...">

I = Image-Dateien

Mit Bilddateien werden zumeist Hintergründe von Komponenten bestimmt. Dazu gehören Seitenhintergründe oder Zellenhintergründe, Popups, Menüs, Titelbilder, Aufzählungssymbole aber auch Schaltflächen von Registerkarten oder Funktionslinks oder hervorzuhebene Informationen. Die Einbindung erfolgt in CSS-Dateien:

background-image: url('border_bottom.png');
background-repeat: no-repeat; 
background-position: bottom;

Durch Bilddateien werden in Sonderfällen Bilder per HTML eingebunden die unabhängig von CSS-Dateien sein sollen und insbesondere bei Abschaltung von CSS sichtbar oder gedruckt werden sollen (CSS-Hintergrundgrafiken werden standardmäßig nicht gedruckt). Die Einbindung erfolgt durch das img-Tag:

< img src="...">

HTML-Dateien

Durch HTML-Dateien werden die Inhalte der Randbereiche definiert. HTML-Dateien können auch PHP-Codes und somit dynamische Inhalte enthalten. Damit werden z.B. der Modus von Navigationsleisten (oberste Ebene, Kopfebene, untergeordnete Ebene), individuelle Inhalte oder Plugins gesteuert. Die Einbindung erfolgt serverseitig durch PHP-Anweisungen, z.B.:

include($g_page->layoutDir."appl.start.htm");

Layoutordner

Folgende HTML-Dateien müssen/können durch ein Layout bereitgestellt werden:

• screen.htm
• appl.start.htm: Ausgabe des oberen und linken Randbereiches, Seiteninformationen (Title, Menüs)
• appl.finisch.htm: Ausgabe des rechten und unteren Randbereiches, nach dem Inhalt folgende Seiteninformationen (Servicelinks, Autoremangabe o.ä.)
• head.htm dient im Wesentlichen der Definition des HTML < head>. Dazu gehören neben der
• Festlegung von Metainformationen (Viewport, Zeichensatz, Sprache, Angaben zum Verantwörtlichen, Angaben für Suchmaschinen)
• die Einbindung von CSS- und JS-Ressourcen,
• Aktivierung von Stilen,
• Ausgabe von JS-Codes.
• Festlegung des Satzspiegels, Erzeugung von Komponenten.
• load.htm (optional) wird vor Beginn der HTML-Ausgabe eingebunden. In dieser Datei können insbesondere header-Anweisungen ausgegeben werden (Umleitungen, Erzeugen von Cookies). Die Einbindung erfolgt vor Ausgabe von HTML an den Browser. Komponenten werden hier erzeugt und eventuelle Postbacks von Komponenten verarbeitet.
• comp.htm (optional) Auslagerung von Komponenten bei Realisierung einer dynamischen Website.
• book.htm (optional) Diese Datei dient der Buchausgabe (Ausgabe mehrerer CMS-Seiten in einem Dokument). Die genaue Bezeichnung ist nicht festgelegt, da die Einbindung einer Buchausgabe vom Layout selkbst erfolgen muss. Die Buchausgabe wird häufig mit der PDF-Ausgabe von Seiten verwendet.

Stilordner

Für Stilordner gibt es bis auf styles.css keine zwingenden Vorgaben für Dateien. Stilordner sind in der Regel von einem oder mehreren zusammengehörigen Layouts abhängig und werden ausschließlich durch das Layout eingebunden. Ein Stilordner kann durch den Webautor unter Seite - Eigenschaften gewählt werden. Damit Stile umgeschalten werden können, sollten sie die gleichen Datekonventionen verwenden.

• styles.css: enthält CSS Informationen, die sie mit dem Stil ändern sollen, dient der Erkennung eines Stilordners.
• Bilddateien: durch CSS-Dateien referenzierte Hintergrundgrafiken
• HTML-Module können auch durch einen Stil bereitgestellt werden und vom Layout eingebunden werden. Durch die Stilumschaltung können diese HTML-Module eingebunden und umgeschalten werden.

Die Erstellung von Templates erfolgt über die Erstellung von Dateistrukturen im custom-Pfad php/custom/. Template bestehen aus einem Layout und Stilen (optional). Layouts und Stilen werden als Ordner ausgeliefert.

Bei der Erstellung müssen bestimmte Namenskonventionen eingehalten werden. Die Erkennung von Layouts und Stilen erfolgt jeweils anhand der Dateien screen.htm (Layoutordner) und styles.css (Stilordner).

Der Namen des Layouts bzw. des Stiles wird aus dem Ordnerpfaden gebildet. Layout und Stil können den gleichen Pfad ausweisen. Üblicherweise werden Layoutordner unterhalb php/custom/layouts/ bzw. Stilordner unter php/custom/styles angelegt. Daneben ist es möglich, Layoutordner und Stilordner unterhalb eines kundenspzifischen Ordners anzulegen. Folgende Aufzählung zeigt einige Varianten:

1. php/custom/layouts/customer1
2. php/custom/styles/customer1
3. php/custom/customer1/template
4. php/custom/customer1/layout
5. php/custom/customer1/style
6. php/custom/customer1/layout23 (falls customer1 mehrere layouts beinhalten soll)

Sofern letzte Variante verwendet wird, müssen Unterordner systemweit eindeutig sein. Dies gilt nicht für template, layout oder style, in diesen Fällen müssen die Überordner eindeutig sein. Bei Wiederholungen wird jeweils nur der erste Ordner erkannt.