Anmerkung: Dieses Layout habe ich für einer meiner Extensions verwendet und brauche es nicht mehr. Deswegen nicht über die Kopfgrafik und so wundern. Ich war zu faul das ganze jetzt „neutraler“ zu gestalten.

Entpackt alles und kopiert es einfach in euer TYPO3-Verzeichnis. Ihr solltet dann folgenden Verzeichnisbaum vorfinden:

+TYPO3
+-fileadmin
++-templates
++-css
++-grafik
++-typoscript
++ index.html

Nachdem unsere Verzeichnisse alle vorhanden sind, können wir uns jetzt im TYPO3-Backend einloggen.

TYPO3 vorkonfigurieren

Ich gehe von einer frischen TYPO3-Installation aus. Von daher haben wir noch keine Extension installiert und noch keine Seiten (etc.) angelegt.

Backend auf Deutsch stellen

Der erste Schritt führt uns direkt in den Extension Manager (Admin tools -> Ext. Manager). Dort angekommen, wählen wir im Dropdown-Menü “Translation handling” aus. Wir wählen “German” aus und klicken auf “Save selection“. Danach ein weiterer Klick auf “Update from repository” und wir haben TYPO3 erst einmal Deutsch beigebracht. Nun müssen wir TYPO3 nur noch auf Deutsch stellen, dies tun wir indem wir auf den Menüpunkt User settings (User tools -> User settings) klicken. Dort wählen wir unter “Language” nun German aus. Mit einem Klick auf “Save Configuration” sollte TYPO3 jetzt auf Deutsch gestellt sein.

Seitenstruktur anlegen

Im nächsten Schritt wollen wir unseren Seitenbaum anlegen. Der Seitenbaum spiegelt die Webseiten im Frontend wieder. Wir klicken zuerst auf Funktionen (Web -> Funktionen) im Menü und machen dann ein Rechtsklick auf den einzigen Eintrag im mittleren Frame (“New TYPO3 site“). In dem dann erscheinenden Context-Menü wählen wir “Neu” aus, klicken dann im rechten Frame unter Neuer Datensatz auf “Seite (in)” und füllen das nun folgende Formular wie folgt aus.

Tipp: Wählt man im Gegenzug den Assistent aus, kann man im nächsten Schritt die Seitenposition bestimmen. Das ist besonders hilfreich, wenn man viele Seiten bereits angelegt hat.

Als Typ wählen wir “Verweis” aus und bestätigen mit “Ok”. Das Häkchen bei “Seite verbergen” nehmen wir raus, schließlich soll unsere Webseite ja sichtbar sein. Unter Seitentitel könnt ihr euch selber etwas ausdenken, ich habe “TYPO3 Webseite” genommen. Mit einem Klick oben auf die Diskette () speichern wir die Seite ab und gehen zurück zur letzten Seite.

Da wir uns immer noch im Funktionen-Modul befinden, klicken wir jetzt auf die eben erstellte Seite im Seitenbaum. Wir sehen jetzt 9 Eingabe-Felder, die nur darauf warten, ausgefüllt zu werden. Dies tun wir jetzt auch und legen somit unseren kleinen Seitenbaum in sekundenschnelle an. Ich habe mich für folgende Struktur entschieden. Ich empfehle euch für dieses Tutorial erst einmal die gleiche zu nehmen.

Unsere vorläufige Seitenstruktur

Haben wir die Felder ausgefüllt, klicken wir nun auf “Seiten anlegen” und bestätigen wieder mit “Ok”. Im mittleren Frame klicken wir nun auf das Plus neben unserem Seitenbaum, um die so eben erstellten Unterseiten anzuzeigen.

Wir müssen jetzt noch einmal die erste Seite bearbeiten um die Struktur der Seite zu vervollständigen. Wir machen also einen Rechtsklick auf die Seite “TYPO3 Webseite” (ggf. bei euch anders) und wählen im Context-Menü “Seiteneigenschaften bearbeiten” aus. Da wir den Seitentyp als Verweis festgelegt haben, brauchen wir selbigen, sonst führt die Seite ins Nirvana. Wir gehen also oben auf den Reiter “Verweis” und klicken Rechts neben der Box auf den Ordner (). Wir sehen nun noch einmal unseren Seitenbaum und können jetzt eine Einstiegsseite festlegen. Da dies bei uns die Startseite ist, wählen wir diese mit einem Klick aus. Jeder der jetzt auf unsere Webseite geht, gelangt sofort auf den Menüpunkt “Startseite”.
Nun müssen wir noch zum Reiter “Optionen” und klicken dort unter “Allgemeine Datensatzsammlung” auf den Ordner () neben dem Eingabe-Feld. Wir wählen dann im Pop-Up die Seite “Template” aus. Dies ist nötig, damit die Seite weiß, wo sie später das Seiten-Template findet. Wir speichern jetzt wieder die Seite über die Diskette () ab und haben damit unsere Struktur festgelegt.

Wie schon angesprochen, wird die Unterseite “Template” später unsere Seiten-Vorlage beherbergen. Bevor sie das aber kann, müssen wir diese Seite noch einmal bearbeiten. Wir machen also einen Rechtsklick auf die Seite “Template” und klicken auf “Seiteneigenschaften bearbeiten“. Hier müssen wir nur den Typ der Seite auf “SysOrdner” stellen und dies mit “Ok” bestätigen.

Info: SysOrdner sind bestimmte Seitentypen in dem unterschiedliche Typen von Datensätzen abgespeichert werden können.

Kommen wir nun zum Seiten-Template!

Template mit TemplaVoilá erstellen

Ich gehe extra nicht auf die “normale” Template-Erstellung ein, sondern zeige euch direkt den Weg über TemplaVoilà (im weiteren Verlauf mit TV abgekürzt). Dies ist zwar der etwas längere (und vielleicht auch schwierigere) Weg aber auch der in meinen Augen effektivste Weg. Ihr werdet früher oder später alle bei TemplaVoilà landen, also warum nicht gleich damit anfangen und richtig lernen.

TV installieren

Zuerst müssen wir natürlich TV installieren. Dazu gehen wir auf den Erweiterungs-Manger (Admin-Werkzeuge -> Erw-Manager) und wählen oben im Dropdown-Menü “Import extension” aus. Ein Klick auf “Retrieve/Update” speichert die Extension-Liste auf den Server und ermöglicht ein schnelleres abrufen der Extensions im späteren Verlauf. Im Suchfeld tippen wir nun “TemplaVoila” ein und klicken auf “Look up“. In der Liste sollte nun die Extension (Version 1.3.7, Stand: 28.12.08) erscheinen. Mit einem Klick auf das Icon mit der weißen Seite und dem Pfeil (), installieren wir die Extension. Im nächsten Bildschirm wird uns mitgeteilt, dass die Extension erfolgreich heruntergeladen wurde und kann nun in TYPO3 aktiviert werden. Dies machen wir mit einem einfachen Klick auf “Install extension“.

Der Extension-Manager müsste uns nun darauf aufmerksam machen, dass einige Abhängigkeiten fehlen. In diesem Fall wird die Extension “static_info_tables” benötigt. Wir installieren diese also mit einem Klick auf “Import now“. Nach der Bestätigung klicken wir nun noch einmal auf “Install extension” und uns wird angezeigt, dass die Extension noch ein paar Datenbanktabellen anlegt. Wir scrollen nun ganz nach unten und segnen dies mit einem Klick auf “Make updates” ab. Dieses Fenster kann nun über “Close window and recheck dependencies” geschlossen werden.

TV will nun natürlich auch noch ein paar Tabellen anlegen und bereits vorhandene bearbeiten. Dies wird uns nun mitgeteilt und wartet darauf bestätigt zu werden. Wir scrollen wieder runter und klicken auf “Make updates” um den ganzen Prozess abzuschließen.

Der aufmerksame Beobachter wird nun mitgekriegt haben, das sich in unserer Backend-Navigation das Icons von “Seite” grafisch geändert hat und ein neues mit Namen “TemplaVoilà” hinzugekommen ist.

TV-Template erstellen

Wir gehen nun in das “Liste“-Modul (Web -> Liste) und wählen im Seitenbaum die Seite “Template” aus. Mit einem Klick auf das Icon im oberen Bereich (), erstellen wir einen neuen Datensatz. Wir wählen dann in der Liste “TemplaVoilà Datenstruktur” aus. Im nächsten Schritt füllen wir das Feld “Titel” mit “Template (Datenstruktur)“, stellen die Kategorie auf “Seiten Vorlage” und speichern dies wieder mit einem Klick auf die Diskette () ab.

Nun klicken wir erneut auf das Icon () um einen neuen Datensatz zu erstellen (das ganz obere) und wählen diesmal “TemplaVoilà Template Objekt” aus. Als Titel vergeben wir “Template” und unter Dateireferenz fügen wir “fileadmin/templates/index.html” ein. Als Datenstruktur wählen wir die eben erstellte aus. Das ganze speichern wir jetzt ab und haben schon einmal das Gerüst für unser Seiten-Template erstellt.

Wir müssen jetzt das Template in einzelne Bereiche aufteilen und TV sagen, wo die einzelnen Inhalte erscheinen sollen. Dazu klicken wir jetzt auf “TemplaVoilà” (Web -> TemplaVoilà), stellen sicher das wir immer noch die Seite “Template”ausgewählt haben und sollten dann folgenden Inhalt sehen:

Unser fertig angelegtes Template-Objekt

Wir klicken nun auf “Review” und danach auf “Modify DS / TO“. Mit einem Klick auf “Clear all” sollte jetzt ein neuer Eintrag mit Namen “Root” erscheinen. Wir klicken jetzt bei dem Eintrag unter Action auf “Map”, wählen danach unter “Mapping Window” HTML Source aus und klicken im HTML-Code ganz oben auf dem schwarz hinterlegten “<body>“. Mit einem Klick auf “Set” bestätigen wir die Auswahl und haben TV gesagt, dass sich die Seiten-Elemente alle innerhalb dieses Body-Tags befinden.

Wir müssen nun 4 weitere Elemente anlegen. Dies habe ich jetzt in ein Video gepackt, welches die erforderlichen Schritte kurz zeigt. Ich gehe gleich näher auf jedes Element ein.

Das Video einfach über folgenden Link über euren Browser anschauen: Video aufrufen!

Die Elemente “Inhalte” und “Rechte Spalte” sind so genannte “Content Elements”, in diesen kann man über das “Seite”-Modul dynamisch Inhalte eingefügt werden. “Hauptmenü” und “Untermenü” sind dagegen “TypoScript Object Path“. Wie man sich vielleicht schon denken kann, kann man diese über TypoScript ansteuern.

Wir müssen nun noch das Template unserer Hauptseite, “TYPO3 Webseite” zuordnen. Alle Unterseiten erben automatisch dieses Template. Wir klicken nun also mit der rechten Maustaste auf die Seite im Seitenbaum und wählen “Seiteneigenschaften bearbeiten“. Unter dem Reiter “Erweitert” wählen wir nun in den zwei Dropdown-Menüs unser angelegtes TV-Template aus. Es sollte dann in etwa so bei euch aussehen:

So sollte es bei euch jetzt ausschauen

Seiten-Template für das TypoScript anlegen

Nachdem wir alle Elemente in TV festgelegt haben, kommen wir zum TypoScript. Wir klicken im Seitenbaum auf die Seite “TYPO3 Webseite” und wählen das Modul “Template” (Web -> Template) aus. Ein weiterer Klick auf “Create template for a new site” erstellt uns nun ein Seiten-Template für diese Seite. In dem Dropdown-Menü oben wählen wir jetzt “Info/Modify” aus und klicken ganz unten auf “Click here to edit whole template record“.

Das Formular füllen wir nun wie folgt aus. “Template-Titel” kann so bleiben. In “Web-Site-Titel” können wir ein Titel für die Webseite eingeben, welcher im Browser dann immer oben angezeigt wird. Hier geben wir einfach mal “Unsere TYPO3-Seite” ein. Unter “Konfiguration” löschen wir zuerst den Inhalt und fügen dann diese Zeilen hinzu:

# CLEANING
<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/templates/typoscript/cleaning.txt">
# CONFIGURATION
<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/templates/typoscript/config.txt">

Dies bewirkt einfach, dass der Code aus den angegebenen Dateien ausgelesen wird.

Als nächstes widmen wir uns dem Reiter “Enthält“. Dort wählen wir unter “Statische einschließen” die Elemente “content (default)” und “cSet (default)” aus. Unter “Statische einschließen (aus Erweiterungen)” wählen wir “CSS Styled Content” aus. Wir speichern den Datensatz mit einem Klick auf die Diskette () und schauen uns mal die Dateien an, die wir oben im TypoScript angegeben haben.

Cleaning.txt
Diese Datei räumt erstmal gewaltig den HTML-Code auf den TYPO3 produziert. Es sorgt dafür das überflüssige Kommentare, die sonst im HTML auftauchen, verschwinden und optimiert den HTML-Code dahingehend, dass die Seite weites gehend Barrierefrei und “valide” gestaltet werden kann.

Config.txt
Diese Datei ist das eigentliche Herz der Seite. Hier werden die in TV angelegten Platzhalter zugewiesen. Öffnet die Datei einfach mal mit einem Editor, die Zeilen sind dokumentiert. Ab hier sind dann Kenntnisse in TypoScript nötig. Es lässt sich aber alles relativ einfach nachvollziehen und mit ein bisschen ausprobieren steigt man wirklich sehr schnell dahinter. Am Ende dieses Artikels habe ich weiterführende Links eingefügt, die mehr Beispiele für TypoScript zeigen.

Jetzt wird es Zeit für die ersten Inhalte.

Inhalte einpflegen

Wir gehen jetzt im Seitenbaum auf unsere “Startseite” und wählen das Modul “Seite” aus (Web -> Seite). Ihr solltet dann in etwa folgendes sehen:

Unser erster Inhalt

Wir sehen hier eine genaue Abbildung von unserem TV-Template. Wir haben hier zwei Spalten, “Inhalte” und “Rechts“. In meiner Abbildung seht ihr bereits, dass ich in der “Inhalte”-Spalte Text mit Bild habe. Das ganze wollen wir jetzt natürlich nachholen. Ihr klickt einfach in der “Inhalte”-Spalte auf das Icon mit dem Plus () und wählt im nächsten Schritt “Text mit Bild” aus. Wenn ihr euch jetzt mal 5 Minute nehmt und das folgende Formular ein wenig studiert, könnt ihr sehen wie simpel es ist, Inhalte ein zu pflegen.

Im Reiter “Allgemein” vergeben wir zuerst eine Überschrift für unseren “Artikel”.

Info: Scrollt nach ganz unten und setzt ein Häkchen in “Zweite Optionspalette anzeigen“. Dies ermöglicht euch, individueller euren Inhalt zu gestalten. Ihr habt dann mehr Optionen. Zum Beispiel könnt ihr dann bei den Überschriften zwischen verschiedenen Layouts wählen (<h1>,<h2>,<h3> etc.).

Danach wechseln wir auf den Reiter “Text” und schreiben unsere Information in den WYSIWYG-Editor. Jetzt wechseln wir auf “Medien” und können ein Bild auswählen, welches wir in den Artikel stellen wollen. Dazu können wir entweder die Festplatte durchsuchen oder wir klicken Rechts auf den Ordner () bei dem Auswahlfeld und wählen ein bereits hoch geladenes Bild aus.

Info: Alles was ihr irgendwann mal wieder auf der Seite verwenden wollt, solltet ihr immer in den „fileadmin“-Ordner innerhalb von TYPO3 speichern. In TYPO3 kann jederzeit darauf zugegriffen werden und in eure Inhalte eingepflegt werden.

Der “Medien”-Bereich setzt sich aus mehreren “Ebenen” zusammen. Ganz oben ist die Bilder-Ebene, in der wir unser Bild ausgesucht haben. Darunter befindet sich die “Position“-Ebene, zu der wir jetzt kommen. In der “Position“-Ebene können wir die Position vom Bild wählen. Außerdem können wir einen Bilderrahmen hinzufügen oder (sofern vorhanden) mehrere Bilder Spaltenweise aufteilen. Direkt unter der “Position”-Ebene befindet sich die “Bildmaße“-Ebene. In dieser können wir die Größe des Bildes festlegen. Man kann entweder die Höhe und Breite fest angeben oder wir geben nur eine Höhe an und lassen das Bild proportional dann von der Breite anpassen, vollkommen automatisch. Das ganze geht natürlich auch anders herum. In der “Bild-Links”-Ebene können wir das Bild intern oder extern verlinken. Darüber hinaus können wir auch das Bild sich mit einem klick vergrößern lassen. Die restlichen Felder sind selbsterklärend und können ausprobiert werden!

Mit einem Klick auf die Diskette () speichern wir den Datensatz ab und haben unseren ersten Inhalt in unsere Seite eingepflegt. Herzlichen Glückwunsch!

Wenn wir uns die Seite mal im Frontend anschauen, können wir uns das Ergebnis betrachten. Es sollte in etwa wie bei mir ausschauen:

So sollte die "fertige" Webseite ausschauen

Dies war der dritte Teil meiner kleinen Serie. Ich hoffe es ist verständlich rüber gekommen und bitte um Feedback! Ihr könnt jetzt weitere Seiten-Elemente hinzufügen und so ein bisschen rumspielen, für Fragen ab in die Kommentare.

Weiterführende Links für TypoScript:

• Wie man verschiedene Menüs via TypoScript anlegt
• TypoScript-Referenz

Was ich euch noch empfehlen kann sind folgende Bücher, die ich auch gelesen habe und mir sehr geholfen haben (Amazon-Partner-Link):

Ich gehe davon aus, dass ihr bereits eine funktionstüchtige Seite mit TemplaVoilá zum laufen gebracht habt. Auf Wunsch kann ich dazu natürlich auch nochmal ein kleines Tutorial schreiben.

FCE-Template erstellen

Was wir als erstes brauchen, ist eine HTML-Datei, die als FCE dient. Dazu erstellen wir jetzt einfach eine HTML-Datei und nennen sie “2-Spalten.html“.

Hier der Inhalt:

<div class="col_wrap">
  <div class="col1"></div>
  <div class="col2"></div>
  <br style="clear:both;" />
</div>

Diese Datei speichern wir und schieben sie dann in den Ordner “fileadmin” -> “templates“.

Dies war schon im groben der erste Teil. Nun müssen wir das FCE in TYPO3 einrichten.

FCE in TYPO3 einrichten

Liste-Ansicht des Template-Ordner

In TYPO3 wechseln wir zunächst in die “Liste“-Ansicht und klicken dann den Sysfolder an, in welchen unser TemplaVoilá-Template installiert ist.

Dort fügen wir dann unter “TemplaVoilá-Datenstruktur” ein neuen Datensatz hinzu, indem wir auf das Icon mit dem Plus klicken.

In dem nun erscheinenden Formular geben wir als Titel “2-Spalter” ein, unter Kategorie wählen wir “Flexibles Inhaltselement” aus und lassen den Rest leer. Wir speichern nun das Formular ab und kehren zur Listen-Ansicht zurück.

Nun fügen wir noch ein “TemplaVoilá-Datenobjekt” hinzu. Dazu geben wir als Titel wieder “2-Spalter” ein, unter Dateireferenz klicken wir auf die Weltkugel, wählen dann im PopUp den Reiter “Datei” aus und Browsen uns durch die Ordner “fileadmin” -> “templates“. Dort wählen wir dann die Datei “2-Spalter.html” aus. Der Pfad sollte dann übernommen werden und im Formular stehen. Als nächstes wählen wir bei Datenstruktur die eben angelegte aus. Der Name müsste “2-Spalter” sein. Den Rest können wir leer lassen und unser Formular abspeichern.

So sollte das Formular dann in etwa bei euch ausschauen

Als nächstes gehen wir auf das Modul “TemplaVoilá” und wählen danach unser Template aus. Danch sollten wir oben den Reiter “Flexible CE” auswählen und ein Eintrag mit namen “2-Spalter” vorfinden. Dort klicken wir auf “remap” und dann auf “Modify DS / TO“.

Dieser Teil sollte einen eigentlich bekannt sein, ich reiße ihn trotzdem nochmal kurz an.

Template Mappen

Zunächst müssen wir den “Root“-Punkt mappen. Dazu klicken wir in dem “Root“-Objekt ganz rechts auf “Map” und wählen dann das erste DIV aus unserem Template aus. Als Mode setzen wir es als “INNER” und klicken dann auf “Set“.

Mapping der ersten Spalte

Nun fehlen noch 2 Elemente. Für jede Spalte ein Element. Deshalb legen wir nun erstmal 2-Elemente an. Das erste Element nennen wir “field_col1” und das zweite Element einfach “field_col2“. Als Titel jeweils “Spalte 1″ und “Spalte 2″. Unter Editing Type wählen wir “Content Elements” aus.

Natürlich müssen wir die 2 Felder dann auch Mappen. Dazu klicken wir jeweils nachdem wir eines angelegt haben auf “Map” und dort wählen wir dann das jeweilige DIV aus. Für Spalte 1 das DIV mit der Class “col1” und für die zweite Spalte das DIV mit der Class “col2“. Den Mode dabei wieder auf “INNER“.

So sollte dann die Übersicht ausschauen

Sollte alles passen, klicken wir nun auf “Save as“, wählen danach unter “Update existing Data Structure / Template Object” das Element “Template/2-Spalter” aus und klicken auf “Update TO (and DS)“.

2-Spalter als Inhalt einfügen

Wir gehen nun normal auf unser “Web“-Modul und wählen eine Seite aus, in welcher wir unseren 2-Spalter platzieren möchten. Wir legen nun ein neues Element an und wählen in der Liste unter “Flexibler Inhalt” unseren “2-Spalter” aus.

Eine Überschrift können wir, müssen wir aber nicht vergeben. Einfach das Element speichern und zurück in die Übersicht des “Web“-Moduls gehen.

So sollte es dann in etwa ausschauen

Ihr solltet nun ein 2-Spalter in eurer Übersicht sehen (siehe Screenshot).

Ihr könnt nun dort gewohnt beliebig Inhalte hinzufügen und verwalten. Egal ob es Extensions sind oder normale Texte.

Das einzige was jetzt noch fehlt ist, dass ihr in eurer CSS-Datei die Klassen “col_wrap“, “col1” und “col2” definieren müsst.

In dieser fügen wir einfach folgendes hinzu:

.col_wrap {
  border:1px solid #ddd;
  padding:5px;
}

.col1 { float:left; width:48%; padding:5px; }
.col2 { float:left; width:48%; padding:5px; }

Nun sollten unsere Spalten nebeneinander sein. Das ganze könnt ihr natürlich noch weiter verschönern oder es so lassen

Viel Spaß damit!