Nur in seltenen Fällen ist ein guter Programmierer auch ein guter Webdesigner, daher wird das Layout typischerweise von einem Spezialisten erstellt und als HTML-Vorlage dem Entwickler übergeben. Dabei steht zu hoffen, dass der Designer nicht nur Photoshop kennt, sondern auch mit Begriffen wie etwa dem barrierefreien Design etwas anfangen kann. Denn je besser die Qualität der Vorlage, desto weniger Arbeit fällt für die Umsetzung an. Als TYPO3-Entwickler erhalten Sie also eine HTML-Vorlage, die es in TYPO3 zu integrieren gilt, und die etwa so aussehen könnte:

Um daraus ein vollwertiges TYPO3-Template zu machen, stehen mehrere Wege offen. Welcher der einfachste oder auf Dauer sinnvollste ist, hängt sehr von der Aufgabenverteilung im Unternehmen sowie dem Einsatzzweck des Webauftritts ab.

Die statische Variante

Der wohl kürzeste Weg von der HTML-Vorlage zum TYPO3-Template ist reine Handarbeit. Der Entwickler nimmt sich dabei die HTML-Datei vor und versieht sie an den richtigen Stellen mit TYPO3-spezifische Platzhaltern. TYPO3 kennt zwei Arten von Platzhaltern im Template – Marker und Subparts. Ein Marker kennzeichnet eine Stelle, an der TYPO3-Inhalte eingefügt werden sollen.

Ein Beispiel: Aus dem Quelltext

Copyright 2008

wird

###COPYRIGHT###

Bei der Ausgabe wird dieser Marker durch Inhalt aus dem Content Management System ersetzt.

Ein Subpart kennzeichnet dagegen einen größeren Bereich im Quelltext, der ersetzt werden soll. Dazu werden eine Anfangs- und eine Endmarkierung gesetzt. Der gesamte Text zwischen den Markierungen sowie die Markierungen selbst werden bei der Ausgabe komplett gegen den Inhalt aus TYPO3 ausgetauscht.

Beispiel:

Startseite
Produkte
Impressum

wird nach der Bearbeitung zu

Startseite
Produkte
Impressum

Die Zusätze „Beginn“ und „Ende“ dürfen Sie weglassen (streng genommen auch die Kommentarzeichen), allerdings erhöht eine solche zusätzliche Markierung die Übersichtlichkeit.

Subparts sind einfachen Markern in einem wesentlichen Punkt überlegen: Zwischen ihrem Anfang und ihrem Ende darf normaler HTML-Text stehen, und die Markierung selbst ist in der hier verwendeten Schreibweise für HTML nur ein Kommentar. Das erleichtert das Arbeiten mit der HTML-Vorlage erheblich, weil die einzelnen Bereiche der Seite mit sinnvollen Inhalten dargestellt werden. Das so bearbeitete Template vermittelt daher immer noch einen realistischen Eindruck vom Aussehen der Website, wenn es in einem HTML-Editor oder im Browser betrachtet wird.

Wie oben erwähnt, ist diese Methode relativ schnell, und der Entwickler hat maximale Kontrolle über die Platzierung und Bezeichnung der Marker. Daher eignet sie sich sehr gut für die schnelle Umsetzung einfacher Layouts.

Dieser Text ist dem Buch “TYPO3 - Das Praxisbuch für Entwickler” von Robert Steindl entnommen, das im Franzis-Verlag erschienen ist. Das Buch ist hier direkt bestellbar.