TYPO3 an der WSF: Anleitungen für Redakteure

Transkript

1 TYPO3 an der WSF: Anleitungen für Redakteure Daniel Becker Alexander Conrad Universität Rostock, Fakultät für Wirtschafts- und Sozialwissenschaften (WSF), Institut für Volkswirtschaftslehre version 0.9 Januar 2009 mit kleinen Korrekturen, Stand: 6. Mai 2009 Aktuelle Fassungen dieser Anleitung(en) finden Sie unter tutorial/. Sie dürfen die Anleitungen und andere Inhalte, die Sie hier vom Server der Wirtschafts- und Sozialwissenschaftlichen Fakultät herunterladen können, weiterverbreiten und auch weiterverarbeiten, solange 1) Sie die Quelle deutlich sichtbar nennen 2) Sie uns mitteilen, dass Sie das machen 3) die Inhalte nicht kommerziell nutzen 4) Ein analoges Lizenmodell zu diesem verwenden. Im Zweifel gilt die CreativeCommons-Lizenz Attribution- Noncommercial-Share Alike 3.0 Unported, siehe Lehrstuhl für Außenwirtschaft. Lehrstuhl für Geld und Kredit. 1

2 Inhaltsverzeichnis Über diese Anleitungen 5 1 Die Anmeldung und die Nutzerrechte 6 Willkommen! Die Anmeldung (erste Möglichkeit) Die Anmeldung (zweite Möglichkeit) Frontend & Backend Übersicht über die TYPO3-Werkzeuge Nutzer mit einem einfachen Benutzerprofil Nutzer mit einem fortgeschrittenen Benutzerprofil Nutzer mit einem Administratoren-Zugang Was passieren kann: Zertifikat akzeptieren Wie geht es weiter? Mal schnell was ändern Das Verändern bestehender Texte und anderer Inhalte 16 4 Das Anlegen eines neuen Textelements 23 Vorbemerkung Schritt 1: Die Anmeldung bei Typo Schritt 2: Das Auswählen der zu bearbeitenden Seite Schritt 3: Das Erstellen eines neuen Inhaltes die Symbole Schritt 4: Das Erstellen eines neuen Inhaltes die Auswahl des Inhaltstyps Schritt 5: Das Erstellen eines neuen Inhaltes der neue Inhalt Schritt 6: Die englischen Seiten Fortgeschrittene Optionen für Inhaltselemente (Rahmen, Datum, nach oben, zeitgesteuertes Ein- und Aublenden...) Am Ende: Abmelden Das Löschen, Verschieben oder Erstellen ganzer Seiten 42 Vorbemerkung Schritt 1: Melden Sie sich bei Typo3 / bei Ihren Seiten an Schritt 2: Löschen einer Seite Schritt 3: Verschieben einer Seite Schritt 4: Anlegen einer neuen Seite Schritt 5: Die englische Version der Seite anlegen Schritt 6: Eine bestehende/neue Seite in einen externen Link verwandeln (Oder: Es gibt auch andere Seitentypen als Standard ) Schritt 7: Abmelden Das Kopieren eines bereits bestehenden Inhaltselements 54 Vorbemerkung Schritt 1: Die Anmeldung bei Typo Schritt 2: Auswahl des zu kopierenden Inhaltselements Schritt 3: Kopieren eines Inhaltselements Schritt 4: Einfügen des kopierten Inhaltselements Schritt 5: Das Kopieren und Einfügen eines weiteren Elements Schritt 6: Die erweiterte Ansicht im Listen-Modul Schritt 7: Abmelden

3 7 Das Anlegen einer neuen Tabelle im RichTextEditor Vorbemerkung Schritt 1: Von der Anmeldung bis zur Auswahl der richtigen Seite Schritt 2: Die Auswahl des Inhaltstyps Schritt 3: Einfügen der Tabelle Schritt 4: Die Tabellenbearbeitung Zum Schluss Das Hochladen und Verlinken von Dateien 71 Vorbemerkung Anmeldung Dateiliste Neuen Ordner anlegen Datei hochladen Datei löschen Datei verschieben und kopieren Datei Verlinken Größere Mengen an Daten hochladen per.zip-archiv Abmelden Bilder in TYPO3 (RichTextEditor & Elemente Text mit Bild, Bilder Vorbemerkung Ein Bild in einem RTE-Text einfügen Bessere Wahl: Ein Bild mit dem Text mit Bild -Inhaltselement Element Bilder Eine Nachricht auf die Institutsseite stellen und an andere Bereiche der WSF- Webseite weitergeben Einige Hinweise bevor es losgeht Schritt 1: Anmeldung und Auswahl des Nachrichten-Formulars Schritt 2: Einen neue Nachricht eintragen Nachrichtentext, Überschriften etc. eingeben Formular, Teil 1: Titel, Zeiten, Anleser, Haupttext Wenn Sie manche Optionen nicht sehen Formular, Teil2: Die Nachricht einordnen Richtiges Archivieren, vor allem bei Terminen und Veranstaltungen Fertig! Wenn Sie später etwas ändern Anzeigebeispiele Tabellen als Inhaltselement (ohne RichTextEditor) 106 Vorbemerkung Eine einfache Tabelle erzeugen Der Tabellen-Editor Layout-Möglichkeiten Fortgeschrittenes Layout Daten aus Excel Den Inhalt eines Ordners im fileadmin zum download anbieten (Filelist-Element) Vorbereitungen Schritt 1: Das neue Inhaltselement anlegen Schritt 2: Konfiguration des Elements filelist / Dateiverweise

4 12.4 Die Optik verändern Die Liste aktuell halten Eine Datei hinzufügen Eine Datei ersetzen Spezielle Inhaltselemente und Seitentypen (Sitemap, Datensatz einfügen / einblenden, Verweis / Shortcut,...) Vorbemerkung / Übersicht Inhaltstyp Sitemap Inhaltstyp Reines HTML Inhaltstyp Mail-formular Inhaltstyp Überschrift Inhaltstyp Datensatz einfügen / einblenden Seitentyp Verweis / Shortcut Seitentyp SysOrdner Inhalte, die nur Administratoren ändern / einbauen können

5 Über diese Anleitungen Im Sommer 2007 haben einige Mitarbeiter des Instituts für VWL begonnen, die Webseiten des Instituts und der VWL-Lehrstühle zu überholen und auf TYPO3 umzustellen. Im August 2007 gingen die neuen Seiten des Instituts dann online. Nach und nach haben wir zusammen mit engagierten Kollegen die Seiten der Verwaltung der WSF (insbesondere Studien- und Prüfungsamt) und des Instituts für Soziologie und Demographie umgestaltet und auf TYPO3 umgestellt. Das Institut für BWL hat mit der Umstellung begonnen. Und das Institut für Politikund Verwaltungswissenschaften arbeitet schon länger mit TYPO3, so dass wir kurz davor stehen, dass die WSF einen einheitlichen Webauftritt hat. Zumindest was die technische Seite angeht. Unser Hauptaugenmerk lag nicht unbedingt beim Design und der Optik der Seite, sondern bei der Benutzbarkeit für die Mitarbeiter, die die Inhalte pflegen sollen. Hier haben wir einiges erreicht, im Vergleich zum Sommer Die WSF-Webseite wird von vielen Kolleginnen und Kollegen laufend aktuell gehalten und die Erfahrung zeigt, dass es nur wenig Schwierigkeiten gibt, den Umgang mit TYPO3 zu erlernen. Dieses Dokument versammelt alle Anleitungen, die wir über die Zeit für die Kolleginnen und Kollegen an der WSF geschrieben haben, die mit TYPO3 arbeiten. Wir hoffen, dass mit ihrer Hilfe auch diejenigen den Umgang mit TYPO3 erlernen können, die nicht eine unserer Schulungen besucht haben oder uns direkt fragen können. Viel Spaß mit TYPO3! Daniel Becker & Alexander Conrad Rostock, Januar 2009 PS: Wenn Sie Fehler in diesen Anleitungen finden, oder etwas besser erklärt haben wollen, dann freuen wir uns über ihre Hinweise. (Zumindest solange wir noch an der Fakultät sind.) 5

6 1 Die Anmeldung und die Nutzerrechte Willkommen! Herzlich willkommen bei der ersten Anleitung zur Verwendung von TYPO3 an der Wirtschaftsund Sozialwissenschaftlichen Fakultät! In dieser Anleitung lernen Sie, wie man sich bei TYPO3 anmeldet. Eine Anmeldung ist Voraussetzung dafür, dass man Inhalte der Webseite der Fakultät / Ihres Instituts / Ihres Lehrstuhls verändern kann. Sie benötigen zur Arbeit mit TYPO3 nicht mehr als zum Surfen im Internet. Wir empfehlen den Mozilla Firefox in seiner aktuellsten Version. Den können Sie sich kostenlos unter http: // herunterladen und installieren. Wenn Sie den Internet Explorer von Microsoft verwenden, dann bitten wir Sie darum, möglichst die aktuellste Version zu benutzen und alle Sicherheits-Updates zu machen, die Microsoft anbietet. 1.1 Die Anmeldung (erste Möglichkeit) Um Inhalte auf den Internetseiten Ihres Lehrstuhls verändern zu können, müssen Sie nicht in Ihrem Büro sein. Sobald Sie über einen Internetbrowser einen Weg in das Internet gefunden haben, steht Ihnen gemäß Ihrer Ausstattung mit Nutzerrechten der gesamte Funktionsumfang von Typo3 zur Verfügung. Rufen Sie einfach Ihren Internetbrowser auf und geben Sie den folgenden Seitennamen ein: Es öffnet sich ein Anmeldefenster. Geben Sie hier den Nutzernamen und das Passwort ein, dass Sie für diesen Zweck unterhalten haben. 1 1 Sie benötigen dafür spezielle Nutzerdaten, die Sie beim Administrator der WSF-Webseite erhalten. Es ist bisher noch nicht möglich, sich einfach mit dem Account des Rechenzentrums anzumelden. 6

7 Bestätigen Sie die Eingabe Ihrer Daten mit Log In. Es öffnet sich die Benutzeroberfläche von TYPO Die Anmeldung (zweite Möglichkeit) Auf jeder Seite der WSF-Homepage sehen Sie unten so etwas: In der ersten Zeile sehen Sie, wer für die Seite inhaltlich verantwortlich ist (in diesem Fall der Dekan der WSF). Ausserdem, wann die Seite zuletzt aktualisiert wurde und von wem. In der Mitte finden Sie einige Links, die zur Überprüfung der Seite dienen und die wir aus Repsekt vor einem Copyright beibehalten. Ganz unten dann finden Sie eine Reihe von hilfreichen Links für die redaktionelle Arbeit: anmelden und bearbeiten: Wenn Sie diesen Link benutzen, schalten Sie nach einer Anmeldung wie oben einen Bearbeitungsmodus ein, der sich dadurch zu erkennen gibt, dass auf der Seite kleine Bleistifte zu sehen sind. Wir erklären dies in einer späteren Anleitung noch genauer. Zur Typo3-Oberfläche: Öffnet die TYPO3-Oberfläche in einem neuen Fenster Typo3-Hilfen: Bringt Sie auf eine Seite, auf der wir alle Anleitungen (Sie lesen die erste!) zu TYPO3 gesammelt haben und noch einiges mehr Abmelden: Ermöglicht Ihnen das bequeme Abmelden 1.3 Frontend & Backend Bei der Arbeit an der Webseite der WSF sind immer zwei Ansichten zu unterscheiden: Die Webseite der WSF ist zunächst einmal das, was jeder x-beliebige Besucher der Seite sieht, wenn er eine Adresse anwählt, die mit beginnt. Im TYPO3-Jargon nennt man dies auch das Frontend (das, was vorne herauskommt). Eine Frontendansicht ist zum Beispiel: 7

8 Im Hintergrund arbeitet TYPO3. Es gibt eine eigene TYPO3-Benutzeroberfläche. Diese heisst im TYPO3-Jargon Backend und sieht zum Beispiel so aus: Das Prinzip ist immer: Änderungen die Sie in TYPO3 vornehmen (im Backend ) haben letztlich den Zweck, dass man diese auf der Webseite zu sehen bekommt (im Frontend ). Für einfache Arbeiten müssen Sie die Arbeitsoberfläche von TYPO3 oft nicht öffnen (siehe die nachfolgenden Anleitungen), aber oft ist es sinnvoll, zwei Fenster offen zu halten, einmal eines mit der eigentlichen Webseite ( Frontend ) und ein zweites mit dem Backend. 8

9 Tip zum effektiven Arbeiten Der Mozilla Firefox (und auch alle anderen Browser halbwegs neueren Datums) bieten eine Funktionalität an, die hierbei hilfreich ist: Tabs. Damit können Sie mehrere Fenster in einem zusammenfassen: Möglicherweise müssen Sie diese Funktionalität erst einschalten, zum Beispiel so: Wenn Sie mit der rechten Maustaste auf einen Link klicken, dann wird Ihnen meistens angeboten, den Link in einem neuen Tab zu öffnen. Das Nutzen von Tabs ist kein Muss, aber auf Dauer sehr hilfreich! 1.4 Übersicht über die TYPO3-Werkzeuge Wir haben drei Nutzerprofile (einfach, fortgeschritten, Administrator) angelegt und diese mit unterschiedlichen Nutzerrechten ausgestattet. Außerdem können Sie nur die Seiten verändern, für die Sie schreibberechtigt sind. Die Nutzerin vwl-erogge zum Beispiel hat ein einfaches Nutzerprofil. Der Vorteil ist, dass Ihre Typo3-Oberfläche recht übersichtlich ist: 9

10 1.4.1 Nutzer mit einem einfachen Benutzerprofil Auf der linken Seite sind einige der Module (oder Werkzeuge) zu sehen, die nötig sind, um in TYPO3 Inhalte zu bearbeiten. Wählt man zum Beispiel das Modul Seite aus, dann erhält vwl-erogge diese Ansicht: vwl-erogge bearbeitet die Seiten des Instituts für VWL, des LS Außenwirtschaft und die Nachrichten. Ausserdem kann Sie sich auf der gesamten Webseite der WSF umsehen (aber nicht schreiben). Im sogenannten Seitenbaum findet sich jeweils ein Ast für diese Bereiche. Mit den kleinen Pluszeichen kann man den Baum auf- und zuklappen. (Im Bild ist der Baum des LS Außenwirtschaft teilweise aufgeklappt.) Oben rechts gibt es die Möglichkeit, sich aus TYPO3 wieder abzumelden. Wichtig ist vor allem für frisch angemeldete Redakteure das Modul Einstellungen. Hier können Sie unter anderem ihr Passwort ändern. Eine gute Idee. Bitte verwenden Sie nicht einfach ihren Vornamen als Passwort. Groß- und Kleinschreibung wird unterschieden. Ein gutes Passwort ist nicht zu kurz und enthält sowohl Buchstaben wie auch Zahlen, aber keine Sonderzeichen. Die Administratoren kennen ihr Passwort nicht, können Ihnen aber ein neues geben, wenn Sie ihr altes vergessen haben. 10

11 Jeder Lehrstuhl und auch das Institut haben einen eigenen Bereich, um Dateien (pdf s etwa) zur späteren Verwendung abzulegen. Diesen kann man einsehen, in dem man auf Dateiliste drückt. Dort kann man Ordner anlegen, Dateien ablegen etc. Auch hierzu ein Bild: Den Inhalt der verschiedenen Ordner sieht man, indem man sie links auswählt. Der markierte Pfeil rechts oben bringt einen eine Ebene höher. Die Benutzung der Module (Werkzeuge) wird später erklärt Nutzer mit einem fortgeschrittenen Benutzerprofil Nutzer mit einem fortgeschrittenen Benutzerprofil bekommen weitere Werkzeuge an die Hand. Das erste Fenster, dass sich nach der Anmeldung in dertypo3-oberfläche öffnet, erklärt kurz den Zweck der verschiedenen Module. Später erklären wir, wozu sie die verschiedenen Module benutzen können Nutzer mit einem Administratoren-Zugang Diese Nutzer dürfen einfach alles. Zum Beispiel das Layout der Seite verändern, die Funktionalität der Webseite erweitern, neue Nutzer anlegen und Passwörter vergeben. 11

12 Falls Sie im Laufe Ihrer Arbeit mit Typo3 feststellen, dass Sie zusätzliche Rechte und/oder Werkzeuge brauchen, sagen Sie uns bitte Bescheid. Anpassungen sind selbstverständlich möglich! 1.5 Was passieren kann: Zertifikat akzeptieren In seltenen Fällen (zum Beispiel wenn ihr Computer neu ist), dann könnte es Ihnen passieren, dass beim ersten Anmelden eine Warnmeldung wie diese zu sehen ist: Das ist kein Grund zur Beunruhigung - akzeptieren Sie dieses Zertifikat einfach dauerhaft. Sie können es sich vorher auch ansehen: 12

13 Achten Sie darauf, dass das Zertifikat vom Rechenzentrum der Uni Rostock ausgestellt wurde. Unter diesem Link finden Sie die Zertifikate der Uni Rostock, die vom Deutschen Forschungsnetz (DFN) ausgestellt wurden und die Sie dort herunterladen können. Auf den Seiten des Rechenzentrums finden Sie hierzu weitere Erklärungen. 1.6 Wie geht es weiter? Jetzt haben Sie einen ersten Überblick darüber, wie TYPO3 aussieht. In der nächsten Anleitung erklären wir Ihnen, wie man Inhalte verändert, ganz auf die Schnelle. Dann, in der dritten Anleitung, das Ganze etwas ausführlicher. In der vierten Anleitung wird dann erklärt, wie man neue Inhalte erstellt. Bitte fahren Sie mit der zweiten Anleitung fort. Wir wünschen Ihnen viel Spaß und Erfolg! Versionshistorie dieser Anleitung: : Ergänzung Zertifikat (DB) : Überarbeitung, LATEX (DB) : Ergänzung Benutzerrechte, zweite Anmeldevariante (DB) August 2007: erste Fassung (AC) 13

14 2 Mal schnell was ändern dauert keine drei Minuten. So geht s: 1. Auf der Seite, auf der was geändert werden soll, unten den link anmelden und bearbeiten auswählen: 2. Anmelden 3. Dort, wo etwas falsch ist, auf den Bleistift drücken: 14

15 4. Es öffnet sich ein pop-up-fenster, das ähnlich wie MSWord funktioniert. Jetzt wird geändert. Und los... Wenn alles korrigiert ist, auf den Speichern-Knopf drücken (den mit dem Kreuz, dann geht das pop-up Fenster gleich wieder zu) 5. Am Ende noch auf abmelden drücken (der Ordnung halber). Dann verschwinden die Bleistifte. FERTIG! 15

16 3 Das Verändern bestehender Texte und anderer Inhalte 3.1 Das Verändern bestehender Texte Das folgende Beispiel erläutert eine effiziente Methode zur Veränderung von Inhalten: Sie befinden sich auf den Internetseiten Ihres Lehrstuhls und stellen fest, dass der Name des Gastredners falsch geschrieben oder dass ein falsches Datum für den Gastvortrag angegeben wurde. Was müssen Sie also tun, um aus Herrn Beker einen Herrn Becker bzw. aus dem einen zu machen? Erster Schritt: Lassen Sie die Seite offen, auf der Sie die Änderung vornehmen möchten. Wir nennen diese Seite nachfolgend Inhaltsseite. Klicken Sie unten auf der Seite auf den Link anmelden und bearbeiten. Sie werden zum Anmeldefenster von Typo3 umgeleitet. Sobald Sie ihre Zugangsdaten eingegeben haben, werden Sie wieder auf die Inhaltsseite zurückgeschickt. 1 Zweiter Schritt: Wie Sie sehen, sind unter den Überschriften, Bildern und Texten kleine Bleistifte erschienen (neben Gastvortrag oder unter Alexander Conrad). 1 Dies ist der schnellste Weg. Es gibt auch die folgende Alternative: Öffnen Sie ein weiteres Browserfenster (unter Datei neues Fenster bzw. Strg+N) oder einen neuen Tab (unter Datei neuer Tab bzw. Strg+T) und melden Sie sich bei Typo3 an (siehe Punkt 1.1.). Die neue Seite nennen wir Typoseite. Wechseln Sie wieder zur Inhaltsseite, auf der Sie die Veränderung vornehmen wollen. Laden Sie die Inhaltsseite erneut (z.b. über Ansicht neu Laden oder Seite aktualisieren häufig auch über Strg.+R). 1 16

17 Jeder Bleistift ist mit einem Inhalt verbunden. So stellt die Überschrift Gastvortrag einen Inhalt dar und der gesamte Text Sehr verehrte... Mit freundlichem Gruß, Alexander Conrad stellt einen weiteren Inhalt dar. Dritter Schritt: Zum Korrigieren des falschen Namens bzw. Datums brauchen Sie nun lediglich den Bleistift unter dem Text anklicken, woraufhin das folgende Fenster geladen wird: 2 17

18 Es erscheint das Textelement in einer Schreibumgebung, auf die wir gleich genauer eingehen werden. An dieser Stelle reicht bereits der Hinweis darauf, dass sich diese Schreibumgebung fast wie das bekannte Microsoft Word verhält. Vierter Schritt: Klicken Sie nun einfach in dieses Bearbeitungsfenster - in den zu ändernden Text hinein und ändern Sie den Namen oder das Datum. Fünfter Schritt: Sie haben die Änderung vorgenommen? Dann müssen Sie den veränderten Inhalt nur noch speichern. Dafür können Sie die kleinen Disketten-Symbole links oben im Bearbeitungsfenster verwenden: das dritte Symbol bedeutet Speichern und Schließen. Sechster Schritt: Sie werden feststellen, dass das Bearbeitungsfenster verschwindet und die Inhaltsseite neu geladen wird. Der Name bzw. das Datum erscheint nun richtig, der Fehler wurde behoben. Letzter Schritt: Die Bleistifte bleiben solange auf der Inhaltsseite sichtbar, bis Sie sich von Typo3 abgemeldet haben. Der einfachste Weg, sich abzumelden ist dieser: Klicken sie auf abmelden am Fuß der Seite. Die Bleistifte verschwinden wieder. 3.2 Das Verändern von bestehendem Text in Tabellen Analog zur Vorgehensweise unter 2.1. lassen sich die Inhalte bestehender Tabellen verändern. Betrachten Sie die folgende Abbildung. 3 18

19 Aus der Mikroökonomie-Vorlesung soll ein Mikroökononomie-Hauptseminar gemacht werden. Erster Schritt: Anmeldung bei Typo3, so dass Sie die Bleistifte sehen. Siehe oben. Auf die Inhaltsseite zurückkehren und die Seite erneut laden/aktualisieren. Die Bleistifte erscheinen neben/unter den jeweiligen Inhalten Zweiter Schritt: Klicken Sie den Bleistift neben/unter dem zu ändernden Inhalt an. Der Bleistift für den Inhalt Tabelle befindet sich in der Zelle Übung Makroökonomie. Das Bearbeitungsfenster wird geladen: Dritter Schritt: Klicken Sie in die Zelle Vorlesung Mikroökonomie und machen Sie aus der Vorlesung ein Hauptseminar: 4 19

20 Vierter Schritt: Speichern Sie den veränderten Inhalt über das Disketten-Symbol (das dritte Symbol speichert und schließt das Bearbeitungsfenster). Fünfter Schritt: Das Inhaltsfenster wird erneut geladen, die angepasste Tabelle wird angezeigt. Sechster Schritt: Melden Sie sich wieder ab, siehe oben (link abmelden unten auf der Seite) 3.3 Das Verändern von Text in bestehenden Bildern Internetseiten werden häufig neben Texten und Tabellen auch mit Bildern dekoriert. Das nachfolgende Beispiel verdeutlicht Ihnen, wie Sie zu Bildern gehörenden Text verändern können. Annahme: Sie wollen den Text unter dem Bild des Fakultätsgebäudes verändern. 5 20

21 Erster Schritt: Bei Typo3 anmelden, siehe oben. Zweiter Schritt: den Bleistift neben dem Text Das Fakultätsgebäude anklicken Dritter Schritt: Es erscheint das Bearbeitungsfenster. Unter dem Menüpunkt Bildtext finden Sie den Eintrag Das Fakultätsgebäude. Diesen können Sie nun ändern. Vierter Schritt: Sie haben den Text in Die Bäume vor dem Fakultätsgebäude abgeändert. Bei dieser Gelegenheit fällt Ihnen auf, dass der Bildtext nicht mittig sitzt. Ändern Sie dies doch einfach: Unter dem Menüpunkt Justierung wählen Sie dazu Mitte aus. Fünfter Schritt: 6 21

22 Speichern Sie Ihre Änderung über das Disketten-Symbol und melden Sie sich bei Typo3 ab. Versionshistorie dieser Anleitung: 10. September 07: Anpassungen Anmeldung August 2007: Erste Version 7 22

23 4 Das Anlegen eines neuen Textelements Vorbemerkung In den Anleitungen 2 und 3 wurde beschrieben, wie bestehende Inhalte ohne viel Aufwand verändert werden können. Häufig reicht dies aber nicht aus und es müssen Inhalte ersetzt, gelöscht oder neu angelegt werden. Die nachfolgenden Beschreibungen werden Ihnen zeigen, wie man einen neuen Textblock erstellt. Für das Einfügen von Tabellen und von Bildern gibt es separate Anleitungen. 2 Wir empfehlen ihnen dringend, den Webbrowser Firefox 3 für die Arbeit im RichTextEditor zu benutzen. Wir testen die Arbeit mit der TYPO3-Installation der WSF mit diesem Webbrowser. Wenn Sie unbedingt den Browser Internet Explorer von Microsoft benutzen wollen, dann achten Sie bitte darauf, dass Sie eine aktuelle Version benutzen. 4.1 Schritt 1: Die Anmeldung bei Typo3 Laden Sie die Seite und melden sich bei Typo3 an. Anders als für das einfache Verändern von bestehenden Inhalten reicht eine Anmeldung im Front End -Bereich nicht mehr aus, sondern wir arbeiten innerhalb der Typo3-Umgebung, ohne uns auf die Bleistiftsymbole zu verlassen. Nach der Anmeldung wird nun die Typo3-Arbeitsoberfläche geladen, die Ihnen gemäß Ihren Benutzerrechten bestimmte Funktionalitäten zur Verfügung stellt: 2 Die Anleitung zur Arbeit mit Bildern fehlt noch. 3 Den können Sie unter kostenlos herunter laden. 23

24 Typo3 startet immer mit diesem Fenster. Auf der linken Seite befinden sich verschiedene Menüpunkte, welche die für die Arbeit mit Typo3 wichtigen Funktionalitäten gruppieren. Das für uns in diesem Punkt wichtigste Menü heißt Seite. In der Mitte der Typo3-Arbeitsoberfläche finden Sie einige Informationen zu diesem aber auch zu den übrigen Menüpunkten. Übrigens: Am Fuß jeder Seite gibt es einen Link, der Sie zur Arbeitsoberfläche von Typo3 bringt. Das soll Ihnen das Anmelden, Wechseln zur Typo3-Arbeitsoberfläche und das Abmeldem erleichtern. Ausserdem finden Sie dort einen Link zu den Anleitungen, von denen Sie eine gerade lesen. 24

25 Tip am Rande: Was hat es eigentlich mit diesem Frontend / Backend auf sich? Mit dem TYPO3-Frontend ist die eigentliche Webseite gemeint, also das, was jeder sehen kann, der die Homepage der WSF oder Ihres Lehrstuhls besucht. Wenn Sie bei TYPO3 angemeldet sind und ausserdem Schreibrechte für den Bereich haben, den Sie sich ansehen, dann erscheinen im Frontend die Bleistifte, die Sie schon kennengelernt haben (Anleitungen 2 und 3): Hier sehen Sie eine Seite im Frontend. Der angemeldete Nutzer hat Schreibrechte, deshalb sieht man Bleistifte: Mit dem TYPO3-Backend ist die Arbeitsoberfläche von TYPO3 gemeint. Hier sieht man dieselbe Seite wie oben im Backend : Während der Arbeit mit TYPO3 ist es meistens sinnvoll, zwei Fenster offen zu halten: Eines mit dem Backend, eines mit dem Frontend. Hierzu können Sie zwei Tabs im Firefox nutzen: 25

26 4.2 Schritt 2: Das Auswählen der zu bearbeitenden Seite Sie haben sich also gerade bei TYPO3 angemeldet. Klicken Sie doch einfach einmal auf den Menüpunkt Seite links oben in der Liste. Wie Sie feststellen werden, wird nun gleich neben der linken Menüleiste ein Seitenbaum geladen. Es wird die Startseite der WSF aufgeführt und diejenigen, für die Sie Schreibrechte haben. Im Beispiel sind das zwei Lehrstühle: Die Seiten werden in einer so genannten Baumstruktur angezeigt. Mit den kleinen Plus können Sie den Seitenbaum aufklappen (dann wird aus dem Plus ein Minus: Ganz oben können Sie den Namen der Hauptseiten erkennen, zum Beispiel Außenwirtschaft die Startseite des Lehrstuhls für Außenwirtschaft. Die Einträge darunter Team, Lehre, Forschung, usw. bilden die zweite Ebene, die auf den Internetseiten (Frontend!) als horizontales Menü angezeigt wird. Die von dieser Ebene ausgehenden Seiten Prof. Dr. Rauscher, Wissenschaftliche Mitarbeiter,... bilden die dritte Ebene, danach kommt die vierte Ebene und so weiter. Die Anordnung dieser Seiten im TYPO3-Seitenbaum bestimmt, wie die Navigationsmenüs auf der Webseite aussehen. Sie müssen sich nicht darum kümmern, dass ihre Seiten in den Menüs angezeigt werden, das macht TYPO3 für Sie. Hier sehen Sie, wie der Seitenbaum als Menü umgesetzt wird: 26

27 In unserem ersten Beispiel soll auf der Seite Studentische Hilfskräfte eine neue Studentische Hilfskraft eingetragen werden. Wir wählen also im Seitenbaum die entsprechende Seite: 4.3 Schritt 3: Das Erstellen eines neuen Inhaltes die Symbole Wie Sie sehen können, wird die angewählte Seite mit einem dunkleren Grau unterlegt und der Seitenname fettgedruckt dargestellt. Rechts neben dem Seitenbaum erscheinen nun die Inhalte, die bereits auf der Seite Studentische Hilfskräfte vorhanden sind. Dabei sind die Inhalte in verschiedene Spalten gruppiert. Es werden die Spalten LINKS, NORMAL und RECHTS aufgeführt. Inhalte in der Spalte Normal werden im zentralen mittleren Bereich der Seite angezeigt. Inhalte in der Spalte links werden links unterhalb des Menüs und Inhalte in der Spalte rechts auf der rechten Seite angezeigt. In der Mehrzahl der Fälle werden die Inhalte der Webseite im Bereich Normal eingefügt. Die Spalte NORMAL stellt auf der Internetseite den meisten Platz für Text, Tabellen und Bilder zur Verfügung, was durch die Platzaufteilung in der Spaltenübersicht bereits angedeutet wird. Aber weiter: Sie können sehen, dass die Spalte NORMAL bereits einen Inhalt besitzt, der für die studentische Hilfskraft Peter Pan wurde. Auch die Spalte RECHTS besitzt einen Inhalt, in diesem Fall ist es ein Bild. 27

28 Das Bild zeigt die dazugehörige Internetseite. In der Spalte NORMAL das ist also der Bereich in der Mitte sind die beiden bereits vorhandenen Einträge zu sehen und das Bild befindet sich rechts daneben, eben im Bereich für die Spalte RECHTS. Dieselbe Seite im Backend sieht so aus: Schauen wir uns nun einen bestehenden Inhalt näher an. Wir erkennen folgende wichtige Elemente: Die Überschrift Peter Pan, die in der Spaltenansicht fett hervorgehoben wird und sich auf der Internetseite über der blauen Linie befindet. Darunter können wir den Text lesen, der zu diesem Inhaltselement gehört. In diesem Fall ist es ein kurzer Text und die -Adresse von Herrn Pan. Wir sehen auch eine Reihe von Symbolen: Einen Bleistift, den Sie bereits kennen und der auf die Möglichkeit hinweist, einen bestehenden Inhalt anzupassen. Der Bleistift ermöglicht es also, eine bestehendes Inhalselement zu verändern. Rechts daneben sehen wir einen Notizblock mit einem grün umrandeten Plus. Hiermit lassen sich schließlich neue Inhalte anlegen, was wir im nächsten Schritt zeigen werden. Es fällt auch die Mülltonne auf, hinter der sich die Möglichkeit verbirgt einen bestehenden Inhalt unkompliziert zu löschen. Aber Vorsicht: Gelöschte Inhalte lassen sich nicht so einfach wieder herstellen! Es geht zwar, ist aber umständlich. Links neben der Mülltonne befindet sich eine Glühbirne. Wenn diese gelb leuchtet, dann bedeutet das, dass der Inhalt auf der Internetseite nicht angezeigt wird. Diese Option könnten Sie beispielsweise dann wählen, wenn Sie einen Inhalt erstmal nicht mehr anzeigen wollen, aber später vielleicht doch wieder. 28

29 Auf Seiten mit mehreren Inhalten gibt es noch Pfeilsymbole: Mit diesen lässt sich die Reihenfolge der verschiedenen Elemente verändern. 4.4 Schritt 4: Das Erstellen eines neuen Inhaltes die Auswahl des Inhaltstyps Nun steht dem Anlegen eines neuen Eintrages nicht mehr viel im Weg. Wir müssen uns nur noch entscheiden, an welcher Stelle der neue Eintrag eingefügt werden soll. Wir wissen, dass das Drücken des Notizblockes mit dem grün umrandeten Plus zu einem neuen Eintrag führt. Wir müssen uns nun nur noch vor Augen führen, dass der neue Inhalt stets nach demjenigen Eintrag eingefügt wird, dessen Notizblock+ wir gedrückt haben. Drücken wir dasjenige vom Peter Pan Eintrag, wird der neue Inhalt an zweiter Stelle der Webseite angezeigt werden. Unser neuer Eintrag soll aber an erster Stelle stehen, weshalb wir das Notizblock+ wählen, das ganz oben ohne Eintrag abgebildet wird: Klickt man auf dieses Plus, dann erscheint eine Auswahlseite mit verschiedenen möglichen Inhaltstypen: Unter typischer Seiteninhalt finden wir Normaler Text, Text mit Bild und Nur Bild. Es sind dort noch weitere Inhaltstypen aufgelistet, doch wie Sie noch sehen werden, lassen sich mit den ersten drei Typen fast alle Wünsche verwirklichen. Unser neuer Eintrag soll ein Text werden, wir wählen entsprechend den Typ Normaler Text aus. 29

30 4.5 Schritt 5: Das Erstellen eines neuen Inhaltes der neue Inhalt Nach der Auswahl von Normaler Text öffnet sich ein neues Fenster mit verschiedenen Reitern: Orientieren wir uns hier erstmal etwas. Es finden 4 sich (siehe Nummerierung im Bild.) 1. FÜR ALLE: Knöpfe zum Schliessen des Fensters ohne Speichern (Kreuz), zum Speichern, wobei die Seite offen bleibt (Diskette), zum Speichern und gleichzeitigen Schliessen der Seite (Diskette und Kreuz), und zum Speichern und Wechseln in ein neues Fenster mit Anzeige des Frontends (Diskette und Lupe). 2. FÜR ALLE: Ein Feld um eine Überschrift für das neue Inhaltselement festzulegen. 3. OPTIONAL: Ausserdem kann hier das Format der Überschrift festgelegt werden und ob über der Überschrift ein Datum angezeigt wird. 4. OPTIONAL: Wählt man nach oben aus, dann wird nach dem Inhaltselement ein Link angezeigt, der zurück zum Beginn einer Seite führt. Dies ist für Seiten mit viel Inhalt sinnvoll. 5. FÜR ALLE: Neben dem Reiter Allgemein gibt es noch zwei weitere: Text (hier werden wir gleich den Text eintragen) und Zugriff (dazu später mehr). 6. FÜR FORTGESCHRITTENE: Hier könnten Sie nachträglich ihre Auswahl des Inhaltstyps von eben revidieren also statt normaler Text etwas anderes. 7. FÜR FORTGESCHRITTENE: Hier können Sie verändern, in welcher Sprache Sie schreiben und in welcher Spalte. Ausserdem können Sie Abstände vor und nach dem Inhaltselement eintragen (in Pixeln) und dem Element einen Rahmen geben. Der Knopf Index 4 Falls Sie weniger Möglichkeiten in Ihrem Fenster sehen, überprüfen Sie, ob bei Ihnen ganz unten im Fenster die zweite Optionspalette angeschaltet ist: 30

31 ist standardmäßig angeschaltet und legt fest, ob der Inhalt, den Sie schreiben, von der Suchfunktion der WSF-Seite gefunden werden kann oder nicht. Fürs erste ist hier erstmal nur wichtig, eine Überschrift einzutragen die anderen Möglichkeiten zeigen wir unten (Seite 38.). Unsere neue Studentische Hilfskraft heißt Donald Duck, entsprechend benennen wir die überschrift. Der Name wird auf der Internetseite fettgedruckt in Kapitälchen über der blauen Linie als überschrift des neuen Textinhaltes angezeigt. Jetzt ist ein guter Moment, um das neue Seitenelement zu speichern, zum Beispiel mit der Diskette Bearbeitung offen lässt., die speichert, aber das Element zur weiteren Wenn Sie das gemacht haben, wechseln Sie in den Reiter Text. Sie sehen dann die Wordähnliche Schreibumgebung von TYPO3. Hier werden wir jetzt einen Text eintragen - erstmal nur die -adresse von Herrn Duck. 31

32 Sie werden feststellen, dass sich die Schreibumgebung fast genauso wie das bekannte Microsoft Word verhält. Die zur Schreibumgebung gehörenden Symbole werden Ihnen demnach auch nicht fremd sein. Es gibt Symbole, mit denen sich Text fett (B), kursiv (I) oder unterstrichen (U) darstellen lässt. Text lässt sich zudem hoch oder tief stellen, links, zentriert, rechtsbündig oder als Block definieren. Es sind Aufzählungen mit Zahlen oder Symbolen möglich und und und. Auch das Rückgängigmachen von Arbeitsschritten ist vorgesehen Sie erkennen sicher die beiden blauen Pfeile wieder! Diese Schreibumgebung kann aber noch mehr: in den nächsten Punkten werden wir Ihnen zeigen, wie hiermit Bilder und ganze Tabellen eingefügt werden können und Sie werden feststellen, dass sich die Arbeit mit dieser Umgebung oft nur wenig von der mit Word unterscheidet. Die Überschrift haben wir eingegeben und auch den Text. Nun muss der neue Inhalt nur noch gespeichert und die Schreibumgebung geschlossen werden. Hierzu drücken Sie das aus Punkt 2 bekannte Diskettensymbol mit dem Kreuz oben links. Anschließend werden alle Elemente der Seite in der bereits bekannten Spaltenansicht dargestellt. Wie Sie sehen können: Der neue Eintrag steht wie vorgesehen an erster Stelle in der Spalte NORMAL : 32

33 Mit der markierten Lupe können wir uns die Seite im Frontend anzeigen lassen. 5 (Alternativ öffnen Sie einfach den zweiten Tab oder das Fenster, in dem Sie das Frontend anschauen können und laden es neu. Sie sehen, wie die Seite jetzt aussieht: Wie sie sehen, sieht die neu eingetragene -adresse noch anders aus als die alten. Und: Man kann sie noch nicht anklicken. Wenn Sie in der Schreibumgebung auf das Symbol für das Einfügen von Links klicken für links klicken (markieren Sie vorher den Text mit der - Adresse), 5 Wenn Sie eine PopUp-Blocker verwenden, müssen Sie evtl. PopUps für erlauben. 33

34 dann öffnet sich folgendes Fenster: Wählen Sie den Reiter aus. 6 Hier können sie aus dem reinen Text einen Link machen, indem Sie die -adresse eintragen. TYPO3 übernimmt es dann, die Darstellung des links auf der Seite so zu gestalten, dass Empfänger von -adressen gegen missgünstige Versender von -werbung geschützt sind. 6 Die anderen Reiter dienen dazu, links auf andere Seiten der WSF, auf Dateien oder auf externe www-adressen einzufügen. 34

35 Nachdem Sie auf Link setzen geklickt haben, sehen Sie wieder die Schreibumgebung. Speichern Sie und schauen Sie sich die Seite im Frontend an. (Geschickt ist es, dafür den - Knopf zu nutzen.) Die -adresse wird jetzt als Link und mit dem erwähnten Schutz vor Spam- s angezeigt. 4.6 Schritt 6: Die englischen Seiten Schließlich soll auch auf den englischen Seiten auf die neue Studentische Hilfskraft verwiesen werden. Vorausgesetzt es besteht schon eine Version dieser Seite in englischer Sprache, ist die Übersetzung des neuen Elements ins Englische mit nur ein paar Klicks möglich. Öffnen Sie die Seite wieder im TYPO3-Backend mit der Ansicht der Spalten links/rechts/normal: 35

36 Oben finden Sie zwei (siehe Markierung) zwei Ausklappmenüs. Das linke steht auf Spalten. Das rechte steht auf Sprache: Standard. Wir befinden uns immer noch auf der Seite Studentische Hilfskräfte, auf der uns die in deutscher Sprache vorhandenen Inhalte angezeigt werden. Nun wollen wir uns auch die bereits bestehenden englischen Inhalte anzeigen lassen. Dies müssen wir Typo3 durch Auswahl im entsprechenden Menü mitteilen Typo3 soll also die Ansicht wechseln. Zurzeit befinden wir uns in der Spaltenansicht. Wir verwenden das linke Menü und wählen dort den Punkt Sprachen aus: Was hat sich verändert? Die Spalten werden nicht mehr nebeneinander sondern untereinander dargestellt. Außerdem gibt es neben der Übersicht über die Inhalte in deutscher Sprache (der linke Bereich wird mit Standard überschrieben deutsch wurde als Standard definiert) eine Übersicht über die vorhandenen Inhalte in englischer Sprache (die rechte Seite wird mit englisch überschrieben). Auch hier sind die Inhalte in den bekannten Spalten gruppiert: 36

37 TYPO3 ist beim übersetzen behilflich und erkennt, wenn es deutsche Inhalte gibt, die noch nicht ins Englische übersetzt worden sind. Dies zeigt Typo3 mit der Option Standard-Inhalte kopieren [1] an. In den eckigen Klammern steht die Anzahl der noch nicht übersetzten Inhalte in unserem Fall ist das genau eins. Wir können nun entweder wie zuvor beschrieben per Hand einen zusätzlichen Eintrag für die neue Studentische Hilfskraft in englischer Sprache anlegen, wozu wir dieselbe Prozedur wie bei deutscher Sprache durchführen (der neue Inhalt wird im Bereich englisch in der Spalte NORMAL an der entsprechenden Stelle über Notizblock+ angelegt). Wir können aber auch eine Abkürzung nehmen und klicken einfach auf die von Typo3 aufgezeigte Option Standard-Inhalte kopieren [1]. hierauf werden (gemäß der Zahl in den eckigen Klammern) alle deutschen Inhalte in die englische Spalte dupliziert und alle für den deutschen Inhalt bereits festgelegten Einstellungen einfach übernommen. Wir müssen nun nur noch den Text übersetzen. Nachdem wir Standard-Inhalte kopieren [1] angeklickt haben findet sich in der englischen Verison der Seite ein neues Element: 37

38 Typo3 erinnert uns mit [Translate to english] daran, dass der Text noch nicht übersetzt wurde. Wir können nun entweder im Backend Bereich über den Bleistift oberhalb des Eintrages zu Friederike Hoffmann die Änderung vornehmen oder über das Front End ebenfalls mithilfe der kleinen Bleistifte wie in Punkt 2 beschrieben den Text anpassen. Auf der englischen Seite finden sich das neue Element, das noch nicht übersetzt wurde: 4.7 Fortgeschrittene Optionen für Inhaltselemente (Rahmen, Datum, nach oben, zeitgesteuertes Ein- und Aublenden...) Wenn Sie schon etwas mehr Erfahrung haben, oder experimentierfreudig sind, können Sie noch die oben (Seite 30) schon erwähnten zusätzlichen Möglichkeiten beim Anlegen eines neuen Inhaltselements nutzen. Die meisten Elemente im Reiter Allgemein, Abschnitt Typ sind wohl selbsterklärend. Wenn Sie ihre Maus aug die kleinen Fragezeichen bewegen erhalten Sie auch kleine Hilfetexte. 38

39 Etwas besonderes sind die Auswahlmöglichkeiten unter Rahmen. Hier können Sie zusätzliche Layout-Möglickeiten für das gesamte Element festlegen. Wählen Sie etwa Blauer Hintergrund aus, dann sieht das Element so aus: Noch interessanter ist graue Box (float links). Wählt man dies (hier habe ich das Bild-Element auf der rechten Seite vorher gelöscht und die Überschriften etwas anders formatiert...) Möchte man, dass der Fliesstext erst nach dem Textkasten erscheint, dann wählt man für das Element mit der Überschrift Peter Pan als Rahmen volle Breite (kein float) aus: Eine etwas sinnvollere Verwendung dieser Rahmen sehen Sie hier: 39

40 Hinter dem Reiter Zugriff verbirgt sich noch die Möglichkeit, das Inhaltselement nur während eines bestimmten Zeitraums anzuzeigen. Im Bespiel wird das Element nur vom angezeigt. Die Möglichkeit, Inhalte nur für bestimmte Nutzergruppen anzeigen zu lassen wird an der WSF bisher nicht weiter genutzt. 4.8 Am Ende: Abmelden Wie in Punkt 2 bereits beschrieben, erfolgt die richtige Abmeldung über den Logout-Knopf rechts oben in der Typo3-Arbeitsoberfläche. 40

41 Alternativ können Sie sich auch im Frontend abmelden: Versionshistorie dieser Anleitung: : Korrektur Bild 22 (DB) : Komplette Neufassung wegen neuer RTE-Konfiguration (DB), Ergänzungen, neue Screenshots wegen 4.1 -> : Neue Links zum Ein- und Ausloggen, Tabellen raus (AC) 08.07: erste Fassung (AC) 41

42 5 Das Löschen, Verschieben oder Erstellen ganzer Seiten Vorbemerkung In dieser Anleitung wird beschrieben, wie eine bestehende Seite gelöscht und eine neue Seite angelegt wird. Außerdem wird gezeigt, wie eine Seite in einen Link auf eine externe Seite verwandelt wird. Beispiel: Sie wollen auf Ihren Lehrstuhlseiten einen neuen Mitarbeiter einrichten. 5.1 Schritt 1: Melden Sie sich bei Typo3 / bei Ihren Seiten an Das sollten Sie mittlerweile schon kennen: 5.2 Schritt 2: Löschen einer Seite Öffnen Sie über die Option Seite den Seitenbaum. Sie sehen all jene Seiten, für die Sie eine Berechtigung besitzen. Der neue Mitarbeiter Donald Duck gehört zum Lehrstuhl Außenwirtschaft und wird den Mitarbeiter Falscher Fuffziger ersetzen. Hier der Seitenbaum, bevor wir irgendwas gemacht haben: Klicken Sie mit der rechten oder linken Maustaste auf das kleine Dokumentsymbol links neben dem Namen der Seite, die Sie löschen möchten (Falscher Fuffziger) und warten Sie bitte einen Moment, bis das nachfolgende Menü erscheint! Wenn Ihnen das nicht beim ersten Versuch gelingt, versuchen Sie es nochmal. In TYPO3 ist es ein wichtiger Unterschied, ob man auf das 42

43 Symbol (oben markiert) oder auf den Seitentitel (rechts daneben) klickt. Das klicken auf ein Symbol wie hier ruft ein Kontextmenü auf, das in diesem Fall so aussehen sollte: Wenn Sie die übrigen Typo3-Hilfen ausprobiert haben, dann werden Ihnen die Symbole bereits bekannt vorkommen. Zum Löschen der Seite verwenden wir Löschen Mülltonnensymbol. Sie werden aufgefordert das Löschen der Seite mit OK zu bestätigen. ACHTUNG: Wenn Sie eine Seite löschen, dann löschen Sie natürlich auch alle Inhaltselemente, die sich auf dieser Seite befunden haben! Der Seitenbaum wird neu geladen und Sie sehen, dass die Seite Falscher Fuffziger verschwunden ist: Das war es, was man zum Entfernen einer Seite braucht. 43

44 Tip am Rande: Das Kontextmenü, dass Sie eben aufgerufen haben, beinhaltet auch andere interessante Punkte wie, die sie wenn Sie eine fortgeschrittener Nutzer oder experimentierfreudig sind bei Gelegenheit mal ausprobieren können. Wenn Sie zum Beispiel für die Oberseite Wissenschaftliche Mitarbeiter den Menüpunkt Verlauf / Rückgängig anzeigen lassen, dann sehen Sie das TYPO3-eigene Werkzeug zum rückgängig machen: 5.3 Schritt 3: Verschieben einer Seite Der falsche Fuffziger ist ja ein ehemaliger Mitarbeiter. Vielleicht sollte die Seite ja nicht komplett gelöscht werden, sondern nur verschoben? Wenn Sie im Kontextmenü, in dem Sie eben auf Löschen geklickt haben, auf Ausschneiden klicken, dann passiert erst einmal nichts. Wenn Sie aber jetzt erneut auf eine Seitensymbol klicken hier auf die Seite Ehemalige, dann ist das Kontextmenü um zwei Punkte umfangreicher: Einfügen in und Einfügen nach. Mit Einfügen in können Sie dafür sorgen, dass die Seite Falscher Fuffziger unter der Seite Ehemalig eingesetzt wird: Hier der neue Seitenbaum: 44

45 Wenn Sie jetzt noch den Falschen Fuffziger hinter Herrn Frey einsortieren wollen, dann benutzen Sie Einfügen nach Schritt 4: Anlegen einer neuen Seite Nun erstellen wir die Seite des neuen Mitarbeiters Donald Duck. Dazu wählen wir mit der rechten oder linken Maustaste diejenige Seite an, unter der die neue Seite eingerichtet werden soll. Wir suchen also die Oberseite - diese heißt hier Wissenschaftliche Mitarbeiter und beherbergt die Unterseiten der Mitarbeiter Becker, Bruder und Klugert (früher auch die des falschen Fuffzigers). Nach Klick auf diese Oberseite und einigen Momenten Geduld erscheint das bereits bekannte Kontextmenü: Wir wählen Neu bzw. das dazu gehörige Symbol und es erscheint ein weiterer Dialog: 45

46 Zum Anlegen einer neuen Seite können wir das Angebot nutzen und den Assistenten aufrufen. Der Assistent möchte zuerst wissen, an welcher Stelle die neue Seite eingefügt werden soll: In unserem Fall soll die Donald Duck unter derjenigen von Frau Bruder angelegt werden. Wir klicken daher auf den kleinen Pfeil unterhalb der Seite von Frau Bruder. Es erscheint ein weiterer Dialog, in dem wir der Seite einen Titel geben werden und weitere Dinge einstellen: 46

47 Das Feld Seitentitel ist ein Pflichtfeld. Interessant sind ausserdem noch die Felder Untertitel und Speaking URL path segment. Wir tragen einen kurzen Beschreibungstext ein und ein Kurzwort, dessen Bedeutung wir gleich sehen werden: Jetzt sollten Sie die neue Seite abspeichern, mit einem der Disketten-Symbole. Der Seitenbaum wird neu geladen und wir stellen fest, dass die neue Seite an der gewünschten Stelle erscheint. Nun können wir diese Seite wie gewohnt bearbeiten (also mit Inhalten füllen). Das Feld Untertitel wird manchmal benutzt, um Übersichten wie diese hier (Sitemap -> Menü der Unterseiten mit Inhaltsangabe) zu erstellen: 47

48 Das Feld Speaking URL path segment bestimmt die Adresse in der Titelzeile: falls es nicht ausgefüllt ist wird, wird das Feld Untertitel genutzt, sonst alias, sonst Seitentitel. Wenn Sie besonders aufmerksam sind, dann haben Sie gesehen, dass die Seiten Team und Wissenschaftliche Mitarbeiter im Seitenpfad nicht auftauchen. Die Adresse der Seite ist nicht sondern Dies liegt daran, dass auf den Seiten Team und Wissenschaftliche Mitarbeiter der Haken bei Seite in Mitte einer URL auslassen gesetzt wurde. Diese Möglichkeit, zusammen mit Speaking URL path segment gibt Ihnen die Möglichkeit, relativ kurze Adressen zu erzeugen. Natürlich müssen die Adressen eindeutig sein. Würde ein Mitarbeiter mit dem Namen rauscher eingestellt, würde das zu Konflikten führen. Wenn Ihre Änderungen an den Adressen der Seiten nicht sofort wirksam werden, dann sollten Sie den sog. Cache (den internen Speicher von TYPO3 leeren bzw. zurücksetzen. Dies können Sie mit dem Blitz rechts oben: 5.5 Schritt 5: Die englische Version der Seite anlegen Wenn Sie sich die Seite im Frontend ansehen, dann fällt auf, dass die kleine englische Fahne fehlt, die anzeigt, dass man sich die Seite auch auf englisch ansehen kann: 48

49 Das liegt daran, dass überhaupt noch keine englische Version der Seite existiert! Schauen wir im Backend nach. (Siehe dazu auch ausführlicher die Anleitung 4 zum Anlegen von Textelementen.) Wir suchen die Seite im Seitenbaum und wechseln in die Ansicht, bei der die Sprachen angezeigt werden: (zur Erinnerung: Sie müssen dafür oben im Ausklappmenü Sprachen wählen.) Wie man sieht gibt es auf der Seite noch keine Inhalte. Und: Es gibt auch noch keine englische Version der Seite. Wählen Sie oben unter Neue Übersetzung dieser Seite anlegen: englisch als Sprache aus. Es öffnet sich ein neues Fenster: 49

50 TYPO3 möchte jetzt wissen, wie die bisher getätigten Einträge auf englisch lauten. In grün sehen Sie als Erinnerung die deutschen Texte. Wir tragen die englischen Texte ein und speichern die ab, zum Beispiel mit. In der Sprachenansicht sieht man jetzt, dass es eine englische Variante der Seite gibt: Schauut man sich die Seite im Frontend an, dann gibt es jetzt zwei Sprachvarianten. 50

51 Deutsch: Englisch: Achtung: Beide Varianten der Seite haben noch keine Inhalte. Die können Sie jetzt anlegen, wie das geht steht in Anleitung 3. Fangen Sie mit den deutschen Inhalten an und übersetzen Sie danach. Idealerweise sollten Sie immer dann, wenn Sie bei den deutschen Texten etwas ändern, dies auch bei den englischen tun. 5.6 Schritt 6: Eine bestehende/neue Seite in einen externen Link verwandeln (Oder: Es gibt auch andere Seitentypen als Standard ) (Dieser Abschnitt stammt aus einer älteren Version dieser Anleitung, deshalb ein anderer Lehrstuhl als Beispiel.) Herr Siebe vom Lehrstuhl Mikro hat einen guten Kontakt zur Steinbeis-Hochschule und möchte, dass auf seiner Lehrstuhlseite im horizontalen Menü ein externer Link auf diese Hochschule eingetragen wird. Wie wir wissen, werden auf dem horizontalen Menü unserer Internetseiten die Hauptseiten des Lehrstuhls angezeigt (Team, Lehre, Forschung usw.). Deren Unterseiten erscheinen dann jeweils im linken vertikalen Menü. Wir können es uns daher sehr einfach machen und zur Lösung der Aufgabe einfach eine neue Seite anlegen, die wir Steinbeis-Hochschule nennen. 51

52 Die neue Seite soll vor der bestehenden Seite Links erscheinen. Wir wählen also die Oberseite Mikroökonomie mit der Maustaste unserer Wahl an und warten, bis uns das Menü angezeigt wird. Nun wählen wir Neu bzw. das dazugehörige Symbol und es erscheint der Dialog, der uns die Möglichkeit bietet den Assistenten zum Anlegen einer neuen Seite aufzurufen. Das machen wir. Wir klicken auf den kleinen Pfeil unterhalb der Seite Download und es erscheint ein letzter Dialog, der uns auffordert der neuen Seite einen Namen zu geben. Wir nennen die Seite Steinbeis-Hochschule. Bevor wir speichern, wollen wir diesen Dialog nutzen, um aus dieser Seite einen externen Verweis auf zu machen. Dazu wählen wir in diesem Dialog unter Typ die Option Externe URL aus. Es folgt ein Hinweis darauf, dass sich diese Änderung auf unsere bisherigen Eingaben auswirkt. Gegebenenfalls müssen wir nachher noch einmal den Seitentitel eingeben. 52

53 Wir geben den Seitentitel also erneut ein und zusätzlich tragen wir unter URL die Internetseite ein, auf die die neue Seite verweisen soll, also Abschließend speichern wir wieder mit der Diskette. Wenn wir nun auf die Internetseite des Lehrstuhls gehen, können wir im horizontalen Menü den neuen Eintrag erkennen und ihn auch betätigen - wir werden dann zur SteinbeisHochschule umgeleitet: Abgesehen vom Seitentyp Standard und Link zu externer URL könnte für Sie ach der Seitentyp Verweis von Interesse sein. Mit diesem kann man Seiten erzeugen, die nur auf andere Seiten in der WSF verweisen. Schliesslich gibt es noch den Typ Sysfolder, den man zum Beispiel dafür nutzen kann, Seiten aufzuheben. 5.7 Schritt 7: Abmelden Bitte melden Sie sich ordnungsgemäß bei Typo3 ab, wenn Sie fertig sind. Versionshistorie dieser Anleitung: : ergänzt um Übersetzung (DB) : Ergänzungen, neue screenshots, LATEX (DB) : erste Fassung (AC) 53

54 6 Das Kopieren eines bereits bestehenden Inhaltselements Vorbemerkung In diesem Punkt wird beschrieben, wie Sie ein bestehendes Inhaltselement (Text, Tabelle, Bilder) kopieren und an einer gewünschten Stelle einfügen. Beispiel: Wir haben einen neuen Mitarbeiter Nico Singer - Lehrstuhl Mikro für den bereits eine Seite erstellt wurde (siehe Anleitung 5 der Typo-Hilfen). Auf dieser Seite sollen die Kontaktdaten, der Lebenslauf und weitere Details abgespeichert werden, wobei wir bereits bestehende Inhaltselemente verwenden möchten. 6.1 Schritt 1: Die Anmeldung bei Typo3 Laden Sie die Seite und melden sich bei Typo3 an. Oder verwenden Sie den Link am Ende jeder Seite: 6.2 Schritt 2: Auswahl des zu kopierenden Inhaltselements Wir haben bereits einige Vorlagen für das Anlegen eines neuen Mitarbeiters erstellt, die Sie unter finden. (Sie können aber auch andere Elemente kopieren, irgendwo auf der Webseite.) Wählen Sie die Seite Neuer Mitarbeiter im Seitenbaum der WSF aus (WSF Startseite > Institute > Institut für Volkswirtschaftslehre > HowTo s Website > Vorlagen). Sie sehen in der schon bekannten Spaltenansicht die verschiedenen Elemente, die wir dort vorgefertigt habe. Als erstes möchten wir das Element Kontaktdatenäuf die Seite von Herrn Singer übertragen. Um es einfacher kopieren zu können, wechseln Sie bitte in das Modul Liste links im TYPO3- Werkzeuge-Menü: 54

55 Hinweis: Haben Sie zuvor noch nicht die Seite mit dem zu kopierenden Inhaltselement angewählt, dann machen Sie dies bitte jetzt. Andernfalls wird Ihnen dies im mittleren Bereich der Typo3-Oberfläche nicht angezeigt. 6.3 Schritt 3: Kopieren eines Inhaltselements Sie sehen, dass die verfügbaren Vorlagen in Listenform angezeigt werden. Nun klicken Sie mit der linken oder rechten Maustaste auf das kleine Blatt-Symbol neben Kontaktdaten. Es erscheint das folgende Kontext-Menü: (Das Menü kann auch etwas anders aussehen, in Abhängigkeit ihrer Schreibrechte.) Wir wählen die Option Kopieren und fahren folgendermaßen fort: 6.4 Schritt 4: Einfügen des kopierten Inhaltselements Das gewünschte Element befindet sich nun im Zwischenspeicher und kann auf einer anderen Seite (und natürlich auch auf dieser) eingefügt werden. Wir wählen dazu die Seite von Herrn Singer an. 55

56 Ganz oben auf der Seite, Symbolleiste und darunter das -Symbol, das wir verwenden können, um das kopierte Element (es befindet sich im so genannten Klemmbrett) auf dieser Seite einzufügen. Dasselbe Symbol befindet sich nochmal auf der Seite (rechts in der Box, die mit Seiteninhalt überschrieben ist.) Wir klicken auf das obere -Symbol und der Inhalt (Kontaktdaten) wird auf dieser Seite eingefügt. Sie werden aufgefordert diesen Vorgang mit OK zu bestätigen. Der mittlere Bereich der Typo3-Oberfläche wird erneut geladen und das soeben eingefügte Element wird angezeigt. Hinweis: Das Inhaltselement Kontaktdaten befindet sich auch nach dem Einfügen im Speicher. Sie können es also noch auf weiteren Seiten einfügen ohne einen erneuten Kopiervorgang. Nachdem das Element eingefügt wurde, können Sie von der Listen -Ansicht zurück zur Seiten -Ansicht wechseln und das Element wie gewohnt bearbeiten. 56

57 6.5 Schritt 5: Das Kopieren und Einfügen eines weiteren Elements Nun wollen Sie darüber hinaus die Vorlage zum Lebenslauf nutzen. Dazu gehen wählen wir im Seitenbaum die Seite mit den Vorlagen für das Anlegen eines neuen Mitarbeiters und wechseln von der Seiten -Ansicht in die Ansicht Liste. Wie zuvor werden die einzelnen Vorlagen angezeigt. Wir kopieren das Element Lebenslauf, indem wir wieder das kleine Dokumentensymbol daneben anklicken und Kopieren auswählen. Wir bleiben in der Listenansicht und wechseln zurück zur Seite von Herrn Singer, auf der uns nun schon ein Element (Kontaktdaten) angezeigt wird. -Symbol aus. Der neue Inhalt wird hinter unter den Kontaktda- Wählen Sie wieder eines der ten eingefügt. 6.6 Schritt 6: Die erweiterte Ansicht im Listen-Modul TYPO3 bietet eine Alternative zum Kopieren und Einfügen über die beschriebenen Menüs. Wenn Sie in der Listen-Anischt den Haken bei Erweiterte Ansicht aktivieren, wird die Liste mit den Inhalten um zusätzliche Optionen und Informationen ergänzt: Es steht Ihnen nun frei, ob Sie wie beschrieben über de Menüs kopieren und einfügen oder ob Sie in der erweiterten Ansicht die Symbolleisten zum Kopieren und Einfügen nutzen möchten. Überdies ermöglicht es Ihnen diese Ansicht, die Reihenfolge der Elemente leicht zu verändern. 57

58 In der Mitte der Symbolleiste gibt es zwei Pfeile, mit denen sich die Elemente nach oben und nach unten verschieben lassen. Probieren Sie es doch einfach einmal. Neben der erweiterten Ansicht können Sie sich auch den Inhalt des Klemmbrettes anzeigen lassen. Aktivieren Sie dazu die vorgesehene Option! 6.7 Schritt 7: Abmelden Bitte melden Sie sich ordnungsgemäß bei Typo3 ab, wenn Sie mit der Arbeit fertig sind... Versionshistorie dieser Anleitung: : Umstellung auf LATEX (DB) : erste Fassung (AC) 58

59 7 Das Anlegen einer neuen Tabelle im RichTextEditor 7.1 Vorbemerkung Tabellen werden of genutzt, um Stunden- oder Seminarpläne aufzuschreiben. In dieser Anleitung wird Schritt für Schritt eine Stundenplan-Tabelle mit Spalten (Tage) und Zeilen (Zeiteinheiten) angelegt. Zunächst wird eine relativ einfache Tabelle angelegt. Dann werden die verschiedenen Möglichkeiten gezeigt, Tabellen optisch zu gestalten. 7 Achtung: Typo3 bietet grundsätzlich zwei Möglichkeiten Tabellen zu erstellen. In dieser Anleitung wird erklärt, wie man Tabellen im RichTextEditor von TYPO3 anlegt. Das Verfahren ist ganz ähnlich dem im Schreibprogramm MS Word. Das zweite Verfahren, das Anlegen einer Tabelle als ein eigenes Inhaltselement, wird hier nicht erklärt. 8 Wir wollen also an das zuvor erarbeitete Wissen anknüpfen und beschreiben hier, wie eine Tabelle ähnlich wie in MS Word in die bereits bekannte Typo3-Schreibumgebung eingefügt und bearbeitet wird. Wir empfehlen ihnen dringend, den Webbrowser Firefox für die Arbeit im RichTextEditor zu benutzen. Wir testen die Arbeit mit der TYPO3-Installation der WSF mit diesem Webbrowser. Wenn Sie unbedingt den Browser Internet Explorer von Microsoft benutzen wollen, dann achten Sie bitte darauf, dass Sie eine aktuelle Version benutzen. 7.2 Schritt 1: Von der Anmeldung bis zur Auswahl der richtigen Seite Wir melden uns zunächst bei Typo3 für den Backend Bereich an. Danach wählen wir auf der Typo3-Arbeitsoberfläche in der linken Menüleiste den Menüpunkt Seite aus. Es erscheint rechts neben der Menüleiste die Baumstruktur mit all jenen Seiten, die wir gemäß unserer Benutzerrechte bearbeiten oder ansehen dürfen. Der Stundenplan soll in unserem Beispiel für den Lehrstuhl für Außenwirtschaft erstellt werden und auf den Internetseiten des Lehrstuhls unter dem Menüpunkt Lehre und dann aktuell angezeigt werden. Somit ist klar, dass wir die Tabelle auf der Seite aktuell erstellen müssen. Wir wählen diese im Seitenbaum an. Es erscheint dieses Bild: 7 Diese Anleitung wurde im Januar 2009 stark überarbeitet, da die Konfiguration des RichTextEditors verändert wurde. Für Techniker: Bisher haben wird für das Gestalten von Tabellen vor allem auf css-klassen gesetzt. Solange es für die WSF-Seiten aber kein strenges Design gibt was zu begrüßen wäre haben wir uns für eine einfachere Bedienbarkeit entschieden und eine Gestaltung nach Gutdünken mit nur einigen Einschränkungen entschieden. 8 Hierzu wird es irgendwann mal eine eigene Anleitung geben. 59

60 Typo3 bestätigt unsere Auswahl einmal dadurch, dass der Titel Aktuelle Veranstaltungen fettgedruckt und dunkelgrau unterlegt wird. Rechts zeigt Typo3 in der bekannten Spaltenansicht alle bereits auf dieser Seite vorhandenen Inhalte an. Wie Sie sehen können existiert hier bisher ein Eintrag. 7.3 Schritt 2: Die Auswahl des Inhaltstyps Der Stundenplan soll später viele Einträge erhalten, er braucht also Platz. Entsprechend wollen wir den neuen Inhalt (die Tabelle) in der Spalte NORMAL erzeugen. Wir wählen also einen der beiden Notizblöcke mit Plus. (Wenn Sie die Maus auf das Symbol bewegen und kurz warten, wird Ihnen ein kurzer Erklärungstext zur Funktion des Symbols angezeigt.) Alternativ können wir auch die Option Neuer Inhalt anklicken. 60

61 Es wird als nächstes die Übersicht über die zur Verfügung stehenden Inhaltstypen geladen. Die Option Normaler Text haben wir bereits in Punkt 3.1 verwendet und werden sie nun wieder verwenden. Wir wollen an dieser Stelle aber auch darauf hinweisen, dass es einen eigenen Inhaltstyp Tabelle gibt, mit dem ebenfalls Tabellen angelegt werden können. In einer noch zu schreibenden Anleitung erklären wir ihnen die Vorzüge dieses Inhaltstyps. Da der RichTextEditor aber das Werkzeug ist, mit dem in der Regel die Inhalte für Ihre Webseite erzeugt werden, erklären wir ihnen hier, wie eine Tabelle über das Inhaltselement Normaler Text erzeugt wird. Wählen Sie also Normaler Text aus. Im ersten Reiter Allgemein geben wir die Überschrift unter dem entsprechenden Menüpunkt ein und speichern zur Sicherheit das neue Inhaltselement mit wählen wir den zweiten Reiter Text aus. oben links im Fenster. Dann Es erscheint die hoffentlich bereits bekannte Schreibumgebung des RichTextEditors. Der Tabelle sollen einige Anmerkungen voraus gehen. Diese tragen wir in den Textbereich einfach ein: 61

62 7.4 Schritt 3: Einfügen der Tabelle Nach diesem Absatz soll die Tabelle eingefügt werden. Sehen Sie sich dazu die Symbolleiste über dem Texteingabefeld an. Das Symbol zum Einfügen einer Tabelle ist markiert: Klickt man auf das Symbol, dann öffnet sich ein Fenster, in dem man eine Überschrift und eine kurze Erklärung 9 zur Tabelle eintragen kann, ausserdem die Zahl der Reihen und Spalten und die Breite 10 der Tabelle: 9 Diese Erklärung wird alerdings nicht zu sehen sein, nur die Überschrift. Diese Beschreibung ist vor allem für Menschen mit nicht visuellen Browsern (z. B. Sehbehinderte) nützlich, denn sie hilft Ihnen dabei, zu verstehen, was auf der Seite steht. 10 Normalerweise ist es hier sinnvoll, die Vorgabe 100 % beizubehalten oder einen geringeren Wert. Man kann auch eine Breite in Pixeln angeben. Eine derartige Festlegung birgt aber das Risiko, dass Sie nicht in das Layout der Seite passt. Also: Mit Prozent arbeiten ist meistens sinnvoll. 62

63 Bestätigt man mit OK, dann sieht man die Tabelle im Textfenster des RichTextEditors. Dies alles erinnert sehr an Word und wie in Word lassen sich nachträglich Spalten oder Zeilen hinzufügen oder löschen. Es lassen sich auch Zellen verbinden usw. usf. Wenn man dann noch ein wenig Text einträgt, dann sieht es so aus: Tip: Beim Eintrag von Text kann man die Pfeiltasten der Tastatur nutzen, um von einer Zelle zur anderen zu springen. Wenn Sie jetzt sicher ist sicher auf Speichern drücken, ändert sich das Bild: 63

64 Die Linien, die die Zellengrenzen anzeigen sind weg! Das ist etwas lästig. Jetzt kommt zum ersten Mal der Teil der Symbole im RichTextEditor zum Einsatz, der mit Tabellen zu tun hat: Mit dem Symbol ganz links können Sie die Begrenzungslinien wieder anschalten. Wenn Sie jetzt mal auf der eigentlichen Webseite schauen also im Frontend, dann sehen Sie, wie die Tabelle bisher aussieht. Noch nicht sehr beeindruckend - wir machen uns jetzt gleich an die weitere Gestaltung der Tabelle. 64

65 7.5 Schritt 4: Die Tabellenbearbeitung Gehen Sie zurück in das Fenster ihres Browsers, in die Tabelle bearbeitet wird. Klicken sie irgendwo in die Tabelle. Dann wird die gesamt Leiste mit den Tabellensymbolen aktiviert. Wenn Sie ihre Maus langsam über die Leiste bewegen, dann bekommen Sie kurze Erklärungen angezeigt. Wir verwenden jetzt nach und nach all diese Knöpfe. Das erste Symbol öffnet ein Fenster mit allen Tabelleneigenschaften. Hier finden sich die beim Erstellen der Tabelle schon vorgenommenen Einstellungen und einige weitere. Im Beispiel haben wir zusätzlich zu den bisherigen Einstellungen einen Rahmen um die gesamte Tabelle eingeschaltet. Dieser soll die Breite 2 Pixel haben und als Farbe (dazu gleich mehr) dunkelgrau. Ausserdem soll die Tabelle Linien zwischen den Zellen haben. Die Optik der Tabelle (nach dem Speichern) ist jetzt diese. Der Text ist eine wenig nahe an den Rändern, deshalb tragen wir noch eine Abstand des Textes zum Zellenrand ein. Also wieder die Tabelleneigenschaften aufrufen und hier eintragen. zum Beispiel 3 Pixel Als nächstes tragen wir weiter Text in die Tabelle ein. Hier können Sie alles nutzen, was Sie auch sonst für die Formatierung nutzen können:, vor allem also: fett, kursiv, große, kleine, durchgestrichene,... Schrift und die Ausrichtungen zentriert, rechts,... 65

66 Wenn man das ein wenig nutzt 11, dann bekommt man eine Tabelle wie diese hier: Das ist schon etwas besser. Als nächstes verändern wir die Formatierung der Titelzeile. Dazu klicken wir in die Zeile nutzen wir den dritten Knopf von links, der ein Fenster mit Tabelleneigenschaften öffnet. Dort tragen wir als Textausrichtung mittig (vertikal) und zentriert ein. Als Hintergrundfarbe für die Zeile haben wir ein dunkelgrau ausgewählt. Diese Farben haben wir über diese Schaltflächen ausgewählt, die sich an verschiedenen Stellen 11 Text eintragen funktioniert wie immer: Einen neuen Absatz bekommt man mit dem drücken von Return. Hält man dabei die Shift-Taste (Umstelltaste) fest, dann erzeugt man einen Zeilenwechsel. Man kann Aktionen rückgängig machen und kopieren / ausschneiden / einfügen. 66

67 wiederfinden. Klickt man auf die Fläche, dann öffnet sich ein Auswahlfenster, in dem einige Farben zur Auswahl stehen: Will man die Auswahl einer Farbe rückgängig machen, dann kann man das mit dem kleinen Kreuz rechts neben dem Farbfeld Die Optik der Tabelle ist jetzt diese: machen. Die Auswahl einer Schriftfarbe bei den Reiheneigenschaften ist zwar möglich, hat aber keinen Effekt. Wir wollen auch noch eine weitere Zeile einfügen. Dazu klickt man in die Zeile und nutzt das Symbol für Einfügen einer Zeile nach dieser. Die Symbole zum Einfügen vor / nach und Löschen gibt es auch für Zeilen / Spalten / Zellen: 67

68 Übrigens kann man mit der rechten Maustaste auch ein Kontextmenü aufrufen: Um die Optik weiter zu verbessern (zu verschlimmbessern?) rufen wir die Zelleigenschaften der ersten Spalte auf und tragen für die Zelle oben links eine Breite von 10% ein. Dies soll die etwas merkwürdigen Zeilenumbrüche verhindern. Dies ist die einzige Art, die Breite von Spalten (oder die Höhe von Reihen) zu beeinflussen. 68

69 Die Spalte Spalteneigenschaften schon aus MS Word klar. Das Ergebnis ist ganz ordentlich: überspringen wir - das Prinzip ist hoffentlich ohnehin 69

70 7.6 Zum Schluss Damit haben Sie alle Möglichkeiten der Tabellenformatierung kennengelernt. Wenn wir jetzt nach der Tabelle weiterschreiben möchten, dann empfiehlt es sich, wieder das Kontextmenü aufzurufen und den Punkt Fügt Absatz nach diesem ein (Gemeint ist: Nach der Tabelle) Tabellen zu formatieren ist nicht einfach! Sie habe sehr, sehr viele Möglichkeiten, mit Farbe und Rahmen das Aussehen zu beinflussen. Oft wird weniger mehr sein. Oder finden Sie die nächste Tabelle sinnvoll und ansprechend? Versionshistorie dieser Anleitung: : Komplette Neufassung wegen neuer RTE-Konfiguration (DB) : Breite/Höhe ergänzt, neue screenshots (DB) : Februar: Überarbeitung : erste Fassung September 2007: erste Bausteine 70

71 8 Das Hochladen und Verlinken von Dateien Vorbemerkung In dieser Anleitung zeigen wir Ihnen, wie in TYPO3 Dateien auf dem Server abgelegt werden und wie man einen Download-Link erstellt. 8.1 Anmeldung Starten Sie Ihren Internetbrowser (wir empfehlen Mozilla Firefox) und rufen Sie die folgende Adresse auf: Oder klicken Sie auf den markierten Link: Es wird die bekannte Login-Seite von Typo3 geladen. Nach der Anmeldung gelangen sie zur Typo3 Oberfläche (nur von hieraus lassen sich Dateien hochladen!). 8.2 Dateiliste Bevor ein Querverweis auf eine bestimmte Datei gesetzt wird, empfiehlt es sich, die entsprechende Datei in einen bestimmten Ordner im Typo3System abzulegen. Hierdurch ist gewährleistet, dass die entsprechende Datei stets dem richtigen Institut oder Lehrstuhl zugeordnet werden kann. Klicken Sie im linken Menü auf Dateiliste! 71

72 Sogleich werden Ihnen all jene Dateiordner angezeigt, für deren Benutzung Sie entsprechende Rechte besitzen. Ähnlich wie beim Seitenbaum werden einige Unterordner ausgeblendet. Durch das Betätigen eines Pluszeichens hängenden Ordner anzeigen. vor einem bestimmten Ordner, lassen sich die darunter Im Beispiel wird ein Nutzer gezeigt, drei verschiedene Ordner als Ausgangsordner mit Schreibrechten hat (Institut für Soziologie und Demographie: Ordner ISD_Institut; LS Makrosoziologie, Ordner ISD_makrosoziologie; Bereich Lehre am ISD, Ordner ISD_studium) Jeder Bereich besitzt weitere Unterordner. Wie immer ist es sinnvoll, Dateien nach einem Ordnungsschema in verschiedenen Unterordner zu verteilen. Ziel ist, Dateien später schnell wieder finden zu können. 8.3 Neuen Ordner anlegen Um die Übersichtlichkeit zu erhalten, möchten Sie die zu verknüpfende Datei in einen neuen Dateiordner ablegen. Der neue Ordner soll heißen Alte Klausuren. Hierin wollen Sie nachfolgend alte Klausuren ablegen, die Studenten über die Internetseiten Ihres Lehrstuhls zum Download zur Verfügung gestellt werden. Sie legen den Ordner wie folgt an (wir befinden uns noch immer im Menüpunkt Dateiliste!): Soll ein Unterordner angelegt werden, dann klicken Sie im OrdnerBaum auf denjenigen Ordner, unter dem der neue Ordner angelegt werden soll. Soll ein Hauptordner angelegt werden, dann klicken Sie im OrdnerBaum auf den in der OrdnerBaumStruktur übergeordneten Punkt 72

73 Wenn Sie auf ein Ordnersymbol klicken, dann erscheint ein Kontextmenü: Mit diesem Kontextmenü können Sie Datei- und Ordneroperationen wie umbenennen, hochloden, neuer Ordner etc. starten. Wir gehen zu Übungszwecken einen anderen Weg. Im Beispiel soll ein Unterordner für den Lehrstuhl Familiendemographie angelegt werden, weshalb der Oberordner ISD_familie ausgewählt wurde. Der Ordner sieht in TYPO3 so aus: In der Bildmitte sehen Sie die in diesem Ordner abgelegten Dateien. Die Dateiliste kann durch klicken auf einer der Überschriften Dateiname / Typ / Datum / Größe / RW / Ref. sortiert werden, jeweils in beide Richtungen. 12 Oben links im Hauptfenster sehen Sie zwei Symbole:. Mit dem -Symbol können Sie eine neue Datei in das geöffnete Verzeichnis hochladen. Klicken Sie den anderen Knopf:. Es öffnet sich ein neues Fenster, in dem Sie neue Ordner anlegen können (und auch neue Dateien, aber das werden Sie in den seltensten Fällen vorhaben): 12 Ref. gibt an, ob die Datei von TYPO3 verwendet wird. Würde etwa die Datei CV_1208_EN_cut.pdf gelöscht, dann gäbe es vier Stellen auf der Webseite, an denen dann vergeblich auf die Datei verwiesen wird. 73

74 Ein Hinweis zu guten Datei- und Ordnernamen Bitte vermeiden Sie Leer- und Sondereichen in Dateinamen. Verwenden Sie anstelle von Leerzeichen besser Binde- oder Unterstrich. Ein guter Dateiname ist also nicht Klausur Sommer 2006.pdf. Stattdessen lieber Klausur_Sommer_2006.pdf oder Klausur-Sommer-2006.pdf. Ein guter Dateiname ist also nicht ältere Gesellschaft.pdf. Stattdessen lieber aeltere_gesellschaft.pdf oder aeltere-gesellschaft.pdf. Tragen Sie den Namen des neuen Ordners ein (hier: Alte_Klausuren). Beachten Sie dabei die Hinweise für gute Dateinamen. Wenn Sie mehr als einen Ordner im Ausklappmenü auswählen, dann bekommen Sie entsprechend mehr Felder zur Eingabe von neuen Ordnernamen. Wenn Sie den neuen Ordnernamen eingetragen haben, klicken Sie dann auf Ordner anlegen. Wir sehen, dass der neue Unterordner angelegt worden ist. Leerzeichen im Ordnernamen werden mit einem Unterstrich automatisch ausgefüllt. TYPO3 macht also aus einem Eintrag Alte Klausuren selbstständig den Eintrag Alte_Klausuren. 8.4 Datei hochladen In den neu angelegten Ordner sollen nun Dateien hochgeladen werden. Wählen Sie den neu angelegten Ordner aus - er ist noch leer: 74

75 Die Datei soll im Ordner Alte_Klausuren abgespeichert werden. Über das Symbol für DateiUpload ( ) können Dateien hochgeladen und gespeichert werden. Klicken Sie auf das Symbol und Sie erhalten dieses Bild: Sie haben wieder die Möglichkeit gleich mehrere Dateien hochzuladen! Die Datei, welche Sie hochladen wollen, befindet sich auf Ihrem Rechner. Betätigen Sie nun Durchsuchen und es wird Ihnen ein Dateiauswahlfenster angezeigt, dass Sie von der täglichen Arbeit mit Ihrem Rechner gewohnt sind. Wählen Sie die entsprechende Datei per Mausklick aus und betätigen Sie die Schaltfläche Öffnen 75

76 Sie sehen, der entsprechende Dateipfad wurde in die Typo3Oberfläche übernommen. Klicken Sie nun noch auf Hochladen und die ausgewählte Datei wird hochgeladen. Je nach Größe der Datei und der Verbindungsgeschwindigkeit dauert das Hochladen einige Augenblicke! Wenn die Datei hochgeladen wurde, öffnet sich wieder die Dateiliste des Ordners: Wir stellen fest, dass die entsprechende Datei hochgeladen wurde. Die Übersicht zeigt uns Details zu den im Ordner befindlichen Dateien an. 8.5 Datei löschen Falls Sie die falsche Datei gewählt haben oder eine im Ordner befindliche Datei nicht mehr benötigt wird, dann können Sie die entsprechende Datei ganz einfach mit folgender Prozedur löschen: Klicken Sie mit der linken Maustaste auf das kleine Symbol neben dem Namen derjenigen Datei, die gelöscht werden soll (hier wäre es das PDFSymbol). Es erscheint ein kurzes Menü. Wählen Sie hier Löschen und bestätigen Sie mit OK. Die Datei wird aus dem Ordner und der Dateiübersicht entfernt Sie wird nicht in einen Papierkorb verschoben. Löschen von Dateien ist nicht rückgängig zu machen! 76

77 8.6 Datei verschieben und kopieren Anderer Fall: Die Datei soll nicht gelöscht werden. Sie soll aber in einen anderen Ordner verschoben werden. Dazu gehen wir wie beim Löschen vor und klicken mit der linken Maustaste auf das kleine Symbol links neben dem Namen derjenigen Datei, die verschoben werden soll. Der entsprechende Menüeintrag lautet Ausschneiden. Es erfolgt keine Bestätigung dafür, dass die Datei ausgeschnitten wurde! Wählen Sie nun jenen Ordner aus, in den Sie die ausgeschnittene Datei einfügen wollen. Das Auswählen geht folgendermaßen: Suchen Sie im Ordnerbaum den entsprechenden Ordner und klicken Sie mit der linken Maustaste auf das kleine Ordnersymbol links neben dem Ordnernamen. Es erscheint en kleines Menü. Dieses enthält die Option Einfügen in. Wir betätigen diese und bestätigen die Frage danach, ob die ausgeschnittene Datei hierher verschoben werden soll mit OK. Klicken Sie dann auf den jeweiligen Ordner, der nun die Datei enthalten muss und Sie werden sehen, dass diese in der Dateiübersicht erscheint. Das Kopieren einer Datei geht genau wie das Verschieben einer Datei. Nur wählen Sie nicht Ausschneiden sondern Kopieren aus! 8.7 Datei Verlinken Nun soll die hochgeladene Datei verlinkt werden. Wechseln Sie dazu im linken TypoMenü von Dateiliste zu Seite. Es erscheint der Seitenbaum, der Ihnen anzeigt, auf welche Seiten Sie zugreifen dürfen. Wählen Sie diejenige Seite aus, auf der Sie die Verlinkung herstellen wollen. Nun können Sie die Verlinkung in einem bestehenden Inhaltselement (z.b. in einem Text) herstellen oder ein neues Inhaltselement erstellen. 77

78 Das bestehende Inhaltselement wird zur Bearbeitung geöffnet bzw. das neue Inhaltselement wird erstellt. Der Text Klausur Sommersemester 2007 soll mit der hochgeladenen Datei verknüpft werden. Wir markieren die entsprechende Textstelle mit der Maus und wählen im Menü des TextEditors das Symbol für die Funktion Link einfügen. Oder: wir klicken mit der rechten Maustaste auf den markierten Text und wählen im darauf angezeigten Menü die Option Link erzeugen aus. Es wird ein neues Fenster geöffnet. Oben sehen Sie verschiedene Reiter Seite... Datei... Externe URL Diese zeigen Ihnen an, welche Möglichkeiten Sie haben, eine Verlinkung zu erzeugen. Wir wählen Datei. 78

79 Es erscheint relativ weit unten im Fenster, vergrößern Sie es bei Bedarf die bekannte OrdnerStruktur, auf die Sie entsprechend Ihrer Rechte zugreifen können. Nun können Sie die entsprechende Datei auswählen: Klicken Sie auf den Ordnernamen (in unserem Beispiel Alte_Klausuren). Rechts neben der Ordnerstruktur wird Ihnen angezeigt, welche Dateien zur Verfügung stehen. Etwas weiter könnten Sie jetzt auch noch Dateien in den Ordner hochladen. Ganz oben finden Sie das Menü Ziel ; Neues Fenster wählen; es erscheint dann als Ziel der Eintrag _blank ACHTUNG!!! Bevor Sie auf die zu verlinkende Datei klicken, möchten wir Sie bitten, im Menü Ziel die Option Neues Fenster auszuwählen. Das stellt sicher, dass die Studenten beim Öffnen oder Herunterladen der Datei weiterhin auf Ihren Lehrstuhlseiten bleiben und dass die zu ladende Datei in einem neuen Fenster geöffnet wird. Wenn Sie auf die entsprechende Datei geklickt haben (broschuere.pdf) und das Auswahlmenü schließt sich. Sie werden feststellen, dass der zuvor markierte Text nun in blauer Schrift mit einer Unterstreichung dargestellt wird der Link wurde gesetzt. 79

80 Speichern Sie nun die Veränderung des Inhaltselements wie gewohnt über das Symbol Diskette+X und die Editorenansicht wird geschlossen. Wenn Sie nun die entsprechende Internetseite aufrufen, werden Sie sehen, dass die gerade eingerichtete Verlinkung vorhanden ist (notfalls die Seite neu laden) und verwendet werden kann: Noch ein Hinweis zum Ändern oder Löschen von erstellten Links: Klicken Sie in der Editorenansicht auf den zu ändernden Link mit der rechten Maustaste. Es erscheint ein Menü mit den Punkten Link ändern... Link prüfen... Link entfernen (siehe unten). Über diese Menüpunkte können Sie eine Veränderung der bestehenden Verlinkung herstellen. 80

81 8.8 Größere Mengen an Daten hochladen per.zip-archiv Wenn Sie auf ihrer Festplatte einen Ordner mit vielen Dateien haben, den Sie genau so bei TYPO3 wiedefinden wollen, dann verpacken Sie die Datei als.zip-archiv: Laden Sie wie oben beschrieben die.zip-datei hoch (das kann wie schon gesagt etwas dauern. Speziell wenn die Datei sehr groß ist, also zum Beispiel mehr als 5MB): Klicken Sie auf das Symbol der Datei. Im Kontextmenü wählen Sie entzippen : 81

82 TYPO3 meldet, dass das Archiv ausgepackt wurde: klicken Sie unten auf zurück und Sie finden den Ordner, den Sie als.zip-archiv verpackt haben, wieder, inklusive aller Unterordner: Der Ordnung halber könnten Sie die.zip-datei wieder löschen. 8.9 Abmelden Melden Sie sich bitte wieder vollständig bei Typo3 ab. Benutzen Sie hierzu in der Typo3 Bedienoberfläche den Schalter Logout im oberen TypoMenü: 82

83 Versionshistorie dieser Anleitung: : Ergänzen.zip, Umstellung auf LATEX (DB) : erste Fassung (AC) 83

84 9 Bilder in TYPO3 (RichTextEditor & Elemente Text mit Bild, Bilder 9.1 Vorbemerkung Bilder gehören zu einer Webseite, bei deren Lektüre man bei der Stange bleiben kann. Sie dienen entweder nur der Dekoration und der Vermeidung von Bleiwüsten, oder Sie haben einen echten Informationsgehalt. TYPO3 ist hervorragend geeignet, Ihre Bilder auf die Webseite zu bringen. 14 In dieser Anleitung zeigen wir Ihnen zwei Wege, wie man das macht. Der erste basiert auf der TYPO3- Schreibumgebung, dem RichTextEditor und wird von uns nicht empfohlen. Der zweite Weg ist die Verwendung der Inhaltselemente Text mit Bild bzw. Bilder. Wir gehen davon aus, dass Sie inzwischen schon ein etwas fortgeschrittener Nutzer von TY- PO3 sind. Sie wissen also, dass man sich anmelden muss, um in TYPO3 zu arbeiten, was ein Inhaltselement ist usw. usf. 9.2 Ein Bild in einem RTE-Text einfügen Stellen Sie sich vor, Sie haben ein Inhaltselement normaler Text produziert: Nun wollen Sie diesen Text mit einem Bild illustrieren, das Sie schon in einem ihrer Ordner bei TYPO3 hochgeladen haben. Ein Weg, das zu tun ist das Bild-Symbol im RichTextEditor zu verwenden. 14 Das besondere ist, dass TYPO3 in der Lage ist, Bilder auf Knopfruck zu bearbeiten. Im Hintergrund arbeitet das Bildverarbeitungsprogramm ImageMagick ( 84

85 Setzen Sie die Einfügemarke an die Stelle, an der das Bild erscheinen soll (hier: zwischen den beiden Absätzen) und klicken Sie auf das Bild-Symbol. Es erscheint ein neues Fenster: In diesem Fenster finden Sie ihre Datei-Ordner wieder, in denen Sie Dateien zur späteren Verwendung abgespeichert haben (Siehe Anleitung 8). Oben bekommen Sie Gelegenheit, eine Datei (also ein Bild) hochzuladen oder einen neuen Ordner anzulegen, unten finden Sie die Ordner, auf die Sie Zugriff haben. 85

86 Vergrößern Sie das Fenster und suchen den Ordner, in den Sie Bilder abgelegt haben. Hier ist es der Ordner Bilder des VWL-Instituts. Sobald Sie einen Ordner ausgewählt haben zeigt TYPO3 Ihnen den Inhalt, zusammen mit einem Vorschaubild. 15 Wir wählen das Bild UlmenstraßeEIngang.jpg aus (Klick auf die Dateibezeichnung). Und siehe da - das Bild ist im Text eingefügt. Nur: Es ist ziemlich groß, nicht zentriert usw. Wir klicken mit der rechten Maustaste auf das Bild und wählen Bildeigenschaften aus: 15 Falls Sie keine Vorschaubilder gezeigt bekommen, oder das garnicht wollen: Ganz unten im Fenster können Sie das an- und abschalten. 86

87 Hier ist die Breite und Höhe des Bildes eingetragen. Sie können das Ändern, wenn Sie wollen, aber es fehlt leider eine Skalierungsfunktion (in Prozent) oder eine Funktion ändere nur die Breite und passe die Höhe entsprechend an. Aber wir können einige Dinge eintragen und tun das wie im Bild zu sehen: Wir können das Bild auch zentrieren. Dazu klicken wir im RichTextEditor auf das Bild und dann auf den zentrieren-knopf. 87

88 Eine andere Möglichkeit wäre es, einen Rand von 200 Pixeln auf der linken Seite einzufügen: Der RichTextEditor schreibt html-code. Hier sehen Sie, was er bisher gemacht hat: 88

89 Die Schritte, die wir bisher beschrieben haben, sind nicht weiter schwierig. Man bekommt so etwas hin: Aber: Es funktioniert of nicht auf Anhieb (das Zentrieren zum Beispiel), es fehlt eine Möglichkeit, das Bild zu verkleinern, es fehlt eine Bildunterschrift, die Layout-Möglichkeiten sind ziemlich begrenzt usw. usf. Eine Variante wäre es, eine Tabelle anzulegen und das Bild in eine Zellen zu setzen (ja, das geht) und den Text in eine andere und so die Darstellung zu verbessern. Aber der html-code, den der RichTextEditor in diesem Fall erzeugen muss, ist stark verschachtelt und kompliziert, so dass man wieder nur sagen kann: Das ist stark fehleranfällig und verspricht wenig Freude. Zm Glück ist man nicht auf den RichTextEditor angewiesen. Wir empfehlen, einen Bogen um den Bild-einfügen-Knopf im RichTextEditor zu machen und die nachfolgend erklärten Möglichkeiten zu nutzen. 9.3 Bessere Wahl: Ein Bild mit dem Text mit Bild -Inhaltselement Stellen Sie sich wieder vor, Sie haben ein Inhaltselement normaler Text produziert, das jetzt mit einem Bild illustriert werden soll: 89

90 Ändern Sie den Inhaltstyp des Elements in Text mit Bild. Es erscheint ein neuer Reiter Medien : Wählen Sie den Reiter Medien aus: 90

91 Oben finden Sie unter der Überschrift Bilder die Möglichkeit, mit dem kleinen Ordnersymbol (markiert), Bilder aus ihren Dateiordnern herauszusuchen ganz analog wie oben. Mit durchsuchen könnten Sie auch eine Datei von ihrer Festplatte auswählen. TYPO3 erkennt Dateien mit den Endungen gif, jpg, jpeg, tif, bmp, pcx, tga, png, pdf, ai als Bilder. Wir verwenden in der Regel das png-format... Wie TYPO3 Bilder abspeichert Der normale Weg beim Einfügen eines Bildes, wie er in dieser Anleitung auch beschrieben wird, ist ja, ein Bild auszuwählen, das zuvor in TYPO3 hochgeladen wurde. Wenn man dann aber auf der Webseite schaut, welche Adresse die Bilder haben, dann findet man Adressen wie oder jpg. Wieso das? TYPO3 speichert verarbeitete Bilder noch einmal neu ab, auch wenn die Bilddatei schon in ihrem Dateiordner vorhanden ist. Damit ist sichergestellt, dass Sie nicht aus Versehen eine Datei löschen oder umbenennen und dann auf der Webseite nur eine Fehlermeldung zu sehen ist, anstatt eines Bildes. Auf die Ordner wie /uploads oder /typo3temp haben Sie keinen Zugriff. TYPO3 wird auch alle Versionen eines Bildes, das jemals verwendet wurde, behalten. Deshalb werden manchmal Bilder, die schon einmal verwendet wurden, nach der Auswahl umbenannt, mit einer laufenden Nummer _01,_02 etc. Im Beispiel wurde das Bild UlmenstrasseEIngang.jpg offensichtlich zum zweiten Mal verwendet und nach dem Hochladen steht in der Auswahlbox: Wählen Sie also ein Bild aus. Ausserdem können Sie weitere Dinge angeben, die weitestgehend selbsterklärend sind. Im Beispiel haben wir für die Position des Bildes Im Text rechts gewählt (das Bild soll vom Text umflossen werden ) eine Breite festgelegt, und das Bild soll bei einem 91

92 Klick vergrößert dargestellt werden. Ganz unten schliesslich haben wir eine Bildunterschrift angegeben. Klicken sie auf Speichern und schauen sie nach (im Frontend ), wie das aussieht: Ganz ordentlich! Es gibt wieder die Bleistifte, mit denen Sie die Bildunterschrift verändern könnten oder Zugriff auf die Bildformatierung haben. Sie können natürlich auch zwei Bilder anzeigen lassen. Beachten Sie, dass die Bildunterschrift für das zweite Bild einfach in die zweite Zeile des Feldes Bildunterschrift eingetragen wurde. Ausserdem wurden zwei Spalten gewählt, oben mittig als Position und ein Rahmen um die Bilder: 92

93 Das Ergebnis sieht so aus: Die Option Klick-Vergrößern bewirkt übrigens, dass eine anklicken des Bildes eine vergrößerte Bildansicht öffnet. 93

94 Sie könnten alternativ auch dafür sorgen, dass ein Klick auf das Bild einen Link öffnet, mit dem Link Symbol, mit dem Sie links auf interne oder externe Seiten einsetzen können, oder auch auf Dateien bzw. -Adressen. TYPO3 kann auch einige Effekte beim Einfügen des Bildes anwenden, etwa aus einem bunten Bild ein Schwarz-Weisses machen. Dazu verwenden Sie das Effekte -Menü: Die Ansicht des Textes mit den beiden Bilder (Postion im Text, oben links) und mit Graustufen ist: 94

95 Beachten Sie, dass Sie durch mehrere Text mit Bild Elemente hintereinander mehr Spielraum beim Layout bekommen: Der Text, der bisher in einem Element stand, wurde in zwei Elemente aufgeteilt. Das zweite Element hat keine Überschrift (Typ versteckt ). 9.4 Element Bilder Das Element Bilder funktioniert analog wie Text mit Bild, nur dass der Reiter Text fehlt. Versionshistorie dieser Anleitung: : erste Fassung (DB) 95

96 10 Eine Nachricht auf die Institutsseite stellen und an andere Bereiche der WSF-Webseite weitergeben 10.1 Einige Hinweise bevor es losgeht Im Zuge der Überarbeitung der Webseiten des Instituts für VWL, für Soziologie und für den Bereich Studium (Studien- und Prüfungsamt bzw. -ämter) wurde ein modernes Nachrichtensystem installiert. 16 Der Sinn ist, dass jeder Mitarbeiter mit Zugang zum ContentManagementSystem TYPO3 an der WSF aktuelle Mitteilungen verfassen kann, die dann an den verschiedenen Stellen auf erscheinen. Eine Nachricht kann für mehrere Zielgruppen interessant sein, aber deshalb sollen Sie nicht mehrfach Arbeit haben. Ein Beispiel dafür, wie die Anzeige der Nachrichten dann aussehen kann, finden Sie unter (Neueste Nachrichten) bzw. (Liste aller Nachrichten). Die neuesten Nachrichten werden auf der Startseite des Instituts und anderswo dargestellt. Jede Nachricht hat eine Überschrift, einen Anleser und einen Haupttext. Der Haupttext wird angezeigt, wenn man auf der Startseite auf [mehr] klickt oder wenn man die Nachricht über den Menüpunkt Aktuelles ausgewählt hat. Die entsprechenden Informationen werden Sie als Nachrichtenredakteur an TYPO3 übergeben. Wie das geht, lernen Sie in dieser Anleitung. Um eine Nachricht auf die Institutsseite stellen zu können, müssen Sie entsprechende Zugriffsrechte haben. Wenn Sie die Schritte in dieser Anleitung nicht nachvollziehen können, dann kann es daran liegen, dass die Funktionalität Nachrichten (tt_news) für sie noch nicht freigeschaltet wurde. Melden Sie sich in diesem Fall bitte bei Ihrem Institutssprecher Schritt 1: Anmeldung und Auswahl des Nachrichten-Formulars Um eine neue Nachricht zu erstellen, melden wir uns zunächst bei TYPO3 für den Backend Bereich an. Wenn Ihre Seite eine der neu erstellten ist, können Sie dazu am unteren Ende der Seiten den Link Zur TYPO3-Oberfläche benutzen oder die Adresse de/typo3 in die Adresszeile Ihres Browsers eingeben. Abbildung 1: Die Anmeldelinks auf jeder Seite Danach wählen wir auf der TYPO3-Arbeitsoberfläche in der linken Menüleiste den Menüpunkt Seite (oder Page ) aus (Markierung (1) im Bild). Es erscheint rechts neben der Menüleiste die Baumstruktur mit all jenen Seiten, die wir gemäß unserer Benutzerrechte bearbeiten oder ansehen dürfen. Das sieht zum Beispiel so aus: 16 Die Überarbeitung der Seiten des Bereichs Studium und des Instituts für Soziologie sind inzwischen abgeschlossen. Das Institut für BWL ist in Arbeit. 96

97 Abbildung 2: Nach der Anmeldung Sie finden einen blauen Ordner: (Markierung (2) im Bild). Dieser kann sich bei Ihnen an verschiedenen Stellen befinden, je nachdem, wer Sie sind. Im Beispiel befinden sich alle Ordner direkt unterhalb der WSF Startseite und ausserdem findet sich der Ordner News VWL nochmal auf der obersten Ebene des Seitenbaums. Klicken Sie auf den Namen dieses Ordners. Der blaue Ordner hier heißt er News VWL enthält die Nachrichten ihres Instituts. Sie finden eine Liste aller Nachrichten chronologisch geordnet im TYPO3-Hauptfenster (Markierung (3) im Bild). Diese Liste werden Sie jetzt um eine neue Nachricht ergänzen Schritt 2: Einen neue Nachricht eintragen 10.4 Nachrichtentext, Überschriften etc. eingeben Um eine neue Nachricht zu erstellen, klicken sie das Notizblock-Plus-Zeichen an, das sich oben in der Nachrichtenliste befindet (Markierung (4) im Bild oben). Achtung, das ist ein entscheidender Schritt. Sie wollen nicht einen neuen Text auf die Seite schreiben. Sie wollen nicht eines der -Zeichen ganz oben auf der Seite wählen, die im Bild durchgestrichen sind. Es erscheint das Formular, das für die neue Nachricht ausgefüllt werden muss: 97

98 Abbildung 3: Das Nachrichtenformular Formular, Teil 1: Titel, Zeiten, Anleser, Haupttext Der obere Teil des Formulars enthält folgende Einträge (siehe jeweils auch die Markierungen im Bild): Abbildung 4: Das Nachrichtenformular, erster Reiter, oberer Teil 98

99 1. Hier geben sie den Titel der Nachricht an. 2. Entfernen Sie den Haken bei versteckt aber erst am wenn Sie sich vergewissert haben, dass alles andere stimmt. Die Felder Start und Stop bestimmen, ob die Nachricht sofort auf der Seite erscheint oder erst später. Wenn Sie eine Nachricht schreiben, die erst später zu sehen sein soll, dann geben sie ein Datum an, etwa für den 12. Februar Das Feld Stop sollten Sie freilassen, wenn Sie es überhaupt sehen können Unter Typ ist News voreingestellt - lassen Sie das einfach so. Auch Bearbeitung erfordert admin-rechte sollten sie nicht aktivieren. 4. Unter Datum/Zeit ist das aktuelle Datum voreingestellt, das können Sie so übernehmen, wenn die Nachricht gleich erscheinen soll. (Achtung: Wenn Sie eine Nachricht vorschreiben, also oben ein Datum in der Zukunft festlegen, dann sollten Sie dasselbe, zukünftige Datum auch hier eintragen!) Das Archivdatum ist der Tag, an dem die Nachricht archiviert wird. Sie ist dann nur noch über eine spezielle Archivansicht aufzurufen. Sie können das Feld einfach freilassen, dann wird die Nachricht automatisch nach einem Vierteljahr archiviert. Wenn Sie hier ein Datum eintragen, dann sollte es ein Datum in der Zukunft sein. 5. Unter Autor und können sie Ihren Namen und ihre -Adresse eintragen. 6. Im Feld Untertitel sollten sie einen oder zwei Sätze eintragen, die den wichtigsten Inhalt ankündigen. Dies ist der Anleser oder Teaser. Wenn Ihnen nichts einfällt, dann können Sie das Feld auch freilassen, aber es erhöht die Lesbarkeit, wenn Sie sich hier etwas einfallen lassen wie bei einem Zeitungsartikel. 7. In das Feld Text wird der eigentliche Inhalt eingetragen. Hier können Sie den Text wie gewohnt formatieren (Fettdruck etc. mit dem RichTextEditor). Jetzt haben Sie den größten Teil der Arbeit hinter sich Wenn Sie manche Optionen nicht sehen dann schauen sie, ob am Ende des Formulars (ganz unten) zweite Optionspalette anzeigen ausgewählt ist. 17 Wir haben die Möglichkeit, Nachrichten zu stoppen, für die meisten Benutzer stark eingeschränkt. Eine Nachricht, die nicht mehr aktuell ist, soll nicht komplett ausgeblendet werden, sondern archiviert, siehe unten. 99

100 Abbildung 5: Der Haken bei Zweite Optionspalette anzeigen Formular, Teil2: Die Nachricht einordnen Jetzt muss die Nachricht noch einer Kategorie zugeordnet werden. Die Kategorie entscheidet darüber, an welchen Stellen von Ihre Nachricht angezeigt wird. Wandern Sie in Ihrem TYPO3-Fenster zurück nach ganz oben. Dort finden Sie einen Reiter, auf dem Relations steht. Sie sehen dann ein zweites Formular, das so aussieht: 100

101 1. Unter Kategorie (Markierung 1) wählen Sie jetzt aus, wie Ihre Nachricht eingeordnet wird. Unter Objekte stehen Ihnen einige Möglichkeiten zur Verfügung, im Beispiel zum Beispiel WSF Startseite oder VWL. Welche Einsortierungsmöglichkeiten sie haben hängt von Ihren Schreibrechten ab. Ein Mitarbeiter des Instituts für VWL kann natürlich keine Nachrichten der Kategorie Soziologie (ISD) schreiben. Aber er kann eine Nachricht für die Kategorie Studium verfassen. Überlegen Sie, in welche Kategorien Ihre Nachricht passt. Natürlich sollte die Mitteilung über ein neues Forschungsprojekt nicht unter Studium einsortiert werden. Wenn aber etwa eine studentische Hilfskraft gesucht wird, dann ist die Kategorie Studium - zusätzlich zu 101

102 der Ihres Instituts - sinnvoll. Achtung: Bitte denken Sie wirklich darüber nach, wo ihre Nachricht sinnvollerweise erscheinen sollte. Auf der Startseite der WSF werden zum Beispiel alle Nachrichten der Kategorie WSF - Startseite angezeigt. Nachrichten auf der Startseite sollten (zumindest potentiell) auch für Außenstehende interessant sein. Lesen Sie hierzu bitte unbedingt auch - dort stehen die ziemlich liberalen Regeln zum Nachrichtenwesen an der WSF. Die nachfolgenden Felder sind nicht von entscheidender Bedeutung, seien aber dennoch kurz erläutert. 2. Unter Bilder (2) können Sie die Nachricht um ein Bild ergänzen, dass Sie zuvor in das TYPO3-System geladen haben. Benutzen Sie dazu das kleine Ordner-Symbol. Sie können den Durchsuchen -Knopf auch benutzen, um schnell noch ein Bild von ihrer Festplatte hochzuladen. 3. Unter (3) Links können Sie Links als Text eintragen. Sie müssen dabei dieses Format einhalten: <LINK _blank>link zur Tagesschau</LINK> 4. Unter (4) können Sie andere Nachrichten oder Seiten auswählen, die mit Ihrer Nachricht in Verbindung stehen. Benutzen Sie dazu das kleine Ordner-Symbol. 5. Unter (5) schließlich können Sie noch einen Link zu einer Datei anbieten, die Sie zuvor in das TYPO3-System hochgeladen haben. Benutzen Sie dazu das kleine Ordner-Symbol. Wieder: Sie können den Durchsuchen -Knopf auch benutzen, um schnell noch ein Bild von ihrer Festplatte hochzuladen Richtiges Archivieren, vor allem bei Terminen und Veranstaltungen Etwas peinlich ist es, wenn man eine Nachrichtenrubrik auf einer Webseite findet, auf der dann unter Aktuelles eine Nachricht von vor zwei Jahren steht. Es ist kein Problem, dies zu vermeiden: 1. Nachrichten werden auf unserer Webseite nach einigen Wochen (90 Tage) automatisch archiviert. Archivieren bedeutet, dass die Nachricht nur noch über das Archiv einzusehen ist. Nicht aber in einer Listen mit Neuesten Nachrichten oder unter Aktuelles. 2. Bei manchen Nachrichten ist es sinnvoll, diese nicht erst nach einigen Wochen zu archivieren, sondern etwa einen Tag, nach dem die Veranstaltung stattgefunden hat. Wenn zum Beispiel die Nacht der Professoren am 22. Januar stattfindet, dann sollte die Nachricht spätestens ab dem 24. Januar archiviert sein. Dazu muss im Nachrichtenformular das Datum gesetzt werden, siehe auf Seite Fertig! Sie sollten jetzt nochmal überall schauen, ob Sie alles so eingetragen haben, wie Sie wollten. Falls ja, dann können Sie jetzt den Haken bei versteckt entfernen und speichern. Ganz oben im Fenster und auch ganz unten finden Sie die bekannten drei Speichersymbole: Benutzen Sie eines zum Speichern, denn das ist natürlich notwendig. Wenn Sie das -Symbol benutzen, schliesst sich das Nachrichtenformular und sie sehen in der Liste von Seite 97 Ihre neue Nachricht. 102

103 Nach dem Speichern müsste Ihre Nachricht auch auf der Webseite zu sehen sein. Kontrollieren Sie, ob alles so gelaufen ist, wie Sie wollten und korrigieren Sie alles, was Sie vergessen haben. Vergessen Sie nicht, sich abzumelden, wenn sie fertig mit der Arbeit an der Webseite sind Wenn Sie später etwas ändern Oft ist es ja so, dass man erst etwas später merkt, dass man sich verschrieben hat oder etwas vergessen. In diesem Fall können Sie natürlich die Nachricht nachträglich korrigieren. Ungünstig daran ist, dass die Nachricht ja schon veröffentlicht ist. Leser, die die Nachrichten abonniert haben, kennen nur die erste (unkorrigierte) Version der Nachricht. Sie sollten deshalb das Datum der Nachricht korrigieren. Wenn es in der ersten Version zum Beispiel 10: lautete, dann können Sie einfach eine Stunde hinzuaddieren, also 11: Leser der Nachrichten bekommen dann einen Hinweis, dass die Nachricht aktualisiert wurde, etwa so: 10.7 Anzeigebeispiele Eine Startseite mit einem Menü der neuesten beiden Nachrichten: Eine Seite Aktuelles mit allen aktuellen Nachrichten aus der Kategorie VWL. Links können andere Kategorien gewählt werden: 103

104 104

105 Detailanzeige einer Nachricht: Versionshistorie dieser Anleitung: : Kleine Schreibfehler-Korrekturen : Präzisierung Datum / Start, neu: später etwas ändern : Aktualisierung auf TYPO3 4.2, kleinere Überarbeitungen : Überarbeitung : Ergänzung Archivabschnitt, Hinweis wegen Start/Stop; Kleine Korrekturen, Achtung Kategorien : Ergänzung zweite Optionspalette : Komplette Überarbeitung wg Umstellung auf tt_news : erste Fassung 105

106 11 Tabellen als Inhaltselement (ohne RichTextEditor) Vorbemerkung Tabellen kann man mit der normalen TYPO3-Schreibumgebung, dem RichTextEditor, erzeugen, siehe die siebte Anleitung. Aber vielleicht haben Sie bei der Arbeit gemerkt, dass das oft misslingt und sich der RichTextEditor bei der Arbeit verheddert und unlogisch verschachtelten html- Code erzeugt? Dann ist es vielleicht eine Alternative für Sie, das TYP03-Inhaltselement Tabelle zu nutzen. Also nicht Text oder Text mit Bild, in dem dann eine Tabelle angelegt wird. Der Vorteil ist, dass es relativ einfach ist, eine saubere Tabelle zu erstellen, ohne allzuviel Klicken auf irgendwelche Symbole im RichTextEditor. Für fortgeschritten Nutzer ist es sogar möglich, diese Tabellen mit einem eigenen CSS-Layout zu versehen. Diese Anleitung geht davon aus, dass Sie schon wissen, dass man bei TYPO3 angemeldet sein muss, um zu arbeiten, und was ein Inhaltselement ist. Also los: 11.1 Eine einfache Tabelle erzeugen Wählen Sie Tabelle beim einfügen eines neuen Inhaltselements aus: Wie immer können Sie für das Inhaltselement eine Überschrift etc. festlegen: Wählen Sie dann den Reiter Tabelle aus. Erstmal machen wir nicht viel mehr als einen Text wie diesen (der aufrechte Strich dient als Trennzeichen zwischen Zellen, eine neue Zeile wird eine neue Tabellenzeile): 106