WH: Menüs erstellen mit TypoScript

of 23 /23
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.

description

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. WH: Menügenerierung. - PowerPoint PPT Presentation

Transcript of WH: Menüs erstellen mit TypoScript

Page 1: WH: Menüs erstellen mit TypoScript

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.

Page 2: WH: Menüs erstellen mit TypoScript

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.

Page 3: WH: Menüs erstellen mit TypoScript

3

WH: Die drei wichtigsten Menüarten in TYPO3 sind:

• Textmenüs

• Grafische Menüs

• Layer-/Aufklapp-Menüs

Page 4: WH: Menüs erstellen mit TypoScript

4

WH: Beispiel HMENU

marks.NAVIGATION = HMENU

marks.NAVIGATION.1 = TMENU

marks.NAVIGATION.1.NO {

allWrap = <tr><td>|</td></tr>

ATagParams = class=ft10px333333

}

Page 5: WH: Menüs erstellen mit TypoScript

5

WH: Fortsetzung Beispiel

marks.NAVIGATION.1.ACT = 1marks.NAVIGATION.1.ACT {

allWrap = <tr><td><b>|</b></td></tr> ATagParams = class=ft10px333333}marks.NAVIGATION.2 = TMENUmarks.NAVIGATION.2.NO {

allWrap = <tr><td>&nbsp;&nbsp;|</td></tr> ATagParams = class=ft10px333333}

Page 6: WH: Menüs erstellen mit TypoScript

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.

Page 7: WH: Menüs erstellen mit TypoScript

7

Beispiel GMENU

marks.NAVIGATION= HMENUmarks.NAVIGATION.1 = GMENUmarks.NAVIGATION.1.NO {

backColor = #AAAAAAXY = 100, 2010 = TEXT10.text.field = title10.fontFile = fileadmin/verdana.ttf10.fontSize = 1110.offset = 6,1010.fontColor = #FFFFFF

}

Page 8: WH: Menüs erstellen mit TypoScript

8

Beispiel GMENU 2. Ebene

marks.NAVIGATION.2 = GMENUmarks.NAVIGATION.2.NO {

backColor = #CCCCCCXY = 100, 1410 = TEXT10.text.field = title10.fontFile = fileadmin/verdana.ttf10.fontSize = 910.offset = 3,810.niceText = 0

}

Page 9: WH: Menüs erstellen mit TypoScript

9

Einbinden einer Hintergrundgrafik

marks.NAVIGATION.1.NO {backColor = #AAAAAAXY = [10.w]+10, 2010 = TEXT10.text.field = title10.fontFile = fileadmin/verdana.ttf10.fontSize = 1110.offset = 4,1010.niceText = 15 = IMAGE5.file = fileadmin/menuhintergrund.gif

}

Page 10: WH: Menüs erstellen mit TypoScript

10

Rollover-Effekt

marks.NAVIGATION.1.RO < seite.10.marks.NAVIGATION.1.NO

marks.NAVIGATION.1.RO = 1marks.NAVIGATION.1.RO.5.file = fileadmin/menueover.gifmarks.NAVIGATION.1.ACT <

seite.10.marks.NAVIGATION.1.NOmarks.NAVIGATION.1.ACT = 1marks.NAVIGATION.1.ACT.5.file =

fileadmin/menueaktiv.gif

Page 11: WH: Menüs erstellen mit TypoScript

11

Textmenüs und Grafikmenüsgemeinsam

marks.MENU = HMENUmarks.MENU.1 = GMENUmarks.MENU.1.NO {

XY = [10.w]+10, 2010 = TEXT10.text.field = title10.fontFile = fileadmin/verdana.ttf10.fontSize = 11

}marks.MENU.2 = TMENUmarks.MENU.2.NO {

allWrap = <tr><td>|</td></tr>}

Page 12: WH: Menüs erstellen mit TypoScript

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

Page 13: WH: Menüs erstellen mit TypoScript

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

Page 14: WH: Menüs erstellen mit TypoScript

14

Beispiel Teil 2

NO {backColor = #ccccccXY = [10.w]+30, 2010 = TEXT10.text.field = title10.fontFace = fileadmin/verdana.ttf10.fontSize = 1210.offset = 5,15

}}

Page 15: WH: Menüs erstellen mit TypoScript

15

Beispiel Teil 3

seite.10.2 = GMENUseite.10.2.NO {

backColor = #ccccccXY = 140, 2010 = TEXT10.text.field = title10.offset = 5,1310.fontSize = 1110.fontFace = fileadmin/verdana.ttf

}

Page 16: WH: Menüs erstellen mit TypoScript

16

Mehrstufige Layermenüs

Dabei wird auch die zweite Hierarchieebene des Menüs alsGMENU_LAYER definiert:

seite.10.2 = GMENU_LAYERSseite.10.2 {layerStyle = position:absolute;left:0px;top:200px;width:10px; //

VISIBILITY:hidden;xPosOffset = -10yPosOffset = -30lockPosition = yexpAll = 1

}

Page 17: WH: Menüs erstellen mit TypoScript

17

Mehrstufige Layermenüs 2

Die dritte Ebene des HMENU-Objektes wird wieder als normales GMENU definiert.

seite.10.3 = GMENUseite.10.3.NO {

backColor = |*| #cccccc || #aaaaaa |*|XY = 120, 2010 = TEXT10.text.field = title10.fontFace = fileadmin/verdana.ttf10.fontSize = 1010.offset = 5,13

}

Page 18: WH: Menüs erstellen mit TypoScript

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

Page 19: WH: Menüs erstellen mit TypoScript

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

Page 20: WH: Menüs erstellen mit TypoScript

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.

Page 21: WH: Menüs erstellen mit TypoScript

21

Beispiel Frames

zeilenframeset = PAGEzeilenframeset.typeNum = 0header = PAGEheader.typeNum = 1main = PAGEmain.typeNum = 3blank = PAGEblank.typeNum = 4bottom = PAGEbottom.typeNum = 5

Page 22: WH: Menüs erstellen mit TypoScript

22

Beispiel Frames 2

zeilenframeset.frameSet {rows = 104,*,29params = border="0" frameborder="no" framespacing="0"1 = FRAME1.obj = header1.params = noresize scrolling="no“

2 = FRAMESET2.params = noresize scrolling="no"2.cols = 783,*

Page 23: WH: Menüs erstellen mit TypoScript

23

Beispiel Frames 3

2 {1 = FRAME1.obj = main2 = FRAME2.obj = blank

}3 = FRAME3.obj = bottom3.params = noresize scrolling="no"

}