Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt...
-
Upload
schwanhild-stillinger -
Category
Documents
-
view
120 -
download
4
Transcript of Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt...
![Page 1: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/1.jpg)
Wiebke Peters - CampusOnline 1
Typo3 Workshop Hochschule Neubrandenburg
Wiebke Peters
Projekt CampusOnline
![Page 2: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/2.jpg)
Wiebke Peters - CampusOnline 2
Agenda1.Tag Überblick/ Leistungsumfang
Einführung in die Typo3-Nutzung am Beispiel-Webauftritt Backend-Oberfläche Anlegen von Seiten und Seiteninhalt, Listen, Dateilliste, Funktionen, Einstellungen Frontend-Editing
Rechte und Redakteure
2.Tag Theorie: Einführung in die Begriffe TypoScript und Templates
Typoscript – Syntax, Objekte, Eigenschaften Template-Modul incl. Template-Werkzeuge
Eine Webseite erstellen – am Beispiel Seitenstruktur erfassen Template anlegen Design-Vorlagen (HTML, CSS) einbinden Menüs und andere Objekte erstellen Einbinden einer Extension am Bsp. tt_news
Fragen
3.Tag Fortsetzung Tag 2 Absprachen zur Umstellung des Neubrandenburger Webauftritts
![Page 3: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/3.jpg)
Wiebke Peters - CampusOnline 3
Typo3 Workshop
Überblick/ Leistungsumfang
![Page 4: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/4.jpg)
Wiebke Peters - CampusOnline 4
Überblick/ Leistungsumfang (1) Sog. Enterprise Web CMS
Allgemein: Trennung von Inhalt und Layout Freie Gestaltung von Layoutvorgaben mit externen
Editoren Einheitliches Layout für den Webauftritt
Einfache Integration von modernen Features wie: Foren, Newsletter,Sitemaps
Einfache Bearbeitung von Inhalten Redakteure Abbildung von Benutzergruppen
Kostenlose und kommerzielle WebCMS
![Page 5: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/5.jpg)
Wiebke Peters - CampusOnline 5
Überblick/ Leistungsumfang (2)
Speziell Typo3: Kostenloses Open-Source CMS Wird sowohl von öffentlichen Einrichtungen als
auch von privaten Unternehmen eingesetzt PHP-basiertes CMS, dass durch die Entwicklung
eigener Extensions erweiterbar ist Werkzeuge und API zur Extension-Entwicklung umfangreiche Dokumentationen (www.typo3.org
), sowie eine hilfsbereite Coummunity Entstehung seit Ende der 90iger - Geistiger
Vater und zentraler Entwickler ist der Däne Kasper Skårhøj
Aktuelle Typo3 Version: Typo3 3.8
![Page 6: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/6.jpg)
Wiebke Peters - CampusOnline 6
Überblick/ Leistungsumfang (3)
Architektur: Basiert grundsätzlich auf einem LAMP-System,
läuft aber auch auf Windows und anderen gängigen Unix-Systemen
Es steht auf www.typo3.org zum Download zur Verfügung (Source Code oder komplettes LAMP/WAMP-Paket)
Verwendung von ausschließlich freien Standardkomponenten wie z.B.GDlib, ImageMagick
PHP-basiert, modular aufgebaut Integration eigener Module möglich
![Page 7: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/7.jpg)
Wiebke Peters - CampusOnline 7
Überblick/ Leistungsumfang (4)Ein paar Features: Integrierte Bildverarbeitung (GIFBUILDER) Mehrsprachigkeit Frontend-Editing Rich Text Editor (RTE) Zahlreiche Extensions:
tt_news (sehr komplexe Newsverwaltung), Newsletter, Forum, Gästebuch, CSS-Styled-Content, Indizierte Suche u.v.m…
Entwicklung eigener Extensions möglich sehr flexibles System
![Page 8: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/8.jpg)
Wiebke Peters - CampusOnline 8
Typo3 Workshop
Einführung in die Typo3-Nutzung am Beispiel-Webauftritt
![Page 9: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/9.jpg)
Wiebke Peters - CampusOnline 9
Voraussetzungen
Aktueller Browser - empfohlen werden Internet Explorer, Mozilla, Firefox
Cookies müssen aktiviert seinPopups müssen erlaubt sein
Login: URL + /typo3
Backend = ArbeitsflächeFrontend = Webseite
![Page 10: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/10.jpg)
Wiebke Peters - CampusOnline 10
Das Backend - Arbeitsoberfläche
Modulleiste Navigationsleiste Detailansicht
![Page 11: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/11.jpg)
Wiebke Peters - CampusOnline 11
Seite und Seiteninhalt anlegen
- auf Seitenicon klicken - „Neu“ wählen- über den Assistenten Seite oder Seiteninhalt auswählen- Eingabemaske ausfüllen
![Page 12: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/12.jpg)
Wiebke Peters - CampusOnline 12
Seitentypen und InhaltselementeSeitentypen Standard – klassischer Typ Erweitert – zusätzl. Informationen,
wie Beschreibung, Dateien, Stichworte…
Externe URL – direkte Verlinkung auf Externe Webseite
Shortcut – zu einer anderen Seite im SB
Nicht im Menu - wird nicht in der Navigation der Webseite angezeigt
Abstand - dient der Strukturierung des Menüs
SysOrdner – Container für verschiedene Datensätze (z.B. News)
Inhaltselemente Überschrift Normaler Text Text mit Bild Nur Bilder Aufzählung Tabellen Dateilinks Multimedia Sitemmap Formular Datensatz einfügen HTML PHP-Scripte Plugin …
Eigene Inhaltselemente können erstellt werden
![Page 13: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/13.jpg)
Wiebke Peters - CampusOnline 13
Typo3 Workshop
Rechte und Benutzer
![Page 14: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/14.jpg)
Wiebke Peters - CampusOnline 14
Benutzer
Admin Verwaltung der Webseite und deren Komponenten
Redakteur Pflege der Inhalte
Ausarbeitung eines Redaktions- und Berechtigungskonzept Anlegen und Zuweisen von Benutzergruppen Zuweisen von Seiten
Beispiele: Presseredakteur pflegt Pressemitteilungen einStudiengangsverantwortlicher pflegt Studiengänge
![Page 15: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/15.jpg)
Wiebke Peters - CampusOnline 15
Typo3 Workshop
Einführung in die Begriffe TypoScript und Templates
![Page 16: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/16.jpg)
Wiebke Peters - CampusOnline 16
Ziel Einführung in die Begriffe Template und
Typoscript Kennenlernen der Tools zur Template-
Bearbeitung Temlate-Analyzer TypoScript Object Browser Template Datensatz Editior
TypoScript anhand einfacher Beispiele Grundlegendes zur TypoScript-Syntax Erstellen einer Beispiel-Webseite
![Page 17: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/17.jpg)
Wiebke Peters - CampusOnline 17
steuern die Web - Darstellung von Seitenbilden das Grundgerüst jeder Typo3
Webseitewerden über TypoScript konfiguriertsind KEINE HTML-Vorlagen werden in einem sogenannten Template-
Record angelegtMan unterscheidet Root-Templates und
Extension-Templates
Templates in Typo3
![Page 18: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/18.jpg)
Wiebke Peters - CampusOnline 18
TypoScript (TS) TypoScript ist keine Programmier- oder
Scriptsprache TypoScript ist eine Syntax zur Beschreibung von
Daten TypoScript ist eine Schnittstelle über welche
Informationen an das System übergegeben werden
Wird genutzt in: Page TSConfig (Konfiguration für Seiten im Seitenbaum) User TSConfig (Konfigurationen für den Nutzer) TS Templates (Steuerung der Webseite)
![Page 19: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/19.jpg)
Wiebke Peters - CampusOnline 19
TypoScript + Template = TypoScript-Templates
Mit TypoScript-Templates wird festgelegt: wie die die Ausgabe einer Webseite erstellt
werden soll welche Inhalte aus der Datenbank gelesen
werden ob eine bzw. welche HTML-Vorlage verwendet
wird
Steuerung der Frontend-Ausgabe
![Page 20: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/20.jpg)
Wiebke Peters - CampusOnline 20
Template Tools
Constant Editor Dient der komfortableren Bearbeitung von Konstanten,
insbesondere bei der Konfiguration von Standard - Templates Info/Modify
Bearbeitung des Setup-Codes und des gesamten Template - Records
TSOB Zeigt TS-Objekte und deren Eigenschaften Man kann einfach Eigenschaften ändern, hinzufügen (TSref) Bessere Kontrolle und Anpassung bei der Entwicklung
Template Analyzer Zeigt Template - Hierarchie und Quell-Code
![Page 21: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/21.jpg)
Wiebke Peters - CampusOnline 21
TypoScript am BeispielDas berühmte „Hello World“
Es muss ein Template angelegt werden, um eine Ausgabe zu erzeugen, ansonsten:
Standard-Template einbinden
oder Neues Template erstellen
![Page 22: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/22.jpg)
Wiebke Peters - CampusOnline 22
TypoScript am Beispiel- Template alegen Ein neues Template erzeugen:
Seite im Seitenbaum als Root-Seite auswählen
Auf Modul Template klicken Über die Schaltfläche
„Create template for a new site“ im Formularbereich „Create new Website“ wird dann ein neuer Templatedatensatz (New Site) angelegt
Alternativ kann auch ein von Typo3 mitgeliefertes Standardtemplate über die Auswahlbox eingebunden werden Neuer Template-Datendatz
![Page 23: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/23.jpg)
Wiebke Peters - CampusOnline 23
TypoScript am Beispiel-Template-Datensatz
Template Datensatz Titel eingeben Webseiten-Titel
bestimmen Evtl. Konstanten
einfügen Setup einfügen Rootlevel Clear Constants Clear Setup Include Static
![Page 24: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/24.jpg)
Wiebke Peters - CampusOnline 24
TypoScript am Beispiel - Setup
Das erstellte Template enthält bereits 7 Zeilen im Setup:
# Default PAGE object:
page = PAGE
page.typeNum = 0
page.10 = TEXT
page.10.value = HELLO WORLD!
![Page 25: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/25.jpg)
Wiebke Peters - CampusOnline 25
TypoScript am Beispiel - Erläuterung
Default PAGE Object ist ein Kommentar page ist ein Objekt vom Typ PAGE Der Bezeichner page kann frei gewählt werden PAGE ist ein TS-Objekttyp und startet die
Webpräsentation und die Ausgabe TypeNum ist eine Eigenschaft des Objektes PAGE
und legt die Web-Ausgabe fest (Webseite, Druckversion, WAP)
page.10 ist ein Objektpfad über welchen ein Objekt bzw. eine Eigenschaft adressiert wird
Hello World ist ein Wert der der Eigenschaft value zugewiesen wird
![Page 26: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/26.jpg)
Wiebke Peters - CampusOnline 26
TypoScript am Beispiel - Syntax
Verallgemeinerte Schreibweise:
[Objektpfad].[Eigenschaft] [Operator] [Wert]
Bsp.:
TypoScript unterscheidet Groß-/Kleinschreibung
myObject = [value 1]myObject.myProperty = [value 2]myObject.myProperty.firstProperty = [value 3]myObject.myProperty.secondProperty = [value 4]
myObject = HTMLmyObject.value = <BLINK> HTML - code </BLINK>
page.10=TEXTpage.10.value= Ich bin ein Text
![Page 27: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/27.jpg)
Wiebke Peters - CampusOnline 27
TypoScript-Syntax - Kommentare
# oder / einzeiliger Kommentar
/* mehrzeiliger Kommentar*/
![Page 28: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/28.jpg)
Wiebke Peters - CampusOnline 28
TypoScript-Syntax – Operatoren (1){ } dienen der Strukturierung
page =PAGEpage{
typeNum=010=TEXT10{ value=Hallo WELT! }
}
( ) Schließen Werte ein, die über mehrere Zeilen gehen … 10=HTML 10.value( <table cellspacing=1 cellpadding=1 border=1> <tr><td>EINE TABELLE</td></tr> </table>
)…
![Page 29: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/29.jpg)
Wiebke Peters - CampusOnline 29
TypoScript-Syntax – Operatoren (2)
= Zuweisungsoperator
< Kopieren TS-Anweisungen werden
an einer Stelle festgelegt und an eine andere Position kopiert
Es können Eigenschaften oder ganze Objekte kopiert werden
temp.menu=HMENUtemp.menu.1=TMENUtemp.menu.1{wrap=<ul> | </ul>NO{linkWrap=<li>| </li>}}
page=PAGEpage.typeNum=0page.10 < temp.menu
temp.menu wird also nach page.10 kopiert
mycontant=mein text
![Page 30: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/30.jpg)
Wiebke Peters - CampusOnline 30
TypoScript-Syntax – Operatoren (3)> Löschen
Löscht einen Objektpfad Wird benötigt, um Template-Hierarchien zu
bereinigen und durch eigene Werte zu ersetzen
=< Referenzieren referenziert einen Objektpfad Referenzierung ist nur mit Objekte möglich,
nicht mit Eigenschaft
![Page 31: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/31.jpg)
Wiebke Peters - CampusOnline 31
TypoScript-Syntax - Bedingungen
Bedingungen werden durch [eineBedingung] eingeleitet [else] – Verzweigung [end] – Beendet die Bedingung [global] - setzt alle Bedingungen
zurück und kehrt zur obersten TypoScript-Ebene
page=PAGEpage.typeNum=0[browser=msie]page{
10=TEXT10.value=Hui ein Internet Explorer!}
[else]page{
20=TEXT20.value= Irgend ein anderer Browser!}
[end]
!!! Bedingungen können nicht innerhalb von mit {} geschachtelten Eigenschaften gesetzt werden !!!
![Page 32: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/32.jpg)
Wiebke Peters - CampusOnline 32
Hilfreiche Dokumente:
http://typo3.org/documentation/document-library TypoScript by Example TypoScript Syntax and In-depth Study TypoScript Templates TSref – TypoScript Reference
![Page 33: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/33.jpg)
Wiebke Peters - CampusOnline 33
Typo3 Workshop
Erstellen einer Webseite – am Beispiel
![Page 34: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/34.jpg)
Wiebke Peters - CampusOnline 34
Gliederung (1)Template-KonzepteVorbereitung der Layout-Vorlage
Marker und Subparts
Seitestruktur anlegenRoot-Seite auswählenRoot-Template anlegenTemplate-Record (Name etc.) bearbeitenInclude Static (content (default) vs. CSS
Styled Content)
![Page 35: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/35.jpg)
Wiebke Peters - CampusOnline 35
Gliederung (2)
TypoScript – „Programmierung“ Vorbereitete HTML-Vorlage einbinden Navigation programmieren
Arten von Menüs Linke Navigation Rootline Infomenu
Seiteninhalte auslesen – styles.content.get FE - Ausgabe betrachten Weitere Elemente per TS einfügen Extension-Template
Extension einbinden – am Beispiel tt_news Extension Manager tt_news konfigurieren
![Page 36: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/36.jpg)
Wiebke Peters - CampusOnline 36
Template-KonzepteStandard-Templates Out-of-the-BoxReine TypoScript-TemplatesTypoScript und Einbinden einer HTML-
Vorlage und CSS-StylesheetsTemplate Auto-ParserTemplaVoila
![Page 37: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/37.jpg)
Wiebke Peters - CampusOnline 37
Vorbereitung der Layout-Vorlage (1)Subparts und Marker
Werden in der HTML-Vorlage durch dynamische Inhalte ersetzt.
Subparts: werden immer paarweise angewendet Umschleißen Abschnitte in HTML-Vorlagen, können mit
HTML-Kommentaren umgeben werden <!- - ###SUBPART### begin - -> <!- - ###SUBPART### end- ->
Marker: Werden nur einzeln verwendet und durch die Ausgabe der
TS-Konfiguration ersetzt ###MARKER### (Bsp.: ###COPYRIGHT###)
Groß-/Kleinschreibung beachten!
![Page 38: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/38.jpg)
Wiebke Peters - CampusOnline 38
Vorbereitung der Layout-Vorlage (2) Ausgezeichnete HTML-Vorlage
![Page 39: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/39.jpg)
Wiebke Peters - CampusOnline 39
Include Static (content(default) vs. CSS Styled Content) Content(default) und CSS Styled Content sind
statische Templates die über include static eingebunden werden
Beinhalten die Definitionen zum Rendern der Inhalte
Content(Default) älteste Content-Rendering-Template verwendet zum Rendern <font>-Tags
CSS Styled Content (CSC) Rendering basiert auf CSS CSC wird sich langfristig durchsetzen
![Page 40: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/40.jpg)
Wiebke Peters - CampusOnline 40
Vorbereitete HTML-Vorlage einbinden
page.10=TEMPLATE
page.10{
template=FILE
template.file=fileadmin/schulung/vorlagen/index.html
workOnSubpart=DOCUMENT_BODY
}
workOnSubpart=DOCUMENT_BODY nur der Teil innerhalb dieses Subparts wird aus der HTML-Vorlage verwendet
![Page 41: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/41.jpg)
Wiebke Peters - CampusOnline 41
Menüs Verschieden Arten von Menüs (Navigation)
Dyn. erstellt aus den Seiten des Seitenbaums HMENU – Hierarchical Menu
TMENU – text-basiertes Menü GMENU – grafisches Menü (aus Seitentitel werden autom.
Bilder erzeugt) GMENU_LAYERS/TMENU_LAYERS GMENU_FOLDOUT IMG_MENU – erzeugt Imagemap JSMENU – Klassisches Klappmenü
Alle Menüs haben eigene aber auch gemeinsame Eigenschaften (NO, ACT, RO)
![Page 42: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/42.jpg)
Wiebke Peters - CampusOnline 42
TMENU
Linke NavigationRootline-Menu (Pfad)Infomenü (Sitemap, Kontakt, Impressum) Siehe Handout
![Page 43: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/43.jpg)
Wiebke Peters - CampusOnline 43
Seiteninhalt ausgeben
Voraussetzung: Basistemplates CSS-Styled-Content im Template - Record einbinden
Damit steht das vordefinierte Objekt styles.content.get zur Verfügung, das den Inhalt der Spalte Normal rendert
subpart.INHALT < styles.content.get
Die anderen Spalten:
styles.content.getLeft
styles.content.getRight
styles.content.getBorder
styles.content.get=CONTENTstyles.content.get{table=tt_contentselect.orderBy=sortingselect.where=colPos=0select.languageField=sys_language_uid}
![Page 44: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/44.jpg)
Wiebke Peters - CampusOnline 44
Objekt in Subparts kopierenpage.10=TEMPLATE
page.10{
template=FILE
template.file=fileadmin/schulung/vorlagen/index.html
workOnSubpart=DOCUMENT_BODY
#Subparts & Marker mit Inhalte befüllen
subparts.INHALT < styles.content.get
subparts.MENULINKS< temp.mymenu
…
marks.COPY < temp.copyright
}
![Page 45: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/45.jpg)
Wiebke Peters - CampusOnline 45
Weitere Elemente
Header-ImagePagetitelSeitentitelBild zu jeder SeiteCopyrightSiehe Handout
![Page 46: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/46.jpg)
Wiebke Peters - CampusOnline 46
Extension einbinden – tt_news Download der Extension
Über Extenstionmanager Von der typo3.org Webseite http://typo3.org/extensions/
Installation der Extension tt_news Template und ggf. Default-CSS unter „include static“
hinzufügen
Sysordner erstellen für Pressemitteilungen Auf Newsseite Seiteninhalt Plugin tt_news anlegen und einstellen Seite für Single-Ansicht anlegen und Plugin entsprechend
konfigurieren News anlegen; Cache löschen! Ansehen.
Doku: http://typo3.org/documentation/document-library/tt_news/ Layout-Template und CSS lassen sich individuell anpassen
![Page 47: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/47.jpg)
Wiebke Peters - CampusOnline 47
Web-Quellen http://typo3.org – Offizielle Typo3 Webseite und
Community http://wiki.typo3.org – Typo3 WiKi http://www.typo3.net http://www.jweiland.net http://www.typo3server.com – mittwaldmedien
services – Agentur für Typo3 http://typo3.org/documentation/document-library/
doc_tut_editor_ger/ - Handbuch für Redakteure
Google! Stichwort: Typo3 (ca. 706.000 Suchergebnisse)
![Page 48: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/48.jpg)
Wiebke Peters - CampusOnline 48
Literaturhinweise
TYPO3 Enterprise Content Managementvon Werner Altmann, Rene Fritz, Daniel HinderinkVerlag: Open Source Press Erscheinungsdatum: September 2004ISBN: 3937514015
Typo3 - Content-Managementvon Christoph Lindemann, Maik CaroVerlag: Franzis Erscheinungsdatum: März 2005ISBN: 377236909X
TYPO3 Content Management, m. CD-ROMvon Alwin ViereckVerlag: Mitp-Verlag Erscheinungsdatum: März 2005ISBN: 382661478X
Typo3 PraxiswissenVon Robert MeyerO'ReillyErscheinungsdatum: April 2005ISBN: 389721394X
Das Einsteigerseminar TYPO3von Hubert Partl, Tobias Müller-ProthmannVerlag: Vmi Buch Erscheinungsdatum: März 2005ISBN: 3826673735
Einstieg in TYPO3, m. CD-ROMvon Andreas Stöckl, Frank BongersVerlag: Galileo Press Erscheinungsdatum: Februar 2005ISBN: 3898426041
![Page 49: Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de.](https://reader036.fdocument.pub/reader036/viewer/2022062223/55204d7149795902118c3a94/html5/thumbnails/49.jpg)
Wiebke Peters - CampusOnline 49
Fragen und Austausch