Einführung in TYPO3 6.2

Transkript

1 (für Redakteure) Stand: Webseite: Telefon: Raum: E09 (Nur für den internen Gebrauch) Redaktion: Michael Sachse, Markus Bruchertseifer, Manuel Eiden, Simon Hamsch, Patrick Heiliger, Sandro Kreten, Christin Kreutz, Nicolas Münster

2 Inhaltsverzeichnis 1 Browsereinstellungen Firefox JavaScript aktivieren Einstellungen zum Browser-Cache Cookies aktivieren Internet Explorer JavaScript aktivieren Einstellungen zum Browser-Cache Cookies aktivieren Chrome JavaScript aktivieren Einstellungen zum Browser-Cache Cookies aktivieren Anmeldung & Einstellungen Anmeldung im Backend Benutzereinstellungen Die Arbeitsoberfläche Modulleiste Funktionsleiste Navigation und Ebenen Detailansicht & Kacheln Zusammenfassung Backend & Frontend Seiten Grundfunktionalitäten Anlegen von Seiten Bearbeiten einer Seite Anlegen von Verweisen Anlegen von Systemordnern Verschieben von Seiten Löschen von Seiten Titelbild einer Seite ändern

3 4.2 Der RTE (Rich-Text-Editor) Anlegen eines Seitenelements vom Typ Text Rahmenformate Absätze und (Zwischen-)Überschriften Formatierungen im RTE entfernen Verknüpfungen im RTE anlegen Tabellen anlegen Inhaltselemente Seiteninhaltselemente anlegen und verschieben Löschen von Seiteninhaltselementen Kopieren von Inhaltselementen Ausschneiden und verschieben von Inhaltselementen Referenzieren von Inhaltselementen Flexibler Seiteninhalt Seitenanker anlegen Sprachversionierung Kacheln im Servicebereich Überblick und Konzept Social-Media-Kachel Inhalts-Kachel Bild-Text-Kachel Top-Links-Kachel Video-Kachel Personenseiten Anlegen von Personenseiten Kacheln der Personenseiten Umgang mit Personenseiten Mitarbeiterliste Visitenkarten in der Suche Fileadmin Ordner anlegen Ordner umbenennen

4 5.3 Ordner löschen Dateiupload Dateien löschen Dateien verschieben Dateien kopieren Dateien umbenennen Spezielle Extensions News Einrichtung einer News-Struktur Erstellung einer News Erstellung einer News-Kategorie Bearbeiten einer bestehenden News Erstellung eines News-Archivs Erstellung einer News-Kachel FAQ FAQ-Ordner erstellen FAQ erstellen FAQ-Kategorie erstellen FAQ-Ansprechpartner bzw. Experten erstellen FAQ-Plug-In auf einer Seite platzieren FAQ-Anzeige im Frontend Multikontakt-Formular Geschützter Bereich Systemordner für Website-Benutzer(gruppen) anlegen Website-Benutzergruppe(n) anlegen Website-Benutzer anlegen Dateien im Fileadmin schützen Geschützten Bereich anlegen Einzelne Inhaltselemente schützen Loginfenster anlegen Intranet Seiteninhaltselement nach Login verstecken

5 6.5 Visitenkarten Interne Visitenkarten Externe Visitenkarte Diashow Erstellen und Bearbeiten einer Diashow Diashow-Kachel Diashow im Frontend Medien Chefredaktions-Info Web-Statistik Best-Practice-Beispiele und weitere Hilfestellungen Kontakt zum TYPO3-Team

6 1 Browsereinstellungen TYPO3 ist ein Online-Redakteurssystem, welches als Client einen Browser zur Erstellung der Inhalte einsetzt. Dies kann nur funktionieren, wenn folgende Einstellungen in Ihrem Browser korrekt vorgenommen wurden: JavaScript aktivieren Browser-Cache bei jedem Zugriff Cookies aktivieren Standardmäßig sollte es nicht notwendig sein, an den Einstellungen Ihres Browsers etwas zu ändern. Sollten Sie jedoch Probleme beim Umgang mit TYPO3 haben (z.b. beim Login), so sollten die genannten Einstellungen überprüft werden. Im Folgenden wird die Vorgehensweise für die drei Browser Mozilla Firefox, Microsoft Internet Explorer und Google Chrome geschildert. 1.1 Firefox JavaScript aktivieren JavaScript ist ab Version 23 standardmäßig in Firefox aktiviert und kann nur über Umwege ausgeschaltet werden. Hier sollte dementsprechend keine Anpassung von Nöten sein Einstellungen zum Browser-Cache Die Einstellungsmöglichkeiten zum Browser-Cache finden Sie in Firefox unter Menü öffnen (oben rechts) Einstellungen Erweitert. Im erscheinenden Popup-Fenster wählen Sie den Unterreiter Netzwerk. Das automatische Cache-Management sollte aktiviert, hier also kein Haken gesetzt werden. 6

7 1.1.3 Cookies aktivieren Um Cookies in Firefox zu akzeptieren, öffnen Sie ebenfalls das Menü nach gleicher Art, wie es in vorherigem Abschnitt beschrieben wurde. Im erscheinenden Popup-Fenster klicken Sie nun allerdings auf den Reiter Datenschutz statt Netzwerk. Nun wählen Sie im Dropdown-Menü unter Chronik die Option nach benutzerdefinierten Einstellungen anlegen aus. Setzen Sie bei Cookies akzeptieren einen Haken und wählen Sie in den beiden darunter liegenden Dropdown-Menüs die Optionen Cookies von Drittanbietern akzeptieren: Immer und Behalten, bis: sie nicht mehr gültig sind aus. 7

8 1.2 Internet Explorer JavaScript aktivieren Um JavaScript im Internet Explorer (Version 11) zu aktivieren, klicken Sie oben rechts im Browser auf das Zahnrad-Symbol, wählen Internetoptionen und im daraufhin erscheinenden Popup-Fenster den Reiter Sicherheit aus. Klicken Sie auf Stufe anpassen und setzen Sie im neuen Fenster den Punkt bei Scripting Active Scripting Aktivieren. 8

9 1.2.2 Einstellungen zum Browser-Cache Klicken Sie oben rechts auf das Zahnrad-Symbol und wählen Sie Internetoptionen aus. Im erscheinenden Popup-Fenster wählen Sie den Reiter Allgemein und dann im Menüpunkt Browserverlauf den Button Einstellungen. Im daraufhin erscheinenden Popup-Fenster setzen Sie den Auswahlpunkt bei Bei jedem Zugriff auf die Webseite. 9

10 1.2.3 Cookies aktivieren Cookies sind im Internet Explorer standardmäßig immer aktiv. Diese Tatsache können Sie in den Internetoptionen (Navigation dahin siehe weiter oben) im Reiter Datenschutz mit einem Klick auf den Button Erweitert überprüfen. Hier sollte die automatische Cookieverarbeitung wie gewünscht arbeiten. Gegebenenfalls stellen Sie diese aus und wählen sowohl für Cookies von Erstanbietern, als auch für Cookies von Drittanbietern den Punkt Annehmen. 10

11 1.3 Chrome JavaScript aktivieren Um die Einstellungen zu JavaScript in Google Chrome zu überprüfen, tippen Sie zunächst in die Adresszeile des Browsers den Befehl chrome://settings/ ein. Klicken Sie nun auf Erweiterte Einstellungen anzeigen (ganz unten). 11

12 Nun wählen Sie im Bereich Datenschutz den Button Inhaltseinstellungen. Im erscheinenden Popup-Fenster setzen Sie im Bereich JavaScript den Punkt bei Ausführung von JavaScript für alle Websites zulassen (empfohlen) Einstellungen zum Browser-Cache Der Browser-Cache ist standardmäßig stets aktiviert. Um dies zu überprüfen, navigieren Sie, wie im vorigen Abschnitt beschrieben zu den Inhaltseinstellungen. Ist im Bereich Cookies kein Punkt bei Speicherung von Daten für alle Websites blockieren gesetzt, so ist der Browser- Cache aktiviert Cookies aktivieren Um die Cookies zu aktivieren, setzen Sie in den Inhaltseinstellungen im Bereich Cookies den Punkt bei Speicherung lokaler Daten zulassen (empfohlen). 12

13 2 Anmeldung & Einstellungen Mit diesem Kapitel möchten wir Ihnen die ersten Grundlagen von TYPO3 vermitteln. Zunächst wird der Login zum System erläutert, danach die individuellen Konfigurationsmöglichkeiten der Benutzereinstellungen. 2.1 Anmeldung im Backend Das Backend ist der Bereich, in dem die Redakteurinnen und Redakteure die Änderungen und Anpassungen an der Webseite vornehmen. Als solches stellt es die eigentliche Arbeitsumgebung dar. Im Gegensatz dazu sieht der Webseitenbesucher das Frontend. Dieses wird im Browser ausgegeben und ist somit die sichtbare Webseite (siehe Um sich im Backend anzumelden, tippen Sie die Adresse in Ihren Browser ein. Daraufhin erscheint folgende Seite: Tragen Sie in den Feldern Benutzername und Passwort die Daten Ihrer Kennung ein und bestätigen Sie mit einem Klick auf Anmelden. Nun erscheint das Backend. WICHTIG: Falls Sie sich von außerhalb des Uni-Netzes ins TYPO3-Backend einloggen möchten, so benötigen Sie dafür eine aktive VPN-Verbindung. Weitere Informationen zum Thema VPN finden Sie hier: 13

14 Genauere Informationen zu den einzelnen Bereichen und Inhalten des Backends finden sich in Kapitel Benutzereinstellungen Wenn Sie sich zum ersten Mal in das Backend eingeloggt haben, ist es zunächst sinnvoll, einige persönliche Einstellungen vorzunehmen. Klicken Sie dazu im Bereich Benutzerwerkzeuge (links) auf Einstellungen. An dieser Stelle sind die wichtigsten Einstellungsmöglichkeiten Name, Ihre -Adresse, Neues Passwort und Backend-Sprache, welche allesamt im Reiter Persönliche Daten zu finden sind. 14

15 WICHTIG: Ist dies Ihr erster Login, so vergeben Sie bitte unbedingt ein neues Passwort! Achten Sie außerdem darauf, dass Ihr Name eingetragen ist. Überprüfen Sie die angegebene -Adresse. Ist in diesem Feld keine gültige Uni-E- Mail-Adresse angegeben, so wird der Account automatisch deaktiviert. Nachdem Sie alle Einstellungen vorgenommen haben, speichern Sie mit einem Klick auf das Disketten-Symbol ab (siehe Abbildung weiter oben). 15

16 3 Die Arbeitsoberfläche In diesem Kapitel wird die Arbeitsoberfläche des Backends vorgestellt. Außerdem wird ein Überblick über die Navigation, Detailansicht und die mit der Webseitenumstellung hinzugekommenen Kacheln gegeben. 3.1 Modulleiste Die Modulleiste auf der linken Seite des Backends beinhaltet die Gruppen Web, Datei und Benutzerwerkzeuge. Anlegen und Bearbeiten von Webseiten Auflistung der Objekte (Elemente) einer Webseite Festlegung der Social-Media-Links Dateiablage (Upload/Download) Persönliche Einstellungen ( , Passwort etc.) Informationen zum Chefredakteur bzw. untergeordneten Redakteuren Suche nach Chefredakteuren fremder Seiten Die hinter den einzelnen Punkten steckenden Funktionalitäten werden im weiteren Verlauf dieser Broschüre an den entsprechenden Stellen genauer vorgestellt. 16

17 3.2 Funktionsleiste Die Funktionsleiste befindet sich am oberen rechten Rand des Backends. Sie sieht wie folgt aus: Benutzername Logout Anzahl geöffneter Dokumente Suche Die Anzahl der geöffneten Dokumente gibt an, wie viele Eingabemasken Sie noch geöffnet haben. Diese werden durch einen Klick auf Geöffnete und kürzlich verwendete Dokumente angezeigt und können über das erscheinende Menü geschlossen werden. Außerdem können Sie über diese Funktion direkt zu den geöffneten Dokumenten springen, in dem Sie eins davon mit einem Linksklick auswählen. Über die Suchfunktion können Sie innerhalb des Backends nach Stichwörtern suchen. Wollen Sie allerdings gezielt nach einer Seiten-ID suchen, so müssen Sie die Funktion Baum filtern verwenden, welche im nächsten Abschnitt beschrieben wird. 3.3 Navigation und Ebenen Das Aussehen der Navigationsleiste, welche sich auf rechter Seite an die bereits erläuterte Modulleiste anschließt, hängt von der Auswahl in der Modulleiste ab. Ist dort das Modul Seite ausgewählt, so stellt die Navigationsleiste sich wie folgt dar (die Ansicht kann je nach Berechtigungen Ihrer Kennung ggfs. leicht variieren): 17

18 Die erscheinende hierarchische Baumstruktur entspricht der Anordnung der einzelnen Seiten. Möchten Sie nach einer Seiten-ID suchen (zu finden in der Adresszeile des Browsers, hinter dem Ausdruck id=, z.b. 8505), so klicken Sie auf das Filter-Symbol (rot umrandet). Im erscheinenden Eingabefenster geben Sie die gewünschte ID ein und bestätigen mit der Return- Taste. Die Filterfunktionalität zeigt nun die entsprechende Seite, sowie den Pfad dorthin an. Um wieder zur vollständigen Baumstruktur zurückzukehren, löschen Sie die eingegebene ID aus dem Eingabefenster und bestätigen Sie wieder mit der Return-Taste. Alternativ klicken Sie einfach auf das X in der blauen Hinweisbox: ID Filter beenden Gesuchte Seite Das Aussehen der Navigationsleiste verändert sich, falls das Modul Dateiliste ausgewählt ist. Nun wird die Struktur der Dateiablage (Fileadmin) gezeigt (weitere Informationen zum Fileadmin folgen später; auch hier kann die Ansicht entsprechend den Berechtigungen Ihrer Kennung ggfs. leicht variieren): 18

19 An dieser Stelle wird die Ebenenstruktur nun genauer erläutert. Dabei muss eine Unterscheidung zwischen Backend und Frontend getroffen werden. Im Backend ist es möglich, beliebig viele (Hierarchie-) Ebenen untereinander anzulegen: Ebene 1 Ebene 2 Ebene 3 In der Beispiel-Abbildung befindet sich etwa Home auf Ebene 1 (blau), Service-Punkt auf Ebene 2 (rot), Helpdesk-System auf Ebene 3 (orange) etc. Mit einem Klick auf die Pfeil- Symbole und können die einzelnen Ebenen ein- bzw. ausgeklappt werden. Im Frontend sind die Ebenen in der sogenannten Subnavigation der linken Spalte nur bis einschließlich Ebene 3 sichtbar: 19

20 Ebene 1 Ebene 2 Ebene 3 Alle Ebenen ab Ebene 4 werden nicht mehr in der Subnavigation angezeigt. Eine Ansteuerung dieser Seiten kann allerdings über Verlinkungen erfolgen. Diese Möglichkeit wird später genau vorgestellt. 3.4 Detailansicht & Kacheln Der letzte Bereich des Backends, der noch nicht vorgestellt wurde, ist die Detailansicht. Diese erscheint, nachdem sowohl in der Modulleiste, als auch in der Navigationsleiste jeweils ein Element ausgewählt wurde. Je nach Auswahl in der Modulleiste hat die Detailansicht ein anderes Erscheinungsbild. Die verschiedenen Möglichkeiten werden im späteren Verlauf genauer betrachtet, an dieser Stelle wird exemplarisch eine Seiten-Detailansicht gezeigt. Die Detailansicht einer Seite sieht wie folgt aus: 20

21 Im Bereich Inhalt (rot umrandet) befinden sich die einzelnen Inhaltselemente. Dieser Bereich wird im Frontend in der mittleren, großen Spalte dargestellt. Der orange umrandete Bereich beinhaltet ggfs. die Kacheln, die im Frontend in der rechten Spalte angezeigt werden. Das Konzept der Kacheln wurde im Zuge des Umstiegs auf die neue Homepage entwickelt und wird in dieser Broschüre ebenfalls noch genauer erläutert. In der linken Spalte des Frontends (unterhalb der Subnavigation) ist es nicht möglich, Inhaltselemente oder Kacheln zu platzieren. 21

22 3.5 Zusammenfassung Backend & Frontend Anhand der vorangegangenen Ausführungen dieses Kapitels werden nun Frontend und Backend zusätzlich in einer Gesamtübersicht dargestellt: Subnavigation (linke Spalte) Mittlere Spalte (Inhaltselemente) Kacheln (rechte Spalte) 22

23 Funktionsleiste Modulleiste Navigationsleiste Detailansicht Die Navigationsleiste aus dem Backend wird (auf maximal 3 Ebenen beschränkt) im Frontend als Subnavigation dargestellt. Die Detailansicht wird im Frontend zu mittlerer Spalte (Inhaltselemente) und rechter Spalte (Kacheln). 23

24 4 Seiten Dieses vierte Kapitel widmet sich der Erstellung, Bearbeitung etc. von Seiten und Inhaltselementen zum Befüllen eben dieser. Zusätzlich werden die speziellen Personenseiten, das neue Kachelkonzept und der TYPO3-interne Texteditor detailliert betrachtet. 4.1 Grundfunktionalitäten In diesem Abschnitt möchten wir Ihnen zunächst die grundlegenden Möglichkeiten zum Erstellen, Bearbeiten etc. von Inhaltsseiten vermitteln. Mehr Informationen zu Inhaltselementen, die auf den Seiten platziert werden können, finden Sie in Abschnitt Anlegen von Seiten Um eine neue Seite anzulegen, muss in der Modulleiste der Unterpunkt Seite ausgewählt sein, sodass in der Navigationsleiste der Seitenbaum sichtbar ist. Anschließend kann mit einem Rechtsklick auf eine bereits bestehende Seite folgendes Kontextmenü aufgerufen werden: Über den Unterpunkt Seitenaktionen im Kontextmenü gelangen Sie zu der Option Neu. Im folgenden Auswahlmenü können Sie mit einem Klick auf ein beliebiges Pfeil-Symbol die zu erstellende Seite an der entsprechenden Stelle einfügen. 24

25 In einem letzten Schritt ist es nun notwendig, einen Titel für die zu erstellende Seite festzulegen. Dazu tragen Sie bitte im Feld Seitentitel den gewünschten Titel der Seite ein und speichern mit einem Klick auf (nur speichern) oder (speichern und schließen) ab. Nun ist die Seite angelegt und kann bearbeitet und/oder mit Inhalt gefüllt werden Bearbeiten einer Seite Um die im vorigem Abschnitt angelegte Seite zu bearbeiten, rufen Sie in der Navigationsleiste, mit einem Rechtsklick auf die Seite, das Kontextmenü auf und wählen die Option Bearbeiten aus (in der Modulleiste muss dazu erneut Seite angewählt sein). 25

26 In der Detailansicht öffnet sich nun folgendes Fenster, in dem alle wichtigen Seiteneinstellungen vorgenommen werden können: Interessant für die Bearbeitung der Seite sind zunächst nur die beiden Reiter Allgemein und Zugriff. Im Reiter Allgemein kann der Seitentitel angepasst und zusätzlich der Seiten-Typ geändert werden. Mit der Änderung des Seiten-Typs beschäftigen wir uns in den nächsten beiden Abschnitten, in denen Verweise und Systemordner thematisiert werden. Im Reiter Zugriff finden sich wichtige Einstellungsmöglichkeiten zur Sichtbarkeit der Seite. Unter Sichtbarkeit kann, durch das Anklicken der entsprechenden Buttons, sowohl die Seite deaktiviert, als auch in Menüs verborgen werden. Vergessen Sie nicht, nach erfolgter Änderung die Seiteneigenschaften über die bereits bekannten Disketten-Symbole abzuspeichern. Ein Deaktivieren der Seite führt dazu, dass diese im Frontend nicht mehr angezeigt wird folglich ist die Seite weder durch die Eingabe der direkten Adresse erreichbar, noch in Menüs oder der Suche auffindbar. Wird die Seite nur in Menüs verborgen, so kann sie weiterhin durch die Eingabe der direkten Adresse und über die Suche, allerdings nicht durch einen Menüeintrag im 26

27 Frontend erreicht werden. Weitere Informationen zu der Menüstruktur und -sichtbarkeit im Frontend finden sich im Kapitel Die Arbeitsoberfläche. Eine weitere Möglichkeit, eine Seite zu deaktivieren ist im bereits angesprochenen Kontextmenü gegeben. Durch einen Rechtsklick auf die entsprechende Seite in der Navigationsleiste ist es möglich, diese über die Option Deaktivieren zu verbergen. Die zusätzlichen Reiter, die bei der Bearbeitung einer Seite anwählbar sind (Metadaten, Erscheinungsbild, Verhalten etc.), werden an dieser Stelle nicht detailliert besprochen. Sofern einzelne Optionen innerhalb dieser Reiter jedoch für bestimmte Extensions etc. wichtig sind, werden diese an den entsprechenden Stellen dieser Broschüre erläutert Anlegen von Verweisen Zuvor angelegte Seiten lassen sich zu Verweisen abändern. Durch die Abänderung des Seitentyps von Standard zu Verweis ist es möglich, eine Weiterleitung (Link) zu konfigurieren, die den Benutzer bei einem Besuch der Seite A automatisch auf die zuvor konfigurierte Seite B weiterleitet. Um solch eine Seite vom Typ Verweis zu erstellen, wechseln Sie in die Seiteneigenschaften (siehe voriger Abschnitt). Im Reiter Allgemein befindet sich unter Typ ein Dropdown-Menü (rot markiert). Hier können die Punkte Verweis (orange markiert) und Link zu externer URL (blau markiert) angewählt werden, die nachfolgend vorgestellt werden. Um einen klassischen Verweis zu erstellen, wählen Sie im Dropdown-Menü die Option Verweis und bestätigen die erscheinende Abfrage mit OK. Das Aussehen der Detailansicht hat sich nun leicht verändert. 27

28 Im Reiter Allgemein kann nun unter der Option Verweisziel die Seite B ausgewählt werden, auf die von dieser Seite A aus weitergeleitet werden soll. Dazu klicken Sie auf das Ordner- Symbol. Daraufhin öffnet sich ein Popup-Fenster, in dem durch Anklicken der gewünschten Zielseite (Seite B) der Verweis gesetzt wird. Speichern Sie nach Erstellung des Verweises ab. Eine wichtige Einschränkung bei Verweisen ist die Tatsache, dass Sie nur auf Seiten verlinken können, die innerhalb Ihres Webseitenbereichs liegen. Um z.b. zu anderen Fachbereichen zu verweisen oder aber Uni-externe Webseiten anzusteuern, muss die Option Link zu externer URL in den Seiteneigenschaften (siehe weiter oben) angewählt werden. Bestätigen Sie die erscheinende Abfrage erneut mit OK. 28

29 Nun kann im Reiter Allgemein unter der Option URL der entsprechende Link zur Zielseite angegeben werden, beispielsweise für die Webseite des ZIMK Anlegen von Systemordnern Für bestimmte Plug-Ins, beispielsweise das Anlegen von News, müssen gegebenenfalls Systemordner erstellt werden, die die einzelnen News-Elemente aufnehmen können. An dieser Stelle soll kurz die Erstellung solcher Systemordner erläutert werden. Die einzelnen Verwendungsmöglichkeiten (z.b. News) werden an den entsprechenden Stellen der Broschüre beschrieben. Wechseln Sie in die Seiteneigenschaften, um die entsprechende, bereits angelegte Seite zu bearbeiten. Im Reiter Allgemein öffnen Sie das Dropdown-Menü für den Seitentyp und wählen als Option den Punkt Ordner aus. Bestätigen Sie die erscheinende Abfrage mit OK. Das Aussehen der Seiteneigenschaften hat sich nun verändert. Im Reiter Allgemein kann, falls notwendig, der Seitentitel bzw. Ordnertitel angepasst werden. Um den Inhalt eines angelegten Systemordners zu betrachten, muss in der Modulleiste im Backend unter Web die Option Liste ausgewählt werden. Bei einem Klick auf den 29

30 Systemordner mit aktiver Seitenansicht (Option Seite in der Modulleiste ausgewählt) erscheint folgende Meldung, die ebenfalls einen Wechsel zur Listenansicht ermöglicht Verschieben von Seiten Das Verschieben von Seiten funktioniert sehr einfach und intuitiv durch das Drag & Drop- Prinzip (zu Deutsch: ziehen und ablegen). Aktivieren Sie zunächst in der Modulleiste die Seitenansicht. Fahren Sie nun mit der Maus zu der Seite, die verschoben werden soll, klicken Sie mit der linken Maustaste auf die entsprechende Seite und halten (!) Sie die Maustaste gedrückt. Nun kann durch Bewegung des Mauszeigers zu der gewünschten Stelle im Seitenbaum navigiert werden. Im Beispiel soll die Testseite an die Stelle zwischen FAQ und Team verschoben werden. Wenn der Mauszeiger genau zwischen diesen beiden Seiten steht, erscheint sowohl eine dünne blaue Linie zwischen den betreffenden Seiten, als auch die blaue Hinweisbox. Lassen Sie nun die linke Maustaste los, um die Seite an diese Position zu verschieben. Durch zusätzliches Drücken der STRG-Taste ist es möglich, die Seite, die verschoben werden soll, lediglich an die entsprechende Stelle zu kopieren. 30

31 Soll eine Seite unterhalb einer bereits bestehenden Seite eingefügt werden, so muss der Mauszeiger genau über der Seite losgelassen werden, unterhalb derer die Seite abgelegt werden soll. Hat eine Seite bereits Unterseiten, so ist es durch Halten des Mauszeigers über dieser Oberseite möglich, diese auszuklappen und die Unterseiten einzusehen. So kann die zu verschiebende Seite direkt an die richtige Position unterhalb der Oberseite verschoben werden Löschen von Seiten Zum Löschen einer Seite gibt es zwei mögliche Vorgehensweisen, die nachfolgend kurz erläutert werden. Die erste Möglichkeit besteht darin, die betreffende Seite über das Kontextmenü in der Navigationsleiste des Backends zu löschen. Dazu wählen Sie in der Modulleiste die Option Seite, sodass die Baumstruktur der Seiten in der Navigationsleiste angezeigt wird. Navigieren Sie zu der zu löschenden Seite und führen Sie dann einen Rechtsklick aus, um das Kontextmenü aufzurufen. Über den Unterpunkt Seitenaktionen gelangen Sie zu Löschen. Bestätigen Sie die erscheinende Abfrage mit Ja und die Seite wird gelöscht. Die zweite Möglichkeit nutzt die bereits im vorangegangenen Abschnitt beschriebene Drag & Drop-Funktionalität. Klicken Sie dazu mit der linken Maustaste auf die zu löschende Seite in der Navigationsleiste und halten Sie die linke Maustaste gedrückt. Am unteren Ende der Navigationsleiste erscheint nun ein braun hinterlegter Bereich mit dem Hinweis Zum Löschen hier ablegen. Nachdem Sie auf die zu löschende Seite geklickt haben und die Maustaste festhalten, ziehen Sie die entsprechende Seite in diesen Bereich und lassen Sie die linke Maustaste los. Die Seite wird nun gelöscht. 31

32 Falls die Seite, die gelöscht werden soll, weitere Unterseiten hat, so ist es nötig, zuerst die einzelnen Unterseiten zu löschen. Diese Einschränkung dient dazu, das versehentliche Löschen von mehreren Seiten zur gleichen Zeit zu vermeiden. Sollte es allerdings gewünscht sein, gleichzeitig eine Oberseite und alle dazugehörigen Unterseiten zu löschen, so kann der Schutzmechanismus in den Benutzereinstellungen deaktiviert werden allerdings der Sicherheit halber am besten nur vorübergehend! Dazu wählen Sie in der Modulleiste im Bereich Benutzerwerkzeuge die Option Einstellungen und navigieren zum Reiter Bearbeiten und erweiterte Funktionen. Setzen Sie einen Haken bei Rekursives Löschen und speichern Sie ab. Nun ist die Schutzfunktion beim Löschen von Seiten deaktiviert und das Löschen von mehreren Seiten zur gleichen Zeit ist möglich. WICHTIG: Nutzen Sie die Möglichkeiten zum Löschen von Seiten mit Bedacht insbesondere die Möglichkeit zum rekursiven Löschen mehrerer Seiten zur gleichen Zeit sollte nur in Ausnahmefällen aktiviert und sofort nach dem Löschvorgang wieder deaktiviert werden, um unliebsame Überraschungen zu vermeiden! 32

33 4.1.7 Titelbild einer Seite ändern Das Titelbild einer Seite ist das Bild, das direkt unter der Hauptnavigation angezeigt wird. Die Ausmaße betragen exakt 790px * 200px, im Format Breite * Höhe gemessen (siehe roter Rahmen). Standardmäßig vorhanden sind das Logo der Universität, sowie der Schriftzug Universität Trier. Sowohl das eigentliche Titelbild, als auch der Schriftzug in zweiter Ebene (hier: TYPO3- Portal ) sind individuell veränderbar. Das bedeutet, dass Sie für verschiedene Seiten verschiedene Titelbilder verwenden können. Der Schriftzug in zweiter Ebene lässt sich unabhängig voneinander für die Sprachen Deutsch, Englisch und Französisch festlegen. Wichtig zu erwähnen ist an dieser Stelle zusätzlich, dass Titelbilder vererbt werden. Wird daher für eine Oberseite ein Titelbild festgelegt, so wird es automatisch an alle Unterseiten vererbt und auch dort angezeigt. Allerdings ist es ebenfalls möglich, für einzelne Unterseiten wiederum andere Titelbilder festzulegen. Um ein Titelbild abzuändern, wenden Sie sich bitte an die Pressestelle (presse@uni-trier.de). Denken Sie bitte daran, dass Sie dazu vorher das gewünschte Titelbild in das Format 790px * 200px bringen! Außerdem teilen Sie den Mitarbeitern dort bitte die gewünschten Schriftzüge zweiter Ebene in Deutsch, Englisch und Französisch mit. Als Redakteur in TYPO3 haben sie keine Möglichkeit, selbst das Titelbild abzuändern. 33

34 4.2 Der RTE (Rich-Text-Editor) In diesem Kapitel möchten wir Ihnen den Umgang mit Seiteninhaltselementen des Typs Text und dem dazu gehörigen Rich-Text-Editor (RTE) vermitteln. Zunächst wird kurz auf die Erstellung von Text-Inhalten eingegangen, danach auf die Bedienung des RTE. Zusätzlich zu reinem Text können im RTE allerdings auch Aufzählungen, Tabellen, (Zwischen- )Überschriften und Rahmenformate erstellt werden. Diese Möglichkeiten werden ebenfalls im Rahmen dieses Kapitels erläutert Anlegen eines Seitenelements vom Typ Text Um ein Inhaltselement vom Typ Text anzulegen, navigieren Sie im Backend mit aktiver Seitenansicht (wählen Sie dazu in der Modulleiste Seite aus) zu der Seite, auf der das Inhaltselement platziert werden soll. In der Detailansicht der Seite können Sie nun mit einem Klick auf Neues Element anlegen ein neues Inhaltselement platzieren. In der folgenden Ansicht wählen Sie das Element Text aus: 34

35 Nun werden Sie zum eigentlichen Text-Inhaltselement weitergeleitet, in dem Sie das Textelement bearbeiten können. Dieses setzt sich aus den vier Reitern Allgemein, Erscheinungsbild, Zugriff und Kategorien zusammen. An dieser Stelle wird zunächst der Reiter Allgemein betrachtet. Tragen Sie am besten zuerst die Überschrift des Textelements ein (rot umrandet). Danach können Sie im eigentlichen RTE (blau umrandet) Ihren gewünschten Text eingeben. Oberhalb des weißen Eingabefeldes finden sich die verschiedenen Bearbeitungsicons ähnlich zu einem Textbearbeitungsprogramm, wie etwa Microsoft Word. Alle Icons sind mit einer Beschreibung versehen, welche angezeigt wird, wenn Sie mit dem Mauszeiger über das entsprechende Icon fahren. 35

36 In der ersten Reihe von oben finden sich Bearbeitungsmöglichkeiten für den eigentlichen Text. Wichtige Icons in dieser Reihe sind: Fett Kursiv Unterstrichen Blocktyp (hier werden Absätze angezeigt und (Zwischen- )Überschriften festgelegt, wird in diesem Kapitel gesondert erläutert) Linksbündig Zentriert Rechtsbündig Nummerierung (zur Erstellung einer nummerierten Liste) Aufzählung (zur Erstellung einer nicht nummerierten Aufzählungsliste) Einzug vergrößern Einzug verkleinern Einfügen von Sonderzeichen (z.b. mathematische Symbole) Link einfügen (Einfügen von klassischen Links, Dateiverlinkungen etc., wird in diesem Kapitel gesondert erläutert) Link entfernen (inverse Operation zu Link einfügen) In der zweiten Reihe befinden sich Icons zum Umgang mit Tabellen, Formatierungen, Copy & Paste etc. Die wichtigen Icons dieser Reihe sind: Tabelle einfügen (wird in diesem Kapitel gesondert erläutert) Suchen und ersetzen (ermöglicht das Auffinden und Ändern einzelner Worte oder Wörterketten) Formatierung entfernen (entfernt alle Formatierungen des Textes) Auswahl kopieren Auswahl ausschneiden Aus der Zwischenablage einfügen Einfügen als einfachen Text aktivieren (ohne Formatierungen) Letzte Aktion rückgängig machen Letzte Aktion wiederholen Die dritte Reihe der Icons beschäftigt sich komplett mit Tabelleneigenschaften und wird daher an der entsprechenden Stelle dieses Kapitels genauer betrachtet. Wichtige Icons sind hierbei: Tabelleneigenschaften 36

37 Tabellenstile erneut anwenden Zeileneigenschaften Zeile vor dieser einfügen Zeile nach dieser einfügen Zeile löschen Spalteneigenschaften Spalte vor dieser einfügen Spalte nach dieser einfügen Spalte löschen Spalte teilen Zelleneigenschaften Zelle vor dieser einfügen Zelle nach dieser einfügen Zelle löschen Zellen verbinden Sie können nun einen beliebigen Text im RTE eintragen, Tabellen und Links anlegen etc. an dieser Stelle wird nun noch kurz die Erstellung von einfachem Text erläutert, Tabellen, Links etc. werden im weiteren Verlauf dieses Kapitels gesondert behandelt. Fügen Sie nun, um ein reines Textelement anzulegen, den gewünschten Text in den RTE ein. Wenn der Text fertig gestellt ist speichern Sie mit einem Klick auf eines der Disketten-Symbole im oberen Bereich der Ansicht ab, z.b. mit einem Klick auf Dokument speichern und schließen. Die genaue Bedeutung der anderen Symbole wird erläutert, wenn Sie mit dem Mauszeiger darüber fahren. Sie können sich nun das erstellte Textelement im Frontend ansehen: 37

38 Bevor im nächsten Abschnitt die verschiedenen Rahmen für das Textelement vorgestellt werden, wird an dieser Stelle noch kurz auf den Reiter Zugriff des Textelements eingegangen. Sollten Sie Ihr Textelement zwischenzeitlich geschlossen haben, so wählen Sie in der Modulleiste das Modul Seite aus und navigieren im Seitenbaum zu der betreffenden Seite, auf der das Inhaltselement platziert ist. Fahren Sie in der Detailansicht der Seite mit dem Mauszeiger über das Textelement und klicken Sie auf Element bearbeiten den Reiter Zugriff auswählen.. Nun können Sie An dieser Stelle können Sie das Inhaltselement mit einem Klick auf Deaktivieren verbergen, d.h. die Anzeige im Frontend verhindern (blau umrandet). Außerdem ist es möglich, ein Veröffentlichungs- und Ablaufdatum für das Element einzutragen (rot umrandet). Dazu klicken Sie jeweils auf die Kalender-Symbole neben den Textfeldern und wählen Tag und Uhrzeit aus. 38

39 Eine dritte Option stellt der Eintrag Link zum Seitenanfang einfügen dar (orange umrandet). Wird hier ein Haken gesetzt, so erscheint im Frontend unterhalb des Inhaltselements ein Link mit dem Namen Nach oben, welcher auf das erste (oberste) Inhaltselement der Seite verweist. Gerade bei großen Seiten bietet sich diese Option an, um dem Nutzer einen schnellen Wechsel zum Seitenanfang zu ermöglichen. Vergessen Sie nicht, nach den getätigten Änderungen im Reiter Zugriff abzuspeichern! Rahmenformate TYPO3 bietet Ihnen die Möglichkeit, Inhaltselemente vom Typ Text in farbige Rahmen zu fassen. Dazu wählen Sie den Reiter Erscheinungsbild in den Einstellungen des Inhaltselements aus. Im Dropdown-Fenster Einrückung und Rahmen können Sie zwischen Hintergrund Blau, Hintergrund Rot und Hintergrund Grün wählen. Speichern Sie ab und sehen Sie sich das Ergebnis im Frontend an. Die Option Hintergrund Grün sieht z.b. wie folgt aus: WICHTIG: Wir möchten Sie bitten, die farbigen Rahmenformate sparsam und nur zur Hervorhebung äußerst wichtiger Informationen zu verwenden Absätze und (Zwischen-)Überschriften Der RTE in TYPO3 unterscheidet im Textfluss zwischen harten und weichen Umbrüchen ähnlich wie etwa Microsoft Word. Um einen neuen Abschnitt zu beginnen, drücken Sie im RTE die Taste Enter oder Return auf Ihrer Tastatur. Eine neue Zeile, also einen einfachen Zeilenumbruch, erhalten Sie, wenn die Tastenkombination Shift+Enter oder Shift+Return drücken. Im Frontend sieht die Unterscheidung wie folgt aus: 39

40 Um verschiedene (Zwischen-)Überschriften in Ihrem Textelement anzulegen, öffnen Sie wieder den RTE des entsprechenden Textelements (Reiter Allgemein ). Im Dropdown-Menü Blocktyp finden Sie die Unterpunkte Textüberschrift, Zwischenüberschrift und Zwischenüberschrift mit blauem Balken. Wählen Sie die gewünschte Überschrift aus und geben Sie Ihren Text ein. Alternativ können Sie analog dazu bereits bestehenden Text markieren und nachträglich in ein Überschriftenformat bringen. Im Frontend sehen die verschiedenen Typen folgendermaßen aus: Formatierungen im RTE entfernen Um unliebsame Design-Überraschungen bei der Anzeige des Text-Elements im Frontend zu vermeiden, empfiehlt es sich speziell bei s, Word-Texten, etc., die in den RTE kopiert werden, das Design des Texts zu bereinigen. Im RTE des Text-Elements wählen Sie dazu das Pinsel-Symbol folgendes Menü: aus. Daraufhin erscheint 40

41 Sie haben die Möglichkeit, nun einen zuvor markierten Textbereich zu bearbeiten. Dazu wählen Sie die Option Ausgewählter Text, ansonsten Gesamt. In der zweiten Box können die verschiedenen zu entfernenden Formatierungen ausgewählt werden. Wählen Sie die gewünschten aus und klicken Sie im Anschluss auf OK. Der Text erscheint im RTE nun in der bereinigten Form. Als Beispiel zur Veranschaulichung kann an dieser Stelle das Text-Element mit den verschiedenen Überschriftformatierungen aus vorigem Abschnitt dienen. Nachdem sämtliche Formatierungen entfernt wurden, sieht das Text-Element im Frontend wie folgt aus: Es wurden alle Formatierungen erfolgreich entfernt. Nur der reine Text ist übrig geblieben. 41

42 4.2.5 Verknüpfungen im RTE anlegen TYPO3 bietet vielfältige Möglichkeiten, um verschiedene Arten von Verknüpfungen (Links) anzulegen Interne Verlinkung Die erste Möglichkeit, die erläutert wird, ist die interne Verlinkung von einer Seite A innerhalb Ihres Seitenbereichs zu einer Seite B, die ebenfalls in Ihrem Seitenbereich liegt. Dazu öffnen Sie das Textelement, in dem Sie die Verlinkung anlegen möchten. Alternativ legen Sie ein Neues an. Geben Sie nun den Text ein, der später die Verlinkung beinhalten soll und markieren Sie diesen. Anschließend klicken Sie auf Link einfügen (rot umrandet). Im nun erscheinenden Fenster wählen Sie im Reiter Seite die gewünschte Seite B, auf die verlinkt werden soll, mit einem Klick auf den Namen aus. Speichern Sie die Änderungen ab. Alternativ können Sie auf ein bestimmtes Inhaltselement auf der Seite verweisen. Dazu klicken Sie rechts neben dem Seitennamen auf den kleinen orangenfarbenen Pfeil (rot umrandet) und wählen in der erscheinenden Liste das gewünschte Inhaltselement aus (siehe roter Pfeil: wählen Sie eins der Elemente, die auf der Seite vorhanden sind). Über eine Verlinkung auf einzelne Inhaltselemente können Sie auf einer Seite A also ebenfalls sogenannten Seitenanker einbauen, um von einem Inhaltselement A auf der Seite zu einem anderen Inhaltselement B zu springen. 42

43 Ist der Link gesetzt, so erfolgt im Frontend eine Weiterleitung, wenn der verlinkte Text angeklickt wird Externe URL verlinken Bei Seiten, die nicht innerhalb Ihres Seitenbaums liegen, oder aber beim Verweis auf Uniexterne Seiten, ist es notwendig, den Reiter Externe URL zu verwenden. Dazu markieren Sie wieder den zu verlinkenden Text und wählen Link einfügen aus. Anschließend geben Sie im entsprechenden Reiter im Feld URL die Adresse ein und klicken auf den Button Link setzen (rot umrandet). Danach speichern Sie die Änderungen am Inhaltselement. 43

44 Datei aus dem Fileadmin verlinken Zusätzlich zu einzelnen Seiten können Sie Dateien verlinken, die Sie zuvor im Fileadmin abgelegt haben. Dazu markieren Sie wiederum den zu verlinkenden Text im RTE und klicken auf Link einfügen. Nun muss der Reiter Datei ausgewählt werden. An dieser Stelle navigieren Sie nun durch Ihren Fileadmin-Bereich und nicht, wie bei den vorherigen Verlinkungen, durch den Seitenbaum. Wählen Sie die gewünschte Datei aus und der Link wird sofort gesetzt. Vergessen Sie nicht, die Änderungen abzuspeichern Verlinkung Um eine -Adresse zu verlinken, müssen Sie den Reiter auswählen, nachdem Sie den gewünschten Text im RTE markiert und auf Link einfügen geklickt haben. Geben Sie nun die -Adresse ein (z.b. und klicken Sie auf Link setzen. Speichern Sie ab Verlinkungen entfernen Um eine zuvor erstellte Verlinkung jeglicher Art wieder zu entfernen, öffnen Sie den RTE des Text-Elements (Reiter Allgemein ). Markieren Sie den verlinkten Text und klicken Sie auf Link entfernen. Speichern Sie ab Alternative Designs der Verlinkungen Zusätzlich zum Standard-Verlinkungs-Design können Sie außerdem zwei alternative Designvorlagen nutzen: einen Link-Button und eine Pfeil-Verlinkung. Diese Designs sind für alle in diesem Abschnitt vorgestellten Link-Typen einstellbar. Dazu wählen Sie einfach im jeweiligen Dropdown-Menü Stil (rot umrandet, hier exemplarisch für die externe URL) die gewünschte Design-Vorlage aus. 44

45 4.2.6 Tabellen anlegen In der alten TYPO3-Version gab es das Plug-In Tabelle, mit eben diese angelegt werden konnten. Stand heute benötigen Sie kein eigenes Plug-In mehr, um Tabellen anzulegen. Diese lassen sich schnell und unkompliziert ebenfalls im RTE bzw. im einfachen Text-Element erstellen und administrieren. Dazu gehen Sie wie folgt vor. Zuerst erstellen Sie, falls benötigt, ein neues Text-Element. Tabellen können allerdings natürlich auch in bereits bestehenden Text-Elementen erstellt werden. Wählen Sie im RTE die Option Tabelle einfügen aus (erstes Symbol in der zweiten Zeile). Danach können Sie einen Tabellentitel (rot umrandet), sowie die Anzahl der Zeilen bzw. Spalten (blau umrandet) festlegen. Außerdem lässt sich die Position der Kopfzellen festlegen (siehe Dropdown-Menü). Diese können oberhalb, links, oberhalb und links oder gar nicht dargestellt werden. Zu dem Aussehen der einzelnen Kopfzellen-Formate im Frontend finden sich innerhalb dieses Abschnitts Screenshots. 45

46 Geben Sie, falls gewünscht den Titel der Tabelle ein und legen Sie die Anzahl der Zeilen und Spalten, sowie die Optionen zu den Kopfzellen fest. Danach klicken Sie auf OK. Im RTE wird die Tabelle nun automatisch angelegt und kann mit Informationen befüllt werden. Standardmäßig wird die Tabelle dabei im Backend mit gestrichelten Rändern dargestellt. Diese Option können Sie mit einem Klick auf Ränder umschalten deaktivieren. Zur Administration der Tabelle dienen die Symbole in der dritten Zeile des RTE (rot markiert). Die Bedeutungen wurden bereits am Anfang dieses Kapitels kurz beschrieben. Fahren Sie mit dem Mauszeiger über eines der Symbole, so wird ein Hinweistext zur Funktionalität eingeblendet. Die Einstellungsmöglichkeiten (z.b. neue Spalte einfügen oder löschen etc.) finden Sie in ähnlicher Form in Textbearbeitungsprogrammen wie Microsoft Word wieder, daher wird an dieser Stelle auf eine genaue Beschreibung der einzelnen Funktionalitäten verzichtet. Zum Schluss dieses Abschnitts werden noch die verschiedenen Darstellungsformen von Tabellen im Frontend gezeigt. 46

47 Wie der Screenshot zeigt, können Sie den Tabellen durch die Verwendung verschiedener Kopfzellen-Designs ein unterschiedliches Aussehen geben und an Ihre Bedürfnisse anpassen. Die Spaltengröße wird automatisch, je nach Inhaltsmenge an Text etc., berechnet und ist unveränderlich. Die Tabellenfarben und die Schriftart sind ebenfalls vorgegeben. Kopfzellen werden standardmäßig fett dargestellt. 47

48 4.3 Inhaltselemente Nachdem im vorigen Kapitel bereits Grundfunktionalitäten von Seiten, sowie der RTE genauer betrachtet wurden, folgen an dieser Stelle weitere Erläuterungen zu Inhaltselementen und deren Verwendung, Medienelementen, Sprachversionierung etc Seiteninhaltselemente anlegen und verschieben Um ein Seiteninhaltselement anzulegen, treffen Sie zunächst in der Modulleiste die Auswahl Seite und wählen in der Navigationsleiste die gewünschte Seite aus. Die Detailansicht der Seite erscheint. Im nächsten Schritt erfolgt ein Klick auf im Bereich Inhalt. Nun kann in darauffolgender Übersicht aus fünf verschiedenen Gruppen das gewünschte Inhaltselement ausgewählt werden (die Gruppe Kacheln eignet sich ausschließlich zum Anlegen von Kacheln für die rechte Spalte nicht für Inhaltselemente!). Die zur Verfügung stehenden Gruppen sind Typischer Seiteninhalt (Text etc.), Spezielle Elemente (Bildergalerie), Formulare (z.b. Anmeldeformular), Plug-Ins (FAQ etc.) und Raster-Elemente (Zweispalter, wird ebenfalls in diesem Kapitel erläutert). Mit einem Klick auf das entsprechende Symbol wird das gewählte Seiteninhaltselement angelegt und es können weitere Einstellungen getroffen werden (Titel, Inhalt des Elements, etc.). Der vorherige Abschnitt zum Rich-Text-Editor verdeutlicht das Prinzip. Die einzelnen Auswahlmöglichkeiten aus den jeweiligen Gruppen werden an den entsprechenden Stellen in dieser Broschüre detailliert beschrieben. Wenn mehrere Seiteninhaltselemente auf einer Seite vorhanden sind, so ist es möglich, die Positionen der einzelnen Elemente innerhalb der Seite zu verändern. Dazu klicken Sie in der 48

49 Detailansicht der Seite mit der linken Maustaste auf das zu verschiebende Seiteninhaltselement und halten die Taste gedrückt. Per Drag & Drop ziehen Sie das Element nun an die gewünschte Position und lassen, sobald die erscheinende Anzeige Hier einfügen grün gefüllt dargestellt wird, die linke Maustaste wieder los. Abspeichern ist nach erfolgreichem Verschieben nicht notwendig, TYPO3 übernimmt Ihre Änderung sofort Löschen von Seiteninhaltselementen Um ein Seiteninhaltselement zu löschen, navigieren Sie zunächst zur Detailansicht der Seite, auf der sich das zu löschende Inhaltselement befindet. Fahren Sie dann mit dem Mauszeiger über das Inhaltselement. Es erscheinen fünf Symbole am rechten Rand des Inhaltselements. Durch einen Klick auf ( Löschen erstes Symbol von rechts) und Bestätigung der erscheinenden Sicherheitsabfrage löschen Sie das Inhaltselement von der Seite Kopieren von Inhaltselementen Um ein Inhaltselement von einer Seite A auf eine Seite B zu kopieren, wechseln Sie zunächst in die Detailansicht der Seite B. Danach klicken Sie im Bereich Inhalt auf das Symbol Inhalt von anderer Seite hierhin kopieren. Im erscheinenden Popup-Fenster navigieren Sie zu der Seite A, von der der Inhalt kopiert werden soll. Klicken Sie auf die Seite. Dadurch werden nun alle verfügbaren Datensätze der Seite angezeigt (rot umrandet). 49

50 Um das betreffende Inhaltselement von der Seite A auf die Seite B zu kopieren, klicken Sie auf das + -Symbol. Danach kann das Popup-Fenster geschlossen werden. Der kopierte Inhalt wird nun standardmäßig auf der Zielseite B verborgen. Damit Sie dieses Inhaltselement sehen können, muss in der Detailansicht der Seite ein Haken bei Verborgene Inhalte anzeigen gesetzt sein. Um das kopierte Element nun auf der Seite sichtbar zu machen, fahren Sie mit dem Mauszeiger über das Element und klicken Sie auf Sichtbar machen. Eine alternative und schnelle Möglichkeit zum Kopieren von Inhaltselementen findet sich im Kontextmenü des betreffenden Inhaltselements. Fahren Sie dazu mit dem Mauszeiger über das Inhaltselement und klicken Sie mit der rechten Maustaste auf das Standard-Symbol des Inhaltselements (rot umrandet). Daraufhin öffnet sich das Kontextmenü, in dem Sie die Option Kopieren auswählen. Danach navigieren Sie zur Zielseite, auf der das zuvor kopierte Inhaltselement platziert werden soll. Mit einem Klick auf Kopie hier einfügen schließen Sie die Operation ab. Zum Schluss muss 50

51 nochmals die Sichtbarkeitseinstellung angepasst werden, damit das Element auch im Frontend angezeigt wird Ausschneiden und verschieben von Inhaltselementen Alternativ zum gerade vorgestellten Kopieren von Inhaltselementen können Sie diese auch von einer Seite A auf eine Seite b verschieben, d.h. das Element ist danach auf Seite B, aber nicht mehr auf Seite a vorhanden. Dazu wählen Sie im Kontextmenü des Inhaltselements (siehe voriger Abschnitt) die Option Ausschneiden. Navigieren Sie danach zur Zielseite und fügen Sie das Element mit einem Klick auf Kopie hier einfügen mehr vorhanden. ein. Das Element ist nun auf Seite B eingefügt und auf Seite A nicht Referenzieren von Inhaltselementen Eine Referenzierung hat im Vergleich zu einer Kopie von Inhaltselementen den Vorteil, dass nur ein Verweis auf das Ursprungselement erstellt wird. Somit aktualisiert sich die Referenzierung automatisch, sobald das ursprüngliche Inhaltselement verändert wird. Bei einer Kopie eines Inhaltselements werden Veränderungen am Ursprungselement hingegen nicht automatisch übernommen hier muss also ggfs. der Content an mehreren Stellen angepasst werden, was mit erhöhtem Arbeitsaufwand verbunden ist! Um eine Referenz zu erstellen, wählen Sie für das Ursprungselement im Kontextmenü die Option Kopieren aus (vgl. vorletzter Abschnitt). Navigieren Sie nun zur Zielseite. Mit einem Klick auf Referenz hier einfügen wird das Ursprungselement an dieser Stelle referenziert. Zu beachten ist, dass zwar die Referenz selbst mit einem Klick auf das Stift-Symbol an dieser Stelle bearbeitet werden kann (z.b. kann der Name Reference abgeändert werden), allerdings können keine Veränderungen am Inhalt des referenzierten Elements durchgeführt werden. Dies kann nur auf der Ursprungsseite des Elements geschehen Flexibler Seiteninhalt Mit Hilfe des Plugins Zweispalter haben Sie die Möglichkeit, den Content-Bereich, der im Frontend angezeigt wird, in zwei Spalten zu unterteilen und so die einzelnen Contents Ihrer 51

52 Seite evtl. optisch ansprechender darzustellen. In jeder Spalte können Inhaltselemente platziert werden. Die Spaltengröße passt sich dabei flexibel den Inhaltselementen an, die im Zweispalter platziert werden. Um einen Zweispalter als Container für Inhaltselemente auf einer Seite einzufügen, wählen Sie in der Modulleiste unter Web den Eintrag Seite aus. Navigieren Sie zu der Seite, auf der Sie den Zweispalter einfügen möchten und klicken Sie auf Neues Element anlegen Raster-Elemente befindet sich das Plug-In Zweispalter.. Im Reiter Im Plug-In-Reiter Allgemein können Sie für den Zweispalter eine Überschrift im entsprechenden Feld eintragen. Speichern Sie ab. Wenn der Zweispalter erfolgreich angelegt ist, können Sie bereits bestehende Inhaltselemente per Drag & Drop-Prinzip mit der linken Maustaste in die linke oder die rechte Spalte des Zweispalters ziehen und so dort platzieren. Eine weitere Möglichkeit, den Zweispalter mit Inhalt zu befüllen, ist die Nutzung der Neues Element anlegen -Symbole innerhalb der linken und rechten Spalte. Darüber können Sie, nach dem bereits bekannten Prinzip, Inhaltselemente anlegen. Innerhalb des Zweispalters können, wie gewohnt, die einzelnen Inhaltselemente bearbeitet, deaktiviert etc. werden. Zusätzlich sind diese Bearbeitungsmöglichkeiten ebenfalls für den Zweispalter selbst vorhanden (blau umrandet). Möchten Sie den Zweispalter beispielsweise löschen oder verbergen, so können Sie dies direkt in den Einstellungen des Zweispalters abändern und müssen nicht jedes Inhaltselement einzeln bearbeiten. Drag & Drop-Prinzip 52

53 4.3.7 Seitenanker anlegen TYPO3 bietet die Möglichkeit, innerhalb einer Seite eine Verlinkung einzubauen (auch Seitenanker genannt), um schneller zu einem bestimmten Seiteninhaltselement auf der betreffenden Seite zu navigieren. Um einen solchen Seitenanker zu erstellen, legen Sie entweder ein neues Textelement an, oder benutzen ein bestehendes, um die Verlinkung bzw. den Anker einzubauen. Wie Sie ein neues Textelement anlegen können, entnehmen Sie bitte dem Abschnitt zum Rich-Text-Editor in dieser Broschüre. Öffnen Sie das Textelement, in dem der Anker gesetzt werden soll, mit einem Klick auf das Symbol Element bearbeiten. Markieren Sie nun den Textbereich, der später zum Seitenanker (also der Verlinkung) werden soll. Klicken Sie anschließend auf das Symbol Link einfügen. Im erscheinenden Popup-Fenster navigieren Sie zu der Seite, auf der Sie sich gerade befinden (hier soll auf der Seite Testseite ein Seitenanker angelegt werden) und klicken auf den orangenen Pfeil neben dem Seitentitel. In der erscheinenden Liste der Inhaltselemente wählen Sie das Element, zu welchem bei einem Klick auf den Seitenanker gesprungen werden soll, aus. Klicken Sie dazu einfach auf den Titel. Der Im Rich-Text-Editor markierte Text wird nun als Link dargestellt (blau unterstrichen). Speichern Sie anschließend mit einem Klick auf eines der Speicher-Symbole Im Frontend erfolgt nun, bei einem Klick auf den angelegten Seitenanker, ein Sprung zu dem verlinkten Inhaltselement. Diese Funktion eignet sich besonders für große Seiten, auf denen sich viele Inhaltselemente untereinander befinden Sprachversionierung In diesem Abschnitt wird das Anlegen und Verwalten verschiedener Sprachversionen beschrieben. Neben der deutschen stehen ebenfalls eine englische und französische Sprachversion zur Auswahl. Die folgenden Beschreibungen beziehen sich auf das Anlegen einer englischen Sprachversion das Anlegen einer französischen funktioniert analog. Nachdem eine Seite mitsamt Inhaltselement(en) in deutscher Sprache angefertigt wurde, kann mit der Übersetzung der Seite begonnen werden. Dazu wechseln Sie in die Detailansicht der Seite, für die eine Übersetzung erstellt werden soll (wählen Sie dazu in der Modulleiste den Unterpunkt Seite und klicken in der Navigationsleiste auf die zu übersetzende Seite). ab. 53

54 Im Dropdown-Menü, welches sich in der Detailansicht der Seite oben links befindet (rot umrandet), kann nun der Eintrag Sprachen ausgewählt werden, welcher zum Anlegen und Bearbeiten der alternativen Seitensprachen genutzt wird. Wenn für die betreffende Seite noch keine Übersetzung angelegt wurde, so erscheint daraufhin ein weiteres Dropdown-Menü, in dem die alternative Seitensprache ausgewählt werden kann Im nächsten Schritt muss ein Seitentitel für die angelegte alternative Seitensprache festgelegt werden. Als Hilfestellung wird dabei der deutsche Seitentitel angezeigt. Geben Sie den gewünschten Seitentitel für die alternative Seitensprache ein und speichern Sie ab. 54

55 Nach erfolgtem Abspeichern gelangen Sie auf eine Übersichtsseite, in der sowohl eine weitere alternative Seitensprache erstellt werden kann (blau umrandet), als auch die in der deutschen Sprache vorhandenen Inhaltselemente für die alternativen Seitensprachen angelegt werden können. Dazu können Sie für die Contents im Bereich Inhalt (und ggfs. auch für die Kacheln 1 bis 3, falls auf der betreffenden Seite Kacheln in deutscher Sprache angelegt sind) die Standardinhalte kopieren (rot umrandet). Dies bedeutet, dass die deutschen Inhaltselemente 1:1 in die alternative Seitensprache übertragen werden und dort dann von Ihnen übersetzt werden können. Die Contents werden standardmäßig verborgen und mit einem Übersetzungshinweis vor der Überschrift und dem Inhaltstext versehen. Klicken Sie auf das Bearbeiten -Symbol, um mit der Übersetzung zu beginnen. Auch hier werden Ihnen wieder die deutschen Ursprungstexte als Hilfestellung angezeigt. Wenn Sie mit der Übersetzung fertig sind, vergessen Sie nicht, das Inhaltselement zu aktivieren entweder im Reiter Zugriff, oder nach erfolgtem Abspeichern über das Kontextmenü des Inhaltselements, mit einem Klick auf Sichtbar machen. 55

56 Beispielsweise könnte eine Übersetzung im Backend wie folgt aussehen: Um die alternative Seitensprache im Frontend anzuzeigen, klicken Sie rechts oben im Service- Bereich auf die entsprechenden Flaggen-Symbole (direkt über der Suchfunktion), um die Seitensprache umzustellen. 56

57 4.4 Kacheln im Servicebereich In diesem Kapitel möchten wir Ihnen einen Überblick über die Kacheln im rechten Servicebereich geben und die einzelnen, dort platzierbaren Kacheln, genauer erläutern Überblick und Konzept Auf jeder Seite des Webauftritts der Universität Trier sind die drei Kacheln im rechten Servicebereich fester Bestandteil des Designs. Diese Kacheln werden am Seitenbaum entlang vererbt, d.h. wenn Sie einen neuen Webseitenbereich mitsamt Kennung zur Verfügung gestellt bekommen, so sehen Sie standardmäßig die Kacheln, die auch im übergeordneten Bereich sichtbar sind (im Extremfall also die der Startseite der Universität). Da die Kacheln allerdings zur Informationsunterstützung im Ihrem Bereich dienen sollen, können diese von Ihnen individuell auf Ihren Bereich bzw. auch auf einzelne Seiten angepasst werden. Sollten Sie dabei nicht alle drei Kacheln überschreiben, so werden die restlichen Kacheln weiterhin vom übergeordneten Webseitenbereich geerbt. 57

58 Insgesamt stehen Ihnen für die Gestaltung des rechten Servicebereichs sieben verschiedene Kachel-Arten zur Verfügung, mit denen die drei Kacheln befüllt werden können: 1. Social-Media-Kachel 2. Inhalts-Kachel 3. Bild-Text-Kachel 4. Top-Links-Kachel 5. News-Kachel 6. Bildergalerie-Kachel 7. Video-Kachel Die News-Kachel und die Diashow-Kachel werden im Rahmen dieses Kapitels nicht erläutert. Eine Anleitung zur Erstellung etc. dieser beiden Kacheln findet sich in den jeweiligen Abschnitten dieser Broschüre, die die dazugehörigen Plug-Ins beschreiben. Die generelle Erstellung aller Kacheln läuft nach dem gleichen Prinzip ab. Navigieren Sie mit aktivierter Seitenansicht zu der Seite, auf der Sie eine/mehrere Kacheln erstellen möchten. In der Detailansicht der Seite befinden sich rechts neben der Inhalts-Spalte die drei Kacheln 1-3 (rot umrandet). Mit einem Klick auf Neuen Datensatz an diesem Ort hinzufügen Sie zur Auswahl der einzelnen Kachel-Arten. gelangen Wichtig zu wissen ist an dieser Stelle, dass Sie in den drei Kachelsegmenten der Detailansicht beliebig viele Kacheln anlegen können. Im Frontend wird allerdings immer nur die erste Kachel des jeweiligen Segments angezeigt. Ein weiterer Hinweis: Wenn Sie die Kacheln für alle Seiten innerhalb Ihres Webseitenbereichs festlegen möchten, so müssen Sie dies auf der obersten Ebene tun im Beispiel ist dies für den TYPO3-Webseitenbereich gezeigt (rot umrandet). 58

59 Im Folgenden werden die restlichen fünf Kacheln detailliert vorgestellt Social-Media-Kachel Nach Auswahl der Social-Media-Kachel über den im vorigen Abschnitt beschriebenen Weg können Sie eine Überschrift für die Kachel eintragen. Speichern Sie danach ab. Die Kachel ist nun fertig konfiguriert und in dem zu Anfang in der Detailansicht der Seite ausgewählten Kachelsegment platziert. Die Social-Media-Kachel erhält die benötigten Verlinkungen automatisch über das Modul SocialMedia, welches in der Modulleiste im Bereich Web auffindbar ist. Falls noch keine Links gesetzt sind oder diese angepasst werden sollen, so können Sie diese für die Dienste RSS- Feed, Google+, Twitter, Facebook und Youtube hier eintragen bzw. anpassen. Dazu kopieren Sie die jeweiligen Links einfach in die Freitextfelder der dazugehörigen Dienste bzw. löschen diese. Mit einem Klick auf den Button Links zurücksetzen können Sie die kürzlich abgeänderten Links wieder rückgängig machen. Nachdem Sie die Links eingetragen bzw. angepasst haben, speichern Sie mit einem Klick auf den Button Speichern ab. Bitte beachten Sie, dass die im Modul SocialMedia eingetragenen Links zu den verschiedenen Diensten analog zu den eigentlichen Kacheln entlang der Hierarchie der Seiten im Backend weitervererbt werden. Natürlich können die Links in einer der unteren Ebenen über den bereits beschriebenen Weg angepasst bzw. entfernt werden. 59

60 Die Social-Media-Kachel passt ihr Aussehen automatisch an die Anzahl der vorhandenen Dienste an. Sind z.b. alle Links gesetzt, so hat die Kachel folgendes Aussehen im Frontend: Mit einem Klick auf das entsprechende Icon gelangt der Nutzer über die hinterlegten Links zu Ihren Social-Media-Auftritten Inhalts-Kachel Nach Auswahl der Inhaltskachel erscheint folgende Ansicht: 60

61 Tragen Sie eine Überschrift, sowie den anzuzeigenden Text ein. Hier stehen Ihnen alle Funktionalitäten des RTE zur Verfügung. Zusätzlich können Sie über den Reiter Hintergrundbild (rot umrandet) eines der folgenden Hintergrundbilder auswählen (von links nach rechts: Weiß, Kontakt, Info, Stelle): Im Reiter Hintergrundbild können Sie ebenfalls ein Start- und Stoppdatum eintragen, falls Sie die Anzeige der Kachel zeitlich begrenzen möchten. Beispielsweise kann eine gefüllte Inhalts-Kachel wie folgt aussehen: 61

62 4.4.4 Bild-Text-Kachel Die Bild-Text-Kachel ermöglicht es Ihnen, gleichzeitig sowohl ein Bild, als auch einen Text in der Kachel zu platzieren. Nach erfolgter Auswahl im Backend geben Sie zuerst eine Überschrift und den Text in die entsprechenden Felder ein. 62

63 Mit einem Klick auf den Reiter Bild (rot umrandet) gelangen Sie zu folgender Ansicht: Um ein Bild aus dem Fileadmin auszuwählen, klicken Sie auf Dateien durchblättern (rot umrandet). Erlaubt sind die Formate.jpg,.gif und.png. Darüber hinaus ist es ebenfalls möglich, eine pdf-datei als Bild auswählen. Die Bild-Text-Kachel generiert ausgehend von dieser Datei automatisch ein Abbild der ersten Seite des Dokuments, welches als Bild in der Kachel angezeigt wird. Zusätzlich können Sie unter Verlinkung mit einem Klick auf das Stift-Symbol (blau umrandet) dem Bild entweder eine Seite, eine Datei, oder aber einen externen Link mitgeben. Die Position von Bild und Text können Sie im Dropdown-Menü unter Position anpassen (orange umrandet). Sie können dabei die Optionen Bild links, Text rechts, Bild oben, Text unten, oder aber Nur Bild auswählen. Über die Auswahloption Nur Bild kann also eine reine Bild-Kachel ohne Text erstellt werden. 63

64 Bitte beachten Sie dass, das Bild bei der Option Bild links, Text rechts im Format von 170px*90px (Höhe*Breite), bei Bild oben, Text unten im Format von 80px*190px und bei Nur Bild in einem Format von 170px*190px vorliegen sollte, um Verzerrungen etc. zu vermeiden. Auch bei dieser Kachel können Sie über ein Start- und Stoppdatum die Anzeige zeitlich beschränken Top-Links-Kachel Die Top-Links-Kachel ermöglicht es Ihnen, wichtige Verlinkungen übersichtlich und zusammen in einer Kachel darzustellen. Nach der Auswahl der Top-Links-Kachel im Backend erscheint folgende Eingabemaske: 64

65 Wiederum haben Sie die Möglichkeit, eine Überschrift zu vergeben und ein Start- und Stoppdatum für die zeitlich begrenzte Anzeige der Kachel einzutragen. Über die Reiter 1. Link bis hin zu 8. Link (rot umrandet) können Sie bis zu acht verschiedene Verlinkungen für die Top-Links-Kachel eingeben. Bitte beachten Sie dabei, dass Sie die Link- Beschriftung (blau umrandet) für die einzelnen Links möglichst kurz und prägnant halten sollten. Falls Ihre Link-Beschriftung zu lang gewählt ist, findet bei der Anzeige im Frontend ein Zeilenumbruch statt, was zur Folge hat, dass sich die maximale Anzahl an anzeigbaren Links entsprechend verringert! Im Feld Link-Ziel können Sie über einen Klick auf das Stift-Symbol (orange umrandet) die einzelnen Verlinkungen setzen. Dabei stehen Ihnen im erscheinenden Popup-Fenster die Link- Arten Seite, Datei und Externe URL zur Verfügung. 65

66 Wenn Sie die gewünschten Links gesetzt haben, vergessen Sie nicht, Ihre Änderungen abzuspeichern! Video-Kachel Die letzte Kachel, die im Rahmen dieses Kapitels vorgestellt werden soll, ist die Videokachel. Mit Hilfe dieser Kachel können Sie Youtube-Videos direkt auf Ihrer Webseite einbinden. Die Erstellung und Konfiguration dieser Kachel ist schnell und einfach: Zusätzlich zu Überschrift und eventuellem Start- und Stoppdatum muss nur der Link zum Youtube-Video in das entsprechende Feld (rot umrandet) eingefügt werden. 66

67 Wenn die Informationen eingetragen sind, speichern Sie ab. Die Video-Kachel wird im Frontend folgendermaßen angezeigt: 67

68 4.5 Personenseiten In diesem Abschnitt möchten wir Ihnen die neuen Personenseiten vorstellen, die zur besseren Präsentation der Universitätsmitarbeitenden dienen Anlegen von Personenseiten Um diese Art der Darstellung erstellen zu können, wird zunächst, wie bereits in dieser Broschüre erläutert, eine neue Seite angelegt. Nachdem Sie die Seite angelegt haben, wechseln Sie in die Seiteneinstellungen (z.b. über einen Rechtsklick und die Auswahl der Option Bearbeiten in der Navigationsleiste), um die normale Seite zu einer Personenseite abzuändern. Dazu wählen Sie zunächst im Dropdown-Menü Backend-Layout (rot umrandet) im Reiter Erscheinungsbild die Option Personenseite aus. Standardmäßig verwenden Sie dazu das linke der beiden Dropdown-Menüs (rot umrandet), da eine einzelne Personenseite in den meisten Fällen ausreichend sein sollte. Möchten Sie jedoch mehrere Ebenen von Personenseiten untereinander anlegen, so können Sie über das rechte Dropdown-Menü direkt festlegen, dass alle Unterseiten der gerade bearbeiteten Seite ebenfalls Personenseiten sein sollen. Nachdem das Erscheinungsbild der Seite nun angepasst wurde, ist es notwendig, dieser noch eine Person zuzuordnen. Dazu wechseln Sie in den Reiter Person. Im dortigen Dropdown- Menü können Sie die gewünschte Person auswählen. Zur besseren Auffindbarkeit der Person kann das Suchfeld genutzt werden. Wenn dieser Schritt erfolgt ist, speichern Sie ab. Die ursprünglich angelegte Seite ist nun zum Erscheinungsbild Personenseite abgeändert und erfolgreich mit einer Person verknüpft. Im nächsten Abschnitt werden die drei fest vorgegebenen Kacheln in der rechten Spalte der Personenseiten vorgestellt. 68

69 4.5.2 Kacheln der Personenseiten Eine Personenseite hat drei feste Kacheln in der rechten Spalte. Diese sind nicht austauschbar. Die erste Kachel von oben wird mit einem Bild der jeweiligen Person gefüllt. Falls noch kein Personenbild gesetzt ist, so erscheint an dieser Stelle eine Standardkachel. Um das persönliche Bild abzuändern, müssen Sie sich unter bildmanagement.uni-trier.de mit dem eigenen ZIMK-Login einloggen. 69

70 Anschließend können Sie mit einem Klick auf Durchsuchen ein.jpg-bild vom Computer auswählen und hochladen. Zusätzlich besteht auch die Möglichkeit, ein Bild per Webcam und/oder Handykamera aufzunehmen. Abschließend muss aus diesem Bild ein quadratischer Bereich (sichtbarer Bereich für die Kachel) ausgewählt werden. Dazu klicken Sie mit der linken Maustaste in das Bild und markieren den gewünschten Bereich. Die Markierung wird automatisch quadratisch gezogen. Klicken Sie auf Bildbereich speichern und das persönliche Bild wird gesetzt bzw. ersetzt. Hinzukommend bietet sich im Bildmanagement die Möglichkeit an, die jeweiligen Sprechstunden anzupassen. Diese Anpassung wird mit einem Klick auf Ändern übernommen. Die zweite Kachel dient als Kontakt-Kachel. In dieser Kachel werden Informationen bezüglich Raum, Telefonnummer, Faxnummer, und Sprechstunde angezeigt. Die dritte Kachel ( Veranstaltungs-Kachel ) beinhaltet Informationen zu den jeweiligen Veranstaltungen, beispielsweise Vorlesungen oder Übungen, die die Person im laufenden Semester hält bzw. halten wird. Die Daten, welche die Kontakt-Kachel und Veranstaltungs- Kachel beinhalten, werden automatisiert über Schnittstellen zum PORTA-System ausgelesen und auf den Personenseiten platziert. Hierzu muss von redaktioneller Seite aus keine Arbeit geleistet werden. WICHTIG: Sollten Sie bei Ihren Kontaktdaten einen Fehler finden, so wenden Sie sich bitte an die eigens dafür vorgesehene -Adresse kontaktdatenaenderung@uni-trier.de! Umgang mit Personenseiten Wie bereits erwähnt wurde, sind die drei Kacheln auf der rechten Seite fix und unveränderlich. Der weitere Umgang mit Personenseiten ist darüber hinaus identisch zu normalen Inhaltsseiten. Sie können im Backend alle Inhaltselemente, die Ihnen zur Verfügung stehen, auch auf Personenseiten platzieren. 70

71 4.5.4 Mitarbeiterliste Wenn Sie den Nutzern Ihrer Webseite einen schnellen Überblick über die verschiedenen Personen Ihrer Abteilung/Fachbereich/etc. geben möchten, so können Sie dafür das Plug-In Mitarbeiterliste verwenden. Dazu müssen sich allerdings alle Personenseiten im gleichen Zweig Ihres Seitenbaumes befinden. Im Beispielbild sind alle Personenseiten unterhalb der Seite Mitarbeiterliste eingeordnet. Auf dieser Seite soll das gleichnamige Plug-In eingefügt werden. Dazu klicken Sie in der Detailansicht der betreffenden Seite auf Neuen Datensatz an diesem Ort hinzufügen und wählen danach den Reiter Plug-Ins aus. Darunter befindet sich das gesuchte Plug-In Mitarbeiter Liste. Geben Sie im dem Inhaltselement im darauffolgenden Fenster im Reiter Allgemein eine Überschrift und speichern Sie ab. Wenn Sie nun im Frontend die Seite besuchen, so wird die Mitarbeiterliste wie folgt als übersichtliche Tabelle dargestellt: Mit einem Klick auf einen der vorhandenen Namen gelangen Sie automatisch zur entsprechenden Personenseite. 71

72 WICHTIG: Bedenken Sie bitte, dass alle Personenseiten, die durch die Mitarbeiterliste erfasst werden sollen, im Seitenbaum unterhalb der Seite liegen müssen, auf der die Mitarbeiterliste platziert werden soll! Visitenkarten in der Suche Verwenden Sie die Uni-Suche um nach einer bestimmten Person zu suchen, so wird standardmäßig eine kleine Visitenkarte angezeigt. Bei einem Klick auf diese öffnet sich Ihr Standard- -Programm und Sie können der betreffenden Person eine schreiben. Diese Visitenkarte verändert sich, sobald die betreffende Person eine Personenseite hinzugefügt hat. Es werden zusätzliche Informationen, wie die Sprechstunde und das persönliche Bild angezeigt. Außerdem öffnet sich bei einem Klick auf eine solche Visitenkarte nicht mehr das Standard-E- Mail-Programm, sondern Sie werden automatisch zu der betreffenden Personenseite weitergeleitet. 72

73 5 Fileadmin Der Fileadmin ist ein zentrales Element in der Arbeit mit TYPO3. Wie sein Name schon aussagt, werden hier die Dateien verwaltet, die Sie auf Ihrer Seite benutzen möchten (z.b. Bilder, PDF- Dateien etc.). Sie besitzen die Möglichkeit, Ordner anzulegen, Dateien hochzuladen und diese zu verschieben, oder zu löschen. Im diesem Kapitel wird der Umgang mit dem Fileadmin beschrieben und auf Probleme aufmerksam gemacht. Der Fileadmin kann in der Modulleiste mit einem Klick auf Dateiliste im Modul Datei aufgerufen werden. Daraufhin ändert sich die Ansicht der Navigationsleiste. Hier werden nun zuerst die Dateilisten angezeigt, die Ihrer Kennung zugeordnet sind, d.h. auf die Sie einen Zugriff haben (hier: URTSicherheit und URT). Mit einem Klick auf das Pfeilsymbol ganz links (rot umrandet) klappen Sie die betreffende Ansicht aus. Wenn Ihre Kennung bzw. der Webseitenbereich nicht gerade erst erstellt wurde, so sollte bereits eine bestehende Ordnerstruktur vorhanden sein. Bitte beachten Sie, dass die einzelnen Ordner, ebenso wie Seiten in der Seiten-Ansicht der Modulleiste, untereinander in mehreren Ebenen liegen können. Sind weitere Unterordner unter einer Ordner vorhanden, so wird dies wiederum durch ein Pfeil-Symbol angezeigt, mit Hilfe dessen Sie die Ansicht an dieser Stelle weiter ausklappen bzw. natürlich auch wieder einklappen können. 5.1 Ordner anlegen Um einen Ordner anzulegen, klicken Sie auf einen gewünschten Überordner. Nun erscheinen in der Detailansicht auf der rechten Seite des Bildschirms alle Inhalte des Ordners. Klicken Sie nun am oberen linken Rand der Detailansicht auf Neu (rot umrandet). 73

74 Nun erscheint die folgende Ansicht, in der Sie zeitgleich bis zu 10 Ordner erstellen können. Über das Dropdown-Menü hinter Anzahl Ordner: wählen Sie dabei die Anzahl der Ordner aus. Im rot markierten Textfeld geben Sie dem zu erstellenden Ordner einen Namen und speichern mit einem Klick auf Ordner anlegen ab. Sollten Sie mehr als einen Ordner gleichzeitig anlegen wollen, so erscheinen untereinander entsprechend mehrere Textfelder, die die Benennung der Ordner erlauben. WICHTIG: Bei der Vergabe von Ordner- bzw. Dateinamen sollten Sie darauf achten, dass Sie nur Buchstaben und Zahlen verwenden. Vergeben Sie kurze, aussagekräftige Namen. Verwenden Sie bitte keine Leerzeichen, Umlaute, < > / \? ß * : ",;. 5.2 Ordner umbenennen Um den Namen eines bereits existierenden Ordners zu ändern, klicken Sie diesen im Seitenbaum mit einem Rechtsklick an, um das Kontextmenü aufzurufen. Nun erscheint folgende Auswahl (rot umrandet): 74

75 Mit einem Klick auf Umbenennen öffnet sich im rechten Bereich der Seite folgende Ansicht: Hier können Sie den neuen Namen des Ordners eingeben und mit einem Klick auf Umbenennen bestätigen. 5.3 Ordner löschen Um einen Ordner zu löschen, gehen Sie ähnlich wie im vorherigen Abschnitt vor. Wählen Sie in der Navigationsliste den gewünschten Ordner mit einem Rechtsklick aus und klicken Sie im Kontextmenü auf Löschen. Nach dem Klicken auf Löschen erscheint ein Bestätigungsfenster, in welchem Sie die Aktion mit OK abschließen. Erscheint eine Fehlermeldung, so müssen Sie ggfs. vorher den noch vorhandenen Inhalt des Ordners löschen. 5.4 Dateiupload Um Dateien von Ihrem PC in das TYPO3-System zu laden, wählen Sie zuerst im Seitenbaum des Fileadmins einen Ordner aus. Rechts in der Detailansicht sehen Sie nun alle Dateien, die der ausgewählte Ordner beinhaltet. Für den Dateiupload klicken Sie am oberen linken Rand auf Dateien hochladen. Nun öffnet sich ein Fenster, in dem Sie zu der gewünschten Datei navigieren und diese mit einem Klick auf Öffnen (rot umrandet) hochladen können. Alternativ können Sie die Datei 75

76 auch per Drag & Drop in den dafür automatisch entstandenen Bereich in der Detailansicht ziehen (blau umrandet). 5.5 Dateien löschen Das Löschen von Dateien kann auf zwei Wegen geschehen: 1. Sie klicken in der Detailansicht auf das vorderste Symbol einer Datei (rot umrandet) und klicken dann auf Löschen (analog zu Ordner löschen): 76

77 2. Sie erweitern die Ansicht der Dateien, indem Sie links unten in der Detailansicht einen Haken bei Erweiterte Ansicht (rot umrandet) setzen: Nun erhaltenen Sie folgende, erweiterte Detailansicht: Durch einen Klick auf Löschen und Bestätigung der Aktion durch OK im Bestätigungsfenster wird die Datei gelöscht. Sollte die zu löschende Datei noch in Inhaltselementen verlinkt sein, so müssen Sie diese Verlinkungen an den entsprechenden Stellen ggfs. vorher entfernen. HINWEIS: Sollten sich Unterordner im ausgewählten Ordner befinden, sind für diese nun dieselben erweiterten Optionen verfügbar. Das heißt, Sie können in der Detailansicht Ordner wie Dateien behandeln. 5.6 Dateien verschieben Um eine Datei zu verschieben, klicken Sie in der erweiterten Ansicht der Dateien auf Ausschneiden (rot umrandet). Nun wechseln Sie zum neuen Ordner, in dem die Datei platziert werden soll und klicken am oberen linken Rand der Detailansicht auf Inhalt der Zwischenablage einfügen (grün umrandet). 77

78 WICHTIG: Dateien, die Sie vor dem Relaunch der Webseite hochgeladen und verlinkt haben, können nur verschoben werden, wenn die Verlinkung vorher gelöscht wurde! 5.7 Dateien kopieren Um eine Datei zu kopieren, gehen Sie analog zu vorherigem Abschnitt vor, jedoch klicken Sie zu Beginn auf Kopieren, statt auf Ausschneiden. 5.8 Dateien umbenennen Um eine Datei umzubenennen, klicken Sie auf Umbenennen. In der folgenden Ansicht können Sie den Dateinamen verändern und mit einem Klick auf Umbenennen die Aktion bestätigen. WICHTIG: Achten Sie beim Umbenennen von Dateien und auch von Ordnern unbedingt auf die in diesem Kapitel bereits genannten Namenskonventionen! 78

79 6 Spezielle Extensions Durch die Benutzung von sogenannten Extensions bzw. Plug-Ins können Sie innerhalb des TYPO3-Systems Datensätze anlegen und diese auf vielfältige Art und Weise wiederverwenden. Im Folgenden werden die Einrichtung und die Benutzung einiger ausgewählten Extensions erläutert. 6.1 News Mit der TYPO3-Extension tt_news können Sie Ihre Neuigkeiten über die Webseite wohlgeordnet und strukturiert verbreiten. Darüber hinaus besteht die Möglichkeit, daraus einen RSS-Feed zu generieren. Beispielsweise nutzt die Pressestelle der Universität (auffindbar unter diese Extension. Um tt_news erfolgreich nutzen zu können, muss insbesondere die News-Struktur nach einem bestimmten Schema aufgebaut werden Einrichtung einer News-Struktur Eine funktionierende News-Struktur benötigt 3 elementare Bestandteile: 1. Die Seite, auf der alle News gelistet werden (existiert ggfs. schon, z.b. die Startseite Ihres Webseiten-Bereichs). 2. Eine Einzelansichts-Seite, die den Volltext der News anzeigt (muss neu angelegt werden). 3. Einen Systemordner, indem die News hinterlegt werden (muss neu angelegt werden). Das Ganze sollte im Backend ungefähr so aussehen News-Anzeigeseite, News-Ordner und News-Einzelansicht sind in dieser Abbildung der Übersichtlichkeit halber zusammen angeordnet: 79

80 Wie Sie die benötigten Seiten bzw. Ordner anlegen, entnehmen Sie bitte den entsprechenden Kapiteln aus dieser Broschüre. Nun müssen in den Seiteneigenschaften folgende Einstellungen getroffen werden: 1. News-Anzeigeseite: Im Reiter Ressourcen wählen Sie unter Allgemeine Datensatzsammlung (rot umrandet) den News-Ordner aus, der eben erstellt wurde. Am schnellsten geht dies, indem Sie die ID des Ordners in das Suchfeld (blau umrandet) eintragen, diesen auswählen und dann mit einem Klick auf eines der Disketten-Symbole abspeichern. Alternativ können Sie den Ordner mit einem Klick auf (orange umrandet) aus der Baumstruktur Ihrer Seiten auswählen. Vergessen Sie nicht, die Änderungen abzuspeichern! 2. News-Ordner: Im Reiter Verhalten wählen Sie im Dropdown-Menü unter Enthält Erweiterung die Option News aus (rot umrandet). 80

81 Danach legen Sie für den News-Ordner im Reiter Ressourcen analog zu 1. News- Anzeigeseite den News-Ordner als allgemeine Datensatzsammlung fest (blau umrandet). Als Resultat verweist der Ordner auf sich selbst. Im abschließenden Schritt müssen zwei neue Inhaltselemente erstellt werden: 1. News-Anzeigeseite: Erstellen Sie ein neues Inhaltselement. Wählen Sie im Reiter Plug-Ins den Eintrag Nachrichten (rot umrandet) aus. 81

82 Nun können Sie dem Element eine Überschrift geben. Anschließend klicken Sie auf den Reiter Plug-Ins. Es erscheinen die Einstellungsmöglichkeiten des News-Plug-Ins. Wählen Sie im Sub-Reiter Allgemeine Einstellungen im Dropdown-Menü unter Ansicht die Option Standard-Listenansicht (LIST) aus. Wechseln Sie anschließend in den Sub-Reiter Sonstige Einstellungen und tätigen Sie folgende Einstellungen: a. Seite für die Einzelansicht : Wählen Sie nach einem Klick auf Datensätze durchblättern die News-Einzelansicht-Seite aus. b. Seite(n) mit tt_news-datensätzen : Wählen Sie nach einem Klick auf Datensätze durchblättern den angelegten News-Ordner aus. Möchte Sie die Anzeige der News auf eine bestimmte Kategorie beschränken, so wählen Sie diese im Reiter Kategorieeinstellungen aus. Mehr Informationen zu News- Kategorien finden sich ebenfalls in diesem Kapitel. 2. News-Einzelansicht Wiederholen Sie bitte den vorherigen Schritt die Erstellung eines Nachrichten- Inhaltselements mit folgenden Abwandlungen: 82

83 a. Im Sub-Reiter Plug-In Allgemeine Einstellungen im Dropdown-Menü unter Ansicht: Einzelansicht (SINGLE) statt LIST auswählen. b. Sonstige Einstellungen : Anstatt die Einzelansicht und die Seite mit den Datensätzen einzutragen, hier nur die Seite für Zurück, also wieder die eigentliche News-Anzeigeseite eintragen. Damit sind alle notwendigen Seiten, Ordner und Inhaltselemente erstellt und korrekt konfiguriert. Im nächsten Schritt wird die Erstellung von News-Elementen erläutert Erstellung einer News Um nun eine News anzulegen, muss ein neuer Datensatz News erstellt werden. Wechseln Sie dazu in die Listenansicht des News-Ordners (in der Modulleiste das Modul Liste auswählen). Wählen Sie nach einem Klick auf Neuen Datensatz erstellen Nachrichten (blau umrandet) direkt unter News aus. (rot umrandet) die Option Fügen Sie Ihre News in die angezeigten Felder ein und vergessen Sie nicht, den standardmäßig bei Verbergen gesetzten Haken zu entfernen, damit Ihre News auch angezeigt werden. Vergessen Sie auch hier nicht, abzuspeichern! Im Reiter Kategorien & Beziehungen können Sie optional die News einer Kategorie zuweisen. Wie eine Kategorie erstellt wird, erfahren Sie im nächsten Abschnitt. 83

84 Bitte achten Sie darauf, dass Sie ggfs., sobald Sie neue News erstellt haben, den Cache der News-Anzeigeseite leeren, sodass die Änderungen im Frontend zu sehen sind. Dazu klicken Sie, wenn Sie sich im Backend auf der News-Anzeigeseite befinden, neben dem Logout-Button auf Cache löschen und wählen Sie Flush frontend caches (rot umrandet). Außerdem können Sie mit der Tastenkombination Strg+F5 im Frontend den Cache Ihres Browsers löschen und die Seite damit neu laden. Eventuell interessant für die Erstellung Ihrer News sind auch die beiden Reiter Medien und Zugriff der News-Einstellungen. Im Reiter Medien können Sie Bilder, Links und Dateien zu Ihrer News hinzufügen. Links werden dabei in das entsprechende Feld als einfacher Text eingegeben. Dateien werden entweder über einen Klick auf Dateien durchblättern (rot umrandet) aus dem Fileadmin, oder mit einem Klick auf Durchsuchen (blau umrandet) direkt vom PC ausgewählt. Ähnliches gilt für das Hinzufügen von Bildern. Diese können Sie analog zu den Dateien entweder aus dem Fileadmin, oder vom PC aus einbinden. Zusätzlich stehen hier die Felder Bildunterschrift (kann z.b. für einen Copyright-Hinweis genutzt werden), ALT-Text des Bildes (wird angezeigt, falls das Bild nicht geladen werden kann) und Titel des Bildes (wird im Frontend angezeigt, wenn die Maus auf dem Bild steht) zur Verfügung. 84

85 Im Reiter Zugriff können Sie ein Start- und Stopp-Datum individuell für jede News eingeben. Dies ist sinnvoll, falls eine bestimmte Information erst zu einer festgelegten Zeit zur Verfügung stehen, oder eben nur bis zu einem bestimmten Zeitpunkt verfügbar sein soll. 85

86 Mit einem Klick auf das Kalender-Symbol neben Start und Stopp erscheint jeweils das rot umrandete Popup-Fenster, in dem Sie den Tag und die Uhrzeit genau festlegen können. Vergessen Sie nicht, abzuspeichern, nachdem Sie die Änderungen eingetragen haben Erstellung einer News-Kategorie Um eine solche Kategorie zu erstellen, wechseln Sie wieder in die Listenansicht des News- Ordners und erstellen dort analog zum vorigen Abschnitt einen neuen Datensatz namens Nachrichtenkategorie (rot umrandet). Vergeben Sie der Kategorie einen Namen und speichern Sie ab. Nun steht die Nachrichtenkategorie zur Nutzung zur Verfügung Bearbeiten einer bestehenden News Um eine bereits bestehende News anzupassen, navigieren Sie zur Listenansicht des News- Ordners. 86

87 Vergewissern Sie sich, dass bei der Option Erweiterte Ansicht (rot umrandet) der Haken gesetzt ist, damit die Symbole (blau umrandet) angezeigt werden. Die jeweilige News lässt sich mit einem Klick auf Datensatz bearbeiten Hilfe der anderen Symbole können Sie News-Einträge löschen, verbergen etc. bearbeiten. Mit Erstellung eines News-Archivs Möchten Sie den Betrachtern Ihrer Seite auch bereits archivierte News (standardmäßig älter als 180 Tage) gesondert anzeigen, so bietet sich die Einrichtung eines News-Archivs an. Natürlich können Sie auf der bereits eingerichteten Anzeige-Seite neben den neuen auch bereits archivierte News anzeigen lassen, allerdings empfiehlt es sich bei großem News-Aufkommen, evtl. die alten und bereits archivierten News auszugliedern in ein eigenes News-Archiv. Möchten Sie keine 180 Tage warten, bis die News automatisch archiviert werden, so können Sie diese auch über den News-Ordner einzeln bearbeiten. Im Reiter Spezial können Sie dazu manuell ein gewünschtes Archivdatum festlegen. 87

88 Zur Erstellung eines News-Archivs legen Sie zunächst am besten eine neue Seite an, z.b. News- Archivseite. Auf dieser Seite binden Sie ein News-Inhaltselement ein (siehe Abschnitt 6.1.1). Im Inhaltselement wählen Sie im Reiter Plug-In, Sub-Reiter Allgemeine Einstellungen unter Ansicht die Standard-Listenansicht (LIST) aus (rot umrandet). Außerdem ändern Sie unter Archiveinstellungen (für LIST-Ansicht) den Wert auf Zeige archivierte (blau umrandet). Im Reiter Sonstige Einstellungen tragen Sie außerdem entsprechend den bisherigen Ausführungen dieses Kapitels die Seite für die Einzelansicht und die Seite (bzw. den Ordner) mit den News-Datensätzen ein. Zusätzlich können Sie für das News-Archiv eine Suchfunktion zur Verfügung stellen. Dazu legen Sie unter/über dem bestehenden News-Inhaltselement auf der Archivseite ein weiteres News- Inhaltselement an. Wählen Sie diesmal im Reiter Allgemeine Einstellungen unter Ansicht die Option Suchformular mit Trefferliste (SEARCH) aus. Unter Archiveinstellungen (für LIST- Ansicht) wiederum Zeige archivvierte. Außerdem können Sie mit Sortiere Beiträge (LIST & LATEST) nach und Sortierreihenfolge eine nach vordefinierten Kriterien mögliche Auswahl bzgl. der Sortierreihenfolge auswählen (z.b. Datum/Zeit und Absteigend ). Im Reiter Sonstige Einstellungen geben Sie wiederum die Seite für die Einzelansicht und den News- Ordner in die bereits bekannten Felder ein. Im Frontend könnte das angelegte News-Archiv mitsamt Suchfunktion z.b. wie folgt aussehen: Unter News-Archiv werden alle archivierten News angezeigt. Unter Suche im News-Archiv werden in diesem Fall nur diejenigen News angezeigt, die das Wort amet beinhalten. 88

89 6.1.6 Erstellung einer News-Kachel Um eine Kachel mit laufenden Schlagzeilen zu erstellen, gehen Sie wie folgt vor: Wechseln Sie in die Seitenansicht der Seite, auf der Sie die Kachel einfügen möchten (bitte beachten Sie, dass die Kachel weitervererbt wird). Wählen Sie in einem der Kachel-Felder 1-3 nach einem Klick auf Neuen Datensatz an diesem Ort hinzufügen Kachel aus. das Element News- Wählen Sie im Reiter Allgemein den News-Ordner mit den Nachrichten und die Seite zur Anzeige der Einzelansicht aus. Nach dem Abspeichern und ggfs. dem Löschen des Caches wird die News-Kachel an der gewünschten Stelle angezeigt. 89

90 6.2 FAQ Um Ihren Webseitenbesuchern eine Übersicht über oft gestellte Fragen mitsamt Antworten zu geben, können Sie das FAQ-Plug-In (frequently asked questions) verwenden FAQ-Ordner erstellen Um dieses Plug-In verwenden zu können, erstellen Sie einen neuen Systemordner namens FAQ-Ordner. Die notwendigen Schritte zur Erstellung eines Systemordners entnehmen Sie bitte Abschnitt Wechseln Sie in die Einstellungen dieses Ordners. Im Reiter Verhalten wählen Sie bei der Option Enthält Erweiterung im Dropdown-Menü den Wert Moderne FAQ (rot umrandet) aus. Speichern Sie ab FAQ erstellen Um nun eine FAQ zu erstellen, wechseln Sie in die Listenansicht des FAQ-Ordners (in der Modulleiste Liste auswählen) und erstellen einen neuen Datensatz mit einem Klick auf Neuen 90

91 Datensatz erstellen aus.. Wählen Sie unter Moderne FAQ die Option FAQ (blau umrandet) Dort können nun im Reiter Allgemein die Frage und die Antwort in den entsprechend benannten Feldern eingegeben werden. Im Reiter Details können weiterführende Informationen hinzugefügt werden. So ist es z.b. möglich, in den beiden Feldern Frage gestellt von und Verwandte Links (einer pro Zeile) entsprechende Informationen als Freitext einzutragen. Über das Dropdown-Menü Ansprechpartner / Experte (grün umrandet) kann ein solcher, zuvor erstellter Eintrag ausgewählt werden. Abschnitt erläutert die Erstellung eines solchen Experten-Eintrages detailliert. 91

92 Unter Verwandte Einträge (rot umrandet) können Sie thematisch ähnliche FAQs hinzufügen, die später im Frontend als Link angezeigt werden. Klicken Sie dazu auf Datensätze durchblättern, navigieren Sie im Pop-Up-Fenster zum entsprechenden FAQ-Ordner und wählen Sie den gewünschten FAQ-Eintrag aus. Auf diese Weise können Sie mehrere FAQs hinzufügen. Weiterhin ist es möglich, die FAQ einer (oder mehreren) Kategorie(n) zuzuweisen. Dazu wählen Sie unter Kategorie (blau umrandet) die Option Datensätze durchblättern aus. Analog zum gerade erläuterten Hinzufügen von verwandten Einträgen navigieren Sie nun zum FAQ- Ordner und wählen die gewünschte Kategorie aus. Sie können nur solche Kategorien auswählen, die Sie zuvor bereits erstellt haben. Abschnitt widmet sich detaillierter der Erstellung von Kategorien. Haben Sie alle gewünschten Einstellungen getroffen, speichern Sie ab und löschen Sie in der Detailansicht der Seite, auf der die FAQs angezeigt werden, ggfs. den Cache mit einem Klick auf Cache dieser Seite löschen (das Symbol findet sich rechts oben unterhalb des Suchfeldes). Haben Sie noch keine Seite erstellt, auf der die FAQs angezeigt werden, so entnehmen Sie dies bitte Abschnitt FAQ-Kategorie erstellen Um eine Kategorie zu erstellen, wechseln Sie in die Listenansicht des FAQ-Ordners, klicken Sie auf Neuen Datensatz erstellen FAQ (rot umrandet) aus. und wählen Sie dort die FAQ-Kategorie unter Modern Geben Sie in der folgenden Eingabemaske einen Titel ein und speichern Sie ab. Die Kategorie ist nun erstellt und kann zu FAQ-Einträgen hinzugefügt werden (siehe Abschnitt 6.2.2) FAQ-Ansprechpartner bzw. Experten erstellen Die Erstellung eines Ansprechpartners bzw. Experten ist sehr ähnlich zu der gerade beschriebenen Erstellung einer FAQ-Kategorie. Wechseln Sie in die Listenansicht des Ordners, klicken Sie auf Neuen Datensatz erstellen" und wählen Sie unter Modern FAQ den Eintrag FAQ-Ansprechpartner / Experte aus. In der erscheinenden Eingabemaske können Sie Name, und eine URL festlegen. Speichern Sie ab, nachdem Sie alle benötigten Informationen hinzugefügt haben. 92

93 WICHTIG: Es kann sein, dass in einem bereits bestehenden FAQ-Ordner bereits FAQ, FAQ- Kategorien oder FAQ-Ansprechpartner /Experten angelegt wurden. In diesem Fall können Sie direkt an den entsprechenden Stellen in der Listenansicht des FAQ-Ordners die neuen Datensätze erstellen und müssen nicht erst ganz oben in der Listenansicht das Symbol Neuen Datensatz erstellen umrandet. auswählen. Die Möglichkeiten sind in nachfolgender Abbildung rot FAQ-Plug-In auf einer Seite platzieren Um nun die FAQ auf einer Seite anzuzeigen, muss ein neues Inhaltselement erstellt werden. Wechseln Sie in die Seitenansicht der entsprechenden Seite, klicken Sie auf Neuen Datensatz an diesem Ort hinzufügen und wählen Sie im Reiter Plug-In die Moderne FAQ aus. Wählen Sie dort im Subreiter Allgemein bei Ansicht die Option Dynamische Ansicht mit DHML (rot umrandet) und bei Ausgangspunkt (blau umrandet) mit einem Klick auf Datensätze durchblättern den FAQ-Ordner aus. Im Reiter Kategorien können Sie die Anzeige hierbei auf Kategorien beschränken. Nach dem Abspeichern und ggfs. Löschen des Caches werden die FAQ angezeigt. 93

94 6.2.6 FAQ-Anzeige im Frontend Die Anzeige im Frontend sieht beispielhaft wie folgt aus: Um einzelne Einträge aus- bzw. einzuklappen klicken Sie auf die jeweilige Frage. In der ausgeklappten Darstellung wird zunächst die Antwort angezeigt. Danach folgen Informationen zum Ansprechpartner bzw. Fragensteller, verwandte Einträge und verwandte Links. 94

95 6.3 Multikontakt-Formular Die Multikontakt-Formular-Extension stellt ein einfaches Kontaktformular mit den Feldern Ansprechpartner, Ihr Name, Ihre -Adresse, Betreff und Ihre Nachricht zur Verfügung, das Sie auf Ihrer Webseite einbinden können, um Nutzern die Möglichkeit zur Kontaktaufnahme zu geben. Das Multikontakt-Formular enthält keine -Adresse des Empfängers. Der Sendevorgang der Nachricht wird serverseitig abgewickelt. Die Vorteile hierbei sind, dass Schutz vor Spam besteht und der Webseitenbesucher zusätzlich eine Möglichkeit zur Kontaktaufnahme ohne - Programm (z.b. Outlook) erhält. Um ein Multikontakt-Formular auf Ihrer Seite einzubinden, ist es zunächst nötig, einen Systemordner mit einem (oder mehreren) Formularkontakt(en) zu erstellen. Die Schritte zur Erstellung eines Systemordners entnehmen Sie bitte dem entsprechenden Kapitel in dieser Broschüre. Wenn dieser angelegt ist, wählen Sie die Listenansicht in der Modulleiste aus und klicken anschließend auf das Symbol Neuen Datensatz erstellen. Klicken Sie danach in der Rubrik URT Multi Kontakt Formular auf den Unterpunkt Formularkontakte, um diesen auszuwählen. 95

96 In der erscheinenden Eingabemaske geben Sie nun den Namen und die -Adresse des Kontakts an (rot umrandet), der die Nachrichten, die über das Multikontakt-Formular gesendet werden, erhalten soll. Speichern Sie im Anschluss ab. Nachdem nun der Datensatz des Kontakts im Systemordner erstellt wurde, muss noch das eigentliche Multi-Kontaktformular-Plug-In auf der entsprechenden Seite eingefügt werden. Dazu wechseln Sie wieder in die Seitenansicht in der Modulleiste und navigieren zur gewünschten Seite, auf der das Plug-In platziert werden soll. Klicken Sie in der Detailansicht der Seite auf Neues Element anlegen. Wechseln Sie zum Reiter Plug-Ins und klicken Sie auf den Unterpunkt Allgemeines Plug-In. Um nun das Multikontakt-Formular einzubinden, wechseln Sie in den Reiter Plug-In (rot markiert) und wählen im Dropdown-Menü den Punkt URT Multi Kontakt Form. 96

97 Der letzte Konfigurationsaspekt, der nun aussteht, ist die Verknüpfung des Plug-Ins mit dem zuvor erstellten Systemordner mit den Formularkontakten im Fileadmin. Dazu klicken Sie im Reiter Verhalten (blau umrandet) auf das Ordner-Symbol und wählen im Popup-Fenster den entsprechenden Systemordner aus. Im Reiter Allgemein kann zusätzlich eine Überschrift für das Plug-In eingefügt werden. Speichern Sie ab und vergessen Sie nicht, das Multikontakt- Formular auf Funktionsfähigkeit zu überprüfen! Ein Tipp: Wenn Sie im angelegten Systemordner mehrere Datensätze mit Formularkontakten anlegen, kann der Benutzer später im Frontend per Dropdown zwischen den verschiedenen Ansprechpartnern wählen. 97

98 6.4 Geschützter Bereich Ein geschützter Bereich sind Webseiten, die erst nach einem erfolgreichen Login über das Frontend sichtbar werden. Sollten Sie geschützte Bereiche speziell für Studierende an der Universität Trier anlegen, um dort Materialien hochzuladen, bitten wir Sie eindringlich, das Stud.IP zu nutzen, da die Webseite der Universität nicht für diese Zwecke konzipiert ist. Stud.IP bietet hier weitergehende Unterstützung für Ihre Zwecke und bietet gleichzeitig eine Reihe von Möglichkeiten, die Ihnen in dieser Form nicht auf der Webseite zur Verfügung stehen. Bei Fragen rund um das Thema Stud.IP unterstützt Sie die Koordinationsstelle E-Learning. Webseite: Telefon: Systemordner für Website-Benutzer(gruppen) anlegen Falls noch nicht vorhanden, muss zunächst ein sogenannter Systemordner zum Anlegen der Website-Benutzer bzw. Benutzergruppen angelegt werden. Dazu erstellen Sie eine neue Seite. Während der Erstellung wählen Sie im Reiter Allgemein im Dropdown-Menü unter Typ die Option Ordner aus. Bestätigen Sie die erscheinende Abfrage mit OK. 98

99 Außerdem geben Sie dem Ordner im entsprechenden Feld einen Titel, z.b. WebsiteBenutzer. Den letzten Schritt, der zur Erstellung des Systemordners notwendig ist, führen Sie im Reiter Verhalten durch. Dort wählen Sie im Dropdown-Menü unter Enthält Erweiterung den Eintrag Website-Benutzer aus. Wenn alle notwendigen Konfigurationsschritte erfolgt sind, speichern Sie ab Website-Benutzergruppe(n) anlegen Bevor Sie einen Website-Benutzer anlegen können, muss eine übergeordnete Gruppe angelegt werden. Der Grund dafür ist, dass ein Benutzer unbedingt einer Gruppe angehören muss. Ansonsten lässt sich der Benutzer nicht abspeichern. Zum Anlegen einer Website-Benutzergruppe wählen Sie die Listenansicht des Systemordners aus, in welchem Sie die Gruppen und Benutzer anlegen wollen. In der Listenansicht wählen Sie zunächst die Option Neuen Datensatz erstellen. In dem sich öffnenden Fenster klicken Sie in der Kategorie Systemdatensätze auf Website- Benutzergruppe (rot umrandet). 99

100 Das einzige Feld, welches ausgefüllt werden muss, befindet sich im Reiter Allgemein. Unter Gruppenname vergeben Sie bitte einen Namen für die Website-Benutzergruppe, z.b. Konferenzen. Anschließend speichern Sie ab. Die Website-Benutzergruppe ist nun angelegt Website-Benutzer anlegen Das Anlegen eines Benutzers erfolgt auf die gleiche Art und Weise, wie das Anlegen der Gruppe. Über die Listenansicht des Systemordners wählen Sie erneut das Symbol Neuen Datensatz erstellen umrandet). aus. Als Datensatztyp wählen Sie diesmal Website-Benutzer aus (blau Zum Anlegen eines Website-Benutzers müssen im Reiter Allgemein der Benutzername (rot umrandet), das Passwort (schwarz umrandet) und eine Benutzergruppe aus der Liste der verfügbaren Objekte (orange umrandet) angegeben werden. Die ausgewählte Benutzergruppe wird Ihnen unter Ausgewählte Objekte (blau umrandet) angezeigt. 100

101 Einem Benutzer können, je nach Bedarf, auch mehrere Benutzergruppen zugeordnet werden, wenn es sinnvoll erscheint. Nachdem Sie abgespeichert haben, können Sie auf dem gleichen Weg optional weitere Benutzer anlegen Dateien im Fileadmin schützen Es ist zu beachten, dass alle Dateien, die nur berechtigten Besuchern zugänglich sein sollen, sich in einem speziellen Ordner im Fileadmin befinden müssen, da diese Dateien andernfalls z.b. über eine Google-Suche zugreifbar sind. Dieser Ordner muss SECURE heißen. Die Großschreibweise ist zu beachten. Alle Inhalte, die in diesem Ordner oder in tieferen Ebenen innerhalb dieses Ordners abgelegt sind, werden geschützt. Erst nach einem erfolgreichen Login auf Ihren Seiten wird der Link zu der geschützten Datei funktionieren Geschützten Bereich anlegen In TYPO3 ist es möglich, komplette Seiten oder nur einzelne Seiteninhaltselemente auf einer Seite vor ungewolltem Zugriff zu schützen. Dies erreichen Sie mittels eines geschützten Bereichs. Wenn Sie eine ganze Seite schützen wollen, legen Sie zuerst eine neue Seite - falls noch nicht vorhanden - an. In den Seiteneigenschaften legen Sie über den Karteireiter Zugriff unter Veröffentlichungsdaten und Zugriffsrechte fest, welcher/n Gruppe(n) der Inhalt der Seiten 101

102 angezeigt werden soll. Dazu wählen Sie die betreffende(n) Website-Benutzergruppe(n) aus der Liste der verfügbaren Objekte (rot umrandet) aus. Selbstverständlich können Sie dies auch für bereits angelegte Seiten oder Seiteninhaltselemente nachträglich einstellen. Nach dem Abspeichern ist der Inhalt der Seite für normale Website-Besucher nicht mehr sichtbar. Erst nach einem erfolgten Login innerhalb Ihres Webseitenbereichs wird der Inhalt für die entsprechende Benutzergruppe sichtbar. Im Backend wird dies durch ein entsprechendes Icon dargestellt. Bitte beachten Sie: Wenn Sie eine ganze Seite (z.b. im Bild die Seite Geschützter Bereich ) erst nach einem Login angezeigt werden soll, so muss das Loginfenster (siehe übernächster Abschnitt) logischerweise auf einer übergeordneten Seite platziert werden, die nicht im Zugriff beschränkt ist! Andernfalls hat der Besucher der Webseite keine Möglichkeit, sich für die betreffende Seite zu authentifizieren. 102

103 Auf der Login-Seite haben Sie dann z.b. die Möglichkeit, nach dem erfolgten Login ein Text- Element mit einem Link zu der geschützten Seite bereitzustellen. Sollen nur einzelne Seiteninhaltselemente auf einer Webseite erst nach einem Login sichtbar werden, so können die geschützten Elemente und das Loginfenster auf der gleichen Seite platziert werden! WICHTIG: Bitte achten Sie darauf, dass Sie in den Seiteneigenschaften einer geschützten Seite im Reiter Verhalten bei der Option In Indexsuche einbeziehen ein Häkchen bei Deaktivieren (rot umrandet) setzen, damit die geschützte Seite nicht über die TYPO3-interne Suche auffindbar ist Einzelne Inhaltselemente schützen Um einzelne Inhaltselemente erst nach einem Login anzuzeigen, wechseln Sie in die Einstellungen des Inhaltselements. Im Reiter Zugriff wählen Sie analog zur Vorgehensweise für ganze Seiten unter Veröffentlichungsdaten und Zugriffsrechte aus der Liste der verfügbaren Objekte die gewünschte Website-Benutzergruppe aus. Nach erfolgtem Abspeichern ist das Inhaltselement erst nach einem Login für die betreffende Website-Benutzergruppe sichtbar Loginfenster anlegen Falls noch nicht geschehen, muss jetzt noch ein Loginfenster bereitgestellt werden. Dies erfolgt über das Anlegen eines Seiteninhalts auf der gewünschten Seite. Über den Reiter Formulare erreichen Sie das Anmeldeformular. 103

104 In dem folgenden Eingabeformular müssen Sie nur noch eine Überschrift eingeben. Weitere Angaben sind nicht notwendig. WICHTIG: Nachdem Sie das Formular ausgefüllt und gespeichert haben, müssen Sie uns (TYPO3- Team) über diesen neuen Login informieren, damit dieser freigeschaltet werden kann! Bitte teilen Sie uns die entsprechende Seiten-ID des Logins und die ID des Systemordners mit, in dem die Website-Benutzer liegen, damit wir Ihre Anfrage schnellstmöglich bearbeiten können. Erst danach kann der Login genutzt werden. Bitte denken Sie daran, dass Sie das Login-Formular im Seitenbaum oberhalb der geschützten Seite anlegen müssen, falls Sie eine ganze Seite schützen möchten! Möchten Sie hingegen auf einer öffentlich zugänglichen Seite nur einige Inhaltselemente schützen, so genügt es, das Login-Formular auf dieser Seite anzulegen Intranet Wenn Sie Seiteninhalte oder ganze Seiten nur im Uni-Netz bereitstellen möchten, steht Ihnen die Website-Benutzergruppe "INTRANET" zur Verfügung. Bei dieser Gruppe sind kein Login und auch keine Benutzerkennung nötig. Der Webseitenbenutzer/-besucher wird anhand der IP-Adresse seines Rechners identifiziert. Sollte die IP des Webseitenbenutzers im IP-Bereich des Uni-Netzes sein, so wird der Webbenutzer automatisch dieser Gruppe zugeordnet und ist berechtigt, die Seiteninhalte und Seiten zu sehen, die nur für die Gruppe "INTRANET" freigegeben sind. Um den Zugriff auf diese Weise zu schützen, wählen Sie in den Seiteneigenschaften den Reiter Zugriff und dann aus dem Punkt Verfügbare Objekte den Eintrag INTRANET (rot umrandet) aus. 104

105 6.4.9 Seiteninhaltselement nach Login verstecken Es besteht die Möglichkeit, bestimmte Seiteninhaltselemente nach einem erfolgten Login nicht mehr anzeigen zu lassen. Dies ist z.b. sinnvoll, wenn Sie auf einer Seite, auf der sich geschützte Seiteninhaltselemente befinden, einen Hinweis einstellen wollen, dass der Besucher sich zuerst einloggen muss, um alle Inhalte zu sehen. Nach dem Login ist der Hinweis dann natürlich nicht mehr nötig und kann ausgeblendet werden. Um dies zu realisieren, müssen Sie innerhalb des Seiteninhaltselements im Reiter Zugriff unter Veröffentlichungsdaten und Zugriffsrechte die Option Nach Anmeldung verbergen auswählen. Speichern Sie ab. Analog können Sie Inhaltselemente erst anzeigen lassen, wenn der Benutzer angemeldet ist. Dazu wählen Sie die Option Anzeigen, wenn angemeldet aus. 105

106 6.5 Visitenkarten In diesem Abschnitt möchten wir Ihnen den Umgang mit dem Plug-In Visitenkarte erläutern. Dabei gibt es sowohl Visitenkarten für Uni-internes Personal, als auch externe Mitarbeiter. Das Anlegen beider Formen der Visitenkarten funktioniert annähernd identisch. Zunächst wählen Sie auf der Seite, auf der eine Visitenkarte platziert werden soll, in der Detailansicht die Option Neuen Datensatz an diesem Ort hinzufügen. Im nächsten Schritt wählen Sie im Reiter Plug-Ins die Visitenkarte mit einem Klick darauf aus. Im nachfolgenden Fenster können Sie im Reiter Allgemein eine Überschrift für die Visitenkarte in entsprechendem Textfeld eintragen. Alle weiteren notwendigen Einstellungen befinden sich im Reiter Plug-In. In den beiden folgenden Abschnitten werden nun die notwendigen Schritte zur Erstellung von Visitenkarten für Uni-internes Personal und externe Mitarbeiter einzeln erläutert Interne Visitenkarten Die Erstellung einer Visitenkarte für Uni-interne Mitarbeiter ist schnell und unkompliziert möglich. Dazu wählen Sie im Reiter Plug-In und im Sub-Reiter Allgemein unter Personen den gewünschten Datensatz aus. Sie können dazu sowohl im Dropdown-Menü (rot umrandet), als auch in angrenzender Freitextsuche (blau umrandet) eine Auswahl der Person treffen. Zusätzlich können Sie an dieser Stelle unter Link zur Seite einen solchen eintragen, der im Frontend über einen Klick auf Name oder Bild der Visitenkarte erreichbar wird (orange umrandet). 106

107 Weitere Einstellungen müssen für die Erstellung einer Visitenkarte von Uni-internem Personal nicht durchgeführt werden. Alle benötigten Daten werden automatisch aus dem PORTA-System importiert. Das jeweilige persönliche Bild (rot umrandet) kann unter hochgeladen bzw. abgeändert werden. Außerdem kann dort die Sprechstunde eingegeben werden. Sollten Ihre Daten z.b. veraltet sein, oder falsch angezeigt werden, so wenden Sie sich diesbezüglich bitte an die -Adresse Das TYPO3- Team selbst hat leider keine Möglichkeit die Daten abzuändern. Wir beziehen diese als 1:1- Export über eine Schnittstelle zum PORTA-System. Alternativ können Sie im Sub-Reiter Individualisierung selbst die falschen Daten anpassen und gleichzeitig diese an die Kontaktdatenänderungsstelle übermitteln. Dazu tragen Sie bitte in die entsprechenden Felder nur die Daten ein, die sich geändert haben und setzen Sie bei Die nachfolgenden Änderungen der Tel., Fax. oder des Raums an die Datenänderungsstelle senden einen Haken (blau umrandet). Bei Telefon und Fax genügt dabei die interne Durchwahl. Nach erfolgreichem Abspeichern werden die geänderten Daten automatisch übermittelt. 107

108 6.5.2 Externe Visitenkarte Um eine Visitenkarte für Uni-externes Personal anzulegen, wählen Sie im Reiter Plug-In und im Sub-Reiter Allgemein zunächst unter Personen die Option AAA Person nicht aufgeführt aus (rot umrandet). Optional geben Sie, analog zu den Uni-internen Visitenkarten, wieder einen Link zu einer Seite in entsprechendes Textfeld ein. 108

109 Da bei der externen Visitenkarte kein Import von Daten aus dem Bildmanagement und/oder dem PORTA-System erfolgen kann, ist es notwendig, diese Daten händig im Plug-In einzugeben. Im Sub-Reiter Allgemein können Sie zunächst (optional) ein Bild hinzufügen. Dazu klicken Sie auf Dateien durchblättern (rot umrandet) und wählen ein zuvor in die Dateiliste hochgeladenes Bild aus. Möglich sind dabei die Bildformate.jpg,.gif und.png. Bitte beachten Sie, dass das Bild quadratisch sein sollte, da es ansonsten evtl. verzerrt dargestellt wird. Die spätere Darstellungsgröße im Frontend beträgt genau 115*115px. Wechseln Sie nun in den Sub-Reiter Individualisierung. Dort geben Sie in die entsprechenden Textfelder alle gewünschten personenbezogenen Informationen ein. Eine Eintragung in das Feld Funktion ist dabei nicht notwendig das Plug-In setzt hier automatisch den Schriftzug EXTERN. Außerdem müssen bei Telefon und Fax nur die entsprechende Durchwahl innerhalb der Uni eingetragen werden. Achten Sie an dieser Stelle bitte darauf, dass Sie keinen Haken bei Die nachfolgenden Änderungen der Tel., Fax. Oder des Raums an die Datenänderungsstelle senden setzen es existiert schließlich kein PORTA-Datensatz zu Uni-externem Personal! 109

110 Vergessen Sie nicht, abzuspeichern, nachdem Sie alle gewünschten Eintragungen durchgeführt haben. Eine fertiggestellte externe Visitenkarte könnte im Frontend z.b. so aussehen: Visitenkarten von Uni-externem Personal unterscheiden sich dabei immer dadurch, dass bei Funktion der Wert EXTERN fest vorgegeben ist. 110

111 6.6 Diashow Im folgenden Kapitel möchten wir Ihnen die Einsatzmöglichkeiten des neuen Inhaltselements Diashow genau erläutern. Die Diashow ist ein intuitiv zu benutzendes und schnell einzurichtendes Inhaltselement, mit dessen Hilfe Sie den Besuchern Ihrer Seite eine einfache Bildergalerie zugänglich machen können Erstellen und Bearbeiten einer Diashow Um das Inhaltselement zu erstellen, navigieren Sie zunächst mit aktivierter Seitenansicht zu der Seite, auf der die Diashow platziert werden soll. In der Spalte Inhalt wählen Sie das Symbol Neuen Datensatz an diesem Ort hinzufügen aus. Im Reiter Typischer Seiteninhalt finden Sie nun die Diashow. Wählen Sie diese mit einem Klick aus. In der nun folgenden Ansicht können Sie zunächst im Reiter Allgemein unter Überschrift in vorhandenem Textfeld den Titel des neu anzulegenden Elements angeben. Wechseln Sie danach in den Reiter Bilder, welcher initial wie folgt aussehen sollte: Mit einem Klick auf Bild hinzufügen (rot umrandet) können Sie nun Ihre Diashow befüllen. Dazu öffnet sich ein Popup-Fenster mit dem Verzeichnisbaum der Dateiliste. Hier navigieren Sie zu dem Ordner, in den Sie zuvor das Bildmaterial hochgeladen haben. 111

112 Falls Sie nur ein Bild auswählen möchten, so können Sie mit einem Klick auf Zur Liste hinzufügen (rot umrandet) das betreffende Bild auswählen. Möchten Sie mehrere gleichzeitig hinzufügen, so markieren Sie die entsprechenden Checkboxen (blau umrandet) mit einem Klick. Wenn Sie alle Bilder ausgewählt haben, klicken Sie auf Auswahl importieren (orange umrandet) und die Bilder werden in das Inhaltselement übernommen. Das/die ausgewählte(n) Bild(er) wird/werden nun im Inhaltselement angezeigt. Mit einem Klick auf einen Eintrag in dieser Liste (z.b. direkt auf das Miniaturbild) können Sie nun Metainformationen hinzufügen. Dazu klappen die Felder Titel und Beschreibung aus. Ein erneuter Klick auf selbige Stelle klappt die Zusatzfelder wieder ein. 112

113 Standardmäßig wird der jeweilige Dateiname (ohne Endung wie z.b..jpeg) des Bildes (rot umrandet) im Diashow-Inhaltselement im Frontend verwendet, wobei Unterstriche (_) eine Wörtertrennung bewirken. Sie können dem Bild allerdings auch einen neuen Titel zuweisen. Dazu klicken Sie zunächst unter Titel die Checkbox Override an (blau umrandet) und fügen danach in der zugehörigen Textbox den neuen Titel ein. Analog können Sie für die Beschreibung vorgehen. Wir bitten Sie an dieser Stelle darauf zu achten, dass Sie eventuelle Copyright-Rechte berücksichtigen und ggfs. angeben! Wenn Sie alle Angaben hinzugefügt haben, speichern Sie die Diashow ab. Sollten Sie ein hinzugefügtes Bild aus der Liste löschen, oder deaktivieren wollen, so fahren Sie mit dem Mauszeiger über den entsprechenden Listeneintrag und es erscheinen drei Symbole am rechten Rand des Eintrags (rot umrandet). Diese heißen von links nach rechts Informationen anzeigen (gibt Metainformationen zum gewählten Bild aus), Datensatz löschen(!) (löscht das Bild aus der Liste) und Datensatz verbergen (verbirgt das Bild in der Frontend-Anzeige, löscht es aber nicht). 113

114 Eine weitere nützliche Funktion ist das Verschieben von einzelnen Listenelementen bzw. die Veränderung deren Reihenfolge untereinander. Dazu klicken Sie bei dem zu verschiebenden Bild auf Dieses Objekt verschieben (rot umrandet) am rechten äußeren Rand des Eintrags, halten den Mauszeiger gedrückt und bewegen den Eintrag mittels Drag & Drop-Prinzip an eine neue Stelle. Drag & Drop-Prinzip Eine letzte Option, die Sie noch einstellen können, findet sich im Reiter Bilder unter Verhalten, also direkt unter der Liste der hinzugefügten Bilder. Dort können Sie einstellen, ob die fertige Diashow Klick-Vergrößerungen der einzelnen Bilder erlauben soll, oder nicht. Falls dies gewünscht ist, so setzen Sie bei Aktiviert mittels Klick auf die Checkbox einen Haken. Speichern Sie ab, wenn Sie alle gewünschten Einstellungen bzw. Änderungen durchgeführt haben Diashow-Kachel Die Diashow lässt sich nicht nur als Inhaltselement in der mittleren Spalte, sondern auch als Kachel-Element verwenden. Dazu erstellen Sie entweder in Kachel 1, 2, oder 3 das Element Diashow. Wie Sie ein Kachel- Element anlegen können entnehmen Sie bitte dem entsprechenden Kapitel dieser Broschüre. Die Handhabungen bzw. notwendigen Plug-In-Einstellungen sind zu 100% identisch mit denen des Inhaltselements für die mittlere Spalte, das in vorangegangenem Abschnitt erläutert wurde Diashow im Frontend Auch wenn die Erstellung der Diashow für die mittlere Spalte und Kachel identisch ist, so unterscheiden sich allerdings die dazugehörigen Frontend-Layouts. Das Inhaltselement der mittleren Spalte sieht wie folgt aus: 114

115 Im oberen Bereich wird das jeweilige Bild einschließlich Titel und Beschreibung im unteren Bereich (blau umrandet) angezeigt. Die Bilder sollten eine Größe von mindestens 600*450px (Breite*Höhe) haben, damit sie vollflächig dargestellt werden. Sind sie kleiner, so wird entsprechend fehlende Größe mit einem schwarzen Hintergrund versehen. Das Bild wechselt automatisch alle 6 Sekunden. Im unteren Bereich (orange umrandet) befindet sich die Navigationsleiste mit Vorschaubildern. Der Benutzer kann hier mit einem Klick ein Bild auswählen, welches sofort angezeigt wird. Die Reihenfolge der automatischen Anzeige geht dabei von links nach rechts. Wird ein neues Bild mit einem Klick ausgewählt, so verschiebt sich das dazugehörige Miniaturbild in der Navigationsleiste in die Mitte (siehe Koala im Foto), sodass ggfs. weitere folgende Bilder der Diashow in der Navigationsleiste sichtbar werden. Ist die Klick-Vergrößerung aktiviert, so wird das gerade angezeigte Bild bei einem Klick auf den oberen Bereich größer dargestellt. Zusätzlich kann das Bild in vergrößerter Darstellung über das Symbol Download rechts unten heruntergeladen werden. Die Darstellung der Diashow-Kachel hat folgendes, leicht reduziertes Aussehen: 115

116 Die Bilder werden automatisch auf die Kachelgröße eingepasst, der Bildtitel ist weiterhin unten zu sehen. Auf der linken und rechten Seite des Bildes sind Pfeil-Symbole, die zur Navigation genutzt werden können (rot umrandet). 116