Handbuch für Redakteure für Typo3. Version 1.1. Datum: Georg Ringer

Transkript

1 Handbuch für Redakteure für Typo3 Version 1.1 Datum: Georg Ringer

2 Inhaltsverzeichnis 1. Login Oberfläche von Typo Modulleiste Navigationsleiste Einfache Funktionen Neue Seite anlegen Neuen Inhalt einfügen Seitentyp Normaler Text Seitentyp Nur Bilder Seitentyp Text mit Bild Weitere Funktionen Upload von Bildern Variante Variante 2 (Element Browser) Setzen von Links Bearbeiten von Seiteninhalten Anhang Bilder verkleinern im Photoshop

3 1. Login Um mit Typo3 arbeiten zu können müssen Sie sich zunächst bei dem System anmelden. Dazu benötigen Sie die korrekte Web-Adresse (URL), Ihren Benutzernamen (Username) und das dazugehörige Passwort. Abbildung 1: Login 1. Geben Sie in der Eingabezeile des Browsers die Web-Adresse ein (z.b Geben Sie in das Feld "Username" Ihren Benutzernamen ein. 3. Geben Sie im Feld "Password" Ihr Passwort ein. 4. Drücken Sie anschließend auf den Button "Log In". Waren Ihre Angaben korrekt, sind Sie eingeloggt und bekommen Ihre individuell eingestellte Arbeitsoberfläche von Typo

4 2. Oberfläche von Typo3 Abbildung 2: Backend-Oberfläche Dies ist die (eingeschränkte) Oberfläche, die dem Redakteur zur Verfügung steht. Die 1. Spalte beinhaltet die Modulleiste, die einen Zugriff auf die möglichen Funktionen bietet. In der 2. Spalte befindet sich die Navigationsleiste, die einen Seitenbaum darstellt. Dieser stellt alle Seiten der Website dar. Über das -Symbol öffnet man den Seitenbaum und kann die nachfolgenden Seiten betrachten. Mit dem - Symbol schließt man den Seitenbaum wieder. In der 3. und größten Spalte befindet sich die Detailansicht. Diese stellt den eigentlichen Arbeitsbereich des Benutzers dar

5 2.1. Modulleiste Abbildung 3: Modulleiste Der obige Screenshot zeigt alle Funktionen, die über die Modulleiste erreichbar sind. Web Seite: Über diese Funktion sind alle Seiten der Webseite erreichbar und bearbeitbar Anzeigen: Über diese Funktionen können die Seiten in der Detailansicht so betrachtet werden, wie sie für jeden anderen Benutzer aussehen ohne ein eigenes Browserfenster öffnen zu müssen. Liste: Diese Funktion bietet einen schnellen Zugriff auf die Datensätze der jeweiligen Seite. Info: Hier können Informationen zur jeweiligen Seite abgerufen werden. Funktionen: Mittels eines Assistenten können schnell und einfach mehrere Seiten erzeugt oder bereits bestehende Seiten sortiert werden

6 Datei Dateiliste: Dies ist das Dateiverwaltungssystem von TYPO3. Es erlaubt den Zugriff auf die für Ihren Login gültigen Dateifreigaben. Mit diesem Modul können Sie Dateien auf dem Server hochladen, kopieren, verschieben und löschen. Bilderliste: Diese Funktion zeigt die Bilder im großen Format an. Die Pixelgröße der Bilder wird ebenfalls angezeigt. Benutzer Aufgaben: Das Aufgaben-Center bietet Ihnen Zugriff auf Ihre interne To-Do- Liste, Nachrichten, Notizen, Befehle, usw. Es bietet Ihnen ebenso Verweise auf die am häufigsten bearbeiteten Seiten. Einst(ellungen): Dieses Modul dient zur Einstellung Ihres Backend Benutzerprofils. Hier können Sie Ihren Namen, Ihre Adresse, die benutzte Backend Sprache und viele andere allgemeine Eigenschaften des Systems für Ihren Benutzer einstellen Navigationsleiste Abbildung 4: Navigationsleiste Mittels des Seitenbaums sieht der Benutzer die hierarchische Ordnung der Seiten und kann zu jeder Seite gelangen, diese auswählen und bearbeitet. Achtung! Man unterscheidet zwischen dem Klick auf das Symbol links von dem Titel der Seite und dem Klick direkt auf den Titel! Klick auf den Titel der Seite: Auf diese Weise öffnet man in der Detailansicht die ausgewählte Seite. Klick auf das Symbol: Es öffnet sich ein eigenes Menü, das weitere Funktionen beinhaltet. Falls das Menü unabsichtlich geöffnet wurde, lässt es sich dadurch wieder einfach schließen, indem man mit dem Mauszeiger das Menü verlässt

7 3. Einfache Funktionen 3.1. Neue Seite anlegen Der Vorteil von Typo3 ist, dass der Einsatz sehr einfach ist und man das Ergebnis sofort betrachten kann. Dies wird bereits beim Erstellen von den ersten Seiten klar. 1 2 Abbildung 5: Anlegen einer neuen Seite (Neue Seite) Um eine neue Seite zu erstellen gibt es grundsätzlich 2 verschiedene Möglichkeiten. Bei der ersten und für Typo3-Anfänger geeigneteren Variante klickt man auf den Titel der Überseite und wählt anschließend den Button Neue Seite

8 Abbildung 6: Anlegen einer neuen Seite (Position auswählen) Hat man den Button Neue Seite geklickt, wählt man anschließend die Position der neuen Seite aus. Dazu muss man den richtigen grauen Pfeil anklicken. 1 2 Abbildung 7: Anlegen einer neuen Seite (Seitentitel wählen und speichern) In diesem Abschnitt wird nun die neue Seite tatsächlich erstellt. Dazu muss ein Seitentitel angegeben werden. Alle anderen Optionen sind optional und für den Anfang nicht relevant. Abschließend muss gespeichert werden. Hierfür stehen 3 mögliche Varianten zur Auswahl: 1. Dokument sichern 2. Dokument sichern und Website anzeigen 3. Dokument sichern und schließen Mit diesem Symbol wird die Seite nicht gespeichert

9 Für Benutzer, die im Umgang mit Typo3 schon etwas sicherer sind, steht die 2. Variante zur Verfügung, die etwas schneller ist. Statt auf den Text der Überseite zu klicken, wird auf das - Symbol links der Überseite geklickt. Dadurch öffnet sich ein Kontextmenü, in dem der (3.) Eintrag Neu gewählt werden muss. Abbildung 8: Anlegen einer neuen Seite (2. Variante) Anschließend wählt man in der Detailansicht Seite (in) aus und überspringt dadurch die Auswahl der Position der Seite. Die Seite wird automatisch als oberste Seite unter der Überseite ausgewählt. Danach kommt man zu dem bereits bekannten Bildschirm aus Abbildung 7: Anlegen einer neuen Seite (Seitentitel wählen und speichern). Klickt man eine Zeile darunter auf Klicken Sie hier, um den Assistenten aufzurufen, so kann man in dieser Variante ebenso die Position auswählen. Kurzform für das Anlegen einer neuen Seite 1. Überseite auswählen 2. Neue Seite anklicken 3. Position der neuen Seite bestimmen 4. Seitentitel einfügen und abspeichern Achtung! Wird eine Seite angelegt, so ist diese zuerst ausgeblendet. Das heißt, dass diese für den Frontend-Benutzer nicht sichtbar ist. Ist eine Seite ausgeblendet, so befindet sich davor folgendes Symbol: Um die Seite einzublenden und sichtbar zu machen, muss man auf das Symbol klicken und im aufgehenden Kontextmenü den (4. letzten) Eintrag Einblenden auswählen. Seiten können auch wieder ausgeblendet werden. Dazu muss im Kontextmenü der Eintrag Ausblenden gewählt werden. Der Sinn dieser Funktion ist, dass z.b. an unfertige Seiten gearbeitet werden kann, ohne dass diese für Besucher der Website sichtbar ist

10 3.2. Neuen Inhalt einfügen Ist eine Seite anlegt worden, so befindet sich darauf noch kein Inhalt. Wie dieser erzeugt wird, ist hier beschrieben. Der gleiche Weg gilt, wenn ein zusätzlicher Inhalt eingefügt werden soll. Der erste Schritt ist, dass die Seite in der Navigationsleiste ausgewählt wird, auf der der Inhalt eingefügt werden soll. a b Abbildung 9: Neuen Inhalt einfügen Für den nächsten Schritt stehen wieder 2 Varianten zur Auswahl, wobei Variante a nur zur Verfügung steht, wenn auf dieser Seite noch kein Inhalt vorhanden ist. Zuerst zu Variante b: Hat man auf den Button Neuer Inhalt geklickt, so erscheint folgender Bildschirm

11 Abbildung 10: Neuen Inhalt einfügen (Auswahl des Seitentyps) Folgende verschiedene Seitentypen stehen dem Benutzer zur Verfügung die restlichen sind zwar angegeben, aber gesperrt! Welcher von dem obigen Seitentyp nun eingefügt werden soll kommt darauf an, welcher Inhalt präsentiert werden soll. Abbildung 11: Neuen Inhalt einfügen (Auswahl der Position) Hier muss die Position mittels dem grauem Pfeil ausgewählt werden, an der der Inhalt eingefügt werden soll. Bei Variante a fehlt dieser Schritt, da noch kein anderer Inhalt auf dieser Seite eingefügt worden ist. Abhängig vom ausgewählten Seitentyp kommt nun ein jeweils leicht veränderter Bildschirm. Unabhängig davon ist aber die Funktion des Speicherns des Seiteninhalts. Hierfür stehen wieder die 3 schon bekannten Varianten zur Auswahl: 1. Dokument sichern 2. Dokument sichern und Website anzeigen 3. Dokument sichern und schließen Mit diesem Symbol wird der Inhalt nicht gespeichert sondern verworfen

12 Seitentyp Normaler Text Abbildung 12: Seitentyp Nur Text Das Erstellen eines Seiteninhaltes ist egal welcher Typ gewählt worden ist sehr einfach und läuft immer nach demselben Schema ab. Als erstes kann eine Überschrift eingegeben werden, was aber nicht Pflicht ist. Danach kann im großen weißen Feld bereits der Inhalt eingegeben werden. Zur Formatierung stehen hier verschiedenste Symbole zur Auswahl, die bereits aus den verschiedensten anderen Programmen wie Microsoft Word, usw. bekannt sein dürften. Für das setzen von Links verweise ich auf Abschnitt 4.2. Setzen von Links

13 Zum Abschluss muss wie immer der Inhalt gespeichert werden, wofür wieder die 3 bekannten Varianten Dokument sichern, Dokument sichern und Website anzeigen und Dokument sichern und schließen zur Auswahl stehen Seitentyp Nur Bilder Abbildung 13: Seitentyp Nur Bilder

14 Um diese erweiterte Ansicht zu erhalten, muss am Ende der Seite die Option Zweite Optionspalette anzeigen angehakt sein. Auf dem ersten Blick mag diese Ansicht wegen der Vielzahl an Möglichkeiten verwirren, aber es schaut viel komplizierter aus als es wirklich ist. Die wichtigsten Punkte wurden in der Grafik gekennzeichnet. 1. Überschrift: Wie bei jedem Seiteninhalt kann auch bei diesem Seitentyp eine Überschrift vergeben werden. 2. Auswahl der Bilder: Nach dem Klicken auf folgendes Symbol öffnet sich der sogenannte Element Browser in einem eigenen Fenster. Abbildung 14: Element Browser Hier kann man die Bilder auswählen, die man in die Seiteninhalt einfügen will. Dazu muss man zuerst den Ordner am Server auswählen, in dem die Bilder gespeichert sind. Dies geschieht mittels des Ordnerbaums auf der linken Seite des Element Browsers. Mit dem -Symbol öffnet man einen Ordner, um zu den Unterordnern zu gelangen. Anschließend muss man den Ordner mittels Klick auf den Ordner-Namen auswählen. Danach sieht man die dort gespeicherten Bilder Mit dem - Symbol, das sich rechts neben jedem Titel des Bildes befindet, fügt man dieses Bild zu dem Seiteninhalt dazu. Sind nun alle Bilder hinzugefügt, so kann der Element Browser geschlossen werden

15 Abbildung 15: Seitentyp Nur Bilder (Bilder hinzugefügt) Man sieht nun, welche Bilder man zu dem Seiteninhalt hinzugefügt hat. Allerdings ist es oft schwer zu wissen, die Bilder anhand des Dateinamens zu identifizieren und aus diesem Grund ein Tipp: Abbildung 16: Seitentyp Nur Bilder (Bilder hinzugefügt) II Klicken Sie auf das - Symbol, denn dadurch wird nicht nur die bisherige Arbeit gespeichert, sondern auch ein Vorschaubild zu jedem Bild angezeigt. Nun können Sie die Bilder sortieren und in die richtige Reihenfolge bringen. Dazu markieren sie ein Bild (oder mehrere mit der gedrückten STRG-Taste) und klicken auf das - Symbol. Pro Klick bringen sie das/die markierte/n Bild/er um einen Platz weiter vor. Diese Reihenfolge ist insofern wichtig, dass sie bestimmt, wie später die Bilder auf der Website angeordnet sind. Achtung! Um diese Sortierung zu umgehen, klicken Sie einen Schritt vorher im Element Browser die zu hinzufügenden Bilder bereits hier in der richtigen Reihenfolge an. 3. Auswahl der Spalten: Hier können sie die Anzahl der Spalten festlegen. 4. Hinzufügen eines Bildtextes: Unter jedes Bild können Sie einen beschreibenden Text hinzufügen. Wichtig: Pro Bild gilt eine Zeile, das heißt, wenn Sie 2 Bilder

16 hinzugefügt haben und nur für das 2. einen Bildtext wollen, so müssen sie zuerst hier eine Leerzeile machen! Umbrüche sind mittels folgendem Code möglich: <br> 5. Speichern: Zum Abschluss muss wie immer der Inhalt gespeichert werden, wofür wieder die 3 bekannten Varianten Dokument sichern, Dokument sichern und Website anzeigen und Dokument sichern und schließen zur Auswahl stehen. Das Hochladen von neuen Bildern wird in Abschnitt Variante 2 (Element Browser) erklärt! Seitentyp Text mit Bild Es ist egal, ob sie bei der Auswahl des Seitentyps Text mit darunter liegendem Bild oder Text mit rechts liegendem Bild, denn Sie können diese Eigenschaft später ebenso noch festlegen. Der Bildschirm bei diesem Seitentyp ist eine Kombination von Seitentyp Normaler Text und Seitentyp Nur Bilder. Aus diesem Grund sehen Sie bei Problemen bitte bei dem Abschnitt des jeweiligen Seitentyps nach. Wert sollte allerdings auf folgende Option gelegt werden Abbildung 17: Seitentyp Text mit Bild (Position) Wie der Name bereits verrät, wird hier die Position der eingefügten Bilder festgelegt. Klicken Sie, um eine andere Position festzulegen, entweder auf eines der in der Grafik gezeigten Bilder oder wählen Sie die Position mittels des Dropdown-Menüs aus. Auch die Anzahl der Spalten sollte passend verändert werden

17 4. Weitere Funktionen 4.1. Upload von Bildern Um neue Bilder auf den Server hochzuladen gibt es 2 verschiedene Varianten. Variante 2 ist insbesonders dann geeignet, wenn Sie die neuen Bilder sofort für einen neuen Seiteninhalt benötigen Variante 1 Klicken Sie in der Modulleiste auf Navigationsleiste mittels dem - Bilder. Wählen Sie anschließend in der -Symbol den Ordner aus, in den Sie die neuen Bilder hochladen wollen bzw. in dem Sie einen neuen Ordner erstellen wollen. Zum Hochladen von Bildern klicken Sie auf das - Symbol neben dem Überordner und wählen Sie im Kontextmenü die (2.) Option Datei-Upload aus. Abbildung 18: Datei-Upload (Datei-Auswahl) Zur Kontrolle sehen Sie auf dem Bildschirm ganz oben den Pfad und den Ordner, in dem die Bilder gespeichert werden. Wollen Sie mehr als 1 Bild gleichzeitig hochladen, so ist es zu empfehlen, in dem Dropdown-Menü die Anzahl passend zu verändern. Nun wählen Sie den Button Durchsuchen aus und wählen auf Ihrem eigenen Computer die Bilder aus, die Sie hochladen möchten. Anschließend drücken sie den Button Upload

18 Zum Erstellen eines neuen Ordners klicken Sie auf das Überordner und wählen Sie im Kontextmenü die (3.) Option Neu aus. - Symbol neben dem Abbildung 19: Datei-Upload (Neuer Ordner) Zur Kontrolle sehen Sie auf dem Bildschirm ganz oben den Pfad und den Ordner, in dem der neue Ordner erstellt wird. Wollen Sie mehr als 1 Ordner gleichzeitig erstellen, so ist es zu empfehlen, in dem Dropdown-Menü die Anzahl passend zu verändern. Nun schreiben Sie in das leere Feld den Namen des neuen Ordners und drücken den Button Ordner anlegen Variante 2 (Element Browser) Variante 2 ist dann vor allem empfehlenswert, wenn Sie einen neuen Seiteninhalt mit Bildern (z.b. Nur Bilder oder Text mit Bild ) erstellen wollen und dafür Bilder hochladen möchten. Bei dieser Variante werden die Bilder direkt im Element Browser hochgeladen. Abbildung 20: Datei-Upload (Variante 2) Obige Abbildung befindet sich im Element Browser ganz unten! Um Bilder hochzuladen, müssen sie davor den Ordner auswählen, in dem Sie die Bilder speichern wollen. Dazu navigieren Sie in der Ordnerstruktur mittels -Symbol zum Ordner und klicken ihn anschließend an. Zur Kontrolle sehen Sie den Pfad und den

19 Ordner, in dem die Bilder gespeichert werden. Nun wählen Sie den Button Durchsuchen aus und wählen auf Ihrem eigenen Computer das Bild aus, das Sie hochladen möchten. Anschließend drücken sie den Button Upload. Wollen Sie mehr als 3 Bilder gleichzeitig hochladen, so müssen Sie dies nacheinander machen. Um einen Ordner anzulegen müssen sie davor den Ordner auswählen, in dem Sie den neuen Ordner anlegen wollen. Dazu navigieren Sie in der Ordnerstruktur mittels -Symbol zum Ordner und klicken ihn anschließend an. Zur Kontrolle sehen Sie den Pfad und den Ordner, in dem der Ordner erstellt wird. Nun schreiben Sie in das leere Feld neben dem Button Ordner anlegen den Namen des neuen Ordners und drücken anschließend diesen Button Setzen von Links Abbildung 21: Link einfügen Um in einem Text in einem Seiteninhalt einen Link zu setzen, markieren sie den Textteil, der verlinkt werden soll und drücken das - Symbol. 1 2 Abbildung 22: Link einfügen (Ziel wählen)

20 Standardmäßig ist die Option Seite ausgewählt (siehe Pfeil). Mit der Option werden interne Links (d.h. zu Seiten innerhalb von Typo3) gesetzt. Um nun eine Seite zu verlinken, wählen Sie im Seitenbaum die zu verlinkende Seite aus. Wie immer navigieren Sie im Seitenbaum mit dem -Symbol. Nach dem Klick auf den Titel einer Seite wird das Fenster automatisch geschlossen und der Link gesetzt. Abbildung 23: Link einfügen (Externer Link) Um externe Links (d.h. zu Seiten außerhalb von Typo3) zu setzen, wählen Sie die Option Externe URL aus. Hier können Sie nun unter URL die Adresse der zur verlinkenden Seite setzen. Unter Ziel können Sie über das Dropdown-Menü die Optionen oben (die Seite wird nicht in einem neuen Fenster geöffnet) und Neues Fenster ((die Seite wird nicht in neuen Fenster geöffnet). Abschließend drücken Sie den Button Link setzen. Abbildung 24: Link einfügen ( -Adresse) Um eine -Adresse zu verlinken, wählen Sie die Option aus und fügen dort die zu verlinkende -Adresse ein. Anschließend klicken Sie den Button Link setzen. Falls Sie einen Link gesetzt haben und nicht mehr wissen, was verlinkt wird, oder die Verlinkung ändern möchten, so markieren Sie den verlinkten Text und drücken das - Symbol. Nun wird Ihnen der aktuelle Link gezeigt

21 4.3. Bearbeiten von Seiteninhalten Um einen Seiteninhalt bearbeiten zu können, müssen Sie vorher die Seite öffnen, auf der sich der Seiteninhalt befindet. Dazu klicken Sie in der Navigationsleiste diese Seite an. Abbildung 25: Seiteninhalt ändern Nun sehen Sie eine Übersicht über alle Seiteninhalte, die sie auf dieser Seite angelegt haben. Für jedes dieser Elemente stehen Ihnen folgende Funktionen zur Verfügung: Der Stift steht in Typo3 immer für Bearbeiten. Klicken Sie auf ihn, um diesen Datensatz zu bearbeiten. Dieses Symbol steht für: Neuen Datensatz nach diesem einfügen. / Mit diesen Symbolen können Sie den jeweiligen Seiteninhalt nach unten bzw. nach oben bewegen. Mit diesem Symbol können Sie einen Seiteninhalt verbergen, sodass er für Besucher der Website nicht mehr sichtbar aber immer noch vorhanden ist. Mit diesem Symbol können Sie einen Seiteninhalt löschen. Achtung: Das System fragt nach, ob er Inhalt wirklich gelöscht werden soll. Bestätigen Sie, ist er für immer weg (es gibt keinen Papierkorb)!

22 - 22 -

23 Abbildungsverzeichnis Abbildung 1: Login 3 Abbildung 2: Backend-Oberfläche 4 Abbildung 3: Modulleiste 5 Abbildung 4: Navigationsleiste 6 Abbildung 5: Anlegen einer neuen Seite (Neue Seite) 7 Abbildung 6: Anlegen einer neuen Seite (Position auswählen) 8 Abbildung 7: Anlegen einer neuen Seite (Seitentitel wählen und speichern) 8 Abbildung 8: Anlegen einer neuen Seite (2. Variante) 9 Abbildung 9: Neuen Inhalt einfügen 10 Abbildung 10: Neuen Inhalt einfügen (Auswahl des Seitentyps) 11 Abbildung 11: Neuen Inhalt einfügen (Auswahl der Position) 11 Abbildung 12: Seitentyp Nur Text 12 Abbildung 13: Seitentyp Nur Bilder 13 Abbildung 14: Element Browser 14 Abbildung 15: Seitentyp Nur Bilder (Bilder hinzugefügt) 15 Abbildung 16: Seitentyp Nur Bilder (Bilder hinzugefügt) II 15 Abbildung 17: Seitentyp Text mit Bild (Position) 16 Abbildung 18: Datei-Upload (Datei-Auswahl) 17 Abbildung 19: Datei-Upload (Neuer Ordner) 18 Abbildung 20: Datei-Upload (Variante 2) 18 Abbildung 21: Link einfügen 19 Abbildung 22: Link einfügen (Ziel wählen) 19 Abbildung 23: Link einfügen (Externer Link) 20 Abbildung 24: Link einfügen ( -Adresse) 20 Abbildung 25: Seiteninhalt ändern

24 Anhang Bilder verkleinern im Photoshop 1. Photoshop öffnen 2. Bilddatei öffnen 3. Bild /Bildgröße/ Breite => 300 Pixel, Höhe 225 Pixel (Die Klammer muss verbunden sein, damit sich das Bild proportional verkleinert) 4. Bild/Einstellungen/ Autotonwertkorrektur oder mit Helligkeit/Kontrast Bild verbessern. 5. Datei/ Für Web speichern, mittlere Qualität ca. 25kb, ev. beim Qualitätsfeld Zahl nach oben oder unten verstellen. 6. Speichern in, neu erstellten Ordner auswählen, Dateiname eingeben (Kleinbuchstaben, keine Umlaute, keine Sonderzeichen), Dateityp jpg, speichern