Erstellen eines HTML-Templates mit externer CSS-Datei

Größe: px

Ab Seite anzeigen:

Download "Erstellen eines HTML-Templates mit externer CSS-Datei"

Ina Arnold
vor 8 Jahren
Abrufe

1 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

Template Anlegen und Einbinden einer HTML-Vorlage Anlegen einer CSS-Datei Hinzufügen der CSS-Angaben ins Template Anlegen einer Seite mit

2 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

$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.$

3 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

Dort definieren wir dann durch ###MARKIERUNGSNAME### welcher Inhalt an diese Stelle stehen soll.

4 <!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.

5 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 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

1. Nun im Typo3-BE-Bereich zum Modul Dateiliste wechseln. 2. Jetzt das Verzeichnis wählen. 3. Datei Hochladen.

6 Anlegen einer CSS-Datei  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:# 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

$menu_1-2-no { background-color:#eaeaea;.menu_1-2-act { background-color:#939393 Auch diese Datei muss anschließend hochgeladen werden.$

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

Ähnliche Dokumente

Meine erste Homepage - Beispiele

Meine erste Homepage - Beispiele Meine erste - Beispiele 1. Beispiel meine Willkommen auf meiner Befehle nicht über Hier ist ein Senior, der noch fit für's Internet ist. Probieren wir