1. Zusammenfassung der letzten Vorlesung

Transkript

1 Websiteentwicklung auf Basis vontypo3 TypoScript Unterlagen zur Vorlesung WS 15/ Zusammenfassung der letzten Vorlesung 2. Marker befüllen 3. Bildbearbeitung mit TypoScript 1

2 Root Seite anlegen Zunächst legen wir eine Seite Root Seite anlegen In den Seiteneigenschaften definieren wir unter Behaviour, dass es sich um die Wurzelseite root der Website handelt. 2

3 Root Seite anlegen Über das Kontextmenü der Seite können wir die Seite aktivieren. Template anlegen 3

4 Template anlegen Title: Titel des Templates für interne Zwecke Sitetitle: Präfix für Seitentitel Description: für interne Zwecke Resources: Hier können z.b. Schriften (ttf) eingebunden werden, auf die dann ohne Pfadangabe zugriffen werden kann. Constants: Hier werden Variablen definiert und mit einem konstanten Wert versehen. Setup: enthält den TypoScript Code Template anlegen Template bearbeiten 4

5 Template anlegen Statisches Template für das Rendern der Page Content Elemente einbinden TypoScript Setup PAGE: Top Level Object render die HTML-Webseite includecss: Hier werden ein oder mehrere Stylesheets eingebunden Objekt TEMPLATE: Hier wird eine Datei eingebunden, die (im Gegensatz zum Objekt FILE von TYPO3 geändert werden kann. Es wird dazwischen geschaltet. 5

6 Marker ansprechen 2 Typen von Marker 1. Bereich kommentiert HTML-Designvorlage TypoScript Marker ansprechen 2 Typen von Marker 2. Marker HTML -Designvorlage TypoScript marks und subparts sind Funktionen des TEMPLATE-Objekts Syntax: marks.[platzhalter] = [OBJEKT] subparts.[platzhalter] = [OBJEKT] 6

7 Objekte (Beispiele) Objekt TEXT Der Marker BREADCRUMB wird angesprochen und durch einen Text ersetzt. Objekt IMAGE Der Marker LOGO wird angesprochen und durch ein Bild ersetzt. Datenbank Feld aus der Tabelle pages auslesen marks { BREADCRUMB = TEXT BREADCRUMB.field = title } Die TypoScript Funktion.field entspricht im o.g. Fall der SQL-Abfrage: SELECT title FROM pages WHERE uid = [aktuelle Seite] AND hidden=0 AND deleted=0 Datenbank Feld auslesen, wenn anderes leer Zunächst wird das Feld subtitle ausgelesen, ist dieses leer wird title ausgelesen BREADCRUMB.field = subtitle // title 7

8 Die Tabelle pages enthält alle Inhalte aus page properties Die Tabelle pages enthält alle Inhalte aus page properties Im Reiter Resources kann der Redakteur Dateien in die Seite einbinden. 8

9 Bild aus page properties media einbinden subparts { IMAGE = IMAGE IMAGE.file.data = levelmedia:-1 IMAGE.file.import.listNum = 0 IMAGE.file.treatIdAsReference = 1 IMAGE.file.width = 960 } data = levelmedia:-1; treatidasreference =1; die ID des Bildes wird als Referenz Referenz genommen, um es über die DB Tabelle sys_file_reference aufzulösen. listnum = 0: Es wird die erste Datei ausgelesen. und auf 960 Pixel umgerechnet. TYPO3 erzeugt wiederum eine Kopie der Datei mit 960 Pixel breite Grafikdatei aus Feld media rekursiv abfragen import = uploads/media/ import.data = levelmedia:-1, slide import.listnum = 0-1 bedeutet: Bild ist auf der gleichen Seite slide meint: es wird so lange eine Menüebene zurück gegangen bis ein File gefunden wurde 9

10 Anmerkung zur Datei FH-Frankfurt05_Fileadmin_Setup.zip Diese Datei enthält neben de TypoScript Setup alle Verzeichnisse und Dateien innerhalb des Ordners Fileadmin. Das sind Designvorlage (HTML und CSS) Bilder Hintergrundbilder Schriften Diese werden zum Erstellen der Website benötigt. Bitte die Datei entpacken und die Verzeichnisse unterhalb von Fileadmin in Ihren fileadmin Ordner verschieben. Vielen Dank für Ihre Aufmerksamkeit Diese Präsentation können Sie ab morgen unter: /fh-frankfurt herunterladen. Miklos Weiszhaupt 10