Typo3 Backend und Redaktion Schulung und Workshop – Universität Greifswald RRZN Universität Hannover

Themen Login, Frontend-Editing Typo3-Arbeitsumgebung im Backend Modulleiste Navigationsleiste Detailansicht Anlegen von Seiten Die verschiedenen Seitentypen in Typo3 Einfügen von Inhalten Die verschiedenen Inhaltstypen in Typo3 Seiten und Inhalte bearbeiten Das Modul „Liste“ Anpassungen und Erweiterungen: Zentrale Dateien (Mitarbeiter-Tags, Anträge und Formulare, Anschrift ...), News, Index, Bild-Alternativ-Text August 2004 | Folie 2

Backend und Frontend In Typo3 gibt es zwei Bereiche: Frontend und Backend Das Frontend ist die Internetpräsentation das Backend dient der Erstellung und Pflege der Internetpräsentation, es enthält verschiedene Arbeitsmodule. Zur Bearbeitung von Typo3-Inhalten in Backend oder Frontend muss der Nutzer eingeloggt sein: http://typohost.rrzn.uni-hannover.de/greifswald/typo3 Username gw1 : gw22 Password gw1 : gw22 August 2004 | Folie 3

Frontend-Editing Mit dem Frontend-Editing können Gelegenheitsredakteure ohne große Einarbeitung Inhalte direkt über das Frontend bearbeiten. Ermöglicht wird das Frontend-Editing durch das Admin-Panel, es muss im Template aktiviert werden. Im Admin-Panel wird über das Feld „Eingabe“ die Darstellung der Bearbeitungssymbole gesteuert. Der Redakteur gelangt von hier aus in das Backend. Das Bearbeitungssymbol „Stift“ Über den Stift werden Fenster zum Bearbeiten der Inhalte geöffnet. August 2004 | Folie 4

Die Arbeitsumgebung im Backend Detailansicht Information und Bearbeitung Modulleiste Auswahl des Arbeitsbereiches Navigationsleiste Seitenbaum zur Navigation August 2004 | Folie 5

Die Module in Typo3 Die Modulleiste von Typo3 ist in logische Bereiche unterteilt: Web Datei Dokument Benutzer Tools Die Anzeige der Module hängt von den Rechten des Benutzers ab. August 2004 | Folie 6

Modul Web Page/Seite Struktureller Aufbau und Pflege der Seiten und Seiteninhalte. Zeigt die Seitenstruktur in Form eines Seitenbaums View/Ansicht Seite als Voransicht anzeigen lassen List/Liste Anzeige und Zugriff auf alle Datensätze installierter Module Info/Info Statistische Information über die Seite Access/Zugriff Zugriffsrechte für Benutzer und Gruppen Functions/Funktionen Zusatzfunktionen durch Assistenten, Standard ist das Anlegen mehrerer Seiten Template/Template TypoScript-Templates anlegen und verwalten. August 2004 | Folie 7

Modul File Filelist/Dateiliste Kleines Online FTP-Programm zum Dateiupload Anzeige aller hochgeladenen Dateien Images Wie Dateiliste, nur für Grafikdateien August 2004 | Folie 8

Modul User/Benutzer Task Center/Aufgaben Den Benutzern können Aufgaben zugeordnet werden Setup/Einstellungen Einstellungen des Benutzers über die Backend-Sprache, Passwort usw. August 2004 | Folie 9

Modul Tools User Admin/Benutzer Administrator Übersicht über Benutzer und Rechte Ext Manager/Erw.-Manager Installation von Erweiterungen, Zugriff auf das Online-Repository DB check / DB Überprüfung Datenbankübersicht Configuration/Konfiguration Install / Installation Typo3-Basis Installation Log/Log Logins und Datensatzänderungen phpMyAdmin Datenbank-Tool August 2004 | Folie 10

Arbeiten im Backend Zu Beginn der Arbeit im Backend werden die persönlichen Einstellungen des Redakteurs im Backend-Modul „Einstellungen“ vorgenommen: Auswahl der Sprache Rekursives Löschen/Kopieren aktivieren RTE aktivieren/deaktivieren Angabe der E-Mail-Adresse Ändern des Passwortes ... User/Setup Wird der Internet Explorer verwendet, unbedingt RTE deaktivieren August 2004 | Folie 11

Struktur der Typo3-Inhalte Die Strukturierung einer Web-Site erfolgt durch Seiten und ihre Inhalte. Alle Seiten und Seiteninhalte sind Datensätze in der Datenbank. Alle Seiten und Inhalte besitzen eine eindeutige ID. Die Inhalte sind modular aufgebaut: Absätze, Tabellen, Aufzählungen, … Für jeden Inhaltstyp kann ein eigenes Element angelegt werden. Zu den Seiten gehörende Dateien (Images, PDF-Dateien, Flash-Filme, ...) werden in einem separaten Bereich abgelegt (Web-Modul „Dateiliste“) Typo3 ist ein datenbankbasiertes CMS. Alle Seiten und Inhalte sind über eine ID identifizierbar. Die Strukturierung einer Web-Site erfolgt durch Seiten und (Seiten)Inhalte. Der Inhalt einer Seite ist modular aufgebaut: Besteht eine Seite aus einem Absatz, einer Tabelle, einer Aufzählung und Fließtext, so wird für jeden Bereich ein eigenes Inhaltselement angelegt. Zu den Seiten gehörende Dateien (Images, PDF-Dateien, Exe-Dateien, Movies ...) werden in einem separaten Bereich abgelegt (Verwaltung über das Web-Modul „Dateiliste“) Die Bearbeitung kann in der Präsentationsansicht erfolgen. Diese Methode wird gewählt, wenn nur einzelne Seiten bearbeitet werden müssen und kleine Änderungen an den Inhalten vorzunehmen sind. Der Redakteur arbeitet dann im Frontend. Für umfangreiche Aufgaben arbeitet der Redakteur im Backend. Hier werden größere Datenmengen bearbeitet, Grundeinstellungen vorgenommen und administrative Aufgaben durchgeführt August 2004 | Folie 12

Anlegen einer neuen Seite I Das Kontextmenü Bearbeitungsmöglichkeiten: Ansehen Bearbeiten Neu Info Kopieren Ausschneiden Weitere Einstellungen ... Ausblenden Sichtbarkeitseinstellungen Bearbeite Seiten-Header Löschen Weitere Einstellungen: Seite verschieben Neuerstellungsassistent Zugriff Web-Listenmodul Im-/Export Klick mit der linken Maustaste auf das Icon August 2004 | Folie 13

Anlegen einer neuen Seite II Auswahl der Positionierung „Seite in“ legt eine Unterseite der Ausgangsseite an „Seite nach“ legt eine Seite auf gleicher Ebene an oder Neuerstellungs-Assistent bietet Möglichkeit, Position „per Klick“ auszuwählen August 2004 | Folie 14

Anlegen einer neuen Seite III Seitentypen Standard Erweitert Angabe von Seitentitel, Navigationstitel, Alias, Autor Nicht im Menü Seite, deren Titel nicht in der Menüstruktur angezeigt wird Backend Benutzer-Bereich Bereich, der nur nach Login sichtbar ist Externe URL bindet externen Link in die Menüstruktur ein Shortcut verweist auf interne Seite Abstand strukturiert Menüs im Frontend (wenn im Template definiert) Sys-Ordner hier können Inhalte abgelegt werden, die nicht zur Site-Struktur gehören Papierkorb Möglichkeit, Seiten aus der Struktur zu entfernen, ohne sie zu löschen Auswahl der Position - Erläuterung einiger Seitentypen - Auswahl des Typs „Erweitert“ Die Felder beschreiben - Titel „E.T.A. Hoffmann“ - Hinweis auf ALIAS speichern - Anzeigen in der Navigationsleiste August 2004 | Folie 15

Detailansicht Detailansicht des Web-Moduls „Seite“ Bereich zum Anlegen und Bearbeiten von Seiteninhalten Eingabemöglichkeit in Spalten oder in der Schnelleingabe Zusätzliche Spalten bei mehrsprachiger Site (zurzeit für das RRZN noch nicht eingerichtet) Seiteninformationen (Erstellungs-/Änderungsdatum) Detailansicht: Spalten - Menüs – Anlegen eines neuen Inhalts Inhaltstypen aufzählen - Wählen „Text mit Bild“ Felder ausfüllen - Hinweis auf INDEX August 2004 | Folie 16

Einfügen von Seiteninhalten – I Inhaltstypen Überschrift Text Text mit Bild Bild Punktliste Tabelle Dateilinks Multimedia Formular Suchen Login Textbox Menü/Sitemap Datensatz einfügen Plugin einfügen Skript Trenner HTML Seitenlinks Detailansicht: Spalten - Menüs – Anlegen eines neuen Inhalts Inhaltstypen aufzählen - Wählen „Text mit Bild“ Felder ausfüllen - Hinweis auf INDEX August 2004 | Folie 17

Einfügen von Seiteninhalten – II „Text“ Inhaltstyp zur Einfügen von Texten „Text mit Bild“ Inhaltstyp ermöglicht Kombination von Bild und Text. Über den Typo3 Element Browser können Bilder aus der Dateiliste auf dem Server oder vom lokalen Rechner heraufgeladen werden. Für eine vereinfachte Texteingabe stehen mit dem RTE (IE) und dem Alternative RTE zwei einfache Editoren zur Verfügung. Text mit Bild – Blindtext – hoffmann-portrait.jpg – Bild skalieren (80 x 80), klickable – Bildtext – Alternativer Bildtext Erläutern: Fileadmin-Bereich - Importierbare Formate - Größenbegrenzung? August 2004 | Folie 18

Der Rich Text Editor im IE (Windows) Der RTE bietet einige Eingabehilfen im Textfeld. August 2004 | Folie 19

Alternativer RTE (Extension) August 2004 | Folie 20

Auszeichnungen und Tags ohne RTE Textauszeichnungen <b>Textauszeichenung fett</b> <i>Textauszeichnung kursiv</i> <tt>äquidistante Schrift (Courier)</tt> Absätze <br>Zeilenumbruch <pre>Absätze werden so übernommen, wie im Editor angegeben (z. B. Programmzeilen)</pre> <blockquote>Einzug eines Absatzes</blockquote> Typo-Tags <link xxx>Einfügen eines Links</link> (wird an anderer Stelle ausführlich erläutert) <typolist>Punktliste</typolist> Die zulässigen Tags können durch Angaben im Text erweitert werden. Text mit Bild – Blindtext – hoffmann-portrait.jpg – Bild skalieren (80 x 80), klickable – Bildtext – Alternativer Bildtext Erläutern: Fileadmin-Bereich - Importierbare Formate - Größenbegrenzung? August 2004 | Folie 21

Verlinkung in Typo3 – I Interne Links <LINK 383>Link auf interne Seite: LINK ID</LINK> <LINK Alias>Link auf interne Seite: LINK Alias</LINK> Link auf Inhaltselement einer Seite <LINK 401#803>Link auf Inhaltselement einer Seite</LINK> <LINK punktliste#803>Link auf Inhaltselement einer Seite</LINK> Link auf Datei (Image, PDF, ...) in der lokalen Site <fileadmin/buecher/inhalt/acrobat.pdf>Link auf Datei auf lokalem Server</LINK> Link auf Seite innerhalb der Site im HTML-Quellcode <a href="index.php?id=220">Link auf Seite im HTML-Quellcode</a> August 2004 | Folie 22

Verlinkung in Typo3 – II Externe Links <LINK www.tu-braunschweig.de>Link zur TU Braunschweig</LINK> oder <LINK http://www.tu-braunschweig.de>Link zur TU Braunschweig</LINK> oder <a href="http://www.tu-braunschweig.de">Link zur TU Braunschweig</a> Mailto: <LINK tessmer@rrzn.uni-hannover.de>Mailto</LINK> August 2004 | Folie 23

Inhaltstyp „Datensatz einfügen“ „Datensatz einfügen“ ermöglicht es, Inhaltselemente von anderen Seiten in die aktuelle zu integrieren. Dieser Typ wird eingesetzt, um Daten einzubinden, die zentral gepflegt werden und um damit die Aktualität der Daten zu gewährleisten, z.B. Mitarbeiterdaten, Telefonliste, Öffnungszeiten,…. Hinweis auf „Zentrale Daten“ August 2004 | Folie 24

Einfügen von Seiteninhalten – III Weitere Inhaltstypen: HTML Der Inhaltstyp „HTML“ ermöglicht es, Inhalte im HTML-Quellcode zu verarbeiten. Dateilinks Der Inhaltstyp „Dateilinks“ fügt eine Linkliste für den Download ein. Die Dateien werden mit dem Typo3 Element Browser aus der Dateiliste oder vom lokalen Rechner ausgewählt Trenner Der Inhaltstyp „Trenner“ erscheint nicht im Frontend. Er dient dem Redakteur zur Strukturierung der Inhaltselemente. Typo3-Element-Browser August 2004 | Folie 25

Einfügen von Seiteninhalten – IV Multimedia Formular Login Plugin einfügen Tabelle Eingabe im Textfeld: Trennung der Zellen durch senkrechten Strich (PC: AltGr+|, Mac: Alt+7) oder Benutzung des Tabellenassistenten August 2004 | Folie 26

Das Web-Modul „Liste“ Das Modul „Liste“ zeigt die Seiten und Inhalte (und ggfs. Erweiterungen) in einer übersichtlichen Form an. Die erweiterte Ansicht zeigt Bearbeitungssymbole zum Verschieben, Kopieren, Löschen ... der Seiten und Inhalte. Das Klemmbrett ermöglicht die Auswahl mehrerer Dateien zum Kopieren oder Verschieben. Die Tabelle „Felder setzen“ ermöglicht die Auswahl von einzelnen Feldern zur Bearbeitung. Zeigen: Übersicht Redakteursschulung - Darstellung der Unterseiten – Darstellung der Inhaltselemente August 2004 | Folie 27

Undo/History-Funktion Die Undo-Funktion steht bei der Bearbeitung der Inhaltselemente zur Verfügung. Sie greift man auf die zuletzt gespeicherte Version in der Datenbank zurück. Es ist nur ein Schritt rückgängig zu machen. Die History für die Seiteninhalte erreicht man u. a. über das Web-Modul „Liste“ In der History werden die Datensatzversionen der verschiedenen Felder chronologisch in einer Liste aufgeführt. Hier können mehrere Arbeitsschritte rückgängig gemacht werden. In der History kann ein Status „eingefroren“ werden. August 2004 | Folie 28

Browserseinstellungen Voraussetzung für das Arbeiten mit Typo3 Aktivierung von JavaScript Akzeptieren von Cookies Cache-Einstellung: bei jedem Zugriff nach einer neuen Version suchen Internet Explorer: Aktivierung von Active Scripting Netscape/Mozilla/Firebird: „Block unrequested pop-up window“ deaktivieren Eine detaillierte Anleitung ist in dem Typo3-Handbuch zu finden. August 2004 | Folie 29