Inhaltsverzeichnis. 1 Grundlagen Erste Schritte Grundlegende Bedienung Abbildungsverzeichnis...3 Tabellenverzeichnis...

Transkript

1 Typo3 Dokumentation

2 Inhaltsverzeichnis Abbildungsverzeichnis...3 Tabellenverzeichnis Grundlagen Erste Schritte Aufrufen vom Frontend Anmeldung in das Backend Sprache ändern Bereiche der Benutzeroberfläche Grundlegende Bedienung Seiten Seiten erstellen Seiten bearbeiten Seiten verschieben Seiten löschen Seiteninhalte Seiteninhalte erstellen Seiteninhalte bearbeiten Seiteninhalte löschen Dateiupload Frontend-Editing

3 Abbildungsverzeichnis Abbildung Das Frontend...6 Abbildung Anmelden mit Benutzername und Passwort...7 Abbildung Begrüßungsseite mit Beschreibung der Module...7 Abbildung Benutzereinstellungen zum Ändern der Sprache...8 Abbildung Modulleiste, Navigationsbereich und Detailansicht...9 Abbildung Möglichkeiten zur Seitenerstellung...10 Abbildung Seitentyp Shortcut...11 Abbildung Sichtbarkeitseinstellungen für eine Seite...12 Abbildung Möglichkeiten zur Seitenbearbeitung...13 Abbildung Möglichkeiten zur Seitenverschiebung...13 Abbildung Zwischenablage in Typo Abbildung Löschen über Kontextmenü...14 Abbildung Möglichkeiten zum Anlegen von Seiteninhalten...15 Abbildung Texttyp Inhaltselement...16 Abbildung Zweite Palette bei Typ...17 Abbildung Zweite Palette bei Überschrift...17 Abbildung Rich Text Editor...18 Abbildung Inhalte aus anderen Quellen...18 Abbildung Einfügen eines zweiten Inhaltselements...19 Abbildung Element Browser zum Einfügen von Bildern...19 Abbildung Element Browser im Typ Text m/bild...20 Abbildung Texttyp für Bildergalerien...20 Abbildung Aktivierung der Extension für Bildergalerien...21 Abbildung Einfügen der Bilder in die Bildergalerie...21 Abbildung Eingefügte Bilder in der Detailansicht...22 Abbildung Organisieren der Bilder in Spalten...22 Abbildung Anzeigen der Bildergalerie im Frontend...22 Abbildung Bildergalerie im Frontend öffnen...23 Abbildung Anlage neuer Playliste im Storage Folder...24 Abbildung Playlisten im Storage Folder verwalten...24 Abbildung Playlistenform...25 Abbildung MP3 Player Typ...25 Abbildung Element Browser bei Audiomitschnitten...26 Abbildung Neue Meldungen auf den Seiten Home und News...26 Abbildung Titelangabe und Freischalten der Meldung...27 Abbildung Zeitpunkt der Meldung...27 Abbildung Überschrift und Text der Meldung...27 Abbildung Neue Meldung...28 Abbildung Verwalten von Meldungen...28 Abbildung Formular zum Anmelden für Veranstaltungen...28 Abbildung Empfänger -Adresse...29 Abbildung Bearbeiten von Texttyp-Elementen...29 Abbildung Verschieben von Seiteninhalten...30 Abbildung Verborgene Inhalte...30 Abbildung Gästebucheinträge verwalten...30 Abbildung Löschen von Seiteninhalten...31 Abbildung Dateiliste und Kontextmenu...32 Abbildung Anlage neuer Ordner und Dateiupload...33 Abbildung Admin Panel

4 Tabellenverzeichnis Tabelle Die verschiedenen Seitentypen in Typo Tabelle Die verschiedenen Seiteninhaltstypen in Typo

5 1 Grundlagen Typo3 ist ein webbasiertes Content Management System (CMS), welches hilft, Webseiten zu erstellen, zu verwalten und alle für das WWW relevanten Publikationsformate zu handhaben. Die Installation erfolgt entweder im Intranet auf einem internen Unternehmensserver, oder im Inter-/Extranet auf einem öffentlich zugänglichen Server. Redakteure benötigen für den Zugang zum System nichts weiter als einen Webbrowser, die korrekte Internetadresse sowie Benutzername und Passwort vom Administrator, um Seiteninhalte unabhängig von Zeit und Ort zu erstellen oder zu ändern. Die Inhalte der Webseiten sind entkoppelt von ihrer Darstellung. Folglich wird der gesamte Inhalt aller Autoren in einem Design konsistent ausgegeben und kann nach einem Rechteprinzip bearbeitet werden. Typo3 unterscheidet zwischen zwei Bereichen: dem Frontend (FE) und dem Backend (BE). Das Frontend stellt die eigentliche Webseite dar, die der Besucher sieht. Das Backend ist die Administrationsoberfläche, über die die Seiten für das Frontend gepflegt werden. Ein angemeldeter Benutzer kann beide Oberflächen zum Bearbeiten von Seiteninhalten in Typo3 benutzen. Während das Backend eine komplette Arbeitsumgebung mit vielfältigen Funktionen bietet, kann das Frontend sehr leicht und intuitiv bedient werden. In der grafischen Benutzeroberfläche im Backend (oder der alternativen Frontend-Editing Funktion) können Autoren Texte schreiben, Bilder und Multimedia-Daten einfügen, Inhalte zeitlich steuern und noch viel mehr, und so eine dynamische Website aufbauen und pflegen. Redakteur zu werden ist nicht schwer: Die Einarbeitungszeit beträgt normalerweise einige Stunden. 5

6 2 Erste Schritte 2.1 Aufrufen vom Frontend Wenn Sie die Internetadresse der Webseite in die Adresszeile Ihres Browser eingeben, sollte nun das Frontend zu sehen sein. Die Webseite können Sie momentan unter aufrufen. In Kürze wird sie aber unter der von Ihnen gewünschten Adresse erreichbar sein. Diese Konfiguration wird der Administrator vom Eine-Welt-Forum vornehmen. 2.2 Anmeldung in das Backend Abbildung Das Frontend Typo3 ist eine Web-Applikation, die auf PHP4 und MySQL basiert. Um Typo3 benutzen zu können, benötigen Sie daher Zugang zu einem Webserver mit PHP und My SQL. Zum Editieren der Seite müssen Sie im Backend angemeldet sein. Dafür geben Sie die Internetadresse in den Browser ein und hängen ein /typo3 an (z.b. Domäne.de/typo3). Es erscheint folgende Maske, in die Sie Benutzername und Passwort eintragen und mit der Log In Taste bestätigen. Passwörter von Backend-Benutzer werden in verschlüsselter Form von Typo3 übertragen und sicher in der Datenbank gespeichert. 6

7 Abbildung Anmelden mit Benutzername und Passwort Nach dem erfolgreichen Anmelden sollte die Ausgabe ungefähr der folgenden Abbildung entsprechen. Sie werden zu einer Begrüßungsseite mit kurzer Beschreibung aller Elemente auf der linken Seite (Modul Help / About modules) geführt. Die Anzeige ist jedoch von den Ihnen vom Administrator zugeteilten Rechten abhängig, sodass unter Umständen Abweichungen auftreten können. Abbildung Begrüßungsseite mit Beschreibung der Module 7

8 2.3 Sprache ändern Die Sprache eines englischsprachigen Backend können Sie auf Deutsch ändern, indem Sie auf der linken Seite im Modul User den Menüpunkt Setup auswählen. Ändern Sie in der Auswahlbox Language von English auf German ab und speichern Sie Ihre Einstellungen, indem Sie unten auf den Button Save Configuration klicken. Abbildung Benutzereinstellungen zum Ändern der Sprache Die rechte Seite wird ab sofort in der deutschen Sprache angezeigt - das linke Menü jedoch nach wie vor in der englischen Sprache. Grund hierfür ist, dass das Backend mit Frames arbeitet und einmal aktualisiert werden muss. Dies können Sie machen, indem Sie nur im linken Frame mit der Maus rechtsklicken und Aktualisieren auswählen. Jedoch sollten Sie sich gleich angewöhnen, bei solchen Veränderungen das gesamte Backend neu zu laden. Klicken Sie daher in Ihrem Browser auf Aktualisieren bzw. Loggen Sie sich einmal aus und wieder ein. 8

9 2.4 Bereiche der Benutzeroberfläche Die Benutzeroberfläche in Typo3 wird in drei Bereichen geteilt, die nacheinander aufgeklappt werden: die Modulleiste auf der linken Seiten, der Navigationsbereich in der Mitte und die Detailansicht auf der rechten Seite. Abbildung Modulleiste, Navigationsbereich und Detailansicht Die Modulleiste ist die oberste Navigationsebene im Backend von Typo3. Hier wird eine Reihe von Modulen aufgelistet, die dem jeweiligen Benutzer zur Verfügung stehen. Die Hauptmodule (Web, Datei, Dokument, ) enthalten verschiedene Submodule (z.b. Seite, Liste, ), die die eigentlichen Funktionen zum Editieren der Webseite bereitstellen. Alle Module unterhalb des Web-Moduls erzeugen beim Anklicken rechts neben der Modulleiste den Seitenbaum. Es ist eine Verzeichnisstruktur, in der Webseiten in einer Hierarchie mit Hauptseiten, Unterseiten und Unter-Unterseiten dargestellt werden. Er kann erweitert werden, indem Sie auf die Plus-/Minus-Symbole klicken. Diese Verzeichnisstruktur ergibt gleichzeitig die Menüstruktur der Seite. Sie können die Reihenfolge der einzelnen Punkte nachträglich durch Kopieren und Verschieben ändern, sollten aber unbedingt das Löschen und anschließend neu Erstellen von Seiten mit dem gleichen Namen vermeiden. Dateien gleichen Namens in verschiedenen Ebenen sind jedoch zulässig. Das Anklicken vom Modul Datei / Dateiliste erzeugt rechts neben der Modulleiste ebenfalls eine Verzeichnisstruktur den Verzeichnisbaum. Er enthält Ordner mit allen Dateien, die sich auf dem Webserver befinden und für die Webseite benutzt werden. Wenn Sie auf einen Seitentitel im Seitenbaum oder auf einen Ordner in der Dateiliste klicken, stellt das aktuelle Modul Inhalt im rechten Fenster dar. Wenn Sie stattdessen auf das Seitensymbol klicken, erscheint ein kleines Kontextmenü, dessen Optionen sich auf die Seite beziehen. Wenn Sie die Maus über ein Seitensymbol bewegen und kurz warten, erhalten Sie die eindeutige ID der Seite, mit der sie in der Datenbank gespeichert ist. 9

10 3 Grundlegende Bedienung 3.1 Seiten Seiten erstellen Neue Seiten zu erstellen ist ein Leichtes: wählen Sie dazu im Web Modul das Submodul Seite oder Liste. Weil die Seiten in der Hierarchie des Seitenbaums organisiert sind, sollte im Anschluss daran im Seitenbaum die Seite gewählt werden, nach der (oder unterhalb derer) eine neue Seite eingefügt werden soll. Diese Position kann später noch geändert werden. Jetzt können Sie auf das Symbol der Seite klicken, auf der die neue Seite folgen soll, und Neu auswählen. Abbildung Möglichkeiten zur Seitenerstellung Optional: Eine andere Möglichkeit ist Neuen Datensatz anlegen in der Mitte des Bildschirmes aufzurufen. In der Spaltenansicht des Seitenmoduls befindet sich auch explizit der Knopf Neue Seite. Die Buttons in der Kopfleiste vom Seiten- bzw. Listenmodul ( bzw. ) können auch dazu verwendet werden. Bei diesen Vorgehensweisen wird anschließend eine Positionsauswahl erscheinen, mit der Sie die richtige Position der Seite visuell bestimmen können. Abhängig davon, wo Sie die neue Seite erstellen möchten, wählen Sie Seite (in) (Seite wird eine Ebene weiter unten erstellt) oder Seite (nach) (Seite wird auf derselben Ebene erstellt). Wenn Sie den Assistenten benutzen, können Sie damit einfach die Position der neuen Seite bestimmen, in dem Sie auf den entsprechenden Pfeil klicken. Neue Seiten können immer nur eine Ebene unterhalb des Ausgangspunktes im Baum angelegt werden. Wenn Sie also eine Seite unterhalb von 2007 erstellen wollen, müssen Sie den Assistenten dort aufrufen. Es öffnet sich rechts eine Maske, in der diverse Felder ausgefüllt werden können. Pflichtfelder wie der Seitentitel werden mit einem Ausrufeszeichen links neben dem Feld 10

11 gekennzeichnet. Die Kopf- und Fußleiste enthalten Symbole für Speichen ( ), Speichern und Vorschau ( ), Speichern und Schließen ( ), Schließen ohne zu Speichern ( ). Haben Sie einen Titel angegeben, kann die neue Seite erstellt werden, indem Sie auf Speichern und Schließen klicken. Optional: Bevor Sie die neue Seite sichern, können Sie bezüglich dieser optional weitere Angaben machen. Zum Beispiel sollen die Seiten nicht immer vom Typ Standard sein bzw. sollen nicht immer Seiteninhalte in dieser aufgenommen werden können. Der Seitentyp Erweitert bietet zusätzliche Optionen an. Hier können Dateien und Plugins eingebunden werden, oder der Seite eine andere Bezeichnung als der Navigationstitel in der Menüstruktur gegeben werden. Beispielsweise kann es erwünscht sein, dass eine Seite auf eine andere verweist (Typ Shortcut). Auf die zu verweisende Seite können Sie über den Element Browser definieren, oder einfach die nächste bzw. eine beliebige Unterseite nehmen. Im Seitenbaum verweist die Rootpage auf die Seite Home. Es kann beispielsweise auch erwünscht sein, dass beim Aufrufen der Themenseite direkt die Seite 2007 aufgemacht wird. Abbildung Seitentyp Shortcut Der Seitentyp Externe URL bezieht sich auf eine externe Internet- oder adresse und wird benutzt um solche Links in die Menüstruktur der Seite einzubinden. Wenn die Seite nicht im Menü angezeigt, aber über ihre ID zugänglich sein soll, wird der Seitentyp auf Nicht im Menü entsprechend geändert. Damit ist die Seite im Frontend nicht sichtbar, aber sie können Sie trotzdem anschauen, indem Sie der Internetadresse /index.php?id= und die ID der Seite anhängen. Aktivieren Sie die Option Seite verstecken, so können die Nutzer der Webseite die Seite nicht sehen. Erst mit dem Deaktivieren des Versteckens wird die Seite für die Webseitenutzer sichtbar. So kann beispielsweise die Seite erst samt Inhalten erstellt und nachträglich freigegeben werden. 11

12 Symbol Bezeichnung Funktion Normale Seite Nicht im Menü Shortcut Externe URL Mount Seite Backend Benutzer Bereich Versteckte Seite Systemordner Abstand Papierkorb Standard Textseite Zugänglich im FE über die Seiten-ID Verweist auf eine andere Seite Integriert externe Links in die Menüstruktur Shortcut, der die Formatvorgaben der Ausgangsseite behält Sichtbar im FE nur für eingeloggte Benutzer im BE Erscheint nicht als Menüpunkt im FE Container für Datensätze, nicht sichtbar im FE Seitentitel erscheint als Zwischenüberschrift im Menü Platz für Datensätze, die nicht direkt gelöscht werden Tabelle Die verschiedenen Seitentypen in Typo3 Unter Allgemeine Optionen können Sie das Verhalten einer Seite für eine zeitgesteuerte Publikation bzw. für Benutzer mit begrenzten Rechten definieren. Start bestimmt an welchem Datum eine Seite online gehen soll, Stop entsprechend wann sie unsichtbar wird. Wenn Sie z.b. möchten, dass die Seite erst in 10 Tagen angezeigt wird, geben Sie in das Feld Start einfach d+10 ein. Diese Einstellungen können auch für alle Unterseiten der Seite geltend gemacht werden. Abbildung Sichtbarkeitseinstellungen für eine Seite Seiten bearbeiten Wollen Sie die Eigenschaften einer Seite ändern, so ist wiederum zuerst das Modul Seite zu wählen und in einem zweiten Schritt die Seite, deren Eigenschaften Sie ändern wollen. Alternativ können Sie im Seitenbaum das Seitensymbol anklicken und die Option Bearbeiten auswählen. Danach klicken Sie entweder auf das globale Bleistift-Symbol ( ) oder die Schaltfläche Seiteneigenschaften bearbeiten. Anschließend wird Ihnen das gleiche Formular wie beim Erstellen einer Seite präsentiert, hier jedoch mit Ihren bisherigen Angaben, die Sie bearbeiten können. 12

13 Abbildung Möglichkeiten zur Seitenbearbeitung Seiten verschieben Eine Seite zu verschieben ist mit dem Seitenmodul ebenfalls sehr einfach. Die entsprechende Seite wird im Seitenbaum aufgerufen. Im Änderungsmodus wird dann entweder die Schaltfläche Seite verschieben oder der zugehörige Knopf in der Kopfleiste getätigt. Abbildung Möglichkeiten zur Seitenverschiebung In der darauf folgenden Positionsauswahl kann die Seite durch einen einfachen, intuitiven Klick an die neue Position verschoben werden. Optional: Sie können das Prinzip der Zwischenablage von Windows auch in Typo3 benutzen. Im Kontextmenü schneiden Sie eine Seite aus und fügen Sie an der richtigen Stelle ein. Abbildung Zwischenablage in Typo3 13

14 3.1.4 Seiten löschen Das Löschen einer Seite betrifft die gewählte Seite, die Inhalte der gewählten Seite, die Übersetzungen der Seite (alternative Seitensprachen) und die Inhalte der Übersetzungen. Es erfolgt wieder über das Kontextmenü der Seite, in dem die Option Löschen gewählt wird. Abbildung Löschen über Kontextmenü Existiert der Eintrag Löschen nicht, so ist es Ihnen nicht gestattet, diese Seite zu entfernen. 14

15 3.2 Seiteninhalte Seiteninhalte erstellen Innerhalb einer Seite werden Inhalte nach Sprache und Spalten kategorisiert. Der Eintrag Spalten ist geeignet, wenn Sie nur Inhalte einer bestimmten Sprache sehen wollen. Das Spaltenkonzept zeigt den Inhalt, wie er in Spalten im Frontend dargestellt wird. Die Abfolge der Inhalte im Frontend entspricht immer der Abfolge in der Spaltenansicht im Backend. Mit dem Eintrag Sprachen werden die Inhalte mehrerer Sprachen nebeneinander dargestellt. Im Falle der Mehrsprachigkeit, entsteht somit eine gute Übersicht darüber, ob für die Sprachen Übersetzungen erstellt wurden. Vor allem ist schnell erkennbar, ob die Anzahl der Inhaltselemente übereinstimmt. Beim Erstellen neuer Seiteninhalte führen wieder mehrere Wege zum Ziel. Klicken Sie im linken Menü Seite an und wählen danach die entsprechende Seite, die bearbeitet werden soll. Wenn die Seite noch leer ist, sehen Sie in der Mitte der Detailansicht die Schaltfläche Seiteninhalt anlegen, die vorgegeben in der Spalte NORMAL ist. Alternativ dazu können Sie in jeder beliebigen Spalte oder der Kopfleiste den Knopf zum Erstellen eines neuen Inhaltselements ( ) tätigen. Im Anschluss wird Ihnen eine grafische Möglichkeit gegeben, die Position zu wählen, an der das neue Element eingefügt werden soll. Genauso funktioniert auch die Schaltfläche Neuer Inhalt. Inhalt unter dem Menü ist natürlich ebenfalls möglich. Fügen Sie hierzu einfach ein Inhaltselement in der Backend-Spalte LINKS ein. Abbildung Möglichkeiten zum Anlegen von Seiteninhalten Optional: Eine andere Möglichkeit ist Neuen Datensatz anlegen in der Mitte des Bildschirmes und in der darauf folgenden Ansicht den Assistenten zum Seiteninhalt aufzurufen. 15

16 Im Anschluss wird Ihnen eine Übersicht aller Typen von Inhalten präsentiert, die Sie erstellen können. Von dieser langen Liste benötigen Sie zumeist nur den ersten Abschnitt Typischer Seiteninhalt. Der Typ des Seiteninhalts ist in diesem Fall Normaler Text, kann aber nachträglich geändert werden. Abbildung Texttyp Inhaltselement Die Detailansicht zum Erstellen von neuen Seiteninhalten ähnelt sehr der zum Editieren von Seiten. Inhaltstypen haben alle die Bereiche zum Spezifizieren von Typ, Überschrift und Allgemeine Optionen. Die unterschiedlichen Typen werden unten (Tabelle 3.2) kurz umrissen. An dieser Stelle ist eine Überschrift nicht zwingend erforderlich, jedoch in der Regel sinnvoll. Symbol Bezeichnung Überschrift Text Text m/bild Bild Punktliste Tabelle Dateilinks Multimedia Formular Suchen Login Textbox Menü/Sitemap Datensatz einfügen Plugin einfügen Script Trenner HTML Funktion Selten benutzt, in allen anderen Typen vorhanden Textpassagen, Formatierung durch Rich Text Editor Bild mit umfließendem Text, beide formatierbar Bild(-er) vom lokalen Netzwerk oder von der internen Dateiliste Liste Tabelle, jede Zeile steht für eine Tabellenzeile, Tabellenassistent Dateiauflistung vom Dateisystem, im FE als Link in Tabelle abrufbar Einbinden der Dateiformate TXT, HTML, HTM, CLASS, SWF, SWA, DCR, WAV, AVI, AU, MOV, ASF, MPG, WMV, MP3 Erstellt eine Inhaltstyp für die Suchfunktion Inhaltstyp für die Anmeldung Vordefinierte Layoutvorlagen für Textpassagen Navigationshilfe und hierarchische Übersicht der Seite Verweise auf bereits benutzten Inhaltselementen Einbinden von Extensions und Plugins Einbinden von eigenen Methoden, definiert im Template Strukturiert längere Inhalte in Blöcken Eingabe von reinem HTML-Code Tabelle Die verschiedenen Seiteninhaltstypen in Typo3 16

17 Unter Allgemeine Optionen können genau wie bei der Seitenerstellung Sichtbarkeitseinstellungen definiert werden. Optional: Das Konzept von primären und sekundären Feldern bedeutet, dass Sie normalerweise nur die wichtigsten und häufig genutzten Felder sehen. Die etwas detaillierteren Optionen sind in den sekundären Feldern, die auf Wunsch angezeigt werden, versteckt. Diese zusätzliche Menüleiste mit Optionen kann durch Anklicken der Buttons neben Typ bzw. Überschrift ( ) oder der der Checkbox Zweite Optionspalette anzeigen unten im Bildschirm angezeigt werden. Vor und Nach definieren den Abstand in Pixeln zum nächsten Inhaltselement. Mittels Rahmen können Sie Elemente einrücken, umranden oder unterstreichen. Mit der Index Checkbox können z.b. lange Textinhalte, die nicht auf einen Blick erfasst werden können, indexiert werden. Nach oben fügt einen kleinen Link zum Inhalt hinzu. Damit springen Sie nur mit einem Klick zum Seitenanfang. Abbildung Zweite Palette bei Typ Wenn die Überschrift sichtbar ist, wird sie normalerweise fett formatiert. Typ bietet Ihnen verschiedene Layouts an. Die anderen Felder erlauben es, die Überschrift auszurichten, Links oder ein Datum hinzuzufügen. Einfügen von Text Abbildung Zweite Palette bei Überschrift Im Anschluss zeigt sich Ihnen die Oberfläche, die das Eingeben des Inhalts ermöglicht. Standardmäßig steht Ihnen dazu der Rich Text Editor zur Verfügung, der Ihnen die Eingabe bzw. das Formatieren des Textes erleichtert. Der Texteditor bietet im Wesentlichen alle wichtigen Formatierungsoptionen, die auch aus Word bekannt sind. Ist ein Symbol nicht selbsterklärend, so können Sie eine Kurz-Beschreibung zu diesem Symbol erhalten, wenn Sie den Mauszeiger über dieses Symbol bewegen und ihn dort kurz verweilen lassen. 17

18 Abbildung Rich Text Editor Inhalte können aus verschiedenen Quellen nach Typo3 übernommen werden. Die in Word angelegten Formatierungen übernimmt der Editor, soweit dies mit HTML umsetzbar ist. Sie können auch eine bestehende Seite im Internet Explorer markieren und kopieren, müssen dann aber erst denn Zugriff auf die Zwischenablage zulassen. Abbildung Inhalte aus anderen Quellen Zum Teil bleibt so auch die Formatierung der Seite erhalten. Sie sollten aber das Ergebnis auf alle Fälle überprüfen. Wenn Sie fertig mit den Angaben sind, speichern und schließen Sie das Dokument ( ). Ihre Eingaben erscheinen in der Spalte, in der Sie zuvor das neue Inhaltselement positioniert haben. Mit der Schaltfläche über Ihrem Inhalt, können Sie einen weiteren Datensatz nach dem ersten erzeugen. Oder Sie benutzen die globale Funktion am Anfang der Spalte, um Inhalte vor dem erzeugten Inhalt einzuschieben. 18

19 Abbildung Einfügen eines zweiten Inhaltselements Einfügen von Bildern Wenn Sie in einem Text ein oder mehrere Bilder einfügen möchten, machen Sie dies am besten über den Rich Text Editor. Sie positionieren den Mauszeiger dort, wo Sie das Bild haben möchten und klicken auf die Schaltfläche Bild einfügen / verändern ( ). Im Element Browser werden Ihnen drei Methoden zur Auswahl stehen: Neues Zauber-Bild, Neues normales Bild oder Drag n Drop. Abbildung Element Browser zum Einfügen von Bildern Im Zauber Modus können Sie eine beliebige Grafik mit beliebiger Größe auswählen. Die Grafik wird automatisch in ein Web-Grafikformat umgewandelt. Grössenänderungen werden nachträglich vorgenommen, um die Grafikgröße und die Anzeigequalität zu optimieren. Im Normal Modus können Sie nur Web-Grafikformate (JPG, GIF und PNG), bis zu einer Auflösung von 640x480 Pixeln verwenden. Dieser Modus ist zur Verwendung bereits für das Web optimierter Grafiken vorgesehen. 19

20 Mit der Drag n Drop Funktion können Sie direkt neue Bilder in den Text ziehen. Das so eingefügte Bild können Sie im Texteditor verkleinern bzw. vergrößern. Wenn Sie ein bereits eingefügtes Bild bearbeiten möchten, klicken Sie darauf und anschließend wieder auf die Schaltfläche Bild einfügen / verändern. Oder Sie benutzen das Kontextmenü mit der rechten Maustaste und wählen Bildeigenschaften aus. In der darauf folgenden Anzeige können Sie die Parameter des Bildes spezifizieren, z.b. wie der Text das Bild umfließen soll. Auf derselben Art und Weise können Sie mit dem Rich text Editor einen Link oder eine Tabelle im Text einfügen. Zum Schluss speichern und schließen sie das Dokument ( ). Optional: Um ein Bild einzufügen, können Sie auch den Bild- bzw. Text m/bild Inhaltstyp benutzen. Sie wählen dann die Bilder mit dem Element Browser oder durchsuchen das lokale Netzwerk danach. Mit Position können Sie die Ausrichtung gegenüber dem Text definieren. Wenn mehrere Bilder nebeneinander stehen sollen, können Sie unter Weitere Optionen die Bilder in Spalten organisieren. Die Bildgröße kann in Pixeln angepasst werden. Abbildung Element Browser im Typ Text m/bild Mit dieser Methode ist aber keine direkte Vorschau der Bilder im Rich Text Editor möglich. Dazu müssen Sie auf das Modul Anzeigen klicken und dann gegebenenfalls die Bilder bearbeiten. Einfügen von Bildergalerien Wenn Sie eine dynamische Bildergalerie einfügen möchten, verwenden Sie den Typ Nur Bilder. Abbildung Texttyp für Bildergalerien 20

21 In der Detailansicht benennen Sie die Bildergalerie, indem Sie das Feld Überschrift ausfüllen. Sie müssen nun die zweite Optionspalette aktivieren, um zusätzliche Einstellungen einzublenden. Im Abschnitt Breite (pixels) sind Activate Imagelightbox v2, Aktiviere BilderSets und Praesenations Modus auszuwählen. Die erste Checkbox aktiviert die Extension Imagelightbox v2 zum Einfügen von Bildergalerien. BilderSets öffnet nicht nur ein neues Fenster mit den neuen Bildern, sondern erlaubt das Durchbrowsen durch die Bilder. Praesentations Modus definiert die Anzeige der Bilder im neuen Fenster. Abbildung Aktivierung der Extension für Bildergalerien Sie rufen nun den Element Browser und darin den Ordner mit den gewünschten Bildern auf. Um sich eine kleine Vorschau von jedem Bild anzeigen zu lassen, aktivieren Sie das Kästchen Thumbnails anzeigen in der Mitte des Fensters. Die Bildergalerie füllen Sie, in dem Sie auf das Pluszeichen (zur Liste hinzufügen) neben dem Bild klicken. Abbildung Einfügen der Bilder in die Bildergalerie Wenn das gemacht ist, können Sie den Element Browser schließen. Die ausgesuchten Fotos wurden in der Detailansicht eingefügt und Sie können jetzt deren Position in der Seite bestimmen. 21

22 Abbildung Eingefügte Bilder in der Detailansicht Wenn mehrere Bilder nebeneinander stehen sollen, werden sie in unsichtbaren Spalten organisiert. Je mehr Spalten Sie auswählen, desto kleiner werden die Bilder erscheinen. Wählen Sie daher als optimale Spaltenanzahl drei aus. Abbildung Organisieren der Bilder in Spalten Wenn Sie jetzt das Dokument sichern und die Webseite anschauen ( folgende Anzeige. ), bekommen Sie Abbildung Anzeigen der Bildergalerie im Frontend Wenn Sie auf ein Bild klicken, öffnet sich ein neues Fenster, in dem Sie sich durch Next bzw. Prev durch die Bilder durchbrowsen können. Anschließend können Sie das Fenster mit Close schließen. 22

23 Abbildung Bildergalerie im Frontend öffnen Einfügen von Audiomitschnitten Wenn Sie einen Audiomitschnitt einfügen wollen, muss er erstmal in der Dateiliste und im Storage Folder ( ) im Seitenbaum verfügbar sein. Dateiupload in die Dateiliste wird ausführlich in Kapitel 3.3 erklärt. Audio-Dateien aus der Dateiliste müssen auch im Storage Folder verfügbar sein, da sie später aus diesem Ordner ausgewählt werden. Dazu rufen Sie den Seitenbaum auf, in dem sich auch der Storage Folder befindet, und fügen einen neuen Datensatz ein. Wie beim Erzeugen von neuen Seiten bzw. Seiteninhalten, bieten sich Ihnen mehrere Vorgehensweisen dafür. Wenn Sie über das Kontextmenü gehen, wählen Sie Neu aus und suchen aus der darauf folgenden Liste der möglichen Datensätze die Playliste ( ) aus. 23

24 Abbildung Anlage neuer Playliste im Storage Folder In der Detailansicht zum Erstellen von Playlisten, ist die Überschrift ein Pflichtfeld. Beim Typ wählen Sie Create MP3s from a directory aus. Mit dieser Option müssen Sie den genauen Pfad auf dem Server angeben, wo sich Ihre MP3-Dateien befinden. Typischerweise ist das der Pfad fileadmin/user_upload/audiofiles/veranstaltungsmitschnitte/, den Sie mit Datenfreigabe bestätigen. Wenn das gemacht ist, erscheint unten im Bildschirm eine Liste der MP3-Dateien, die in diesem Ordner gefunden wurden. Wählen Sie die Dateien aus, die Sie wünschen, indem Sie auf sie klicken. Die zugehörigen Überschriften können Sie im Textfeld darunter eingeben. Anschließend kann das Dokument gespeichert und geschlossen werden. Damit sind alle Vorbereitungen für das Einfügen von Audiomitschnitten getroffen. Im Storage Folder angelegte Playlisten können Sie wieder bearbeiten oder entfernen, in dem Sie den Storage Folder im Listenmodul anzeigen und die Checkbox Erweiterte Ansicht unten im Fenster aktivieren. Abbildung Playlisten im Storage Folder verwalten Das Bearbeiten geht wieder über das Bleistift-Symbol ( ), das Löschen über den Papierkorb ( ). In der letzten Spalte wird Ihnen angezeigt, ob diese Playliste bereits in einem MP3- Inahltselement verwendet wird. 24

25 Abbildung Playlistenform Sie können nun wieder die Schritte für das Erstellen eines neuen Seiteninhalts einschließlich der Positionsbestimmung gehen und unter Plugins den MP3 Player wählen. Abbildung MP3 Player Typ Optional: Sie können den Inhaltstyp auch nachträglich auf Plugin einfügen ändern und die Erweiterung MP3 Player wählen. 25

26 Abbildung Element Browser bei Audiomitschnitten Um das Pflichtfeld Playliste zu füllen, durchsuchen Sie wieder über den Element Browser die Datensätze. Aus dem Storage Folder wählen Sie den richtigen Mitschnitt und speichern und schließen das Fenster ( ). Einfügen von News In der Hauptseite Home im Frontend werden neue Meldungen als Links dargestellt. Wenn man darauf geht, öffnet sich die News Seite mit dem entsprechenden Artikel. Abbildung Neue Meldungen auf den Seiten Home und News Um neue News anzulegen, klicken Sie im Seitenbaum auf das Symbol vom blauen News Storage Ordner ( ) und im Kontextmenu auf Neu. Aus der darauf folgenden Liste suchen Sie News ( ) aus. 26

27 In der Detailansicht geben Sie einen aussagekräftigen Titel ein und deaktivieren die Verstecken-Funktion. Sie können ebenfalls mit Start bestimmen, wann diese Meldung in der Webseite erscheinen soll. Abbildung Titelangabe und Freischalten der Meldung Wenn Sie das Datum unverändert lassen, erscheint auf der Webseite das heutige Datum mit Uhrzeit. Liegt der Zeitpunkt der Meldung aber in der Vergangenheit, beispielsweise vor 10 Tagen, können Sie den mit d-10 eingeben. Das System rechnet automatisch das richtige Datum aus. Abbildung Zeitpunkt der Meldung Bei Untertitel können Sie eine kurze Beschreibung der Meldung angeben, die später in der News Seite als Überschrift des Meldungstexts erscheint. Der eigentliche Meldungstext, der in der Seite News erscheinen soll, geben Sie unter Text ein. Abbildung Überschrift und Text der Meldung Anschließend können Sie das Dokument speichern ( ) und sich das Ergebnis in der Seite Home anschauen. Die neue Meldung wurde hinzugefügt und kann durch Anklicken auch gelesen werden. 27

28 Abbildung Neue Meldung Wenn Sie eine angelegte Meldung löschen oder bearbeiten möchten, zeigen Sie sich den News Storage im Listenmodul an und aktivieren die Option Erweiterte Ansicht. Mi dem Bleistift bearbeiten Sie eine Meldung, mit dem Papierkorb wird die Meldung entfernt. Sie können neue Meldungen einfügen, bestehende kopieren oder verbergen. Abbildung Verwalten von Meldungen Einfügen von -Formularen Wenn Sie Anmeldungen für Veranstaltungen gerne online an Ihre -Adressen hätten, rufen Sie im Seitenbaum die Seite Impressum auf. Unten im Bildschirm ist ein verstecktes Inhaltselement vom Typ -Formular, welches Sie über die Checkbox Zeige verborgene Inhalte einblenden. Abbildung Formular zum Anmelden für Veranstaltungen Wenn Sie nun auf das Bleistift-Symbol ( ) zum Bearbeiten gehen, öffnet sich eine Maske, in der Sie die Überschrift Anmeldungen eingeben und die Empfänger -Adresse in das entsprechende Feld eintragen. Zielseite ist die Seite mit der ID 55 (Impressum / Anfrage geschickt). Das Formular ist somit fertig und kann auf der Seite eingeblendet, oder in eine beliebige Seite eingefügt werden. 28

29 Abbildung Empfänger -Adresse Seiteninhalte bearbeiten Das Bearbeiten von Seiteninhalten beginnt zunächst wie das Erstellen. Klicken Sie daher zunächst auf das Modul Seite, soweit dieses nicht bereits aktiv ist, und dann auf die Bezeichnung der Seite im Seitenbaum, in der Sie Inhalte editieren wollen. Anschließend werden Ihnen die Inhalte der Seite in der Reihenfolge präsentiert, in der auch die spätere Ausgabe erfolgt. Wollen Sie die Inhalte mehrerer Sprachen auf einen Blick sehen bzw. bearbeiten können, so wählen Sie im Auswahlfeld den Eintrag Sprachen. Andernfalls ist auch der Eintrag Spalten möglich. Um in einem Texttyp-Element nur den eigentlichen Textbereich zu bearbeiten, klicken Sie auf die Schaltfläche In Rich Text Editor bearbeiten. Dies bewirkt, dass sich ein Vollbild-Fenster öffnet, in dem Sie den ihre Änderungen vornehmen können. Bei dieser Option können Sie aber nicht die Überschrift eines oder gar den Typ des Inhaltselements ändern. Abbildung Bearbeiten von Texttyp-Elementen Die Knöpfe Bewege Datensatz nach unten ( ) bzw. oben ( ) können dafür verwendet werden, die Reihenfolge der verschiedenen Inhaltselemente derselben Seite / Spalte zu verändern. Ein Klick auf die Symbole der Inhaltselemente zeigt Ihnen wie gewohnt das kontextsensitive Menü für das entsprechende Element. So können Sie die Funktionen Kopieren, Ausschneiden und Einfügen des Kontextmenüs nutzen, um die Position eines Elements zu ändern. Sie erlauben Ihnen sogar, Kopien zu erstellen und Elemente auf andere Seiten zu verschieben. 29

30 Abbildung Verschieben von Seiteninhalten Der Verbergen Knopf ( ) ist ein schneller Weg, das Versteckt-Flag eines Elementes zu verändern. Durch Aktivieren der Checkbox zum Anzeigen wird das Element wieder sichtbar. Abbildung Verborgene Inhalte Zu guter Letzt können Sie nicht nur ein Inhaltselement, sondern mehrere gleichzeitig bearbeiten, indem Sie auf das erste Beistift-Symbol ( ) in der Spalte klicken. In diesem Fall werden Ihnen alle Seiteninhalte fortlaufend untereinander präsentiert. Gästebucheinträge freischalten Neue Gästebucheinträge können mit dem Listenmodul angeschaut werden. Noch nicht bestätigte Einträge, werden versteckt und nicht auf die Seite eingeblendet. Um diese freizuschalten, klicken Sie auf das Bleistift-Symbol ( ) zum Bearbeiten und entfernen das Versteckt-Flag vom Inhaltselement. Sie können Einträge auch ganz löschen, indem Sie auf den Papierkorb klicken. Abbildung Gästebucheinträge verwalten Seiteninhalte löschen Nachdem Sie die Seite, in der Sie Seiteninhalte entfernen möchten, in der Detailansicht angezeigt bekommen haben, klicken Sie auf das Papierkorb-Symbol ( )des entsprechenden Inhalts, und bestätigen Sie die Rückfrage, dass tatsächlich das Inhaltselement gelöscht werden soll. 30

31 Abbildung Löschen von Seiteninhalten 31

32 3.3 Dateiupload Dateien und Medien, die für eine Webseite erforderlich sind, werden im Modul Datei / Dateiliste verwaltet. Das können Bilder, Multimedia- oder andere Dateien sein, aber auch Formatdateien, wie Stylesheets oder HTML Templates. Sie werden auf dem Webserver gespeichert und für das Einbinden und Bearbeiten in Typo3 bereitgestellt. Der zentrale Speicherort dafür ist der Ordner fileadmin/. Es ist ratsam, in der Dateiliste eine klare und sinnvolle Ordnerstruktur zu erstellen, in der sich jeder Benutzer schnell zurechtfinden kann. Typischerweise werden Dateien nach Typ, Ordner entsprechend der Seitenbaumstruktur organisiert. Der Verzeichnisbaum im Navigationsbereich zeigt die Ordner, die für den angemeldeten Benutzer freigegeben sind. Wenn Sie auf einen Ordner klicken, werden dessen Inhalte in der Detailansicht präsentiert. Das Kontextmenu ist in beiden Bereichen verfügbar, so dass Ordner und Dateien umbenannt, kopiert, ausgeschnitten oder gelöscht werden können. Im unteren Bereich der Detailansicht können Thumbnails für Bilder bzw. die Zwischenablage durch Anklicken angezeigt werden. Abbildung Dateiliste und Kontextmenu Im kontextsensitiven Menu vom Verzeichnisbaum sind zusätzlich die Aktionen Neu und Dateiupload möglich. Mit Neu können ein oder mehrere Ordner auf einmal erstellt werden. Bis zu 10 Dateien können gleichzeitig vom lokalen Netzwerk hochgeladen werden. Dabei können bestehende Dateien in der Dateiliste überschrieben werden, wenn dies gewünscht ist. Dateinamen, die Leer- oder Sonderzeichen bzw. Umlaute enthalten, werden vom Programm geändert: Leer- und Sonderzeichen werden in Unterstriche umgewandelt, die Umlaute in den Vokal und ein E. 32

33 Abbildung Anlage neuer Ordner und Dateiupload 33

34 3.4 Frontend-Editing Mit Frontend-Editing werden Seiten und Inhalten direkt in der Webseite geändert ( edit while you surf ). Es ist eine gute Lösung für technisch weniger versierte Redakteure oder für Benutzer, die nur selten im System arbeiten. Dieser Modus eignet sich sehr dafür, kleine Fehler zu korrigieren oder letzte Anpassungen zu machen. Um Frontend-Editing nutzen zu können, müssen Sie im Backend eingeloggt sein, und brauchen vom Administrator die korrekte Rechtekonfiguration. Es müssen auch das entsprechende Template und der Admin Panel für den Benutzer aktiviert sein. Mit dem Admin Panel können Sie verschiedene Optionen für den Bearbeitungsbereich auswählen, so dass Ihre Texte mit einem Bleistift-Symbol ( ) versehen werden. Wenn Sie drauf klicken, wird der Rich Text Editor aufgemacht und Sie können Ihre Änderungen durchführen. Normale Benutzer bekommen dieses Symbol nicht zu sehen. Abbildung Admin Panel 34