4 Das Anlegen eines neuen Textelements. Inhaltsverzeichnis. Vorbemerkung. 4.1 Schritt 1: Die Anmeldung bei Typo3

Transkript

1 4 Das Anlegen eines neuen Textelements Inhaltsverzeichnis 4 Das Anlegen eines neuen Textelements 1 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 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. 1 Wir empfehlen ihnen dringend, den Webbrowser Firefox 2 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. 1 Die Anleitung zur Arbeit mit Bildern fehlt noch. 2 Den können Sie unter kostenlos herunter laden. 1

2 Nach der Anmeldung wird nun die Typo3-Arbeitsoberfläche geladen, die Ihnen gemäß Ihren Benutzerrechten bestimmte Funktionalitäten zur Verfügung stellt: 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. 2

3 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: 3

4 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: 4

5 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. 5

6 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. 6

7 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. 7

8 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 3 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 3 Falls Sie weniger Möglichkeiten in Ihrem Fenster sehen, überprüfen Sie, ob bei Ihnen ganz unten im Fenster die zweite Optionspalette angeschaltet ist: 8

9 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 16.). 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. 9

10 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 : 10

11 Mit der markierten Lupe können wir uns die Seite im Frontend anzeigen lassen. 4 (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), 4 Wenn Sie eine PopUp-Blocker verwenden, müssen Sie evtl. PopUps für erlauben. 11

12 dann öffnet sich folgendes Fenster: Wählen Sie den Reiter aus. 5 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. 5 Die anderen Reiter dienen dazu, links auf andere Seiten der WSF, auf Dateien oder auf externe www-adressen einzufügen. 12

13 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: 13

14 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: 14

15 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: 15

16 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 8) 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. 16

17 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: 17

18 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. 18

19 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) 19