Typo3 Schulung
Download
Report
Transcript Typo3 Schulung
Typo3 Workshop
Hochschule Neubrandenburg
Wiebke Peters
Projekt CampusOnline
[email protected]
Wiebke Peters - CampusOnline
1
Agenda
1.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
Wiebke Peters - CampusOnline
2
Typo3 Workshop
Überblick/ Leistungsumfang
Wiebke Peters - CampusOnline
3
Überblick/ Leistungsumfang (1)
Sog. Enterprise Web CMS
Kostenlose und kommerzielle WebCMS
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
Wiebke Peters - CampusOnline
4
Ü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
Wiebke Peters - CampusOnline
5
Ü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
Wiebke Peters - CampusOnline
6
Ü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
Wiebke Peters - CampusOnline
7
Typo3 Workshop
Einführung in die Typo3-Nutzung
am Beispiel-Webauftritt
Wiebke Peters - CampusOnline
8
Voraussetzungen
Backend = Arbeitsfläche
Frontend = Webseite
Aktueller Browser - empfohlen werden
Internet Explorer, Mozilla, Firefox
Cookies müssen aktiviert sein
Popups müssen erlaubt sein
Login: URL + /typo3
Wiebke Peters - CampusOnline
9
Das Backend - Arbeitsoberfläche
Modulleiste Navigationsleiste
Detailansicht
Wiebke Peters - CampusOnline
10
Seite und Seiteninhalt anlegen
- auf Seitenicon klicken
- „Neu“ wählen
- über den Assistenten Seite oder Seiteninhalt auswählen
- Eingabemaske ausfüllen
Wiebke Peters - CampusOnline
11
Seitentypen und Inhaltselemente
Seitentypen
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
Wiebke Peters - CampusOnline
12
Typo3 Workshop
Rechte und Benutzer
Wiebke Peters - CampusOnline
13
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 ein
Studiengangsverantwortlicher pflegt Studiengänge
Wiebke Peters - CampusOnline
14
Typo3 Workshop
Einführung in die Begriffe
TypoScript und Templates
Wiebke Peters - CampusOnline
15
Ziel
Einführung in die Begriffe Template und
Typoscript
Kennenlernen der Tools zur TemplateBearbeitung
Temlate-Analyzer
TypoScript Object Browser
Template Datensatz Editior
TypoScript anhand einfacher Beispiele
Grundlegendes zur TypoScript-Syntax
Erstellen einer Beispiel-Webseite
Wiebke Peters - CampusOnline
16
Templates in Typo3
steuern die Web - Darstellung von Seiten
bilden das Grundgerüst jeder Typo3
Webseite
werden über TypoScript konfiguriert
sind KEINE HTML-Vorlagen
werden in einem sogenannten TemplateRecord angelegt
Man unterscheidet Root-Templates und
Extension-Templates
Wiebke Peters - CampusOnline
17
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)
Wiebke Peters - CampusOnline
18
TypoScript + Template = TypoScriptTemplates
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
Wiebke Peters - CampusOnline
19
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
Wiebke Peters - CampusOnline
20
TypoScript am Beispiel
Das berühmte „Hello World“
Es muss ein Template angelegt werden, um
eine Ausgabe zu erzeugen, ansonsten:
Standard-Template einbinden
oder
Neues Template erstellen
Wiebke Peters - CampusOnline
21
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
Wiebke Peters - CampusOnline
Neuer Template-Datendatz
22
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
Wiebke Peters - CampusOnline
23
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!
Wiebke Peters - CampusOnline
24
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
Wiebke Peters - CampusOnline
25
TypoScript am Beispiel - Syntax
Verallgemeinerte Schreibweise:
[Objektpfad].[Eigenschaft] [Operator] [Wert]
myObject = [value 1]
myObject.myProperty = [value 2]
myObject.myProperty.firstProperty = [value 3]
myObject.myProperty.secondProperty = [value 4]
Bsp.: myObject = HTML
myObject.value = <BLINK> HTML - code </BLINK>
page.10=TEXT
page.10.value= Ich bin ein Text
TypoScript unterscheidet Groß-/Kleinschreibung
Wiebke Peters - CampusOnline
26
TypoScript-Syntax - Kommentare
# oder / einzeiliger Kommentar
/* mehrzeiliger Kommentar*/
Wiebke Peters - CampusOnline
27
TypoScript-Syntax – Operatoren (1)
{ } dienen der Strukturierung
page =PAGE
page{
typeNum=0
10=TEXT
10{
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>
)…
Wiebke Peters - CampusOnline
28
TypoScript-Syntax – Operatoren (2)
= Zuweisungsoperator
mycontant=mein text
< Kopieren
temp.menu=HMENU
temp.menu.1=TMENU
temp.menu.1{
wrap=<ul> | </ul>
NO{
linkWrap=<li>| </li>
}
}
TS-Anweisungen werden
an einer Stelle festgelegt
und an eine andere
Position kopiert
Es können Eigenschaften
oder ganze Objekte
kopiert werden
temp.menu wird also nach
page.10 kopiert
page=PAGE
page.typeNum=0
page.10 < temp.menu
Wiebke Peters - CampusOnline
29
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
Wiebke Peters - CampusOnline
30
TypoScript-Syntax - Bedingungen
Bedingungen werden durch
[eineBedingung] eingeleitet
page=PAGE
page.typeNum=0
[browser=msie]
[else] – Verzweigung
page{
[end] – Beendet die Bedingung
10=TEXT
[global] - setzt alle Bedingungen
10.value=Hui ein Internet
zurück und kehrt zur obersten
Explorer!
TypoScript-Ebene
}
[else]
page{
20=TEXT
!!! Bedingungen können nicht innerhalb
20.value= Irgend ein anderer
von mit {} geschachtelten Eigenschaften
Browser!
gesetzt werden !!!
}
[end]
Wiebke Peters - CampusOnline
31
Hilfreiche Dokumente:
http://typo3.org/documentation/documentlibrary
TypoScript by Example
TypoScript Syntax and In-depth Study
TypoScript Templates
TSref – TypoScript Reference
Wiebke Peters - CampusOnline
32
Typo3 Workshop
Erstellen einer Webseite – am
Beispiel
Wiebke Peters - CampusOnline
33
Gliederung (1)
Template-Konzepte
Vorbereitung der Layout-Vorlage
Marker und Subparts
Seitestruktur anlegen
Root-Seite auswählen
Root-Template anlegen
Template-Record (Name etc.) bearbeiten
Include Static (content (default) vs. CSS
Styled Content)
Wiebke Peters - CampusOnline
34
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
Wiebke Peters - CampusOnline
35
Template-Konzepte
Standard-Templates Out-of-the-Box
Reine TypoScript-Templates
TypoScript und Einbinden einer HTMLVorlage und CSS-Stylesheets
Template Auto-Parser
TemplaVoila
Wiebke Peters - CampusOnline
36
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!
Wiebke Peters - CampusOnline
37
Vorbereitung der Layout-Vorlage (2)
Ausgezeichnete HTML-Vorlage
Wiebke Peters - CampusOnline
38
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
Wiebke Peters - CampusOnline
39
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
Wiebke Peters - CampusOnline
40
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)
Wiebke Peters - CampusOnline
41
TMENU
Linke Navigation
Rootline-Menu (Pfad)
Infomenü (Sitemap, Kontakt, Impressum)
Siehe Handout
Wiebke Peters - CampusOnline
42
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=CONTENT
styles.content.get{
table=tt_content
select.orderBy=sorting
select.where=colPos=0
select.languageField=sys_language_uid
}
Wiebke Peters - CampusOnline
43
Objekt in Subparts kopieren
page.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
}
Wiebke Peters - CampusOnline
44
Weitere Elemente
Header-Image
Pagetitel
Seitentitel
Bild zu jeder Seite
Copyright
Siehe Handout
Wiebke Peters - CampusOnline
45
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
Wiebke Peters - CampusOnline
46
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/documentlibrary/doc_tut_editor_ger/ - Handbuch für
Redakteure
Google! Stichwort: Typo3 (ca. 706.000 Suchergebnisse)
Wiebke Peters - CampusOnline
47
Literaturhinweise
TYPO3 Enterprise Content
Management
von Werner Altmann, Rene Fritz,
Daniel Hinderink
Verlag: Open Source Press
Erscheinungsdatum: September 2004
ISBN: 3937514015
Typo3 Praxiswissen
Von Robert Meyer
O'Reilly
Erscheinungsdatum: April 2005
ISBN: 389721394X
Typo3 - Content-Management
von Christoph Lindemann, Maik Caro
Verlag: Franzis
Erscheinungsdatum: März 2005
ISBN: 377236909X
Das Einsteigerseminar TYPO3
von Hubert Partl, Tobias MüllerProthmann
Verlag: Vmi Buch
Erscheinungsdatum: März 2005
ISBN: 3826673735
TYPO3 Content Management, m. CDROM
von Alwin Viereck
Verlag: Mitp-Verlag
Erscheinungsdatum: März 2005
ISBN: 382661478X
Einstieg in TYPO3, m. CD-ROM
von Andreas Stöckl, Frank Bongers
Verlag: Galileo Press
Erscheinungsdatum: Februar 2005
ISBN: 3898426041
Wiebke Peters - CampusOnline
48
Fragen und Austausch
Wiebke Peters - CampusOnline
49