Einführung in TYPO3. Patrick Flügel Rechenzentrum Universität Passau. 14. August 2014

Einführung in TYPO3 Patrick Flügel Rechenzentrum Universität Passau 14. August 2014

Abbildungsverzeichnis Inhaltsverzeichnis 1 Einführung 3 1.1 Zugang..................................... 3 1.2 Die Benutzeroberfläche............................ 3 1.3 Hilfe...................................... 4 2 Seiten und Inhalte 4 2.1 Neue Seite anlegen.............................. 4 2.2 Seiteninhalte anlegen............................. 5 2.3 Der Rich Text Editor............................. 6 2.4 Beispiel für eine typische Seite........................ 6 2.5 Listen..................................... 7 2.6 Hyperlinks................................... 7 2.7 Tabellen.................................... 10 2.8 Bilder einfügen................................ 10 2.9 Daten aus Stud.IP einfügen......................... 11 2.10 Text aus anderen Anwendungen einfügen.................. 12 Abbildungsverzeichnis 1 Der Anmeldedialog.............................. 4 2 Die Benutzeroberfläche - das Backend................... 5 3 Der Rich Text Editor............................. 6 2 Rechenzentrum Universität Passau

1 Einführung TYPO3 ist ein freies Open Source Content-Management-System für Internet- und Intranetauftritte. Content-Management-Systeme trennen Inhalt, Struktur und Layout von Dokumenten. Das hat für die Autoren, Sachbearbeiter und Redakteure den Vorteil, dass sie sich ganz auf die Pflege und Aktualisierung von Texten konzentrieren können, ohne sich um das Layout, die Einbindung ihrer Seite oder andere technische Aspekte kümmern zu müssen. Das Web Content-Management-System TYPO3 ist sehr einfach zu erlernen, man braucht keine Vorkenntnisse in HTML oder Java Script. 1.1 Zugang TYPO3 ist ein Online-Redaktionssystem und verwendet als Client nur einen üblichen Web-Browser. Sie können jederzeit von jedem Ort mit Internet-Zugang Veränderungen an Ihrer Web-Site vornehmen. Das so genannte Frontend von TYPO3 ( vordere Seite ) ist der Web-Server, der die Web- Pages den Internet-Surfern anzeigt. Der Zugriff kann mit jedem beliebigen Web-Browser erfolgen, auch mit älteren Versionen und auch ohne spezielle Funktionen wie Cookies oder JavaScript. Im Allgemeinen ist auch kein Login notwendig (nur bei passwort-geschützten Web-Pages). Der Zugriff auf die Web-Pages erfolgt im Allgemeinen über einen URL der Form http://webservername/ Das so genannte Backend von TYPO3 ( hintere Seite ) ist das Content-Management- System, mit dem die Web-Pages erstellt und editiert werden. Der Zugriff ist nur für berechtigte Personen, die so genannten Web-Autoren oder Redakteure möglich. Sie brauchen dafür einen Benutzernamen und ein Passwort mit einer entsprechenden TYPO3- Berechtigung. Der Zugriff kann mit allen gängigen neueren Web-Browsern erfolgen. Cookies und JavaScript müssen eingeschaltet sein und Popup-Fenster müssen für diesen Server erlaubt sein. Die Verwendung des speziellen Rich Text Editors ist derzeit nur mit Mozilla oder Firefox oder mit dem Internet Explorer ab Version 6 möglich. Der Zugriff auf das Backend erfolgt im Allgemeinen uber einen URL der Form http://webservername/typo3/ Wenn Sie diese Backend-Adresse in Ihrem Web-Browser eingeben, erscheint eine Seite mit einem Anmeldedialog (Abb. 1, S. 4). Geben Sie bitte Benutzername und Passwort ein und klicken Sie auf LogIn. Bei erfolgreichem Login erscheint Ihre persönliche Benutzeroberfläche. 1.2 Die Benutzeroberfläche Die Arbeitsoberfläche von TYPO3 (Abb. 2, S. 5) ist in drei Hauptbereiche unterteilt. Links sehen Sie die Modulleiste. Hier wählen Sie aus, welche Art von Arbeiten Sie durchführen wollen. In der Mitte sehen Sie den Seiten- oder Dateienbaum. Hier wählen Sie aus, welche Web-Seite oder welchen Dateien-Folder Sie bearbeiten wollen. Rechts sehen Sie die Arbeitsfläche. Hier führen Sie Ihre Arbeiten durch. Rechenzentrum Universität Passau 3

2 Seiten und Inhalte Abbildung 1: Der Anmeldedialog 1.3 Hilfe Für TYPO3 gibt es eine ganze Reihe von Quellen, bei denen Sie Hilfe zur Arbeit mit TYPO3 finden. Da wäre zunächst das Handbuch, das Sie im Backend von TYPO3 im Modulbereich Hilfe finden. Des weiteren finden Sie kostenlose Schulungsvideos im Internet unter der URL http://typo3.org/documentation/videos/tutorials-v4-de/. Im Backend finden Sie bei den meisten Symbolen, Eingabefeldern und Schaltflächen kleine Fragezeichen. Bewegen Sie den Mauszeiger auf eines dieser Fragezeichen, dann erhalten Sie in einem kleinen Anzeigefenster eine kurze Erläuterung des jeweiligen Objekts. Bei einem Klick auf das Fragezeichen wird der betreffende Eintrag aus dem Online- Handbuch angezeigt. 2 Seiten und Inhalte 2.1 Neue Seite anlegen Klicken Sie im Seitenbaum auf das Icon der Seite, unter der Sie eine neue Seite anlegen wollen, und wählen Sie im Kontextmenü den Punkt Neu. Auf der Arbeitsfläche klicken Sie nun im Bereich Neuer Datensatz unter dem Listenpunkt Neue Seite erstellen auf Seite (in). Auf der Arbeitsfläche erscheinen nun die Eingabefelder für die Seiteneigenschaften. Geben Sie als erstes einen Seitentitel ein. Die Option Seite verstecken lassen Sie zunächst aktiviert. Wenn Sie die Seite vollständig erstellt haben, können Sie diese Option deaktivieren, damit die Seite im Frontend sichtbar wird. Speichern Sie die Eigenschaften ab, indem Sie auf das Symbol Dokument speichern und schliessen klicken. Nun wurde die Seite erzeugt. 4 Rechenzentrum Universität Passau

2.2 Seiteninhalte anlegen Abbildung 2: Die Benutzeroberfläche - das Backend 2.2 Seiteninhalte anlegen Im Seitenbaum auf die Seite klicken, in der Sie Inhalt einfügen wollen. Klicken Sie dann in der Kopfleiste des Detailbereichs auf das Symbol Neues Inhaltselement anlegen. Wählen Sie dann durch Anklicken den Typ des Inhaltselements aus. In den meisten Fällen wird dies der Typ Normaler Text sein. Wählen Sie dann, ganz unten im Detailbereich, durch Anklicken des jeweiligen kleinen grauen Pfeiles, die Position des Inhaltselements auf der Seite aus. Im Arbeitsbereich erscheinen nun die einzelnen Eingabefelder des Inhaltselements. Füllen Sie diese entsprechend aus. Im Bereich Text steht Ihnen der sogenannte Rich Text Editor zur Verfügung. Hier können, in eingeschränktem Umfang, Formatierungen am Text vorgenommen werden. Wenn Sie mit der Arbeit an diesem Inhaltselement fertig sind, klicken Sie auf das Icon Dokument speichern und schliessen, um das bearbeitete Inhaltselement abzuspeichern und die Eingabemaske zu verlassen. Rechenzentrum Universität Passau 5

2 Seiten und Inhalte Abbildung 3: Der Rich Text Editor 2.3 Der Rich Text Editor Der Rich Text Editor (Abb. 3) erscheint, wenn Sie ein Seitenelement vom Typ Text, Text mit Bild oder Nachricht anlegen oder bearbeiten. Er besteht aus einer oder mehreren Symbolleisten und einem Texteingabebereich. Im Texteingabebereich geben Sie Ihren Text ein, den Sie dann im Einzelfall mit den entsprechenden Funktionen aus der Symbolleiste bearbeiten können. Um zu sehen, welche Bedeutung ein Symbol hat oder welche Funktion sich dahinter verbirgt, bewegen Sie den Mauszeiger auf das betreffende Symbol. In einem kleinen gelben Fensterchen, dem sogenannten Tooltip, werden dann Bedeutung und Funktion des jeweiligen Symbols angezeigt. Mehr als die im Rich Text Editor angezeigten Formatierungen können Sie nicht benutzen. Im Hinblick auf das Corporate Design können Sie insbesondere keine anderen Schriftarten und -farben auswählen. 2.4 Beispiel für eine typische Seite Legen Sie eine neue Seite an und geben Sie ihr den Seitentitel Typische Seite. Erzeugen Sie ein Seitenelement vom Typ Normaler Text. Geben Sie im Eingabefeld Überschrift Beispiel für eine typische Seite ein. Klicken Sie auf das Icon Dokument speichern und schließen. Legen Sie jetzt ein weiteres Seitenelement vom Typ Normaler Text an. Platzieren Sie es unterhalb des ersten Elements, das die Überschrift enthält. 6 Rechenzentrum Universität Passau

2.5 Listen Geben Sie im Bereich Text des neuen Seitenelements folgenden Text ein: Dies ist ein Beispiel für eine typische Webseite in TYPO3. Eine TYPO3-Webseite kann Text, Tabellen und Bilder enthalten. Es ist sinnvoll, den Inhalt einer Seite auf mehrere Seitenelemente zu verteilen. Dadurch kann der Inhalt der Seite flexibler gestaltet werden. So können z.b. einzelne Inhalte leicht verschoben oder ausgeblendet werden. Speichern Sie das Seitenelement ab. Betrachten Sie die Seite abschließend im Frontend. 2.5 Listen Nicht numerierte Listen anlegen Im Rich Text Editor die Schreibmarke an die Stelle setzen, an der die nicht numerierte Liste beginnen soll. Auf das Symbol Aufzählung klicken und den gewünschten Text hinter das jetzt erscheinende Aufzählungszeichen schreiben. Zum Erzeugen eines weiteren Aufzählungspunktes betätigen Sie die Return- Taste. Um wieder in einen normalen Absatz zurückzugelangen, betätigen Sie erneut die Return-Taste und klicken anschließend wiederum auf das Symbol Aufzählung. Numerierte Listen anlegen Im Rich Text Editor die Schreibmarke an die Stelle setzen, an der die numerierte Liste beginnen soll. Auf das Symbol Numerierung klicken und den gewünschten Text hinter das jetzt erscheinende Numerierungszeichen schreiben. Zum Erzeugen eines weiteren Numerierungspunktes betätigen Sie die Return- Taste. Um wieder in einen normalen Absatz zurückzugelangen, betätigen Sie erneut die Return-Taste und klicken anschließend wiederum auf das Symbol Numerierung. 2.6 Hyperlinks Verknüpfung mit einer Seite auf dem eigenen Webserver Im Rich Text Editor den Text, der verknüpft werden soll, markieren. Auf das Symbol Link einfügen klicken. Daraufhin öffnet sich ein Fenster mit dem Titel Link einfügen/verändern. Rechenzentrum Universität Passau 7

2 Seiten und Inhalte In dem dort angezeigten Seitenbaum auf den Namen der Seite klicken, zu der verknüpft werden soll. Falls die zu verknüpfende Seite in einem neuen Browserfenster erscheinen soll, so ist im Fenster Link einfügen/verändern bei Ziel in der rechten Auswahlliste vorher auf Neues Fenster zu klicken. In den Auswahlfeldern Breite und Höhe können Sie die Größe des neuen Fensters in Pixel festlegen. Ebenso können Sie den Darstellungsstil der Verknüpfung in der Rubrik Stil verändern. Möchten Sie, dass ein bestimmter Text angezeigt wird, wenn man den Mauszeiger auf die Verknüpfung bewegt, so geben sie diesen Text im Eingabefeld Titel ein. Wenn Sie eine oder mehrere dieser Auswahlmöglichkeiten nutzen wollen, müssen Sie Ihre Wahl treffen, bevor Sie auf den Namen der zu verknüpfenden Seite klicken. Verknüpfung mit einer bestimmten Stelle einer Seite auf dem eigenen Webserver Voraussetzung, um mit einer Verknüpfung an eine bestimmte Stelle einer Seite auf dem eigenen Webserver springen zu können, ist, dass diese Seite mehrere Seiteninhaltselemente enthält. Im Rich Text Editor den Text, der verknüpft werden soll, markieren. Auf das Symbol Link einfügen klicken. Daraufhin öffnet sich ein Fenster mit dem Titel Link einfügen/verändern. In dem dort angezeigten Seitenbaum rechts von dem Namen der Seite, zu der verknüpft u werden soll, auf den kleinen Pfeil klicken, um die Seiteninhaltselemente anzeigen zu lassen. Auf das zu verknüpfende Seitenelement klicken. Auch hier gilt, wie oben, eventuelle Optionen müssen vor dem Klick auf den Namen des Seiteninhaltselementes eingestellt werden. Verknüpfung mit einer externen URL Im Rich Text Editor den Text, der verknüpft werden soll, markieren. Auf das Symbol Link einfügen klicken. Daraufhin öffnet sich ein Fenster mit dem Titel Link einfügen/verändern. Dort auf das Register Externe URL klicken. Im Eingabefeld URL die gewünschte Webadresse eingeben und nach dem eventuellen Einstellen von Optionen abschließend auf die Schaltfläche Link setzen klicken. Verknüpfung zum Download von Dateien Im ersten Schritt müssen die Dateien, die zum Download bereitgestellt werden, auf den Webserver hochgeladen werden. Dazu klicken Sie im TYPO3-Backend auf das Modul Dateiliste. 8 Rechenzentrum Universität Passau

2.6 Hyperlinks Haben Sie noch keinen Ordner für Ihre Dateien auf dem Webserver angelegt, so klicken Sie zunächst im Dateibaum auf das oberste Verzeichnis. Wählen Sie im Kontextmenü den Punkt Neu aus. Im Detailbereich sehen Sie nun die Schaltfläche Ordner anlegen. Geben Sie im darüber liegenden Eingabefeld den gewünschten Ordnernamen ein und klicken Sie anschließend auf die Schaltfläche Ordner anlegen. Nun wechseln Sie in den neu angelegten Ordner, indem Sie im Dateibaum auf den betreffenden Ordnernamen klicken. Klicken Sie jetzt im Detailbereich auf die Schaltfläche Dateien hochladen. Anschließend klicken Sie auf die Schaltfläche Durchsuchen und wählen in dem sich öffnenden Dialogfenster die betreffende Datei auf Ihrem Rechner aus. Nach dem Bestätigen schließt sich dieses Dialogfenster und Sie können jetzt auf die Schaltfläche Hochladen klicken. Damit ist das Hochladen der Datei abgeschlossen. Wechseln Sie jetzt wieder in das Modul Seite und klicken Sie auf den Seitennamen der zu bearbeitenden Seite. Im Rich Text Editor den Text, der verknüpft werden soll, markieren. Auf das Symbol Link einfügen klicken. Daraufhin öffnet sich ein Fenster mit dem Titel Link einfügen/verändern. Dort auf das Register Datei klicken. Im jetzt sichtbaren Verzeichnisbaum auf den Namen des betreffenden Ordners klicken, damit der Inhalt des Ordners angezeigt wird. Nachdem Sie vorher gegebenenfalls eventuelle Optionen eingestellt haben, klicken Sie jetzt auf den gewünschten Dateinamen. Verknüpfung mit einer E-Mail-Adresse Im Rich Text Editor den Text, der verknüpft werden soll, markieren. Auf das Symbol Link einfügen klicken. Daraufhin öffnet sich ein Fenster mit dem Titel Link einfügen/verändern. Dort auf das Register E-Mail klicken. Im Eingabefeld E-Mail-Adresse die entsprechende Adresse eingeben. Nachdem Sie vorher gegebenenfalls eventuelle Optionen eingestellt haben, klicken Sie dann auf die Schaltfläche Link setzen. Eine weitere Möglichkeit, eine Verknüpfung mit einer E-Mail-Adresse zu erzeugen, ist, die E-Mail-Adresse einfach als Text hinzuschreiben, gefolgt von einem Leerzeichen. Der Rich Text Editor wandelt diese Adresse dann automatisch in eine Verknüpfung um. Rechenzentrum Universität Passau 9

2 Seiten und Inhalte 2.7 Tabellen Das Erstellen einer einfachen Tabelle Im Rich Text Editor die Schreibmarke an die Stelle setzen, an der die Tabelle eingefügt werden soll. Auf das Symbol Tabelle einfügen klicken. In der nun erscheinenden Dialogbox in den jeweiligen Eingabefeldern die gewünschten Werte eintragen. Abschließend mit Ok bestätigen. Nun ist das Tabellengerüst sichtbar und es können die jeweiligen Inhalte in die Tabellenzellen eingetragen werden. Wollen Sie nachträglich Zeilen oder Spalten hinzufügen, so klicken Sie mit der rechten Maustaste in die Spalte oder Zeile, wo eine Spalte oder Zeile hinzugefügt werden soll und wählen aus dem Kontextmenü dann den Punkt Zeile einfügen vor oder Zeile einfügen nach bzw. Spalte einfügen vor oder Spalte einfügen nach. Erweiterte Gestaltungsmöglichkeiten einer Tabelle Die Tabelle zunächst, wie oben beschrieben, erstellen, jedoch noch ohne Texteingabe. Um zwei oder mehrere Tabellenzellen zu einer einzigen zusammenzufügen, markieren Sie die betreffenden Zellen mit gedrückter linker Maustaste. Klicken Sie mit der rechten Maustaste in den markierten Bereich und wählen Sie im Kontextmenü dann den Punkt Zellen verbinden. Ein nachträgliches Einfügen von Zeilen oder Spalten in eine Tabelle mit zusammengefügten Zellen ist nur bedingt möglich und führt häufig zu Problemen. Deshalb sollte beim Erstellen einer solchen Tabelle möglichst vorher das exakte Aussehen feststehen. 2.8 Bilder einfügen Um Bilder in Ihre Webseite einfügen zu können, müssen die Bilddateien zunächst auf den Webserver hochgeladen werden. Dazu klicken Sie im TYPO3-Backend auf das Modul Dateiliste. Haben Sie noch keinen Ordner für Ihre Dateien auf dem Webserver angelegt, so klicken Sie zunächst im Dateibaum auf das oberste Verzeichnis. Wählen Sie im Kontextmenü den Punkt Neu aus. Im Detailbereich sehen Sie nun die Schaltfläche Ordner anlegen. Geben Sie im darüber liegenden Eingabefeld den gewünschten Ordnernamen ein und klicken Sie anschließend auf die Schaltfläche Ordner anlegen. Nun wechseln Sie in den neu angelegten Ordner, indem Sie im Dateibaum auf den betreffenden Ordnernamen klicken. 10 Rechenzentrum Universität Passau

2.9 Daten aus Stud.IP einfügen Klicken Sie jetzt in der Kopfleiste des Detailbereichs auf das Symbol Dateien hochladen. Anschließend klicken Sie auf die Schaltfläche Durchsuchen und wählen in dem sich öffnenden Dialogfenster die betreffende Datei auf Ihrem Rechner aus. Nach dem Bestätigen schließt sich dieses Dialogfenster und Sie können jetzt auf die Schaltfläche Hochladen klicken. Damit ist das Hochladen der Datei abgeschlossen. Bilder im Fließtext einfügen Setzen Sie im Rich Text Editor die Schreibmarke an die Stelle im Text, wo das Bild eingefügt werden soll. Auf das Symbol Bild einfügen/verändern klicken und in der nun erscheinenden Dialogbox auf den Ordner im Seitenbaum klicken, der die gewünschte Bilddatei enthält. Anschließend die betreffende Datei anklicken. Dadurch wird das Bild eingefügt. Die Größe des Bildes ändern Sie, indem Sie auf das Bild klicken und dann uber die entsprechenden Anfasspunkte mit gedrückter linker Maustaste das Bild auf die gewünschte Größe ziehen. Das Seitenelement TEXT MIT BILD verwenden Legen Sie ein neues Seitenelement vom Typ Text mit Bild an. Geben Sie im Rich Text Editor zunächst, wie gewohnt, den Text ein. Klicken Sie dann auf die Registerkarte Medien. Klicken Sie auf das Ordnersymbol neben dem Eingabefeld Bilder und wählen Sie im Verzeichnisbaum aus dem entsprechenden Ordner die gewünschte Bilddatei durch Anklicken aus. Sollte sich die gewünschte Bilddatei noch nicht in dem Ordner auf dem Webserver befinden, so besteht die Möglichkeit, sie unter Verwendung der Schaltflächen Durchsuchen und Hochladen in diesen Ordner hochzuladen. Im Bereich Position können Sie die Position des Bildes relativ zum Text festlegen. Im Bereich Breite können Sie festlegen mit welcher Breite und Höhe das Bild auf der Seite ausgegeben werden soll. Abschließend das Seitenelement abspeichern. 2.9 Daten aus Stud.IP einfügen Legen Sie ein neues Seitenelement vom Typ Daten aus Stud.IP an und geben Sie bei Bedarf eine Überschrift ein. Klicken Sie auf die Registerkarte Plugin und aktivieren Sie im Bereich Erweiterungsoptionen die Option direkte Anzeige. Bestätigen Sie die darauf folgende Meldung mit Ok. Wählen Sie im Feld Name der Einrichtung Ihre jeweilige Einrichtung aus. Auch hier anschließend mit Ok bestätigen. Rechenzentrum Universität Passau 11

2 Seiten und Inhalte Im Feld Art des Inhalts die entsprechende Auswahl treffen und bestätigen. Abschließend speichern Sie das Seitenelement ab. 2.10 Text aus anderen Anwendungen einfügen Inhalte aus Textverarbeitungsprogrammen Beim Kopieren von Inhalten aus Textverarbeitungsprogrammen taucht ein Problem auf. Formatierungen aus der Textverarbeitung werden vom Rich Text Editor nicht bzw. nicht korrekt wiedergegeben. Ebenso werden diese Formatierungen nach dem Abspeichern nicht richtig auf der Webseite dargestellt. Aus diesem Grund ist hier ein besonderes Verfahren anzuwenden: Im Textverarbeitungsprogramm den gewünschten Text markieren und in die Zwischenablage kopieren. Einen einfachen Texteditor aufrufen, z.b. Notepad und den Text aus der Zwischenablage einfügen. Im Texteditor den gesamten Text markieren, in die Zwischenablage kopieren und anschließend im Rich Text Editor einfügen. Am besten verwenden Sie zum Kopieren die Tastenkombination <Strg>+C und zum Einfügen die Tastenkombination <Strg>+V. Jetzt können Sie den Text nach Ihren Wünschen im Rich Text Editor formatieren. Inhalte anderer Webseiten Inhalte von Webseiten, die mit TYPO3 erzeugt wurden, können leicht eingefügt werden: den gewünschten Text markieren, in die Zwischenablage kopieren und anschließend im Rich Text Editor einfügen. Das Seitenelement kann jetzt gespeichert werden. Alle Formatierungen des ursprünglichen Textes bleiben erhalten. Inhalte von Webseiten, die nicht mit TYPO3 erzeugt wurden, müssen wie Inhalte aus Textverarbeitungsprogrammen behandelt werden. Die Vorgehensweise ist oben beschrieben. 12 Rechenzentrum Universität Passau