Sie sehen die druckbare Version der Seite: Tutorial -> Für Fortgeschrittene

Tutorial

Experimente II für Fortgeschrittene: das Template ändern

In diesem dritten Teil des Tutorials geht es um Aenderungen des Template-Files zulu_template.html. Dieses File, falls nicht schon andersweitig erwähnt, enthält Style- und Formattierungs-Informationen, welche für die Generierung oder Assemblierung der Zulu-Seiten benutzt werden. Das Template-File enthält aber auch Text, welcher auf jeder der von Zulu generierten Seiten dargestellt wird. Beispiele sind der Titelbalken des ZuluFensters, die Zeilen mit den ©-Einträgen u.s.w. Text kann praktisch in beliebig jeden Teil der Zulu-Seiten platziert werden, wie auch in das 'normale' Zulu-Fenster. Die Text-Box der minimalen Zulu-Site ist ein Beispiel.

Die folgenden, einfachen, Uebungen sind nur ein Mittel zum Zweck, dem Benutzer das Template-File näher zu bringen und zu zeigen, dass die Template-Hexerei schlussendlich beherschbar ist.

NB:
Einige Detailkentnisse bezüglich der Architektur des Templates sind nützlich, um die Aenderungen auszuführen: der aufmerksame Leser von zulu_template.html wird bald feststellen, dass eine Tabelle enthalten ist, eine Tabelle mit drei Kolonnen und vier Zeilen, wobei das 'normale' Zulu-Fenster, wo die eigentlichen Seiten dargestellt werden, in der dritten Zelle der zweit-letzten Zeile ist. - Um die Tabellenstruktur des Templates zu veranschaulichen, benutzt man am Besten einen HTML-Editor oder eine Funktion wie Outline Table Cell von Mozilla Firefox.

NB 2:
Hier noch einige Details um die Zusammenhänge besser erkennen zu können:
Das Konzept Template besteht nicht nur aus dem File zulu_template.html; ein Template kann auch Bilder auf der Web-Seite darstellen und auch auf externe Style-Sheets (CSS) verweisen - an Stelle von internen Style-Definitionen. Zusätzlich erlaubt Zulu auch vereinfachte Darstellungen für die Druckerausgabe; dazu wird ein zweites Template-File benutzt: zulu_template_print.html
Zusammenfassend enthält das Konzept Template folgende Teile oder Komponenten:

zulu_template.html: Beschreibung der Seiten-Ansicht
zulu_template_print.html: Beschreibung der Drucker-Ansicht
Bilder o.ä., welche z.B. im Titelbalken dargestellt werden
evtl. externe Style-Sheets, je eines für die normale und für die Drucker-Ansicht. Dazu muss das Template-File im <head>-Teil einen Link wie folgt enthalten:
<link href="xsummit.css" type="text/css" rel="stylesheet">
eventuell ein Readme.txt, welches das Template dokumentieren sollte!

Die Frage, ob diese zwei Nebenbemerkungen in einem Tutorial sich befinden sollen oder aber besser Teil der Referenz sein sollten, lassen wir unbeantwortet! - Wenden wir uns jetzt den Template-File-Uebungen zu:

Angezeigten Hilfe-Text und entsprechende Text-Box entfernen
In allen Seiten der Test-Site ist eine Text-Box dargestellt, welche mit folgendem Satz endet: "Löschen Sie bitte diesen Box aus ...". - Da sie nicht in den einzelnen index.zulu_content.html Files enthalten ist, kann sie nur noch im Template-File definiert sein! - Führen Sie diese Aenderung so aus, dass nur noch der Titel und "Hier Text einfügen..." angezeigt werden.
Haupttitel ändern und ein Logo einfügen
Der Titelbalken der Test-Site enthält das Zulu-Logo; in unserer Site möchten wir gerne auch ein Logo, zusätzlich aber auch Text darstellen. - Für das Logo, wählen Sie ein grosses aus, um die width und height Attribute benützen zu müssen, um das Ueberborden des Logos aus der Tabellen-Zelle in den Griff zu bekommen.
Ein Logo in die linke obere Ecke setzen
Dies ist eine Variation der obigen Aufgabe, nur dass das Logo schlussendlich anderswo auf der Zulu-Seite zu stehen kommen soll.
Ein Short-cut Icon vor die URL setzen
Häufig sieht man ein kleines Icon vor der URL des Browsers platziert, so zum Beispiel das Zürcher Kantons-Wappen vor http://www.tagi.ch. Es handelt sich um Favicons. Sie wurden das erste Mal 1998 beobachtet, unterdessen wird die Datei favicon.ico von nahezu allen Browsern unterstützt. Für mehr Informationen sowie die verschiedenen Möglichkeiten, ein Favicon vor die URL zu setzen, ist der Leser auf http://favicon.de oder besser noch auf http://en.wikipedia.org/wiki/Favicon verwiesen.
Ein Template durch ein anderes ersetzen
Hier geht es um den Austausch eines kompletten Templates, in Sinne von NB2 weiter oben. Dazu müssen alle Teile oder Komponenten des Templates (Bilder, Style-Sheets, Template-Files, etc.) zugänglich sein. Die Idee ist, diese in ein Zip-File zu verpacken, um so das Template in einem File speichern zu können und dem entsprechend das Laden zu vereinfachen.
Da wir uns im Tutorial für Fortgeschrittene befinden, können wir uns ruhig interessante Fragen stellen, wie zum Beispiel:
- Wie sind die verschiedenen Teile eines Templates untereinander verknüpft, das heisst, wie 'weiss' ein Template, dass ein Bild dazu gehört oder ein externes Style-Sheet Teil des Templates ist?
Die Frage ist relativ einfach zu beantworten:
- Das XL-File zulu_structure.xls enthält einen Link - oder Verweis - auf das Template-File: das Feld "Template:" enthält z.B. folgenden Eintrag: zulu_template. Abhängig von der Definition des Tags Printextension, entstehen daraus üblicherweise die Filenamen zulu_template.html und zulu_template_print.html.
- Die Template-Files enthalten ihrerseits Verweise auf externe Style-Sheets und Bilder.
Die Verweise zwischen den verschiedenen Teilen eines Template sollten klar sein, hingegen 'weiss' das Template nicht, was dazu gehöre: der Benutzer oder Anwender ist selber verantwortlich, dass das Zip-File alle benötigten Teile enthält!

Hier finden sie verschiedenste Zulu-Templates. Einige davon sind in ZIP-Files soweit vorbereitet, dass sie heruntergeladen werden können. Das ZIP-File enthält jeweils eine readme.txt-Datei, welches beschreibt, wie sie das Template ihrer Website auswechseln können.