Tag: template

TYPO3 Template-Datensatz des Auftritts „Main Template“

Constants:
plugin.alt.print.file.stylesheet = fileadmin/template/css/ne_print.css
plugin.alt.print.file.template = fileadmin/template/print_template.html
PAGE_TARGET =

Setup:
# DOCTYPE auf XHTML 1.0 Strict setzen, für den IE wird die XML-Angabe umgedreht
config.doctype = xhtml_strict
config.doctypeSwitch = true
config.xhtml_cleaning = all
config.htmlTag_langKey = de

# Konfiguration des Auto-Parser fuer Haupt-Template:
plugin.tx_automaketemplate_pi1 {

# Die Designvorlage wird eingelesen:
content = FILE
content.file = fileadmin/template/main_template.html

# Hier werden die Elemente im HTML definiert
# welche von subpart-Comments umgeben werden sollen:

elements {
BODY.all = 1
BODY.all.subpartMarker = DOCUMENT_BODY

HEAD.all = 1
HEAD.all.subpartMarker = DOCUMENT_HEADER
HEAD.rmTagSections = title

DIV.all = 1
}

# Alle relativen Pfadangaben soll diese Prefix vorangestellt werden:
relPathPrefix = fileadmin/template/
}

# Hauptnavigation s-Menu 1 cObject - vom Typ HMENU
temp.menu_main = HMENU

# Erste Ebene Menu-Object, textuell
temp.menu_main.1 = TMENU
temp.menu_main.1 {

# Normal-Zustand Eigenschaften
NO.allWrap = <div class="mainnavi-level1-no"> | </div>
NO.stdWrap.htmlSpecialChars = 1
}

# Zweite Ebene Menu-Object, textuell
temp.menu_main.2 = TMENU
temp.menu_main.2 {

# Normal-Zustand Eigenschaften
NO.allWrap = <div class="mainnavi-level2-no"> | </div>
NO.stdWrap.htmlSpecialChars = 1

# Aktiven Zustand aktivieren und Eigenschaften setzen
ACT = 1
ACT.allWrap = <div class="mainnavi-level2-act"> | </div>
ACT.stdWrap.htmlSpecialChars = 1
}

temp.menu_main.3 = TMENU
temp.menu_main.3 {

# Normal-Zustand Eigenschaften
NO.allWrap = <div class="mainnavi-level3-no"> | </div>
NO.stdWrap.htmlSpecialChars = 1

# Aktiven Zustand aktivieren und Eigenschaften setzen
ACT = 1
ACT.allWrap = <div class="mainnavi-level3-act"> | </div>
ACT.stdWrap.htmlSpecialChars = 1
}

# Metanavigation im KOPF
temp.menu_meta = HMENU
temp.menu_meta.special = list
temp.menu_meta.special.value = 38, 37, 36, 35
temp.menu_meta.1 = TMENU
temp.menu_meta.1.NO {
before = &nbsp;
after = &nbsp; | |*| &nbsp; | |*| &nbsp;
allWrap = <span class="metanavi-no"> | </span>
stdWrap.htmlSpecialChars = 1
}

# Metanavigation im FOOTER
temp.menu_footer = HMENU
temp.menu_footer.special = list
temp.menu_footer.special.value < temp.menu_meta.special.value
temp.menu_footer.wrap = &copy; nordEnergie AG 2005&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|
temp.menu_footer.1 = TMENU
temp.menu_footer.1.NO {
after = | |*| | |*| &nbsp;
allWrap = <span class="metanavi-no"> | </span>
stdWrap.htmlSpecialChars = 1
}

# Locator-Funktion (Pfadanzeige, rootline)
temp.locator = HMENU
temp.locator {
special = rootline
special.range = 0 | -1
wrap = Sie befinden sich hier:&nbsp;|
1 = TMENU
1 {
NO {
allWrap = | &nbsp;-&nbsp; |*| | &nbsp;-&nbsp; |*| |
stdWrap.htmlSpecialChars = 1
}
}
}

# Druckversion und "Nach Oben" - Link SETUP
temp.printversion = TEXT
temp.printversion.data = TSFE : id
temp.printversion.wrap = <a href="#nach_oben"><img src="fileadmin/template/img/
icon_top.gif" width="11" height="11"> nach oben</a>&nbsp;&nbsp;&nbsp;<a href="index.php?id=|&type=98"><img src="fileadmin/template/img/ i-con_druckversion.gif" width="12" height="11"> Druckversion</a>

# Konfiguration der Print-Version
alt_print >
alt_print = PAGE
alt_print.typeNum=98
alt_print.stylesheet = {$plugin.alt.print.file.stylesheet}

alt_print.10 = TEMPLATE
alt_print.10 {
template = FILE
template.file = {$plugin.alt.print.file.template}

subparts {
content < styles.content.get
}
workOnSubpart = DOCUMENT_BODY
}

# Main TEMPLATE cObject für den BODY
temp.mainTemplate = TEMPLATE
temp.mainTemplate {

# Das Template cObject referenziert den Inhalt des Auto-Parsers
template =< plugin.tx_automaketemplate_pi1

# Nur der Inhalt zwischen den <body>-TAGS der Vorlage wird beachtet
workOnSubpart = DOCUMENT_BODY

# Ersetze den ###mainnavi### subpart mit der dynamischen Hauptnavigation
subparts.mainnavi < temp.menu_main

# Ersetze den ###headerimage### subpart mit dem Bild aus der Spalte LINKS
subparts.headerimage < styles.content.getLeft

# Ersetze den ###content### subpart mit dem Inhalt der Spalte NORMAL
subparts.content < styles.content.get

# Ersetze den ###locator### subpart mit der Pfadanzeige
subparts.locator < temp.locator

# Ersetze den ###metanavi### subpart mit der Metanavigation für den Seitenkopf
subparts.metanavi < temp.menu_meta

# Ersetze den ###footer### subpart mit der Metanavigation für die Fußzeile
subparts.footer < temp.menu_footer

# Ersetze den ###lightblue_bottom_border### subparts mit den Links Print & Oben
subparts.lightblue_bottom_border < temp.printversion
}

# Head TEMPLATE cObject für den HEAD
temp.headTemplate = TEMPLATE
temp.headTemplate {
# Das Template cObject referenziert den Inhalt des Auto-Parsers
template =< plugin.tx_automaketemplate_pi1
# Nur der Inhalt zwischen den <head>-TAGS der Vorlage wird beachtet
workOnSubpart = DOCUMENT_HEADER
}

# Standard PAGE object
page = PAGE
page.typeNum = 0
# <body>-TAG wird ohne jegliche Angaben gelassen
page.bodyTag = <body>
page.config.language = de
page.config.locale_all = de_DE

# Kopiere den Inhalt aus mainTemplate für den <body-Bereich in die Seite
page.10 < temp.mainTemplate
# Kopiere den Inhalt aus headTemplate fü;r den <head>-Bereich in den HEAD
page.headerData.10 < temp.headTemplate

XHTML-Designvorlage der Print-Version

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">

<head>
<title>nordEnergie AG</title>
</head>

<body>
<!-- ###DOCUMENT_BODY### begin The content between these subpart markers goes right into the body section of the ## webpage when displayed: -->
<img src="fileadmin/template/img/logo_ne.gif" alt="" border="" />
<hr />
<div id="content"><!-- ###content### --> <!-- ###content### --></div>
<hr />
<div id="footer">&copy; nordEnergie AG 2005&nbsp;www.nordEnergieAG.de</div>
<!-- ###DOCUMENT_BODY### end>
</body>

</html>

XHTML-Designvorlage der TYPO3 Präsenz


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">

<head>
<title>nordEnergie AG</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="css/ne_01.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div><a name="nach_oben"></a></div>
<div class="border_top"></div>

<div class="border_middle"> <!-- ANFANG border_middle -->


<!-- ANFANG Head -->
<div id="head">

<div id="head-logo"><img src="img/logo_ne.gif" alt="Logo nordEnergie" /></div>
<div id="head-slogan">Energie und Meer</div>
<div id="metanavi"> </div>

</div>
<!-- ENDE Head -->

<!-- ANFANG main -->
<div id="main">

<div id="main_top">
<div class="lightblue_top_container"> </div>
<div class="lightblue_top_border">Wir machen Bremerhaven zur
Solarstadt des Nordens. Machen sie mit, profitieren sie mit!
</div>
</div>

<!-- ANFANG container_navigation -->
<div id="container_navigation">
<div id="mainnavi"> </div>
</div>
<!-- ENDE container_navigation -->

<!-- ANFANG container_content -->
<div id="container_content">

<div id="headerimage"> </div>

<div id="main_content">
<div id="locator"> </div>
<div id="hr"> </div>
<div id="content"> </div>
</div>
</div>
<!-- ENDE container_content -->

<div id="main_bottom">
<div class="lightblue_bottom_container"> </div>
<div class="lightblue_bottom_border"> </div>
</div>


</div>
<!-- ENDE main -->

<div class="footer"> </div>

</div>
<!-- ENDE border_middle -->

<div class="border_bottom"></div>

</body>
</html>

Erstellen der Designvorlage

Als Designvorlage kann eine normale HTML- bzw. XHTML-Seite dienen. TYPO3 verwendet dann diese ohne spezielle Präparationen versehene Vorlage, um nach ihrer Gestaltung die kompletten Seiten für das Frontend dynamisch zu generieren. Das manuelle Erstellen von Webseiten wird dadurch überflüssig und komplett durch das System abgewickelt. Dabei werden zuvor definierte Bereiche in der Vorlage mit Inhalten aus den Zellen der zu Grunde liegenden Datenbank passend ersetzt.

Als Format für die Vorlagendatei wird XHTML gewählt. Außerdem soll der Aufbau des Layouts komplett tabellenlos durch Einsatz von entsprechenden CSS-Definitionen angelegt werden.

Der exakte Doctype der Seiten wird „XHTML 1.0 Strict“ lauten, wobei es sich um eine offi-zielle Empfehlung des W3-Konsortiums handelt, die nach und nach den letzten veröffentlichten HTML 4.01-Standard ersetzen wird. XHTML ist XML-kompatibel und wurde im Januar 2000 definiert. Der Hintergedanke bei XHTML ist, dass durch Standardisierung eine medienneutrale Beschreibung von Dokumenten ermöglicht wird. So könnten XML-basierende Formate bspw. für das Web, für den Printbereich oder für mobile Endgeräte verwendet werden. Der Inhalt ist im Idealfall unabhängig vom Ausgabemedium.

Außerdem sind in XHTML definierte Internetseiten schlanker, werden schneller geladen, strukturell flexibler änderbar und bedeuten einen großen Schritt in Richtung barrierefreies Internet. Zusätzlich unterstützt werden diese Vorteile durch den Einsatz von Cascading Style Sheets und den Verzicht auf HTML-Tabellen als Mittel zur Definition des Layouts. Tabellen sind in ihrem Ursprung nicht für die Nutzung als Gestaltungsraster ausgelegt gewesen, um Internetseiten eine Struktur zu verleihen, sondern sollen als Hilfsmittel zur geordneten Darstellung von Textinformation eingesetzt werden. Die Verwendung als Gestaltungsmittel vermischt das Layout mit den Inhalten und vergrößert die Dateigröße der Seiten unnötig. Bei jedem Seitenaufruf müssen die Layoutinformationen neu geladen werden. Dies strapaziert die Bandbreite und erhöht die Ladezeiten. Ein Style Sheet mit den Angaben zum Aufbau wird lediglich einmal in den Browsercache zwischengespeichert und dann von dort aus geladen. Das reduziert das Datenvolumen merklich und führt langfristig betrachtet zu geringeren Kosten für das Webhosting. Das Einhalten moderner Webstandards bringt also, wie aus dieser Kurzbetrachtung hervorgeht, eine Vielzahl an Vorteilen mit sich.

Da das Stichwort Barrierefreiheit gefallen ist, soll in wenigen Worten der Hintergrund geklärt werden. Mit Barrierefreiheit wird der ungehinderte Zugang zu Informationen im World Wide Web besonders für körperlich eingeschränkte Internetuser bezeichnet. Im Bundesbehindertengleichstellungsgesetz (BGG) ist der exakte Begriff definiert, wobei hier der Paragraf 11 „Barrierefreie Informationstechnik“ besonders interessant ist. Die genauen Richtlinien sind in Deutschland in der „Barrierefreie Informationstechnik-Verordnung (BITV)“ festgelegt. Öffentliche Einrichtungen müssen bis spätestens Ende 2005 durch die „Verordnung zur Schaffung barrierefreier Informationstechnik nach dem BBG“ ihr Informationsangebot problemlos barrierefrei nutzbar machen. Durch die für die nordEnergie-Präsenz getroffenen technologischen Entscheidungen ist der Auftritt aus rein technischer Sicht für die Barrierefreiheit bereits optimal vorbereitet und entspricht modernsten Standards.

Der komplette Quellcode der für TYPO3 umgesetzten XHTML-Designvorlage samt Style Sheet kann im Anhang eingesehen werden. Das entwickelte Design- und Layoutkonzept wird übereinstimmend durch diese beiden Elemente abgebildet. Die Meta-Tags zur Suchmaschinen-Optimierung sind zu diesem Zeitpunkt uninteressant und werden nach späterer Definition eigenständig durch das CMS hinzugefügt.

Zusammensetzen aller Teilelemente in TYPO3

Alle erwähnten Elemente wurden bei der bisherigen Betrachtung in temporären Objekten abgelegt, die in dieser Form nirgends darstellbar sind. Es ist erforderlich, die einzelnen Teile an ihre zugewiesenen Positionen im Layout zu bringen, indem die dafür vorgesehenen Subparts des Templates mit Inhalt gefüllt werden. Den Abschluss bildet das Einfügen des Standard-PAGE-Objektes, welches die Template-Daten zugewiesen bekommt, und für die eigentliche Seitenanzeige zuständig ist.

Constants:

PAGE_TARGET =

Durch diese Konstantenzuweisung wird garantiert, dass alle seiteninternen Links von TYPO3 in demselben aktiven Fenster angezeigt werden.

Setup:

# Main TEMPLATE cObject für den BODY
temp.mainTemplate = TEMPLATE
temp.mainTemplate {

# Das Template cObject referenziert den Inhalt des Auto-Parsers
template =< plugin.tx_automaketemplate_pi1

# Nur der Inhalt zwischen den <body>-TAGS der Vorlage wird beachtet
workOnSubpart = DOCUMENT_BODY

# Ersetze den ###mainnavi### subpart mit der dynamischen Hauptnavigation
subparts.mainnavi < temp.menu_main

# Ersetze den ###headerimage### subpart mit dem Bild aus der Spalte LINKS
subparts.headerimage < styles.content.getLeft

# Ersetze den ###content### subpart mit dem Inhalt der Spalte NORMAL
subparts.content < styles.content.get

# Ersetze den ###locator### subpart mit der Pfadanzeige
subparts.locator < temp.locator

# Ersetze den ###metanavi### subpart mit der Metanavigation für den Seitenkopf
subparts.metanavi < temp.menu_meta

# Ersetze den ###footer### subpart mit der Metanavigation für die Fußzeile
subparts.footer < temp.menu_footer

# Ersetze den ###lightblue_bottom_border### subparts mit den Links Print & Oben
subparts.lightblue_bottom_border < temp.printversion
}

# Head TEMPLATE cObject für den HEAD
temp.headTemplate = TEMPLATE
temp.headTemplate {

# Das Template cObject referenziert den Inhalt des Auto-Parsers
template =< plugin.tx_automaketemplate_pi1

# Nur der Inhalt zwischen den <head>-TAGS der Vorlage wird beachtet
workOnSubpart = DOCUMENT_HEADER
}

# Standard PAGE object
page = PAGE
page.typeNum = 0
# <body>-TAG wird ohne jegliche Angaben gelassen
page.bodyTag = <body>
page.config.language = de
page.config.locale_all = de_DE

# Kopiere den Inhalt aus mainTemplate für den <body>-Bereich in die Seite
page.10 < temp.mainTemplate

# Kopiere den Inhalt aus headTemplate für den <head>-Bereich in den HEAD
page.headerData.10 < temp.headTemplate

Das TypoScript-Listing des abschließenden Setups, welches für das Zusammensetzen und die letztenendliche Generierung der Frontend-Seite zuständig ist, gestaltet sich auf den ersten Blick relativ umfangreich, ist jedoch schnell und einfach nachvollziehbar.
Ein neues TEMPLATE-Objekt mit der Bezeichnung „mainTemplate“ wird angelegt, welches den Inhalt des Auto-parsers, also die XHTML-Designvorlage, referenziert. Lediglich der Be-reich der Vorlage zwischen den Body-Tags wird berücksichtigt. Es wird anschließend begon-nen, die zuvor temporär gespeicherten Elemente (Navigation, Stimmungsbild, Content, Pfadanzeige etc.) in ihre vorgesehene Position (durch Subparts markiert) im Layout einzu-fügen. Derselbe Vorgang wird für den Head-Bereich ebenfalls durchgeführt. Um die Seite nun endgültig darstellbar zu gestalten, benötigt TYPO3 ein PAGE-Objekt, welches in diesem Setup die Bezeichnung „page“ erhält. Der Standardseitentyp wird zugewiesen (typeNum = 0) und der Body-Tag ohne weitere Auszeichnungen gesetzt (TYPO3 erzeugt sonst standard-mäßig eine Seite mit weißem Hintergrund). Die folgenden zwei Zeilen konfigurieren die deutsche Sprachversion des Auftritts. Anschließend wird der Inhalt aus der Variable „mainTemplate“ (die zuvor erschaffenen Seitenelemente) in den Datenteil des darzustel-lenden PAGE-Objektes kopiert. Die Header-Angaben aus „headTemplate“ werden in den Head-Bereich von „page“ eingefügt.

Das Template ist somit vollständig und kann die XHTML-Seite für die Frontend-Darstellung generieren. Alle dynamischen Bereiche wurden durch ihre entsprechenden Elemente substituiert und ergeben mit den statischen Teilen das Gesamterscheinungsbild.

Aufbau der Hauptnavigation

Der Aufbau der Navigation in TYPO3 ist simpel und schnell realisiert. Für das Erstellen der Hauptnavigation werden spezielle TypoScript-Objekte vom Typ HMENU und TMENU benö-tigt, die in TYPO3 für hierarchische, textbasierte Menüs verwendet werden. Grafische Navigationen oder Layermenüs wären ebenfalls durch das CMS nutzbar gewesen, sind für diese Art der Navigation jedoch überflüssig.

# Hauptnavigations-Menu 1 cObject - vom Typ HMENU
temp.menu_main = HMENU

# Erste Ebene Menu-Object, textuell
temp.menu_main.1 = TMENU
temp.menu_main.1 {

# Normal-Zustand Eigenschaften
NO.allWrap = <div class="mainnavi-level1-no"> | </div>
NO.stdWrap.htmlSpecialChars = 1
}

# Zweite Ebene Menu-Object, textuell
temp.menu_main.2 = TMENU
temp.menu_main.2 {

# Normal-Zustand Eigenschaften
NO.allWrap = <div class="mainnavi-level2-no"> | </div>
NO.stdWrap.htmlSpecialChars = 1

# Aktiven Zustand aktivieren und Eigenschaften setzen
ACT = 1
ACT.allWrap = <div class="mainnavi-level2-act"> | </div>
ACT.stdWrap.htmlSpecialChars = 1
}

temp.menu_main.3 = TMENU
temp.menu_main.3 {

# Normal-Zustand Eigenschaften
NO.allWrap = <div class="mainnavi-level3-no"> | </div>
NO.stdWrap.htmlSpecialChars = 1

# Aktiven Zustand aktivieren und Eigenschaften setzen
ACT = 1
ACT.allWrap = <div class="mainnavi-level3-act"> | </div>
ACT.stdWrap.htmlSpecialChars = 1
}

Erzeugt wird ein mit dem Titel „temp.menu_main“ (frei wählbar) versehenes HMENU-Objekt, welches für „Hierarchisches Menü“ steht und das grundlegende Basisobjekt aller TYPO3-Menüs ist. Für das neue Menüobjekt müssen nun seine Zustände und Ebenen definiert werden. Dafür werden den drei Ebenen drei neue Menü-Objekte von Typ TMENU zugewiesen (Textmenüs) und der jeweilige Normal-Zustand angegeben (abgekürzt mit NO). Zusätzlich kann ein aktives Aussehen, wenn der Menüpunkt aktuell ausgewählt ist, zur erhöhten Orientierung des Besuchers definiert werden (ACT), was für die zweite und dritte Ebene realisiert wurde.

Von dem generellen Prinzip her wird den verschiedenen Zuständen lediglich ein umschlie-ßender Div-Tag zugewiesen. So erhält bspw. der Normalzustand der ersten Ebene durch „allWrap“ die Div-Klasse „mainnavi-level1-no“. Für das Pipesymbol („|“) wird also der Menücode aus dem CMS eingefügt und von den in „allWrap“ stehenden Zeichen umgeben. Das genaue Aussehen dieses Eintrages ist im Style Sheet definiert. So funktioniert die Menüerstellung in allen Fällen. Die „htmlSpecialChars”-Funktion ist für die XHTML-Kompatibilität notwendig, falls Sonderzeichen im Textmenü verwendet werden.

Mit wenigen Zeilen TypoScript ist die gesamte, problemlos erweiterbare Hauptnavigation umgesetzt worden. Das Menü ist komplett dynamisch und bildet die Baumstruktur aus TY-PO3 ab. Wird eine neue Seite hinzugefügt, wird diese Veränderung automatisch in der Frontend-Darstellung eingepflegt. Das gesamte Menü ist in dem Eintrag temp.menu_main bereits angelegt und wird an späterer Stelle der Seite hinzugefügt.

Konfiguration des Template Auto-Parsers

Der Auto-Parser ist eine Extension, welche die XHTML-Designvorlage nach korrekter Konfiguration automatisch mit TYPO3-Markierungen zur Laufzeit versieht. So können vom Content Management System in die vorgesehenen Positionen, in diesem Fall durch „subparts“ markiert, die verschiedenartigen Inhalte dynamisch einfügt werden.

#Konfiguration des Auto-Parser fuer Haupt-Template:
plugin.tx_automaketemplate_pi1 {

  # Die Designvorlage wird eingelesen:
  content = FILE
  content.file = fileadmin/template/main_template.html

  # Hier werden die Elemente im der XHTML-Vorlage definiert
  # welche von subpart-Comments umgeben werden sollen:

  elements {
    BODY.all = 1
    BODY.all.subpartMarker = DOCUMENT_BODY

    HEAD.all = 1
    HEAD.all.subpartMarker = DOCUMENT_HEADER
    HEAD.rmTagSections = title

    DIV.all = 1
  }

  # Alle relativen Pfadangaben soll diese Prefix vorangestellt werden:
  relPathPrefix = fileadmin/template/
}

Zu Beginn ist es notwendig, die Designvorlage einzulesen (diese wurde zuvor samt Style Sheet über den Dateimanager an die angegebene Position gebracht). Hierfür wird die Variable „content“ mit dem FILE-Objekt belegt, damit eine Datei eingebunden werden kann . Anschließend erfolgt die Zuweisung der Designvorlage, die ab diesem Zeitpunkt dem System bekannt ist. Darauf folgend wird die Vorlage nach bestimmten Tags abgesucht und mit Subpart-Markern belegt. Zwischen dem öffnenden und schließenden Body-Tag der Vorlage soll der Subpart „DOCUMENT_BODY“ eingefügt werden. Analog dazu gilt dies für den Head-Tag. Außerdem wird der Title-Tag, welcher den Seitentitel beinhaltet, entfernt. Der Titel der jeweiligen Seite wird durch TYPO3 später dynamisch und passend ergänzt. Alle Div-Tags der Vorlage, an die ein Klassen- oder ID-Name vergeben wurde, werden ebenfalls mit gleichnamigen Subparts versehen. Durch diesen Umstand ist erreicht, dass jeder relevante Container des zu Grunde liegenden Layout über einen füllbaren Subpart-Marker verfügt, der durch dynamische Teile (Navigationen, Inhalte etc.) ergänzt werden kann . Die letzte Anweisung des Setups bewirkt, dass allen relativen Pfadangaben aus der Vorlage der Zusatz „fileadmin/template/“ vorangestellt wird. Dabei handelt es sich um das selbst gewählte Unterverzeichnis in dem alle Template-bezogenen Daten abgelegt sind. Es sind keine Pfadanpassungen in der Ausgangsvorlage nötig. TYPO3 kann diese Begebenheit vollkommen automatisch ohne weiteres Zutun des Users regeln.

Integration in TYPO3

Die hierarchische Baumstruktur wurde im CMS bereits vollständig abgebildet. Die Seiten sind jedoch noch komplett ohne Aussehen oder anderen Inhalt. Um diesen Zustand zu ändern, muss dem System die Designvorlage hinzugefügt und für die Seiten ein Template angelegt sowie zugewiesen werden. Das einheitliche Aussehen kann relativ simpel erreicht werden, indem man dem obersten Wurzeldatensatz (in diesem Beispiel „Startseite“) ein Template zuweist, welches automatisch allen untergeordneten Seiten vererbt wird. Das Hinzufügen der XHTML-Designvorlage inklusive Style Sheet erfolgt durch Upload in den „fileadmin-Ordner“ des CMS. In diesem Ordner können alle Dateien, die für den Internetauftritt benötigt werden, (in Unterordnern) abgelegt werden. Es handelt sich in anderen Worten um den Dateimanager von TYPO3.

Der klassische Weg bei der Seitenerstellung mit TYPO3 wäre, den Quelltext der Designvorlage mit verschiedenen TYPO3-Markern, so genannten „Marks“ und „Subparts“, zu versehen, welche dann aus dem CMS heraus angesprochen und mit Inhalten aus der Datenbank gefüllt werden können. Ein eleganterer und modernerer Lösungsansatz wird allerdings durch den Einsatz der zuvor erwähnten Extension „Template Auto-parser“ verfolgt. Eine spezielle Vorbereitung der Designvorlage ist nicht notwendig, da der Auto-Parser selbstständig die austauschbaren Markierungen („subparts“) zur Laufzeit einfügt. Diese wiederum können angewählt und befüllt werden. Somit ist es möglich, die XHTML-Vorlage ohne auch nur eine Anpassung oder Umstellung zu verwenden.

Für die „Startseite“ wird demzufolge ein neuer Template-Datensatz erstellt. Diese Art von Datensätzen hat verschiedene Bestandteile. Die für diese Betrachtung wichtigsten zwei Felder sind „Constants“ (hier werden häufig verwendete Konstanten definiert) und „Setup“ (beinhaltet die in TypoScript formulierte Beschreibung der kompletten Seitenelementerzeugung) .

Die kommentierte Anführung von TypoScript-Codeausschnitten des Setup-Feldes soll verdeutlichen, wie die Seite von TYPO3 aufgebaut wird. Sollten zusätzlich Konstantendefinitionen benötigt werden, wird dies deutlich sichtbar gemacht. Der gesamte, konfigurierte Template-Datensatz kann im Anhang gefunden werden.

Statische und dynamische Bereich im Layout

Um zu verdeutlichen, welche Regionen im Layout von TYPO3 dynamisch ergänzt werden und an welcher Stelle statische Inhalte platziert sind, soll das Gesamtlayout samt Markierungen dienen. Hierzu sind dynamische Bereiche rot umrahmt, statische Abschnitte besitzen eine schwarze Umrandung.

Verkleinertes Layout mit Markierungen der dynamischen und statischen BereicheVerkleinertes Layout mit Markierungen der dynamischen und statischen Bereiche
Verkleinertes Layout mit Markierungen der dynamischen und statischen Bereiche

Aus der Abbildung geht hervor, das insgesamt sieben relevante Bereiche vorhanden sind. Zwei sind statischer Natur, die für jede Seite wiederkehrend dargestellt werden. Es handelt sich um den Kopfbereich mit dem Signet und einem Slogan sowie den weiteren Platzhalter für die zusätzliche Kommunikation der Firmenphilosophie. Selbstverständlich ist das umschließende Gesamtlayout ebenfalls statisch durch die Designvorlage zu beschreiben. Zu den fünf dynamischen Elementen gehören die Hauptnavigation, die Metanavigation im Kopf und Fuß, das Stimmungsbild, der Content inklusive Pfadanzeige und die Funktionalitäten im Fußbereich der Seite (z.B. Druckversion). Beide unterschiedlichen Objekttypen müssen in TYPO3 eingepflegt werden, die Herangehensweise an die Umsetzung differenziert. Die als statisch deklarierten Teile können bereits über die Designvorlage selbst festgelegt werden. Die dynamischen Elemente werden dann mit Hilfe von TypoScript im System erzeugt.

Einbinden des Designs

Nach der erfolgreichen Grundeinrichtung muss den Seiten der Präsenz das zuvor definierte Aussehen verliehen werden. Für das Einbinden des Designs samt Formatierungen in TYPO3 wird nachstehender Ansatz verfolgt:

  • Umsetzung des Layouts in eine Designvorlage (HTML- oder XHTML-Format)
  • Unterscheidung von statischen und dynamischen Teilen des Layouts
  • Integration der erstellten Vorlage mit Hilfe der Extension „Template Auto-Parser“
  • Substitution der dynamischen Bereiche wie z.B. Navigation, Content unter Verwendung von „TypoScript“

Diese Schritte müssen nacheinander vollzogen werden.