WH: Menüs erstellen mit TypoScript
-
Upload
kelsey-scott -
Category
Documents
-
view
45 -
download
0
description
Transcript of 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.
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 = 1marks.NAVIGATION.1.ACT {
allWrap = <tr><td><b>|</b></td></tr> ATagParams = class=ft10px333333}marks.NAVIGATION.2 = TMENUmarks.NAVIGATION.2.NO {
allWrap = <tr><td> |</td></tr> ATagParams = class=ft10px333333}
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= 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
}
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
}
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
}
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
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>}
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 = #ccccccXY = [10.w]+30, 2010 = TEXT10.text.field = title10.fontFace = fileadmin/verdana.ttf10.fontSize = 1210.offset = 5,15
}}
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
}
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
}
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
}
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 = PAGEzeilenframeset.typeNum = 0header = PAGEheader.typeNum = 1main = PAGEmain.typeNum = 3blank = PAGEblank.typeNum = 4bottom = PAGEbottom.typeNum = 5
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,*
23
Beispiel Frames 3
2 {1 = FRAME1.obj = main2 = FRAME2.obj = blank
}3 = FRAME3.obj = bottom3.params = noresize scrolling="no"
}