Nach der Installation von Typo3 steht erst einmal der Aufbau eines Templates an. Das Template wird von Typo3 dann als Vorlage für das Design der Webseite genutzt. In dieser Vorlage muss festgelegt werden, an welcher Stelle auf der Webseite bestimmte Elemente platziert werden sollen.

Moment mal! Wie installiere ich überhaupt Typo3?

Die meisten modernen Webhoster (All-Inkl, Strato, u.s.w.) bieten 1-Click-Installationen von typischen Softwareanwendungen an. Auf diesem Weg lassen sich CM-Systeme wie Typo3, WordPress, Online-Shops und auch Foren und Wikis mit nur einem Klick installieren.

Falls der Hoster diese Installation nicht anbietet, erhält man Typo3 auf der Downloadseite von typo3.org. Auf dieser Seite findet man auch einen Link mit der Installationsanleitung.

Und wie erstelle ich jetzt das Template?

Ein Template für Typo3 besteht aus einfachem HTML und CSS.
Es werden keine Kenntnisse in PHP benötigt!

Im besten Fall hat man natürliche schon ein fertiges Design (aus Photoshop und InDesign) und beginnt nun, dieses in eine statische Webseite nachzubauen. Dabei beginnt man natürlich erst mit der Struktur und dem Inhalt in HTML, im Anschluss folgt das Styling per CSS.

Wenn nun die statische Vorlage für das Design der Webseite fertig programmiert ist, können wir beginnen, unsere Marker zu setzen. Die Marker sind für Typo3 sehr wichtig. Sie geben dem CMS an, dass es an diese Stelle bestimmte Inhalte setzen kann.

Als erstes setzen wir den Marker ###DOCUMENT### für das Dokument. Dieser sagt aus, dass Typo3 innerhalb dieses Bereichs arbeiten darf. Das Dokument beginnt logischerweise nach dem Öffnen des body und endet vor dem Schließen des body.

Im Backend von Typo3 öffnen wir jetzt den Menüpunkt „Template“ und legen dort ein Template für die root-Seite (dargestellt durch eine Weltkugel) an. Es öffnet sich ein Editor, in dem wir mittels TypoScript unsere Webseite konfigurieren können.

Um dem CMS mitzuteilen, wo unser Template liegt, tragen wir folgendes in den Editor ein:

page = PAGE
page.1 = TEMPLATE
page.1 {
template = FILE
template.file = fileadmin/templates/index.html
workOnSubpart = DOCUMENT
}

Nun weiß das CMS, dass sein Template im Unterordner /fileadmin/templates/ liegt und index.html heißt. Außerdem soll Typo3 im Bereich des Markers ###DOCUMENT### arbeiten.

Unsere Inhalte im Typo3-Template

Um Typo3 mitzuteilen, wo Navigation und Inhalt zu liegen haben, nutzen wir die Marker ###MENU### und ###CONTENT###.

Wir können aus unserer statischen Vorlage also diese Bereiche komplett gegen die beiden Marker ersetzen.

Im Backend von Typo3 ergänzen wir nun das vorhandene TypoScript um die Informationen zu den neuen Markern:

page = PAGE
page.1 = TEMPLATE
page.1 {
template = FILE
template.file = fileadmin/templates/index.html
workOnSubpart = DOCUMENT
# Inhalt (mittlere Spalte)
marks.CONTENT < styles.content.get marks.MENU = HMENU marks.MENU { entryLevel = 0 1 = TMENU 1 { wrap = <ul id="nav">|</ul> NO = 1 NO { wrapItemAndSub = <li>|</li> } CUR < .NO CUR { ATagParams = id="aktiv" }}}}

Typo3 weiß jetzt, dass es den Marker ###CONTENT### mit dem Inhalt aus der mittleren Spalte befüllen soll und dass die Navigation eine ungeordnete Liste mit der ID „nav“ sein soll. Außerdem sollen alle Links in der Navigation Listenelemente sein. Der aktuell aktive Link erhält zudem die ID „aktiv“.

Das Styling

Wer jetzt schon seine Webseite begutachten will, wird merken, dass die CSS-Datei anscheinend nicht geladen wird. Kein Problem. Auch hier müssen wir im TypoScript nur angeben, wo das Stylesheet zu finden ist.
Dazu ergänzen wir den Anfang des Typoscript wie folgt:

page = PAGE
page.typeNum = 0
page.stylesheet = fileadmin/templates/css/style.css

Nun können Sie Ihre Webseite das erste Mal bestaunen und damit beginnen, Ihre Seiten mit Inhalten zu füllen. Diese Inhalte können Sie dann auch weiter per CSS stylen, wie Sie wünschen.