WH: Menüs erstellen mit TypoScript

Slides:



Advertisements
Ähnliche Präsentationen
B-Bäume.
Advertisements

Seminar Internetdienste Web 2.0 und Rich Internet Applications (RIA) JavaFX Rainer Scholz.
Web-CMS der Universität Ulm
Typo3 Schulung.
Dedizierte Systeme Templa Voilá Universität zu Köln SS 2009 IT Zertifikat der Philosophischen Fakultät Dozentin: Susanne Kurz M.A. Referenten: Ulrike Henny,
Markus Tank, Wie arbeitet man mit dem Rich Text Editor?
Dreamweaver Tatjana Funk. Gebrauchtwagenkauf DW ist ein visueller Editor DW ist ein WYSIWYG Editor (What you see is what you get.
Suchmaschine vs. Katalog Such-Robots i.d.R. werden alle Seiten erfasst täglich werden mehrere Mio. Seiten besucht Redaktion relativ wenig Seiten erfasst.
TempaVoila Referent: Johannes Lenz. TemplaVoila Ist eine templating enginge Dient dazu eigene Templates (hauptsächlcih Designs) zu erstellen Wurde entwickelt.
Benutzen von Internetseiten
XHTML 1.1 C. Nimz Abstrakte Module XHTML 1.1 C. Nimz Was ist ein abstraktes Modul? Definition eines XHTML-Moduls in spezieller leichter.
Erzeugung, Pflege, Aktualisierung von web-Inhalten
Kurs Schreiben 1/12 Dr. Barbara Hoffmann LiteraturKompetenz Formatiertes wissenschaftliches Schreiben Der Kurs ist zur allgemeinen Information.
Eine Homepage für die Fachberatung Thomas Scholz.
DVG Kommentare1 Kommentare. DVG Kommentare 2 Kommentare Es gibt zwei Arten von Kommentaren: einzeilige Kommentare // der Kommentar geht.
DVG Kommentare 1 Kommentare. 2 Kommentare Es gibt zwei Arten von Kommentaren: einzeilige Kommentare // der Kommentar geht bis zum Ende der Zeile.
Access & Assign Methoden in Visual FoxPro Zuweisungs- und Zugriffs-Methoden.
FH-Hof HTML - Einführung Richard Göbel. FH-Hof Komponenten des World Wide Webs WWW Browser HyperText Transfer Protocol (HTTP) via Internet WWW Server.
Erste Schritte mit PHP 5 von Max Brandt, 22. September 2006.
Informatik Anwendungen I
Präsentieren mit Powerpoint
Typo3 Workshop Hochschule Neubrandenburg
Hyperlinks und Anker Links notieren
EIN CMS MACHT SCHULE Tina Gasteiger.
Aktuelle Schulhomepage mit Typo3
EIDAMO ® Frontend Das neue Frontend gibt Ihnen 100% Flexibilität, und weil es auf verschiedene Framework Biblieotheken basiert, können Sie praktisch.
Christian Moser Software Developer and UX Designer Zühlke Engineering AG
Internet: Funktionsweise und Dienste
Was ist ein Frame? Frames teilen Browser-Fenster in rechteckige Bereiche. Mehrere Web-Seiten können gleichzeitig angezeigt werden unabhängig voneinander.
Haus der Geschichte Workshop CMS Typo3 Bonn,
Projektarbeit PHP 5.3 / MySQL & Content Management Systems
Typo3 Templates und TypoScript
Typo 3. INSTALLATION TYPO3 INSTALLTOOL EXTENSIONS UND TEMPLATES INSTALLATION TEMPLAVOILA USERMANAGEMENT Inhalt:
Tutorium zur LV Online Research Ein Computerprogramm tut, was Du schreibst, nicht was Du willst.
PPS-Veranstaltung (Design einer eigenen WWW-Homepage) Navigationsmechanismen.
EP Media Group SiteKist CMS Version 6.9. ©2014 EP Media Group Internet:
Aus der Sicht eines Redakteurs Pflege von Textinhalten Pflege von Bilder – Bildverarbeitung Formulare Seiten anlegen / löschen -> Vorführung.
1 Seiten und Seiteninhalte Als Web Content Management-System dient TYPO3 der Erstellung und Verwaltung von Webinhalten. In der Systematik von TYPO3 besteht.
HTML und CSS Erstellung einer APP. HTML: head Sharky.
Menüs erstellen mit TypoScript
WAI konforme Seiten mit TYPO3 (Web Accessibility Initative) © Peter Luser 2005.
Einführung in Typo3 Beim Aufruf unserer Internetpräsenz bei leerem Typo3 erhalten wir folgende Fehlermeldung:
1 Bildverwaltung und Erzeugung dynamischer Grafiken. Automatische Umwandlung des von den Redakteuren erfassten Bildmaterials in ein webgerechtes Format.
1 Konfiguration des Backends In TYPO3 kann man das Backend des Systems mittels Anweisungen verändern. Dies geschieht mittels TypoScript im Feld TSconfig.
1 Mehrsprachigkeit Das Backend von TYPO3 ist mehrsprachig, so dass jeder Redakteur mit TYPO3 Zu einem mehrsprachigen Webauftritt gehört bei einem ausgereiften.
Einbinden von HTML Dateien
Aufzeichnung von Usability-Daten im www. Client-Side Log : automatisch (maschinell) generiertes Protokoll Client : Rechner mit dem Browser des Users Server:
Content Management System
Vortrag: Frames & Javascript.
Web-Content- Management Eine Einführung. Ziele Die Herkunft von WCMS-Systemen kennen lernen Grundlegende Prinzipien verstehen Das System Typo3 betrachten.
CMS Content-Management-Systeme (CMS), dienen der Verwaltung und Pflege von Dokumenten und Inhalten in Inter- und Intranetanwendungen. Den Entwickler oder.
Einführung in die Grundlagen der Erstellung von Seiteninhalten
Formulare in HTML.
Grundlagen von PowerPoint
Wie funktionieren Internetseiten? Html und Co – Teil 2 Heimo Reiter.
Copyright © 2010 Accenture All Rights Reserved. Accenture, its logo, and High Performance Delivered are trademarks of Accenture. Homepage-System der SPORTUNION.
CSS Cascading Style Sheets
Cascading Style Sheets
Cascading Stylesheets Staffelbare Formatvorlagen sind eine direkte Erweiterung von HTML und gestatten eine exaktere Gestaltung einer Webseite. Seit 1998.
Typo 3 //Textbox - HTML //Benutzerverwaltung //Zugriffsrechte.
Typo 3 // Templa Voila * Was? * Warum? * Wie? - Praktische Übung.
Alles was man wissen muss! By Benjamin Zehetner. Der Aufbau Der Standart Aufbau ist: (Hier muss alles drinnen sein) (Hier befinden sich wichtige Informationen.
TypoScript.
Verknüpfung von Tabellen
Institut für Kartographie und Geoinformation Prof. Dr. L. Plümer, Dipl.-Ing. D. Dörschlag, Dr. G. Gröger Einführung in die Programmierung mit Java 13.
TemplaVoilá. Allgemeines Dient nicht der Erweiterung der Funktionalität bestehender TYPO3-Sites, sondern der Erhöhung der Produktivität und der Vereinfachung.
World Wide Web Internetdienst Besteht aus HTML-Seiten Hypertext Transfer Protocol Plattform- und Systemübergreifend Für CERN-Konferenz entwickelt (Übertragung.
Imperia 9 an der FernUni Aufbau und Struktur, Webseiten ändern und erzeugen, Besonderheiten Zentrum für Medien und IT … zmi.
Einführung und Workshop
 Präsentation transkript:

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

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

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

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>

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.

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 }

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 }

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 }

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

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>

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

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

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 }

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 }

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 }

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 }

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

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

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.

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

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,*

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