Erstellen eines HTML-Templates mit externer CSS-Datei Eigenschaften der Lösung Menü mit 2 Ebenen ohne Bilder, Menü besteht aus Text (Links) Durch CSS kann das Menü aber auch die Seite angepasst werden Arbeitsschritte Anlegen einer Seite mit Unterseiten Einrichten des Menüs im Template Anlegen und Einbinden einer HTML-Vorlage Anlegen einer CSS-Datei Hinzufügen der CSS-Angaben ins Template Anlegen einer Seite mit Unterseiten Um zu erfahren wie Seiten und Unterseiten angelegt werden, sehen Sie sich noch einmal den Abschnitt Seiten Einrichten an. Version 1.0 Seite 1/7
Einrichten des Menüs im Template # Der Anfang page = PAGE page.typenum = 0 page.10 = TEMPLATE page.10.template = fileadmin/ordnername/html_template.html # unser HTML Template page.10.workonsubpart = DOCUMENT # unser definierter Arbeitsbereich page.10.marks.inhalt = CONTENT # unser SubPart ###INHALT### page.10.marks.inhalt { table = tt_content select.orderby = sorting select.where = colpos=0 page.10.marks.navigation= HMENU # unser SubPart ###NAVIGATION### page.10.marks.navigation.1 = TMENU page.10.marks.navigation.1.no { allwrap = <tr><td class="menu_1-1-no"> <tr> page.10.marks.navigation.1.act = 1 page.10.marks.navigation.1.act{ allwrap = <tr><td class="menu_1-1-act"> <tr> page.10.marks.navigation.2 = TMENU page.10.marks.navigation.2.no { allwrap = <tr><td class="menu_1-2-no"> <tr> page.10.marks.navigation.2.act = 1 page.10.marks.navigation.2.act{ allwrap = <tr><td class="menu_1-2-act"> <tr> Die rot markierten Wörter geben die Markierung für den jeweiligen Inhalt an. Der blau markierte Bereich gibt das Unterverzeichnis von Fileadmin und den Namen des HTML- Templates an. Die grün markierten Bereich sind schließlich die Klassen für das CSS-Template. Version 1.0 Seite 2/7
Anlegen und Einbinden einer HTML-Vorlage Im Template wurden schon die Bereiche definiert, die den entsprechenden Inhalt haben werden. Nun muss dies auch in dem HTML-Template geschehen. Zunächst muss eine HTML-Seite angelegt werden. Dort definieren wir dann durch ###MARKIERUNGSNAME### welcher Inhalt an diese Stelle stehen soll. In einigen Dokumentationen wird diese Markierung in einem HTML-Kommentar dargestellt. Ich persönlich bin der Meinung, dass man durch Deaktivieren der Markierungen im Typo3-Template der Seite noch einmal gut sehen kann, wo dieser Inhalt stehen soll. Bei einem Kommentar bleibt dies jedoch aus. Version 1.0 Seite 3/7
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>template</title> </head> <body> ###DOCUMENT### <table align="left" width="100%" height="95%" align="left" cellpadding="0" cellspacing="0" border="0"> <tr height="50"> <td bgcolor="black"><img src="fileadmin/logo.jpg" height="50" width="69" alt="dlr- logo"> <td bgcolor="black"><img src="fileadmin/swaci_headline_0.jpg" alt="swacilogo"> <tr valign="top"> <td width="10%" style="background-color:#000000" border="0"> <table id="menu_1" valign="top" cellpadding="0"> <tr> ###NAVIGATION### <br> ###LANG### </table> <table id="inhalt" valign="top" cellpadding="20"> <tr> ###INHALT### ###PHP### </table> </table> <br> ###DOCUMENT### </body> </html> Version 1.0 Seite 4/7
Nun muss noch das Template eingebunden werden. Als Voraussetzung brauchen wir innerhalb des Verzeichnisses Fileadmin ein Unterverzeichnis mit Schreibzugriff. 1. Nun im Typo3-BE-Bereich zum Modul Dateiliste wechseln. 2. Jetzt das Verzeichnis wählen. 3. Datei Hochladen. 1. 2. Falls eine Datei schon existiert, wird die neue mit einer laufenden Nummer gekennzeichnet. Daher Steht die Funktion zum Überschreiben zur Verfügung. Version 1.0 Seite 5/7
Anlegen einer CSS-Datei <!-- hintergrund { color: #red --> body { background-color:#ffcb8c;.menu_1-1-no { background-color:#ffffff; font-weight:bold;.menu_1-1-act { background-color:grey; font-weight:bold;.menu_1-2-no { background-color:#eaeaea;.menu_1-2-act { background-color:#939393 Auch diese Datei muss anschließend hochgeladen werden. So das Typo3-Template ist bisher so konfiguriert, dass es auch gut ohne ein CSS-Template funktioniert. Aber da die Funktionen von CSS genutzt werden sollen, erweitern wir das Template nun. Version 1.0 Seite 6/7
page = PAGE page.stylesheet = fileadmin/stylesheet.css page.typenum = 0 page.10 = TEMPLATE... Die rote Zeile muss dem Template hinzugefügt werden. Version 1.0 Seite 7/7