TYPO3: Mehrspaltige Beispiele für TemplaVoilà

von Bernd Warken bei Fa. netcos AG

Kapitel 0: Einleitung

0.1 Vorwort

0.2 Lizenz

Kapitel 1: Grundinstallation

1.1 Webserver und benötigte Programme

1.2 TYPO3

1.3 Sprache

1.4 TemplaVoilà und Extensions

Kapitel 2: Beispiel mit einer Inhaltsspalte

2.1 HTML-Datei

2.2 CSS-Datei

2.3 Erstellen von neuen Seiten

2.4 TemplaVoilà-Datenstruktur

2.5 TypoScript-Template

2.6 Übernahme der Datenstruktur

2.7 Einfügen des Inhalts

2.8 CSS Styled Content

2.9 Ansehen im Frontend

2.10 Seite mit Unterseite

Kapitel 3: Erweiterung des Inhalts mit mehreren Spalten

3.1 Formel für Weite

3.2 Fenster für float

3.3 HTML-Vorlagen

3.4 CSS-Datei

3.5 Aufbau der TemplaVoilà-Datenstrukturen

3.6 Seiten mit Inhalt

Kapitel 4: Kombination von Spaltenaufteilungen

Kapitel 0: Einleitung

0.1 Vorwort

Dieses Dokument beschreibt die Erstellung von Beispielen mit mehreren Spalten gleicher Weite innerhalb der Webdesign-Architektur TYPO3. Das Grundprinzip ist die verschachtelte Verwendung von div-Tags-Paaren, die mit float left und float right gesteuert werden. Dies erspart margin oder padding für die Breite, die bei manchen Browsern, vor allem Microsoft Internet Explorer, problematisch sind. Es gibt natürlich auch andere Methoden, aber dieses Prinzip scheint am sichersten zu funktionieren. Bei Interesse lesen Sie weiter.

0.2 Lizenz

Dieses Dokument gehört zum TYPO3-Projekt mehrspaltig. Die aktuelle Version ist 1.1 vom 21. August 2007. Der Autor ist Bernd Warken bei Firma netcos AG.

Das Projekt besteht aus diesem Dokument und einer Reihe von Beispieldateien in einigen Unterverzeichnissen, die den beschriebenen Quellcode aus diesem Dokument beinhalten.

mehrspaltig.sxw dieses Dokument, im OpenOffice Text-Format v1

html/mehrspaltig.html dieses Dokument, im HTML-Format

html/mehrspaltig_html_*.jpg Bilder für das HTML-Format

css/mehrspaltig.css komplette CSS-Datei, Kap. 2.2 und 3.4

templates/mehrspaltig1.html 1 Spalte, HTML-Vorlage, Kap. 2.1

templates/mehrspaltig2.html 2 Spalten, HTML-Vorlage, Kap. 3.3

templates/mehrspaltig3.html 3 Spalten, HTML-Vorlage, Kap. 3.3

templates/mehrspaltig4.html 4 Spalten, HTML-Vorlage, Kap. 3.3

templates/mehrspaltig5.html 5 Spalten, HTML-Vorlage, Kap. 3.3

templates/mehrspaltig3_3_5_5.html 3+3+5+5 Spalten, HTML-Vorlage, Kap. 4

ts/typoscript-template.tmpl komplettes TypoScript-Template, Kap. 2.5

Alle Elemente des Projekts (dieses Dokument und die Quellcodes) stehen unter der Lizenz GPL (GNU General Public License) Version 3. Der Originaltext dieser Lizenz ist erhältlich unter http://www.gnu.org/licenses/gpl.html, eine deutsche Übersetzung befindet sich unter http://www.gnu.de/documents/gpl.de.html.

Copyright 2007 Bernd Warken

Kapitel 1: Grundinstallation

Dieses Dokument wurde unter Verwendung von TYPO3-Version 4.1.1 erstellt. Sie sollten bereits die grundlegenden Kenntnisse zu TYPO3 besitzen. Einige passende Tutorials, Videos und Dokumente sind auf der TYPO3-Website http://typo3.org erhältlich. Das gesamte TYPO3-Programm läuft auf jedem Webbrowser.

1.1 Webserver und benötigte Programme

Damit ein Browser überhaupt mit TYPO3 zusammenarbeiten kann, muss erst einmal ein Webserver auf Ihrem Computer laufen. Wir schlagen vor, dass Sie hierfür apache2 verwenden. Außerdem benötigen Sie php in der Version 4 oder 5, besser ist Version 5. Weiterhin wird als Datenbank mysql gebraucht, eventuell auch phpmyadmin als optimales Verwaltungstool für mysql. Sollte apache Schwierigkeiten bereiten, so versuchen Sie erst einmal das apache-Modul suphp zu deinstallieren. Bei anderen Problemen innerhalb der Programmkette ist es auch möglich, die Systeminstallation der Programme apache2, php, mysql und phpmyadmin zu ersetzen durch das Programmpaket XAMPP von http://www.apachefriends.org/de/xampp.html. Es liefert ein funktionierendes System jener Programme, es soll aber ein wenig unsicher sein.

1.2 TYPO3

Wenn Sie die Beispiele in diesem Projekt nachvollziehen wollen, müssen Sie eine TYPO3-Version installiert haben. Sie finden bei http://typo3.org/download/ eine aktuelle Version der TYPO3-Pakete dummy und source. Beide Pakete werden im lokalen www-Verzeichnis angelegt. Dies befindet sich beim apache-Server des Linux-Debian-Systems auf /var/www/, bei XAMPP unter /opt/lampp/htdocs/. Dieses Verzeichnis lässt sich mit jedem Browser unter http://localhost ansteuern. Wir schlagen vor, dass in diesem Verzeichnis ein Unterverzeichnis typo3/ angelegt wird, in dem dann mehrere TYPO3-Installationen eingerichtet werden können.

Das dummy-Verzeichnis können Sie nach Belieben umbenennen. Hier wird davon ausgegangen, dass der Name http://localhost/typo3/mehrspaltig gewählt wird. Bei UNIX-ähnlichen Betriebssystemen sollte der TYPO3-Baum die Rechte des apache-Benutzers haben. Auf Debian-Linux ist dies der User www-data und die Gruppe www-data, bei XAMPP der User nobody und die Gruppe nogroup.

Bei einer Neuinstallation können Sie durch http://localhost/typo3/mehrspaltig in einem Webbrowser das Install Tool von TYPO3 aufrufen. Eventuell kann dieses Programm jedoch nicht automatisch starten. Dann müssen Sie im Unterverzeichnis typo3conf des TYPO3-Baumes die Datei ENABLE_INSTALL_TOOL erzeugen und die Seite im Browser neu laden. Falls Sie im Install-Tool nach einem Passwort gefragt werden, versuchen Sie das Default-Passwort joh316. Details über dieses Tool finden Sie in der Dokumentation der TYPO3-Seite, hier wird jedoch nur auf einige wenige Fehlermeldungen eingegangen.

Insbesondere können unter Menüpunkt 1: Basic Configuration Fehler zur Datei php.ini genannt werden, die unbedingt verbessert werden müssen. Diese Datei befindet sich bei Debian-Linux im Verzeichnis /etc/php5/apache2/, bei anderen Systemen im Bereich der Konfigurationsdateien für apache und php. Ganz besonders ist in dieser Datei die Variable memory_limit auf einen hohen Wert zu setzen, wie etwa 128M, da sonst TYPO3 Speicherprobleme bekommt.

Nachdem dieses Installations-Setup abgeschlossen ist, wird das TYPO3-Backend aufgerufen. Dies geschieht in einem Webbrowser über http://localhost/typo3/mehrspaltig/typo3/. Melden Sie sich dann als Benutzer admin an und verwenden als Passwort password, falls Sie TYPO3 neu installiert haben.

Sie sind nun im Backend. Auf der linken Spalte sehen Sie die sogenannten Module von TYPO3, die wir im Folgenden ausgiebig verwenden werden.

1.3 Sprache

Standardmäßig wird beim TYPO3-Programm als Sprache Englisch verwendet. Um dieses Dokument verfolgen zu können, sollten Sie die Sprache jedoch auf Deutsch umstellen. Dies geschieht innerhalb des Moduls Ext Manager unter der Modulgruppe Tools (siehe linke Spalte). Aktivieren Sie dort das Element Translation handling. Dort klicken Sie German – [German] an und aktivieren es durch Klicken auf Save selection. Anschließend sind noch die entstehenden Knöpfe Check status against repository und Update from repository anzuklicken.

Weiterhin müssen Sie diese Sprache noch für Sie als Benutzer aktivieren. Dies geschieht durch das Modul Setup der Modulgruppe User. Dort suchen Sie ganz oben im Menü Language die Sprache German – [German] aus. Außerdem sollte unbedingt noch das Passwort geändert werden. Das geschieht auf derselben Seite im unteren Bereich.

Abgespeichert werden diese Änderungen am unteren Ende mit dem Knopf Save Configuration. Dadurch ändert sich zwar die Sprache auf dieser Seite, aber noch nicht auf der linken Spalte (Module). Dazu muss auf dem Browser die Seite neu geladen werden durch den Browser-Knopf Neu laden.

1.4 TemplaVoilà und Extensions

Mehrspaltige Applikationen lassen sich nicht mehr richtig mit dem klassischen TYPO3-Konzept erstellen. Denn dort stehen maximal 4 Bereiche zur Verfügung: links, normal, rechts und Rand. Für mehrere Zeilen und Spalten reichen diese 4 Bereiche jedoch bei weitem nicht mehr aus. Weitere Aufspaltungen sind sehr aufwändig. Wir sind daher auf das neue TYPO3-Konzept TemplaVoilà angewiesen, das eine beliebige Zahl und Anordnung von Bereichen erlaubt. Dieses Konzept ist jedoch noch nicht Teil der Standardausrüstung von TYPO3, es ist jedoch als Zusatz (Extension) erhältlich.

Das Installieren von Extensions ist ein Standardverfahren. Es geschieht durch das Modul Ext Manager (Modulgruppe Tools) im Element Import extensions. Der Name der TemplaVoilà-Extension ist TemplaVoilà! (templavoila).

Zur Installation braucht es noch einige weitere Extensions, die ebenfalls installiert werden müssen. Das Modul Ext Manager macht dies jedoch automatisch, wenn man seiner Führung folgt. Bitte führen Sie nach der Installation Neu laden des Webbrowsers aus, damit die neuen Module von TemplaVoilà aktiviert werden.

Außerdem ist die Extension Lorem Ipsum (lorem_ipsum) sehr brauchbar. Es erlaubt, auf einfache Weise willkürliche Texte und Bilder einzufügen. Wir gehen davon aus, dass Sie auch diese Extension installiert haben.

Kapitel 2: Beispiel mit einer Inhaltsspalte

Um mit TemplaVoilà arbeiten zu können, braucht man zuerst eine vereinfachte HTML-Vorlage, eine Ursprungsdatei, die als Grundlage zur Erstellung der TYPO3-Version gilt. Oft wird eine solche Datei auch HTML-Template genannt, obwohl dieser Name zur Verwirrung mit den TypoScript-Templates führt. Zur Erstellung einer solchen HTML-Vorlage braucht man jedoch nur sehr wenige HTML-Kenntnisse. Alle Elemente, die mittels TYPO3 Verwendung finden sollen, werden durch div-Tags dargestellt. Die gestalterische Ansteuerung mittels CSS erfolgt durch die Verwendung von Parametern id oder class.

Wir wollen in unserem Dokument folgende Strukturen unterbringen: ein Logo, darunter auf der linken Seite ein vertikales Menü für die Inhaltsseiten, während auf der rechten Seite der Inhalt mit zunächst einer Spalte erscheint. Dazu legen wir zuerst eine HTML-Datei mit dieser Struktur an. Anschließend erstellen wir eine passende CSS-Datei zur visuellen Repräsentation. Aus diesen beiden Dateien erzeugen wir eine Datenstruktur mit TemplaVoilà und erstellen ein TypoScript-Template. Wenn wir diese Strukturen geschaffen haben, sind wir in der Lage, unsere erzeugte Website im Frontend anzusehen.

2.1 HTML-Datei

Zur Erstellung der HTML-Datei gehen wir in das Modul Dateiliste (Modulgruppe Datei). Wir sehen dort die Verzeichnisstruktur des Ordners fileadmin. Wir erzeugen als erstes den Unterordner templates, indem wir auf dem Symbol neben fileadmin das Element Neu anklicken. Dadurch entsteht ein Auswahlformular zur Erstellung eines Ordners und einer Datei. Wir erstellen den Ordner templates.

Wir gehen in diesen Ordner, indem wir das Pluszeichen neben fileadmin anklicken und das Unterverzeichnis templates anwählen. In diesem Verzeichnis erstellen wir die neue Datei mehrspaltig1.html, indem wir den Button Neu anklicken. Diese Datei wird die HTML-Vorlage für einspaltige Konstruktionen. Durch Auswahl von Bearbeiten auf dem Symbol neben dem Dateinamen öffnet sich ein Editor, mit dem diese Datei beschrieben werden kann. Wir schreiben folgenden Inhalt:

Dieser Inhalt ist auch in der Beispieldatei templates/mehrspaltig1.html enthalten.

Der Code enthält mehr div-Strukturen als nötig scheint, aber das ist sinnvoll für eine saubere Handhabung mit CSS. Für die Strukturen, die wir im Frontend anzeigen wollen, haben wir eine Bezeichnung in eckigen Klammern gesetzt. Diese Bezeichnung ist nicht unbedingt nötig und kann willkürlich gewählt werden. Aber auf diese Weise können wir die Elemente innerhalb des Codes besser finden.

[KOPF] bezeichnet das Logo, [MENU_LEFT] steht für das Navigationsmenü, das auf der linken Spalten auftreten soll. Im Output (Frontend) sind beide Elemente auf jeder Seite vorhanden, während [ERSTES_VON_EINS] für den Inhalt der Seite steht, der natürlich für verschiedene Seiten unterschiedlich ist. Der Name [ERSTES_VON_EINS] steht für „Spalte eins von maximal einer Spalte“.

Die gesamte div-Struktur sieht folgendermaßen aus. Das Programm umschließt ein div mit der id projekt. Darin eingebettet sind zwei divs mit den ids kopf und spalten. kopf steht für das Logo im oberen Bereich der Ausgabe. Das Feld spalten steht darunter und umfasst den gesamten weiteren Bereich. Es enthält die zwei divs spalte_links und spalte_rechts. Beide enthalten schließlich jeweils ein Unter-div mit den Feldern, die in der Ausgabe zu sehen sind, das Menü und der Seiteninhalt.

2.2 CSS-Datei

Die CSS-Datei wurde im <head>-Bereich der HTML-Datei mit ../css/mehrspaltig.css angegeben, befindet sich also im Ordner fileadmin/css. Wir legen also erst dieses Unterverzeichnis an (wieder mit Neu innerhalb des Menüs Dateiliste) und dann in diesem die Datei mehrspaltig.css. Wir fügen folgenden Inhalt in diese Datei ein:

Die Beispieldatei css/mehrspaltig.css enthält diesen Code, aber auch noch weitere Elemente, die erst in späteren Kapiteln vorkommen.

Im Frontend sollen das Navigationsmenü und der Inhalt nebeneinander stehen. Wir haben also zwei Spalten, die sich nebeneinander befinden. Im CSS wird dies dadurch umgesetzt, dass zwei div-Tags angesteuert werden, von denen das erste (spalte_links) mit float: left und das zweite (spalte_rechts) mit float: right aufgebaut wird. Diese div-Tags müssen nach HTML-Standard jeweils einen width-Parameter haben. Wir haben es so konstruiert, dass sie keine border, margins und paddings enthalten, diese könnten bei Bedarf in Unter-divs angewendet werden. Dies geschieht z.B. bei dem div mit Klasse inhalt_eins, einem Unter-div des float-Elements spalte_rechts.

Das Menü werden wir bei den TypoScript-Templates so gestalten, dass die Menüeinträge in ul und li eingebettet werden. Wir stellen hier list-style-type auf none, so dass keine Listendarstellung verwendet wird. Unterseiten werden zwei ul benutzen. Diese werden hier durch einen margin eingerückt.

2.3 Erstellen von neuen Seiten

Wir legen nun eine neue Seite mit Namen mehrspaltig an, die als Wurzel unseres Programms dienen soll. Wir wählen dazu das Modul Seite in der Modulgruppe Web. In der mittleren Spalte befinden sich dann die Seitennamen, die bereits gebildet wurden; bei der Neuinstallation gibt es jedoch nur die Topseite. Wir klicken auf das Symbol links neben dem Namen der Topseite. Es öffnet sich ein Menü, aus dem wir Neu wählen. Wir wählen als nächstes den Menüpunkt Erstelle neue Seite.

Es entsteht ein Installationsmenü für die neue Seite. Wir deaktivieren als erstes den Punkt Seite verstecken. Wir wählen als Typ das Element Shortcut. Dies legt diese Seite als Link auf eine andere Seite an, die wir später erstellen werden. Wir geben außerdem als Seitentitel ein: mehrspaltig. Nun kann diese Seite fürs Erste abgespeichert werden durch Klicken auf einen Button mit dem Bild einer Diskette. Wir sehen drei solcher Disketten-Symbole am oberen und unteren Ende der Seite: das linke Symbole ist Dokument sichern, das mittlere Dokument sichern und Webseite anzeigen und das rechte ist Dokument sichern und schließen. Alle drei Symbole können zum Speichern verwendet werden, aber da wir für diese Seite mit den Einträgen fertig sind, wäre das rechte Symbol wohl am besten.

Jetzt erscheint ein Pluszeichen neben der Topseite, das anzeigt, dass eine Unterseite existiert. Wenn wir auf dieses klicken, sehen wir die neue Seite mehrspaltig als Unterseite, mit der wir jetzt weiter arbeiten können.

Als nächstes erstellen wir die Unterseite Startseite von mehrspaltig. Wir klicken auf das Symbol bei mehrspaltig und wählen wieder Neu. Dann wählen wir Seite (in). Wir deaktivieren wieder Seite verstecken. Wir lassen als Typ Standard stehen. Wir tragen als Seitentitel ein: Startseite. Wir speichern ab (mit dem Disketten-Button).

Nun können wir die Shortcut-Verbindung in der mehrspaltig-Seite eintragen. Wir klicken auf das Modul Seite (Modulgruppe Web) auf der linken Spalte, dann auf mehrspaltig in der Mitte. Wir wählen das Stift-Symbol in der rechten Spalte aus. Dadurch können wir den Inhalt der Seite bearbeiten. Wir überzeugen uns, dass der Typ wirklich auf Shortcut eingestellt ist. Wir suchen dann im Formular das Element Shortcut zur Seite:. Ganz rechts befindet sich ein Knopf Durch Datensätze browsen. Wir wählen diesen, woraus eine Auswahlliste der bisherigen Seiten gezeigt wird. Wir wählen daraus die Seite Startseite. Wir sind jetzt wieder im Formular zurück. Wir speichern es ab (Disketten-Symbol).

Als nächstes müssen wir noch einen Storage Folder (Allgemeine Datensatzsammlung) für TemplaVoilà einrichten. Wir legen dazu eine weitere Unterseite von mehrspaltig an und nennen diese Datensatzsammlung. Diesmal ist der Typ: SysOrdner.

Wir tragen diese Seite als Allgemeine Datensatzsammlung in mehrspaltig ein. Dazu öffnen wir diese Seite über das Stift-Symbol beim Modul Seite und fügen die Seite Datensatzsammlung beim Element Allgemeine Datensatzsammlung hinzu und speichern das Formular ab.

2.4 TemplaVoilà-Datenstruktur

Um mit den Daten in der HTML-Datei arbeiten zu können, müssen wir daraus eine TemplaVoilà-Datenstruktur erstellen. Dazu gehen wir zu dieser Datei durch das Modul Dateiliste (Modulgruppe Datei) über den Ordner fileadmin zum Unterordner templates, wir klicken auf das Symbol neben dem Dateinamen zu mehrspaltig1.html. Dadurch entsteht dort ein Menü mit mehreren Einträgen. Wir wählen den Eintrag TemplaVoilà. Dadurch erscheint ein Formular zum Aufbau der Datenstruktur.

Als erstes wird dort das Datenelement Root dargestellt. Es ist die Wurzel der Elemente in der HTML-Datei. Es ist bereits vorab eingestellt, wir müssen nur noch festlegen, wo diese Wurzel innerhalb der HTML-Datei liegen soll. Dazu wird der Button Map gedrückt. Dadurch entsteht eine grafische Übersicht über die Tags, die wir in der HTML-Datei eingebettet haben. Wir wählen das Element body für Root aus und drücken den entstehenden Set-Button. Dadurch ist das Root-Element fertig konfiguriert.

Preview zeigt an, welche Bereiche der HTML-Datei noch eingerichtet werden können. Wir sehen noch drei Tags, die wir noch zur Datenstruktur hinzufügen werden. Dazu klicken wir auf das Feld [Enter new fieldname]. Dadurch ändert sich der Inhalt dieses Feldes zu field_. Wir wollen als erstes das Element Kopf hinzufügen. Daher ergänzen wir den Feldnamen zu field_kopf. Der beginnende Name field_ ist wichtig und sollte nicht geändert werden. Danach können wir mit dem Button Add das neue Feld übernehmen.

Dadurch entsteht ein neues Formular, in dem wir nur zwei Felder ändern müssen. Im Feld Title geben wir einen passenden Titel an, in unserem Fall Kopf. Ein wichtiges Feld ist Editing Type. Darin verwenden wir insgesamt nur zwei Typen, nämlich Content Elements für die Inhaltselemente, die sich bei jeder Seite im Output ändern, und TypoScript Object Path für die Elemente, die bei jeder Outputseite gleich bleiben. Da unser Element Kopf als Firmenlogo auf jeder Seite gleich bleibt, wählen wir TypoScript Object Path. Wir können nun den Button Add zum Übernehmen drücken.

Dadurch ändert sich das Formular ein wenig. Ein zusätzliches Feld Object path: ist entstanden mit dem Vorgabewert lib.myObject. Wir wählen statt dessen den Wert lib.kopf. Dieser Name wird im TypoScript-Template verwendet. Wir können dies nun übernehmen, indem wir den Button Update drücken, der an der Stelle des Add-Buttons entstanden ist.

Dadurch entsteht ein neuer Map-Button bei unserem Feld field_kopf. Wir drücken diesen, wodurch eine Karte mit den Tags vorgestellt wird. Wir wählen daraus das zu [KOPF] gehörende div mit der id kopf. Das entstehende Action-Feld mit INNER (Exclude tag) kann mit dem Set-Button übernommen werden. Dadurch ist die Konfiguration des Kopf-Elements abgeschlossen.

Auf gleiche Weise wird das Element [MENU_LEFT] konfiguriert. Wir erstellen ein neues Feld field_menu_left mit dem Titel Menu Left. Als Navigationselement ist es wieder für alle Seiten im Output gleich, so dass wieder der Editing Type: TypoScript Object Path übernommen wird. Als Object path: richten wir lib.menu_left ein. In der Map wählen wir das div mit der id menu_left.

Es bleibt nur noch ein Element übrig, das Inhaltselement [ERSTES_VON_EINS]. Der Feldname lautet field_erstes_von_eins, der Titel Erstes von eins. Als Inhaltselement muss der Editing Type: Content Elements gewählt werden, denn der Seiteninhalt ändert sich mit jeder Seite. Durch Akzeptieren mit dem Add-Button entsteht kein neues Formular, so dass gleich Map ohne Angabe des Object path angewendet werden kann. Wir wählen das div mit der id erstes_von_eins.

Damit sind wir mit der Konfiguration aller Elemente fertig. Jetzt muss die Datenstruktur abgespeichert werden. Dazu ist der Button Save as da. Da dies eine neue Datenstruktur ist, die bisher noch nicht abgespeichert wurde, muss Title of DS/TO angegeben werden. DS ist eine Abkürzung für „Data Structure“ und TO für „Template Object“. Als Titel wählen wir mehrspaltig1. In Store in PID übernehmen wir den Dateinamen Datensatzsammlung. Dies kann gespeichert werden durch den Button Create TO and DS. Damit ist der Abschnitt über die TemplaVoilà-Datenstruktur abgeschlossen.

2.5 TypoScript-Template

Nun muss noch das TypoScript-Template eingerichtet werden. Wir wählen dazu das Modul Template (Modulgruppe Web). In der mittleren Spalte suchen wir die Seite mehrspaltig aus. Aus dem Formular auf der rechten Spalte klicken wir Create template for a new site an. Es entsteht ein Formular mit mehreren Stift-Symbolen. Wählen Sie den Stift bei Setup. Dieses Template wird in einem Editor angezeigt. Es enthält bereits einen Inhalt mit Hello, World. Wir löschen diesen Inhalt komplett und schreiben statt dessen:

page ist unser Variablenname, den wir auch anders hätten wählen können, z.B. seite. Aber die Benennung page ist Standard, so dass wir dabei bleiben. Der Parameter typeNum ist auf 0 gesetzt für die normale Ausgabe. Stylesheet setzt den Dateinamen für unsere CSS-Datei. Die beiden letzten Zeilen legen die Verwendung von TemplaVoilà fest.

Aus der TemplaVoilà-Datenstruktur fügen wir auch noch die Elemente hinzu, die für alle Seiten gleich sind, das waren nur lib.kopf und lib.menu_left. Für das Logo in lib.kopf steht uns keine Bilddatei zur Verfügung, so dass wir eine Grafik mit GIFBUILDER selbst erstellen, zwei Boxen unterschiedlicher Höhe mit unterschiedlichen Farben.

Das Menü legt die Verwendung einer Liste für die Elemente fest. Außerdem wird eingerichtet, dass die aktuelle Seite nicht verlinkt ist, also nicht angeklickt werden kann.

Der komplette Code des TypoScript-Templates steht in der Beispieldatei ts/typoscript-template.tmpl zur Verfügung.

2.6 Übernahme der Datenstruktur

Jetzt muss noch mitgeteilt werden, welche TemplaVoilà-Datenstruktur angewendet werden soll. Dieser Schritt kann auf Unterseiten vererbt werden; aber da wir unterschiedliche Spaltenzahlen verwenden werden, werden natürlich verschiedene Datenstrukturen zur Verfügung stehen, so dass meist jede Seite extra eingerichtet werden muss.

Auf dem Modul Seite (Modulgruppe Web) wählen wir die Seite Startseite aus, und klicken dann auf das Stift-Symbol in der Spalte rechts. Dadurch öffnet sich ein Formular, in dem wir das Feld Seiten-Datenstruktur suchen. In dem zugehörigen Button werden die bisher erstellten TemplaVoilà-Datenstrukturen, z.Z. nur mehrspaltig1, dargestellt. Wir klicken darauf, um es zu aktivieren.

Dadurch baut sich ein Dialog auf, den wir mit ok akzeptieren. Ein neues Feld ist entstanden: Benutze Vorlagendesign. Möglicherweise ist darauf bereits automatisch ein Element aktiviert worden, ansonsten müssen wir das passende Element zum Seiten-Datenstruktur-Feld aussuchen, eventuell ist dies mehrspaltig [TEMPLATE] benannt. Diese Information muss wieder durch den Floppy-Button gespeichert werden.

2.7 Einfügen des Inhalts

Wenn wir nun wieder die Seite Startseite im Modul Seite anwählen, stellen wir fest, dass das Layout sich geändert hat. Zusätzlich ist nun das Feld Erstes von eins hinzu gekommen. Dies ist das Element, das wir innerhalb der TemplaVoilà-Datenstruktur als Inhaltselement angelegt haben.

Um den Inhalt für diese Seite hinzuzufügen, klicken Sie auf den Button Neues Element anlegen, der sich unterhalb des Feldes befindet. Wählen Sie dann Normaler Text aus. Damit wir nun den Text nicht selbst eingeben müssen, verwenden wir die Extension Lorem Ipsum, die wir bereits in einem früheren Kapitel installiert haben. Wir sehen, dass im Formular zwei Buttons Lipsum existieren, eine bei Überschrift, die andere bei Text. Wir klicken beide Buttons an. Dies erzeugt einen Einzeiler für den Titel und einen Absatz im Textbereich. Die Sprache klingt ein wenig wie Latein, aber es ist ein willkürlicher Text, der sich von jeder existierenden Sprache unterscheidet.

Wir speichern dies wieder ab (Button mit Diskette).

2.8 CSS Styled Content

Damit im Frontend der Inhalt einer Seite auch wirklich dargestellt wird, muss erst die Extension CSS Styled Content in unserem TypoScript-Template aktiviert werden. Diese Extension ist bereits automatisch installiert.

Zur Aktivierung öffnen wir im Modul Template (Modulgruppe Web) die Seite mehrspaltig. Wir klicken den Button Click here to edit whole template record unterhalb der Stift-Symbole. Dadurch öffnet sich ein Formular über das Template, das wir für diese Seite erstellt haben.

Wir suchen den Ordner Include static (from extensions):. Darin klicken wir in der Liste Objekte: das Element CSS Styled Content (css_styled_content) an. Dadurch wird dieses Element auf die linke Liste Ausgewählt: übertragen. Erst jetzt wird die Datenstruktur in der Extension aktiviert.

Wir können nun speichern durch Klicken auf das Disketten-Symbol am oberen oder unteren Ende des Formulars.

2.9 Ansehen im Frontend

Wir sind jetzt so weit, dass wir uns das erste Ergebnis der selbst erstellten TYPO3-Website ansehen können. Wir öffnen dazu wieder das Modul Seite, klicken den Button neben dem Seitennamen mehrspaltig und wählen Ansehen. Es entsteht im Browser ein neues Fenster oder ein neuer Tab, wo der Output unserer Website dargestellt wird.

Man könnte auch die Seite direkt im Browser aufrufen mit der URL http://typo3/mehrspaltig/.

Man nennt beide Darstellungen das Frontend. Die Bearbeitung der Seiten findet jedoch im Backend statt.

Das Navigationsmenü ist natürlich noch lange nicht vollständig, da wir mit Startseite erst eine Inhaltsseite angelegt haben. Aber das Menü funktioniert wenigstens.

2.10 Seite mit Unterseite

Weitere Seiten lassen sich sehr leicht erzeugen, nachdem die grundlegende Datenstrukturen und Templates bereits erstellt wurden. Wir erzeugen jetzt eine neue Seite, die auch eine Unterseite enthalten soll.

Zur Erstellung einer neuen Seite gehen wir wieder auf das Modul Seite und klicken auf das Symbol neben dem Seitennamen Startseite. Wir wählen Neu und Seite (nach). Im entstehenden Formular geben wir dann den Seitentitel Eine Spalte ein. Achten Sie darauf, dass Seite verstecken nicht aktiviert ist. Außerdem muss noch die Seiten-Datenstruktur eingestellt werden. Wir wählen wieder unsere einzige Datenstruktur mehrspaltig1 im Feld Seiten-Datenstruktur. Im entstehenden Feld Benutze Vorlagendesign wählen wir das Element mehrspaltig1 [TEMPLATE].

Da wir aber zu dieser Seite eine Unterseite erstellen wollen, fügen wir noch in Unterseiten - Seite-Datenstruktur das Element mehrspaltig1 hinzu. Das Formular wird wieder neu aufgebaut. Falls das Feld Unterseiten – Benutze Vorlagendesign noch nicht automatisch eingerichtet wurde, ergänzen wir wieder mehrspaltig1 [TEMPLATE]. Wir speichern wieder ab mit dem Disketten-Button.

Wir erstellen nun die Unterseite. Im Modul Seite wählen wir im Symbol neben dem Seitennamen Eine Spalte wieder Neu, aber diesmal wählen wir Seite (in). Dies erzeugt eine Unterseite zur Seite. Wir deaktivieren wieder Seite verstecken und wählen als Seitentitel Unterseite. Die Datenstruktur brauchen wir nicht mehr anzugeben, da wir dies bereits in Eine Spalte für alle Unterseiten erstellt haben. Wir speichern wieder ab mit dem Disketten-Button.

Wir müssen nun nur noch den Inhalt für die beiden neuen Seiten erstellen. Im Modul Seite wählen wir die Seite Eine Spalte. Auf der rechten Spalte befindet sich das Feld Eins von eins. Dort wird der Button Neues Element anlegen gedrückt. Wie bei der Startseite wählen wir wieder den Lipsum-Button für die Überschrift und den Text. Abgespeichert wird wieder über den Disketten-Button.

Dasselbe führen wir für die Seite Unterseite aus.

Wenn wir uns jetzt wieder das Frontend anschauen (Modul Seite, Symbol Ansehen bei Startseite), sehen wir, dass sich das Navigationsmenü um die beiden neuen Seiten erweitert hat. Alle Seiten können durch Klicken innerhalb des Navigationsmenüs angewählt werden.

Kapitel 3: Erweiterung des Inhalts mit mehreren Spalten

Der Inhalt wird mit zwei, drei, vier und fünf Spalten aufgestockt. Für jede dieser Spaltenzahlen muss dabei wieder eine neue HTML-Vorlage erstellt werden. Daraus werden neue TemplaVoilà-Datenstrukturen erstellt und das TypoScript-Template muss jeweils angepasst werden. Die CSS-Datei kann für alle Spalten gleichzeitig erweitert werden. In dieser Sektion richten wir diese Dinge gleichzeitig für alle Spalten ein.

3.1 Formel für Weite

Wir wollen den Inhalt in mehrere Spalten mit gleicher Breite unterteilen. Dabei sollen die Spalten einen Abstand zueinander haben.

Nehmen wir z.B. 2 Spalten, so gibt es nur 1 Abstand, der sich in der Mitte zwischen beiden Spalten befindet. Bei 3 Spalten ergeben sich 2 Abstände. Bei n Spalten haben wir somit n-1 Abstände. Die gesamte Weite w setzt sich also aus n Spalten s und n-1 Abständen a zusammen.

Daraus lässt sich errechnen, welche Weite eine Spalte hat.

Da als Weite der Einheit Pixel nur eine ganze Zahl gewählt werden kann, berechnen wir s und runden diesen Wert ab. Dieser Rundungsverlust wirkt sich nicht allzu sehr aus; pro Spalte kann sich der Abstand um höchstens 1 Pixel erhöhen.

Ist die Gesamtweite w z.B. 600 Pixel und der Abstand a 10 Pixel, so ergeben sich aus dieser Formel für verschiedene Spaltenanzahlen n folgende Spaltenweiten s (abgerundet):

3.2 Fenster für float

Wir zerlegen eine ganze Seitenbreite in Spalten mit Hilfe des CSS-Tools float. Dabei können jedoch jeweils nur zwei Unterfenster erstellt werden, von denen das erste als linke Spalte (mit float left) und das zweite als rechte Spalte (mit float right) angesteuert wird. Die Spaltenunterteilung erfolgt dann durch zusätzliche div-Tags, die mehrere Spaltenelemente paarweise gruppieren.

Wir verwendeten bisher das HTML-Skript für einspaltigen Inhalt. Darin wurde das Navigationsmenü als linke Spalte und der Inhalt als rechte Spalte angelegt. Wir wollen dieses Schema weiterhin behalten und nur die Spalte für den Inhalt weiter zerlegen. Dieses Zerlegen geschieht durch zusätzliche eingebettete divs.

Es entstehen zwei verschiedene Arten von divs. Die divs für das float-Handling enthalten dabei nur die Eigenschaften float und width, während die divs für die Inhaltsspalten alle anderen Konfigurationseigenschaften beinhalten. Die Zerlegung geschieht durch die Strukturierung der divs mit float. Erst wenn dies komplett durchgeführt ist, werden die divs für die Inhaltsspalten als Unter-divs in alle float-divs eingefügt.

Bei 2 Inhaltsspalten zerlegen wir das div für den Inhalt in 2 weitere divs für das float-Handling, darin wird jeweils ein div für jede Inhaltsspalte eingefügt.

3 Inhaltsspalten werden zerlegt in 2 + 1, also ein Paar-div (mit 2 Unter-divs) und ein einzelnes div. In jede dieser 3 divs wird jeweils ein div für die Inhaltsspalte eingebettet.

Für 4 Inhaltsspalten benötigen wir 2 Paar-divs.

5 Inhaltsspalten werden zuerst zerlegt in 4 + 1, also ein div für 4 Unterelemente und ein einzelnes div, wobei die 4 weiterhin in 2 Paar-divs zerlegt werden.

Daraus ergibt sich folgender allgemeiner Algorithmus, wobei n als Anzahl der Spalten, w als Gesamtweite in Pixel und a als Abstand der Inhaltsspalten startet, und die Weite s einer einzelnen Spalte sich nach der Formel s = (w – (n – 1) * a)) / n aus dem vorigen Kapitel berechnet:

1. Wenn n == 1 ist, füge 1 einzelnes div hinzu mit Weite s und float right, darin füge das div für die Inhaltsspalte ein. Beende den Algorithmus.

2. Wenn n == 2 ist, füge zwei divs der Weite s hinzu mit float left und float right, in die jeweils 1 div für 1 Inhaltsspalte eingefügt wird. Beende den Algorithmus.

3. Wenn n > 2 und ungerade, erzeuge ein div für n := n – 1 (gerade) mit w := w – a – s und float left, führe für diese Werte den Algorithmus aus; außerdem führe den Algorithmus aus für n := 1

4. Wenn n > 2 und gerade, erzeuge 2 divs der Weite w := (w – a) / 2 (abgerundet) mit float left und float right und führe auf beiden den Algorithmus aus für n := n / 2 (abgerundet)

Wir werden alle divs mit class ansteuern, nur die divs für die Inhaltsspalten werden wir zusätzlich mit id versehen, weil sie von TemplaVoilà als Elemente der Datenstruktur angelegt werden.

Wir untersuchen nun den Algorithmus für Beispiele mit der Spaltenanzahl von 1 bis 5. Dabei nehmen wir als Gesamtweite w 600 Pixel an, sowie 10 Pixel für den Spaltenabstand a, so dass wir auf die Berechnungen mit der Formel aus der vorigen Sektion zurückgreifen können.

Beim Beispiel mit einer Spalte ist die Spaltenanzahl n gleich 1, so dass wir im Algorithmus bei Punkt (1) landen. Wir erzeugen also ein einzelnes div mit der vollen Weite (Spaltenweite s ist gleich der Gesamtweite w nach der Formel).

Beim Beispiel mit zwei Spalten ist die Spaltenanzahl n gleich 2 und die Weite der Einzelspalte s 295 Pixel nach der Tabelle aus der vorigen Sektion 3.1. Wir landen im Algorithmus bei Punkt (2). Wir erzeugen also zwei divs mit der Weite s. Wir benennen sie mit dem class-Parameter left_eins_von_zwei und right_eins_von_zwei, da jedes nur eine Spalte enthält. In jedem von beiden erzeugen wir ein div mit der Inhaltsspalte, denen wir die id geben erstes_von_zwei und zweites_von_zwei.

Im Beispiel mit drei Spalten ist die Spaltenanzahl n gleich 3 und die Spaltenweite s 193 Pixel nach der Tabelle aus der Sektion 3.1. Im Algorithmus befinden wir uns bei Punkt (3), da 3 ungerade ist. Wir erzeugen also ein div für n = 3 – 1 = 2 und w = 600 – 193 – 10 = 393 Pixel und nennen es class left_zwei_von_drei, da es zwei Spalten enthält und float left ausgeführt wird. Außerdem wird der Algorithmus für n = 2 weitergeführt und auch für n = 1 aufgerufen. Durch diese Fortführungen entstehen weitere divs, die wir mit class-Parameter left_eins_von_drei und right_eins_von_drei bei n = 2 und right_eins_von_drei bei n = 1 bezeichnen, da jedes nur eine Spalte enthält. In jedem dieser divs erzeugen wir die Inhaltsspalten mit den ids erstes_von_drei, zweites_von_drei und drittes_von_drei.

Bei vier Spalten ist die Spaltenanzahl n gleich 4 und die Spaltenweite s 142 Pixel nach der Tabelle aus der Sektion 3.1. Da 4 gerade ist, befinden wir uns im Algorithmus bei Punkt (4). Wir erzeugen also zwei divs der Weite w = (600 – 10) / 2 = 295 Pixel, die class left_zwei_von_vier und right_zwei_von_vier benannt werden. n wird jetzt gleich 2. Daher wird auf beiden Punkt (2) ausgeführt; erzeugt werden also jeweils zwei Unter-divs mit Namen class left_eins_von_vier und right_eins_von_vier. In alle diese vier entstehenden divs füge die Inhaltsspalten mit id-Namen erstes_von_vier, zweites_von_vier, drittes_von_vier und viertes_von_vier ein.

Im Beispiel mit fünf Spalten ist die Spaltenanzahl n gleich 5 und die Spaltenweite s 112 Pixel nach der Tabelle in 3.1. Da 5 ungerade ist, sind wir im Algorithmus auf Punkt (3). Wir rufen den Algorithmus also auf für 5 – 1 = 4 mit float left (left_vier_von_fuenf) und w = 600 – 10 – 112 = 478 Pixel und für 1 mit float right (right_eins_von_fuenf). Mit der geraden Zahl n gleich 4 landen wir bei Punkt (4). Dort werden zwei weitere divs erzeugt mit w = (478 – 10) / 2 = 234 Pixel (left_zwei_von_fuenf und right_zwei_von_fuenf). In beiden ist jetzt n gleich 2, so dass jetzt Punkt (2) ausgeführt wird mit w = (234 – 10) / 2 = 112 Pixel. Dadurch entstehen insgesamt 5 divs, in die wir die Inhaltsspalten mit id-Namen erstes_von_fuenf, zweites_von_fuenf, drittes_von_fuenf, viertes_von_fuenf und fuenftes_von_fuenf anlegen.

3.3 HTML-Vorlagen

Wir erstellen nun die HTML-Dateien, die als Vorlage für 2, 3, 4 und 5 Inhaltsspalten gelten. 1 Spalte haben wir bereits in den vorigen Kapiteln erzeugt. Wir übernehmen die zugehörige Datei fileadmin/templates/mehrspaltig1.html, die sich mit wenig Aufwand auf die erhöhten Spaltenzahlen erweitern lässt. Die neuen HTML-Dateien werden wir wieder im Ordner fileadmin/templates/ unter den Namen mehrspaltig2.html, mehrspaltig3.html, mehrspaltig4.html und mehrspaltig5.html abspeichern.

Die folgende Zeile aus mehrspaltig1.html wird dabei jeweils gelöscht und durch einen neuen Inhalt ersetzt:

Die Datei mehrspaltig2.html ersetzt diese Zeile durch folgenden Inhalt:

Dabei verwenden wir bei [ZWEI_VON_ZWEI] sowohl id als auch class. id wird dabei von TemplaVoilà verwendet, während class durch CSS zur Strukturierung dient.

Die Datei mehrspaltig3.html ersetzt diese Zeile durch folgenden Inhalt:

Die Datei mehrspaltig4.html ersetzt diese Zeile durch folgenden Inhalt:

Die Datei mehrspaltig5.html ersetzt diese Zeile durch folgenden Inhalt:

Der vorgestellte Code ist komplett in den Beispieldateien templates/mehrspaltig2.html, templates/mehrspaltig3.html, templates/mehrspaltig4.html und templates/mehrspaltig5.html enthalten.

3.4 CSS-Datei

An die CSS-Datei ../css/mehrspaltig.css wird folgender Inhalt mit dem kompletten Code für 2, 3, 4 und 5 Spalten ans Dateiende angefügt:

Man sollte beachten, dass hier nur Klassen konfiguriert werden (beginnend mit Punkt „.“). Es ist nicht nötig, ids zu spezifizieren, da aus dem HTML-Code zu ersehen ist, dass alle Aufrufe mit id zusätzlich einen class-Parameter haben.

Die h1-Aufrufe mit der font-size: 200% sind nötig, weil Microsoft Internet Explorer nicht in der Lage ist, die Font-Verkleinerung auch auf die Überschrift zu übertragen.

Der komplette CSS-Code ist in der Beispieldatei css/mehrspaltig.css enthalten.

3.5 Aufbau der TemplaVoilà-Datenstrukturen

Wir müssen nun für jede der neuen HTML-Dateien eine TemplaVoilà-Datenstruktur erstellen. Analog zum Vorgehen in Kapitel 2.4 für das einspaltige Beispiel gehen wir über das Modul Dateiliste in den Ordner fileadmin/templates. Wir beginnen mit der HTML-Datei mehrspaltig2.html. Wir klicken wieder auf das Symbol neben dem Dateinamen und wählen aus dem entstandenen Menü den Eintrag TemplaVoilà.

Es entsteht wieder ein Formular zum Aufbau der Datenstruktur. Um Arbeit zu sparen, laden wir die bereits erstellte Datenstruktur von mehrspaltig1. Dazu klicken wir auf den Button Load. Im enstehenden Formular klicken Sie auf den Menü-Button, der überschrieben ist mit Select a Template Object record to load a Data Structure/Mapping information from:. Dort wählen Sie den Eintrag Datensatzsammlung/mehrspaltig1 [TEMPLATE] aus. Klicken Sie auf den Button Load Data Structure zum Übernehmen.

Sie kehren zurück zum vorigen Formular, das aber nun durch die geladene Datenstruktur erweitert ist. Die Elemente Root, Kopf und Menu Left sind bei der Spalte HTML-Path abgehakt und damit voll verwendungsfähig. Nur beim Element Erstes von eins entsteht natürlich ein Fehler, da der zugehörige Eintrag in der Map natürlich nicht mehr in der Datei mehrspaltig2.html vorhanden ist. Dort existieren nur id und class der Form ..._zwei. Wir löschen daher das fehlerhafte Feld Erstes von eins durch Klicken auf den Lösch-Button DELETE entry in der Spalte ganz rechts Edit:.

Wir erstellen nun die Elemente field_eins_von_zwei und field_zwei_von_zwei in gleicher Weise wie wir bei mehrspaltig1.html vorgegangen sind. Für beide Felder nehmen wir den Editing Type: Content Element. Danach ist unsere Datenstruktur komplett, und wir müssen sie nur noch abspeichern. Dies geschieht wieder über den Button Save as. Wir wählen als Namen in Title of DS/TO mehrspaltig2. Wir lassen die Felder Template Type auf Page Template und Store in PID auf der Datei Datensatzsammlung. Wir klicken schließlich auf den Button Create TO and DS. Dies speichert unsere Datenstruktur unter dem Namen mehrspaltig2 ab.

Wir können jetzt auf die nächste HTML-Datei übergehen. Wir führen die gleiche Prozedur durch für die Dateien mehrspaltig3.html, mehrspaltig4.html und mehrspaltig5.html. Der Arbeitsaufwand zur Erstellung der Datenstruktur steigt mit der Zahl der Spalten. Danach haben wir die kompletten Datenstrukturen für 1 bis 5 Inhaltsspalten.

Da wir nur Elemente verwenden, die sich bei jeder Seite ändern, und keine neuen Strukturen der Form lib_... erstellt haben, braucht keine Anpassung der TypoScript-Templates durchgeführt zu werden.

3.6 Seiten mit Inhalt

Als nächstes erzeugen wir für jede Spaltenanzahl eine Seite, die genau die jeweilige Spaltenzahl enthalten soll. Im Modul Seite erzeugen wir zunächst eine neue Seite durch wählen von Neu im Symbol neben dem Namen Eine Spalte, diese Seite wird als Seite (nach) erstellt. Als Seitentitel geben wir Zwei Spalten an und wählen als Seiten-Datenstruktur mehrspaltig2 aus. Wir bestätigen die Abfrage, wodurch ein neues Feld Benutze Vorlagendesign entsteht. Wir suchen dort das passende mehrspaltig2 [TEMPLATE] aus. Wir speichern nun das Formular (Floppy-Button), wodurch die neue Seite erzeugt ist und für zwei Spalten ausgerichtet wurde.

Wenn wir nun auf den Dateinamen Zwei Spalten klicken gelangen wir zurück auf das Modul Seite und zwar auf die angeklickte Seite. Wir sehen nun, dass auf der Seite zwei Felder verfügbar sind, nämlich Erstes von zwei und Zweites von zwei. Die Angabe der Seiten-Datenstruktur hat also Früchte getragen.

Um Inhalt hinzuzufügen, klicken wir auf den Button Neues Element anlegen unterhalb von Erstes von zwei. In dem entstehenden großen Auswahlmenü wählen wir Normaler Text. Wie beim einspaltigen Beispiel erzeugen wir Überschrift und Text durch den Button Lipsum. Wir speichern wieder ab, wir können dazu den Floppy-Button Dokument sichern und schließen verwenden. Dadurch gelangen wir wieder zurück zum Modul Seite. Nun führen wir das Gleiche aus für das Element Zweites von zwei.

Diese Seite ist nun vollständig erzeugt. Wir erstellen nun weitere Seiten Drei Spalten, Vier Spalten und Fünf Spalten. Wir fügen jeder dieser Seiten die passende Seiten-Datenstruktur zu, nämlich mehrspaltig3, mehrspaltig4 und mehrspaltig5. Anschließend werden diese Seiten wieder mit Lipsum gefüllt.

Wir können nun stolz das Ergebnis im Frontend anschauen. Das Navigationsmenü enthält bereits 7 Einträge. Jede Spaltenanzahl stellt die Spalten in anderer Größe und Farbe dar, wie im CSS konfiguriert.

Kapitel 4: Kombination von Spaltenaufteilungen

Wir wollen nun eine neue Seite erstellen, die gleichzeitig zwei Strukturen mit drei Spalten und zwei mit fünf Spalten hat. Dazu müssen wir eine neue HTML-Vorlage und eine neue TemplaVoilà-Datenstruktur erzeugen. Aber wir kommen ohne Änderung bei der CSS-Datei aus, die in den Kapiteln 2.2 und 3.4 erstellt wurde. Ebenso bleibt das TypoScript-Template aus Kapitel 2.5 unverändert.

Als HTML-Vorlage erstellen wir die Datei mehrspaltig3_3_5_5.html. Die Struktur für die 3-spaltige Darstellung können wir aus mehrspaltig3.html übernehmen, die 5-spaltige aus mehrspaltig5.html. Zu den id-Werten ergänzen wir lediglich die Ziffern _1 und _2, um auf das 1. oder 2. Gespann der 3-spaltigen oder 5-spaltigen Darstellung hinzuweisen.

Die Datei mehrspaltig3_3_5_5.html sieht folgendermaßen aus:

Dieser Code befindet sich auch in der Beispieldatei templates/mehrspaltig3_3_5_5 .html.

Aus dieser Vorlage erstellen wir wieder eine TemplaVoilà-Datenstruktur nach derselben Methode wie bei den anderen HTML-Vorlagen. Da diese Vorlage insgesamt 3 + 3 + 5 + 5 = 16 Spalten enthält, dauert diese Erstellung etwas länger als bei den anderen Vorlagen. Wir nennen die TemplaVoilà-Datenstruktur mehrspaltig3_3_5_5.

Zur Anwendung der neuen Datenstruktur erstellen wir mit Neu eine neue Standard-Seite nach der letzten Seite. Wir benennen sie durch die Titelbezeichnung in 3+3+5+5 Spalten. Wir ergänzen in der Konfiguration dieser Seite die neuen Datenstrukturen: in das Feld Seiten-Datenstruktur wird dazu mehrspaltig3_3_5_5 und in Benutze Vorlagendesign mehrspaltig3_3_5_5 [Template] übernommen.

Dadurch werden nun beim Modul Seite alle Spalten dargestellt und können durch Beispielinhalte mit Lipsum aufgefüllt werden. Wir beschränken jedes Inhaltselement auf einen Satz, damit diese Seite eine überschaubare Größe behält.. Die Darstellung dieser Seite und des gesamten Projekts sollte in allen Internet-Browsern funktionieren.

Bei Bedarf können Sie jetzt auch noch die grafische Darstellung der vielen Spalten noch etwas aufwerten, z.B. wäre es sinnvoll die Abstände der Spalten nach unten zu vergrößern. Dazu müssen Sie nur die CSS-Datei um einige margin-bottom-Elemente ergänzen. Das bleibt jedoch als Übung.