WH: Menüs erstellen mit TypoScript

Präsentation zum Thema: "WH: Menüs erstellen mit TypoScript"—  Präsentation transkript:

1 WH: Menüs erstellen mit TypoScript
In TYPO3 werden Menüs mittels TypoScript in den Templates definiert. Die Erstellung der Menüs übernimmt dann TYPO3 automatisch. Es macht dabei keinen Unterschied, ob es sich um ein grafisches oder ein Textmenü handelt.

2 WH: Menügenerierung Ausgangsbasis für die Menügenerierung ist der Seitenbaum, der die Struktur der Website widerspiegelt. TypoScript übernimmt aus dem Seitenbaum die Hierarchie und die Namen der Seiten und fügt sie an den richtigen Stellen in die generierten Menüs ein.

3 WH: Die drei wichtigsten Menüarten in TYPO3 sind:
Textmenüs Grafische Menüs Layer-/Aufklapp-Menüs

4 WH: Beispiel HMENU marks.NAVIGATION = HMENU marks.NAVIGATION.1 = TMENU
marks.NAVIGATION.1.NO { allWrap = <tr><td>|</td></tr> ATagParams = class=ft10px333333 }

5 WH: Fortsetzung Beispiel
marks.NAVIGATION.1.ACT = 1 marks.NAVIGATION.1.ACT { allWrap = <tr><td><b>|</b></td></tr> ATagParams = class=ft10px333333 } marks.NAVIGATION.2 = TMENU marks.NAVIGATION.2.NO { allWrap = <tr><td>  |</td></tr>

6 Grafische Menüs TYPO3 bietet auch Funktionen an, mit denen grafische Menüs automatisch erzeugt werden können. Bei Änderungen seitens der Redakteure werden die zum Aufbau der Menüs nötigen Bilder automatisch am Server neu berechnet. Das zeitraubende Erstellen von Grafiken in Bildverarbeitungsprogrammen für alle Menüpunkte entfällt dadurch.

7 Beispiel GMENU marks.NAVIGATION= HMENU marks.NAVIGATION.1 = GMENU
marks.NAVIGATION.1.NO { backColor = #AAAAAA XY = 100, 20 10 = TEXT 10.text.field = title 10.fontFile = fileadmin/verdana.ttf 10.fontSize = 11 10.offset = 6,10 10.fontColor = #FFFFFF }

8 Beispiel GMENU 2. Ebene marks.NAVIGATION.2 = GMENU
marks.NAVIGATION.2.NO { backColor = #CCCCCC XY = 100, 14 10 = TEXT 10.text.field = title 10.fontFile = fileadmin/verdana.ttf 10.fontSize = 9 10.offset = 3,8 10.niceText = 0 }

9 Einbinden einer Hintergrundgrafik
marks.NAVIGATION.1.NO { backColor = #AAAAAA XY = [10.w]+10, 20 10 = TEXT 10.text.field = title 10.fontFile = fileadmin/verdana.ttf 10.fontSize = 11 10.offset = 4,10 10.niceText = 1 5 = IMAGE 5.file = fileadmin/menuhintergrund.gif }

10 Rollover-Effekt marks.NAVIGATION.1.RO < seite.10.marks.NAVIGATION.1.NO marks.NAVIGATION.1.RO = 1 marks.NAVIGATION.1.RO.5.file = fileadmin/menueover.gif marks.NAVIGATION.1.ACT < seite.10.marks.NAVIGATION.1.NO marks.NAVIGATION.1.ACT = 1 marks.NAVIGATION.1.ACT.5.file = fileadmin/menueaktiv.gif

11 Textmenüs und Grafikmenüs gemeinsam
marks.MENU = HMENU marks.MENU.1 = GMENU marks.MENU.1.NO { XY = [10.w]+10, 20 10 = TEXT 10.text.field = title 10.fontFile = fileadmin/verdana.ttf 10.fontSize = 11 } marks.MENU.2 = TMENU marks.MENU.2.NO { allWrap = <tr><td>|</td></tr>

12 Layermenüs TypoScript kennt einen Objekttyp namens GMENU_LAYER, der es erlaubt, Aufklappmenüs bestehend aus DHTML-Layern zu konstruieren. Dazu wird die erste Hierarchieebene eines HMENU-Objektes als GMENU_LAYER definiert und die zweite entweder als TMENU oder GMENU. Die Funktionsweise und das Aussehen der Aufklappmenüs werden gänzlich in TypoScript definiert.  Vorführung

13 Beispiel seite = PAGE seite.typeNum = 0
seite.includeLibs.gmenu_layers = media/scripts/gmenu_layers.php seite.10 = HMENU seite.10.1 = GMENU_LAYERS seite.10.1 { layerStyle = position:absolute;left:0px;top:20px;width:10px; // VISIBILITY:hidden; xPosOffset =-10 lockPosition = x expAll=1

14 Beispiel Teil 2 NO { backColor = #cccccc XY = [10.w]+30, 20 10 = TEXT
10.text.field = title 10.fontFace = fileadmin/verdana.ttf 10.fontSize = 12 10.offset = 5,15 }

15 Beispiel Teil 3 seite.10.2 = GMENU seite.10.2.NO { backColor = #cccccc
XY = 140, 20 10 = TEXT 10.text.field = title 10.offset = 5,13 10.fontSize = 11 10.fontFace = fileadmin/verdana.ttf }

16 Mehrstufige Layermenüs
Dabei wird auch die zweite Hierarchieebene des Menüs als GMENU_LAYER definiert: seite.10.2 = GMENU_LAYERS seite.10.2 { layerStyle = position:absolute;left:0px;top:200px;width:10px; // VISIBILITY:hidden; xPosOffset = -10 yPosOffset = -30 lockPosition = y expAll = 1 }

17 Mehrstufige Layermenüs 2
Die dritte Ebene des HMENU-Objektes wird wieder als normales GMENU definiert. seite.10.3 = GMENU seite.10.3.NO { backColor = |*| #cccccc || #aaaaaa |*| XY = 120, 20 10 = TEXT 10.text.field = title 10.fontFace = fileadmin/verdana.ttf 10.fontSize = 10 10.offset = 5,13 }

18 Sitemaps Sitemaps, die Übersichten über die Struktur von Websites liefern, sind eine spezielle Menüform. TYPO3 stellt fertige Content-Elemente für diesen Zweck zur Verfügung. Beim Einfügen neuer Content-Elemente wird ein entsprechender Typ im Bereich »Spezielle Elemente« vorgehalten.  Vorführung

19 Sitemaps Formatierung
Das Aussehen der Sitemap können Sie beeinflussen, indem Sie den Constant-Editor der Template-Tools bemühen. In der Kategorie Content gibt es einen eigenen Abschnitt für die Content-Elemente Menü und Sitemap.  Vorführung

20 Arbeiten mit Frames Der Aufbau des TypoScript-Codes zur Frame-Definition ist dem HTML-Code sehr ähnlich. TYPO3 unterscheidet Seiten, die als Behälter für weitere Seiten dienen (Frameset und Frames in HTML), mittels der Eigenschaft typeNum. In den bisherigen Beispielen musste typeNum jeweils auf 0 gesetzt werden, da bei framelosen Seiten nur ein Seitentyp vorkommt.

21 Beispiel Frames zeilenframeset = PAGE zeilenframeset.typeNum = 0
header = PAGE header.typeNum = 1 main = PAGE main.typeNum = 3 blank = PAGE blank.typeNum = 4 bottom = PAGE bottom.typeNum = 5

22 Beispiel Frames 2 zeilenframeset.frameSet { rows = 104,*,29
params = border="0" frameborder="no" framespacing="0" 1 = FRAME 1.obj = header 1.params = noresize scrolling="no“ 2 = FRAMESET 2.params = noresize scrolling="no" 2.cols = 783,*

23 Beispiel Frames 3 2 { 1 = FRAME 1.obj = main 2 = FRAME 2.obj = blank }
3.obj = bottom 3.params = noresize scrolling="no"