Es ist gar nicht so schwer TYPO3 zu bedienen...
Für meine Schulungen in TYPO3 händige ich meinen Schülern ein Handbuch aus, damit sie in Ruhe die grundlegenden Bedienoptionen des Redakteursprogramms nachlesen können. Auch Euch möchte ich natürlich diese Möglichkeit eröffnen.
1. Einführung
Typo3 ist ein Online-Redaktionssystem und verwendet als Arbeitsmittel einen üblichen Browser (wie Internet-Explorer oder Firefox), mit dem Sie auch im Internet surfen.
Da das Content-Management-System (CMS) auf einem Server im Internet liegt, können Sie von jedem Ort mit Online-Zugang zu jeder Zeit Veränderungen an Ihrer Web-Seite vornehmen.
Die Webseiten werden mittels Online-Formularen gepflegt bzw. Dateien (Dokumente, Bilder usw.) werden komfortabel auf den Webserver geladen.
Redakteure, d.h. jeder, der Informationen zur Verfügung stellt, können sich ganz auf die Pflege und Aktualisierung von Texten konzentrieren, ohne sich um das Layout, die Einbindung ihrer Webseite oder andere technische Aspekte kümmern zu müssen.
Diese kurze Anleitung ist auf die Arbeit der Redakteure ausgerichtet.
Redakteure können in einem ihnen zugewiesenen Web-Bereich folgende Aktionen durchführen:
• Bearbeiten und neu Anlegen von Seiten
• Bearbeiten und neu Anlegen von Seiteninhalten
• Verwalten von eigenen Ressourcen (Dokumente, Bilder usw.)
Damit Typo3 korrekt funktionieren kann, sind Einstellungen an Ihrem Browser angeraten. Dabei handelt es sich um die Aktivierung von „JavaScript“, die richtigen „Browser-Cache“-Einstellungen und die Einstellungen zum Akzeptieren von „Cookies“.
In diesem Handbuch wird zwischen Backend und Frontend unterschieden.
Frontend ist der Bereich, den ein Besucher Ihrer Webseite auf seinem Browser angezeigt bekommt.
Backend
2. Anmeldung in Typo3
Um mit Typo3 arbeiten zu können, müssen Sie sich zunächst bei dem System anmelden. Dazu benötigen Sie die korrekte Web-Adresse (URL), Ihren Benutzernamen (Username) und das dazugehörige Passwort.
Abb. 1 Anmeldefenster des Systems
Im Anmeldefenster des Systems gibt man die eigenen Kontodaten in die entsprechenden Eingabefelder ein. Nachdem man sich angemeldet hat erscheint die Arbeitsoberfläche von Typo3:
Abb. 2 - Eingangsseite
3. Die Oberfläche und Ihre Bereiche
Die Arbeitsoberfläche von Typo3 ist in drei Hauptbereiche unterteilt.
Abb. 3 Hauptbereiche des Moduls Seite
Die Spalte links ist die so genannte Modulleiste, die eine Reihe von Bereichen mit zugeordneten Modulen zeigt. Sie dient als oberste Ebene zur Auswahl des jeweiligen Moduls, in welchem Sie arbeiten möchten.
Welche Module einem Redakteur zur Verfügung stehen, hängt von seinen Berechtigungen im System ab. Diese werden vom Administrator zugeteilt und verwaltet.
Haben Sie ein Modul durch einen Klick mit der linken Maustaste auf die Bezeichnung gewählt, steht Ihnen in der Navigationsleiste das dazugehörige Menü zur Verfügung.
Im Modul-Bereich „Web“ ist es der Seitenbaum der Anwendung. Diese Ansicht gibt die Struktur Ihrer Webseite baumartig wieder.
Die Detailansicht stellt den eigentlichen Arbeitsbereich für den Nutzer dar. Hier werden die Informationen und Bearbeitungsmöglichkeiten für das von Ihnen ausgewählte Element (z.B. einer Seite) abgebildet. Die Ansicht passt sich dem übergeordneten Modul an.
Klickt man auf die Bezeichnung einer beliebigen Seite im Navigationsbereich, wird deren Inhalt in der Detailansicht gezeigt.
Abb. 4 Seitenstruktur einer Einrichtung
Im Kopf der Detailansicht finden Sie den Pfad für das geöffnete Element und Icons zur weiteren Bearbeitung desgleichen.
Icons in Typo3 sind in der Regel mit einer sensitiven Hilfe versehen, d.h. wenn man den Mauszeiger über die Icons zieht, wird deren Funktion angezeigt:
Abb. 5 sensintive Hilfe
In der Fußleiste erlaubt Ihnen eine globale Suche das schnelle Auffinden von einzelnen Seiten und Elementen.
Beim Anklicken der Schaltfläche Logout wird die Arbeitssitzung beendet und Typo3 verlassen. Ihre letzte Arbeitsposition wird gespeichert und beim nächsten Einloggen kehrt man an diese Stelle zurück.
4. Die Module von Typo3
Mittels der Auswahl der Module wählen Sie den Bereich in welchem Sie arbeiten und die Aufgaben, die Sie durchführen wollen.
Als Redakteur werden Sie in der Regel nur die Modul-Bereiche „Web“, „Datei“ und Ihren persönlichen Bereich „Benutzer“ verwenden.
Die einzelnen Module werden vom Administrator über die Konfiguration der Benutzerrechte den einzelnen Anwendern individuell zugeordnet.
Der Modul-Bereich „Web“
Hier finden Sie die wichtigsten Module, welche die Inhalte, sowie das Aussehen der Webseite definieren.
Sie können Seiten anlegen, Inhaltselemente eingeben und bearbeiten, sich die Seiten vor der Veröffentlichung in der Vorschau anzeigen lassen und globale Informationen zu den Seiten oder der Inhaltselemente abrufen.
4.1.1 Seite
Mit diesem Modul können Sie auf den einzelnen Seiten verschiedene Inhaltselemente anlegen und bearbeiten.
Spezielle Seiteninhalte wie Gästebücher-, Foren- und Shop-Einträge sind bei Integration der entsprechenden Erweiterungen (Extensions) leicht zu verwalten.
4.1.2 Anzeigen
Das Modul ermöglicht Ihnen den Bearbeitungszustand einer Seite mittels der Vorschau zu betrachten und sogleich Veränderungen vorzunehmen (Frontend-Editing, siehe Punkt 9). Der Bleistift markiert hierbei die Inhaltselemente, welche Sie bearbeiten können.
4.1.3 Liste
Das Listen-Modul gibt Ihnen den besten Überblick und Zugriff auf die einzelnen Datensätze einer Seite, die für den jeweiligen Benutzer zugänglich sind. Die Inhaltselemente werden ebenso übersichtlich aufgelistet wie Erweiterungen oder spezielle Templates für die Seite.
4.1.4 Info
Das Info-Modul fasst alle wichtigen statistischen Informationen zu der jeweiligen Seite zusammen.
Der Modul-Bereich „Datei“
Dieser Bereich liefert Ihnen eine Übersicht über die Ressourcen der Webseite.
Bilder, Downloads usw. welche auf der Seite mehrfach verwendet werden können, sind in einer übersichtlichen Dateistruktur hinterlegt.
Neue Ressourcen können mit Massenoperationen bequem hochgeladen werden. Die Vorschau von Bildern, sowie das Abrufen von Dateiinformationen erlaubt ein intuitives Handling.
Dateiliste
Das Modul Dateiliste stellt das Dateiverwaltungssystem von Typo3 dar.
Es erlaubt Ihnen den Zugriff auf die für Ihren Login gültigen Dateiordner.
Durch Klicken mit der linken Maustaste auf das jeweilige Icon im Seitenbaum steht Ihnen ein Kontextmenü zu Verfügung, mit dem Sie Ordner umbenennen, neue anlegen und Dateien auf den Server hochladen, kopieren, ausschneiden und löschen können.
4.3 Der Modul-Bereich „User tools“
Die Module in diesem Bereich dienen zum Einen der Fein-Einstellung Ihrer Benutzeroberfläche, zum Anderen auch als persönliches Aufgaben-Center und der Kommunikation unter Projektbeteiligten.
4.3.1 Workspace
Das Aufgaben-Modul stellt Ihnen Hilfsmittel für Ihre tägliche Arbeit zur Verfügung. Es beinhaltet Ihr persönliches Notizbuch in dem Sie Ihre To-Do-Liste führen können.
4.3.2 Einstellungen
Mit dem Modul Einstellungen können Sie sich Ihre Arbeitsumgebung nach Ihren Wünschen anpassen.
So bietet Typo3 Mehrsprachigkeit für Backend-Benutzer.
Wählen Sie die Darstellungsform des Backends entsprechend Ihren Vorlieben oder den Fähigkeiten Ihres Bildschirms. Sie können einstellen ob Hilfetexte oder Thumbnails als Standard angezeigt werden sollen, ob Rekursives Kopieren bzw. Löschen erlaubt ist, wie viele Datensätze im Dokumenten-Modul angezeigt werden und ob der Datei-Upload hier erlaubt ist. Legen Sie fest, ob der Rich Text Editor und das Kontextmenü aktiviert sind und welche Art von Hilfen bei der Eingabe angezeigt werden. Um die Sicherheit zu erhöhen können Sie sich per E-Mail benachrichtigen lassen, wenn jemand sich mit Ihrem Account einloggt.
4.5 Der Modul-Bereich „Hilfe“
Hier finden Sie die Online-Hilfe zu allgemeinen Themen, sowie einem Typo3- Handbuch, welches sich dynamisch aus den Hilfetexten der kontextsensitiven Hilfe erzeugt.
Es enthält eine generelle Beschreibung der Kernmodule von TYPO3, Beschreibungen zur Installation bestimmter Backend Module und Datenbank Tabellen, die abhängig von Ihren Zugriffsrechten zur Verfügung stehen.
5. Erstellen bzw. Bearbeiten von Seiten
In Typo3 liefert eine Seite den Container für verschiedene Inhalte, die darauf abgebildet werden. Sie hat eine eigene ID-Nummer und in der Regel einen Titel, eine Beschreibung, verschiedene Keywords für Suchmaschinen, ein bestimmtes Aussehen welches durch ein ihr zugewiesenes Template bestimmt wird usw.
Um komplexere Inhalte und Listen verschiedener Art innerhalb einer Seite abzubilden gibt es Erweiterungen (Extensions), wie Foren, Shops, Gästebücher usw.
Um eine neue Webseite anzulegen bzw. eine vorhandene Seite zu bearbeiten wählt man das Modul „Seite“ im Bereich „Web“.
Bestimmen Sie an welcher Stelle Sie die Seite im Strukturbaum erstellen wollen und verwenden Sie mittels Kontextmenü (Linksklick auf Symbol) die Aktion „Neu“.
Abb. 6 Kontextmenü des Seitenicons
Möchten Sie die Position der neuen Seite genauer bestimmen, wählen Sie den „Assistenten“. Es erscheint eine Baumstruktur, in der die Position der neuen Seite bestimmt wird, indem man auf einen der dargestellten kleinen Pfeile klickt:
Abb. 7 Assistenten zur Positionierung einer neuen Seite
Haben Sie die Position bestimmt, erhalten Sie das Formular einer neuen Seite:
Abb. 8
Das wichtigste Eingabefeld ist der Seitentitel (mit einem gelben Ausrufezeichen gekennzeichnet), da die Seite später unter diesem Namen in der Seitenstruktur erscheint und als Menütitel in Ihrer Webseite angezeigt wird.
Damit die Seite im Frontend angezeigt wird, sollte man die Option „Seiten verstecken“ deaktivieren.
Es gibt verschiedene Seitentypen, die einer unterschiedlichen Funktionalität der Seite entsprechen. Redakteure werden meist Seiten des Typs „Standard“ anlegen.
Im Kopf befinden sich die Icons und ein Klappmenü zum Umgang mit dem neuen Datensatz.
Im Formularbereich „Allgemeine Optionen“ kann man die Sichtbarkeit des Elements steuern. Wählt man die „Verstecken“ Box an, wird das erstellte Inhaltselement im Frontend nicht angezeigt. Mit der „Start“ bzw. „Stop“ Option kann man festlegen, ab wann bzw. bis wann das Inhaltselement sichtbar ist.
Beim Klicken auf die Lupe wird die Seite in der Vorschau geöffnet. Die Bleistifte bzw. die Bearbeitungsleiste, die dann dort angezeigt werden, dienen zur Bearbeitung der Seite im Frontend-Modus (siehe Punkt 9).
Bitte beachten Sie, dass Typo3 bei fast allen Aufgaben verschiedene Alternativen zur Durchführung anbietet.
6. Erstellen bzw. Bearbeiten von Inhalten
Einzelne Seiten in Typo3 bestehen aus den Seitenangaben (Titel, Typ usw.) und aus Inhaltselementen (die Informationen auf der Seite).
Es gibt unterschiedliche Typen von Inhaltselementen, wobei für jeden Typ eine eigene Eingabemaske in der Detailansicht gezeigt wird.
Eine Seite kann nach Bedarf mehrere Inhaltselemente haben. Sie ist in der Regel in mehrere Contentbereiche unterteilt.
Man wählt in der Navigationsleiste die Seite aus, deren Inhalt erstellt bzw. verändert werden soll.
Es erscheint folgender Bildausschnitt:
Abb. 9
Um ein neues Inhaltselement zu erstellen, klickt man auf den Button Seiteninhalt anlegen. (Alternativ kann man auf den Button Neuer Inhalt bzw. auf das Icon klicken.) Es öffnet sich eine Liste mit unterschiedlichen Inhaltstypen, die selbsterklärend sind:
Abb. 10
6.1 Das Inhaltselement „Normaler Text“
Wählt man beispielsweise den Typ Normaler Text aus, wird folgende Eingabemaske gezeigt:
Abb. 11
Über das Pull-Down Menü „Typ“ kann jederzeit der Inhaltstyp geändert werden (wenn man beispielsweise zu einem einfachen Text doch noch ein Bild hinzufügen möchte).
Ein Inhaltselement besteht immer aus einer „Überschrift“ und dem eigentlichen Inhaltsobjekt (in diesem Fall einem „Text“).
Für die Inhaltstypen Text und Text mit Bild steht in Typo3 ein „Word“- ähnlicher Editor zur Verfügung, der so genannte Rich Text Editor (RTE). Mit Hilfe des RTE kann man u.a. Wörter fett oder kursiv formatieren, Listen und Links einfügen. Die Icons des RTE sind, wie in Typo3 üblich, mit einer sensitiven Hilfe versehen.
Sollten Sie Inhalte einfügen wollen, die Ihnen bereits als Word-Dokumente vorliegen, ist es ratsam, diese nicht direkt in den RTE zu kopieren, um inkonsistente Formatierungen zu vermeiden. Gehen Sie dafür den Umweg über den von Windows mitgelieferten Texteditor (Start->Programme
->Zubehör->Editor).
6.2 Die Inhaltselemente „Text mit Bild“ und „Bild“
Eine der Stärken von Typo3 sind die umfangreichen Bildfunktionen.
Sie können beliebig viele Bilder in die Seite einbinden. Sie werden entsprechend der TypoScript-Konfiguration, die der Programmierer vornimmt, im Frontend angezeigt. Die Größe, der Typ und die Kompressionsrate der Bilder werden intern von Typo3 bearbeitet und können von Ihnen nicht verändert werden.
Der Inhaltstyp „Text mit Bild“ ist eine Kombination der Inhaltstypen "Text" und "Bild". Man hat die Möglichkeit, dem Text Bilder zuzuordnen und festzulegen wie sie zueinander positioniert werden.
Neben den Eingabefeldern für Titel und Text hat das „Text mit Bild“ Element weitere Formularelemente für das Einbinden bzw. Platzieren der Bilder (ähnlich wie im Inhaltselement „Bild“).
Im Formularbereich Bilder kann man mittels des Icons das Fenster „Typo3 Element Browser“ öffnen, die gewünschten Bilder innerhalb des eigenen Verzeichnisbaums auswählen und bei Bedarf sogleich neue in diese hoch laden.
Dabei sollten Sie darauf achten, dass die lange Seite des Bildes nicht größer als 800 Pixel ist. Der Dateiname darf keine Umlaute (ä, ö, ü sowie ß) und keine Leerzeichen enthalten.
Sie sollten sich des Buttons „Durchsuchen“ nicht bedienen, da in diesem Fall die Bilder in einem systemeigenen Ordner gespeichert werden, und dadurch nicht in der Medienverwaltung für weitere Verwendungen zur Verfügung stehen, sondern von Typo3 intern verwaltet werden. Zum hochladen verwenden Sie bitte das kleine Ordnersymbol.
Abb. 12
Abb. 13 Typo3 Element Browser
Im Formularbereich Position legt man die Position des Bildes zum oder im Text fest. Für den Inhaltstyp „Bild“ sind lediglich die Einstellungen mittig, rechts und links relevant.
Abb. 14
Man kann die Breite des Bildes in Pixel angeben, mit welcher das Bild auf der Website angezeigt werden soll.
Beachten Sie, dass für das Ausgabetemplate in der Regel eine maximale Bildbreite das Auseinanderdriften des Rahmenlayouts verhindert.
Weiter kann man einen Bildtext angeben, der direkt unter dem Bild platziert wird. Werden mehrere Bilder eingefügt bildet jeweils eine Zeile den Bildtext in der Reihenfolge der Bilder.
Als erweiterte Optionen können Sie festlegen:
„Spalten“ Sollen die Bilder in mehreren Spalten angezeigt werden, geben Sie hier die Anzahl ein.
„Keine Reihen“ Ist die Checkbox aktiviert werden die Bilder in einer senkrechten Spalte direkt untereinander mit gleichen Abständen und ohne Ausrichtung zu anderen Spalten abgebildet.
„Rahmen“ Aktivieren Sie die Checkbox, werden die Bilder mit einem Rahmen versehen.
„Höhe“ Bestimmen Sie die Höhe des Bildes in Pixel.
„Verweis“ Ein Link kann in Ihr Bild eingefügt werden.
„Klick-vergrößern“ Das Feature erlaubt es, ein verkleinertes Bild in Originalgröße darzustellen.
6.3 Das Inhaltselement „Tabelle“
Mit dem Inhaltselement Tabelle kann man einfach strukturierte Tabellen in eine Seite integrieren.
Über das Feld „Layout“ kann man bestimmen, ob die Tabelle einen Rahmen haben soll, oder den Abstand der einzelnen Tabellenzellen („Zellenabstand“) bzw. den Abstand des Tabelleninhalts vom Rahmen („Zellenfüllung“) definieren.
Abb. 15
Die Tabelle wird erzeugt, indem jede Zeile des „Text“-Feldes als eine Tabellenzeile interpretiert wird. Die vertikale Linie | trennt die Spalten voneinander.
Abb. 16
Typo3 erkennt die Anzahl der Spalten automatisch. Man kann jedoch auch die Anzahl über das Pull-Down-Menü angeben.
Über den Tabellen-Assistent (Icon rechts im Text Feld) kann man Spalten bzw. Zeilen schnell einfügen bzw. löschen und Zeilen nach oben bzw. unten / Spalten nach rechts bzw. nach links verschieben.
Abb. 17
Man kann Tabellen auch mit dem Text Rich Editor (RTE) innerhalb eines „Normaler Text“ – Inhaltselementes erstellen.
6.4 Das Inhaltselement „Aufzählung“
Mit dem Inhaltselement Aufzählung kann man auf der Seite Aufzählungslisten einfügen. Die Liste kann aus beliebig vielen aufeinander folgenden Punkten bestehen.
Man kann Listen auch mit dem Text Rich Editor (RTE) innerhalb eines „Normaler Text“ – Inhaltselementes erstellen.
Abb. 18
6.5 Der Inhaltstyp „Menü / Sitemap“
Mit dem Seitentyp „Menü/Sitemap“ können Sie verlinkte Menüs oder eine Sitemap ausgewählter Seitenbereiche in die Seite integrieren.
Wichtig ist es einen Ausgangspunkt zu definieren. Das Menü oder die Sitemap bildet je nach dem gewählten „Menü-Typ“ die einzelnen Seiten oder die Seiten einschließlich der Unterseiten ab.
7. Verwalten von Ressourcen
Das Modul Dateiliste stellt das Dateiverwaltungssystem von Typo3 dar. Es erlaubt den Zugriff auf den dem Nutzer zugeordneten Dateiordner in dem die hochgeladenen Bilder und andere Dateien verwaltet werden.
Durch Klicken mit der linken Maustaste auf das jeweilige Icon im Seitenbaum erscheint ein Kontextmenü, mit dem man Ordner umbenennen, neu anlegen und Dateien auf den Server hochladen, kopieren, ausschneiden, löschen oder sich weitere Informationen anzeigen lassen kann.
Abb. 19
Bei der Option Datei-Upload öffnet sich folgender Ausschnitt, der es ermöglicht bis zu 10 Dateien auf einmal hochzuladen:
Abb. 20
Beim Klicken auf den Namen eines Ordners wird sein Inhalt in der Detailansicht aufgelistet:
Abb. 21
Mittels der Checkboxen am Ende der Darstellung können Sie sich Thumbnails (kleine Vorschau-Bilder) der Bilder oder das Klemmbrett (ähnlich der Zwischenablage), zum Kopieren oder Verschieben von Dateien, anzeigen lassen.
Wir empfehlen, eine geeignete Ordnerstruktur zu erstellen, um die Ressourcen (Bilder, Dokumente usw.) nach Kategorien zu organisieren.
Es soll erwähnt werden, dass Typo3 auch erlaubt, Dateien in den einzelnen Inhaltselementen direkt hochzuladen.
8. Einbinden von Dateien und Links
Um Dateien bzw. Links in einem Inhaltselement einzubinden, markiert man im Rich Text Editor ein bzw. mehrere Wörter und wählt im Text Editor das Symbol Link einfügen.
Abb. 22
Es öffnet sich ein Pop-up Fenster. Man kann nun eine Datei aus dem eigenen Dateiordner auswählen bzw. einen internen Link auf eine andere Seite innerhalb der Typo3-Website setzen, eine externe URL (Internetadresse) oder E-Mail Adresse angeben.
9. Frontend Editing
Neben dem vorher behandelten Backend Modus, bietet Typo3 die Möglichkeit, Seiten direkt im Frontend Modus zu bearbeiten.
Man loggt sich im Backend ein und wählt das Modul Ansicht. Hier wählt man dann die Seite, die man bearbeiten möchte.
In der Detailansicht erscheint die Seite, so wie sie im Frontend dargestellt wird. Bleistiftsymbole markieren die Stellen, die bearbeitet werden können.
Abb. 23
Durch Anklicken des Bleistiftsymbols, öffnet sich der Rich-Text-Editor von TYPO3. Nach abgeschlossener Bearbeitung der Inhalte, schließt man dieses „Datei“ wieder und die geänderten Inhalte werden in der Seitenansicht angezeigt.
Das direkte Editieren im Frontend eignet sich besonders gut beim Korrekturlesen, da man die Seite in Vorschau bearbeiten kann. Man kann auf diese Weise Tippfehler und falsche Formatierungen schneller erkennen und beseitigen. Um in Frontend arbeiten zu können, muss eine Seite wenigstens ein Inhaltselement enthalten.
Kategorie: Anwendungen, Computer & Technik, TYPO3
zurück
