5.4 Grundgerüst - Kopf- und Fußbereich

Dieser Abschnitt des Webdesign Tutorials setzt einige Unterkapitel voraus, die Sie zuvor gelesen haben sollten. Wichtig ist vor allem, dass Sie sich über die Wahl der Hilfsmittel informiert haben und die Webseite bereits in HTML und CSS umgesetzt wurde. Ebenso sollten Sie die PHP-Grundlagen, als auch den Abschnitt über Template Engines gelesen haben.

Ordnerstruktur

Zunächst sollten Sie sich die Ordnerstruktur für Ihr Projekt überlegen. Abbildung 1 zeigt den Aufbau, für den ich mich entschieden habe. Legen Sie dafür zunächst einen entsprechenden Projektordner in den htdocs-Ordner in Ihrem XAMPP-Verzeichnis an.
Im Ordner tbs liegt die TinyButStrong-Klasse, also die Datei tbs_class_php5.php. In den Unterordner plugins können Sie die bei TinyButStrong mitgelieferten Plugins kopieren, wobei diese für das Tutorial vorerst nicht relevant sind. Im Ordner design werden alle Grafiken gespeichert, die für das Design der Webseite relevant sind.

Zusätzlich verwende ich meist einen images-Ordner, in dem Grafiken liegen, die zwar auf der Seite dargestellt, aber nicht zum Design selbst gehören.
Wie Sie die Unterseiten abspeichern, ob in einem Unterordner, in mehreren Unterordnern oder auf der obersten Ebene, bleibt selbstverständlich Ihnen überlassen. Was Sie aber auf jeden Fall zunächst anlegen sollten zeigt Abbildung 2.

Generell empfehle ich Ihnen, den Basisordner so aufgeräumt wie möglich zu halten und alle weiteren Unterseiten in separaten Ordnern zu speichern. Die Gruppierung sollte dabei größenabhängig sein. Ein komplettes Shopsystem mit mehreren Dateien würde ich in einem separaten Ordner shop speichern, das Impressum könnte jedoch auch mit weiteren kleinen Unterseiten in einem Ordner zusammengefasst werden.

Kopfbereich

Zunächst zeige ich Ihnen, wie Sie den Kopfbereich (engl. header) der Seite umsetzen können. Dieser soll anschließend auf jeglichen Unterseiten eingebunden werden, so dass sich eine Änderung daran umgehend auf alle Unterseiten Ihrer Webpräsenz auswirkt. Öffnen Sie dazu die zwei zuvor angelegten Dateien overall_header.php und overall_header.tpl.

PHP

Übernehmen Sie zunächst den folgenden Quellcode 1 in Ihre overall_header.php. Diese Datei wird auf allen Unterseiten geladen, so dass Sie hier Code ausführen sollten, die Sie auch wirklich immer benötigen.

Zunächst setze ich in den Zeilen 2 bis 4 ein paar Variablen, die ich stets benötige um mir Schreibarbeit zu sparen und später was die Wahl der Domain angeht flexibel zu bleiben. Laden Sie die Dateien nach der Fertigstellung der Webseite auf Ihren Webserver hoch, so müssen Sie lediglich einmalig diese Variablen anpassen.
In Zeile 6 wird die TinyButStrong-Klasse durch den include_once-Befehl eingebunden und ausgewerter. Das heißt, dass Sie anschließend auf diese Klasse zurückgreifen können, was ich Zeile 7 durch die Erzeugung einer neuen Instanz namens $TBS vom Typ TinyButStrong getan habe.

Template

In der Datei overall_header.tpl wird der HTML-Code gespeichert, der für jede Unterseite benötigt wird. Dies ist zum Beispiel der Banner oder die Navigationsleiste. Quellcode 2 zeigt den vollständigen Inhalt der Datei.

Generell entspricht dieser Quellcode dem, den Sie bereits bei der Umsetzung entwickelt haben. Es gibt jedoch zwei Ausnahmen und das sind die Templatevariablen und die Tatsache, dass der Quellcode nicht vollständig, sondern lediglich bis zum Beginn des content-Containers (Zeile 58) verwendet wird. Somit können Sie dieses Template wiederverwenden und müssen lediglich das, was im content-Container enthalten ist neu schreiben.
Nun müssen Sie lediglich verstehen, was es mit den Templatevariablen auf sich hat. Schauen Sie sich dazu Zeile 7 in Quellcode 2 an. Das Konstrukt http://www.webdesign-tutorial.net sorgt dafür, dass an dieser Stelle der Wert der Variable $domain aus dem PHP-Code eingesetzt wird. Dies gilt ebenso für die beiden Templatevariablen in Zeile 4 und 6, wobei diese erst in der eigentlichen Unterseite erzeugt werden. Dies hat den Vorteil, dass Sie jeder Unterseite einen eigenen Titel und eine eigene Beschreibung geben können. Generell gilt jedoch: Zu jeder Templatevariable muss eine Variable im PHP-Quellcode existieren! Da dieses Template jedoch in einer anderen Datei eingebunden werden soll, kann der Variablenwert auch dort gesetzt werden.
Ebenfalls neu für Sie dürften Konstrukte wie in Zeile 22 sein. Über onload wird die Datei, die hinter file= angegeben wird, beim laden der Seite eingefügt. Ich habe mir für die 6 Unternavigationen verschiedene Templates angelegt und im Ordner subnavi abgespeichert. In diesen Dateien können Sie den HTML-Code der Unternavigationen auslagern, so dass das Haupt-Template übersichtlich bleibt.

Fußbereich

Nachdem Sie den Kopfbereich definiert haben, benötigen Sie um die Seite korrekt abzuschließen noch einen Fußbereich.

PHP

In der Datei overall_footer.php können Sie Quellcode unterbringen, der zu guter Letzt ausgeführt werden soll. In meinem Beispiel in Quellcode 3 prüfe ich, ob die Variable $title gefüllt wurde und falls ja, hänge ich dem Seitentitel den String - Webdesign Tutorial an, so dass dieser auf jeder Seite im Titel steht. Wurde kein Titel gesetzt, so wird dieser String ohne Minuszeichen gesetzt. Dies ist zum Beispiel auf der Startseite der Fall.

Template

Das Template overall_footer.tpl in Quellcode 4 enthält den abschließenden HTML-Code, der unter dem Inhaltsbereich platziert werden soll. Zeile 2 ist zum Beispiel der content-Container, der an dieser Stelle wieder geschlossen werden muss.