Einleitung
Dieses TYPO3-Handbuch unterstützt Sie bei der Einpflege von Inhalten in ihre Website. Zur Unterstützung der schriftlichen Beschreibung enthält jedes Kapitel bzw. Unterkapitel Bilder, die mit nummerierten Pfeilen versehen sind. Um den jeweiligen Pfeil zur Beschreibung leicht zu finden, stehen diese direkt dahinter. (1-2) bedeutet 1. Bild, 2. Pfeil.
Wenn Sie sich das Handbuch herunterladen möchten, können Sie dies hier tun:
Download
1. Grundaufbau
In diesem Kapitel geht es um den Login zur TYPO3-Oberfläche und den grundlegenden Aufbau der TYPO3-Oberfläche. Die Pflegeoberfläche ist in drei Bereiche aufgeteilt. Im ersten Bereich, ganz links (1-1), befindet sich die Auswahl der verschiedenen Ansichten und die Dateiliste. Im zweiten Bereich (1-2), befindet sich der Strukturbaum, der alle vorhandenen Seiten, auch Inaktive, anzeigt und die Position im Menü. Der dritte Bereich (1-3) zeigt alle Inhaltselemente der aktuell ausgewählten Seite an. Je nach Auswahl im linken Bereich (1-1) werden die Inhaltselemente unterschiedlich dargestellt.
1.1 Login
Um sich in die Oberfläche einzuloggen, öffnen Sie ihren bevorzugten Browser. Wir empfehlen Firefox, Google Chrome, Safari oder Edge. Vom Internet Explorer raten wir dringend ab, da dieser einige Funktionen nicht unterstützt und die Weiterentwicklung von Microsoft eingestellt wurde.
Geben Sie in das Adressfeld (1-1) die URL (Internetadresse: www.name-ihrer-seite.de) ihrer Kita ein. Öffnen sie sich einen weiteren Tab (Windows: strg+t, Mac: cmd+t) und geben hier in das Adressfeld (2-1) erneut ihre Kita-URL (Internetadresse: www.name-ihrer-seite.de/typo3) ein und hängen /typo3 dahinter . Nun haben Sie einmal die aktuelle Seite zum Überprüfen der geänderten Inhalte und einmal die Login-Seite zur Pflegeoberfläche. Geben Sie nun in das Benutzername-Feld (2- 2) ihren Nutzernamen ein, dann das Passwort (2-3) und klicken danach auf „Anmeldung“ (2-4).
1.2 Strukturbaum auf- / zuklappen
Bei der ersten Anmeldung ist der Strukturbaum meist noch zugeklappt. Um diesen zu öffnen, klicken Sie einmal auf den kleinen Pfeil links neben der Weltkugel (1-1). Nun sehen Sie alle Seiten untereinander aufgelistet. Die Reihenfolge ist die gleiche wie in dem Menü auf ihrer Internetseite. Einige Seiten haben wiedrum einen kleinen Pfeil (2-1). Dies bedeutet, dass diese Seite mindestens eine Unterseiten hat. Durch einen Klick auf den kleinen Pfeil werden diese unter der „Oberseite“ angezeigt. Bei erneutem Klick lassen sich diese wieder zuklappen.
1.3 Verschiedene Ansichten
In der Linken Spalte der Oberfläche lassen sich die Ansichten ändern. Im Normalfall kann mit der Ansicht „Seite“ (1-1) gearbeitet werden. Die Inhaltselemente werden im rechten Bereich angezeigt. Der Inhalt wird komprimiert dargestellt. Lassen Sie sich daher nicht von fehlenden Abständen irritieren. In dieser Ansicht lassen sich die Inhaltselemente anders positionieren und weitere Inhaltselemente hinzufügen, entfernen oder "verstecken".
In der Ansicht „Liste“ (2-1) werden die Elemente untereinander in einer Art Liste dargestellt. Diese Ansicht eignet sich vor allem zur Einpflege von News und Aktuelles (Kapitel 5).
2.1 Seiten umbenennen
Um einer Seite einen neuen Namen zu geben, klicken Sie auf das kleine Symbol links neben dem Namen den Sie ändern möchten (1-1). Nun erscheint ein Dropdown-Menü. Dort klciken Sie auf „Bearbeiten" (2-1) und können nun einen neuen Namen eingeben. Ans Speichern denken.
Ein anderer und meistens auch schnellerer Weg ist es, doppelt auf den Seitennamen zu klicken (3-1). Nun können Sie einen anderen Name eingeben. Wenn Sie nun auf Enter drücken oder in eine freie Fläche klicken wurde der neue Namen übernommen.
2.2 Seiten deaktivieren / aktivieren
Um eine Seite zu aktivieren oder deaktivieren, weil diese Seite aktuell nicht gebraucht wird oder noch nicht fertig ist bzw. nun gebraucht wird, klicken Sie einmal auf das kleine Papiersymbol links neben dem Seitennamen im Strukturbaum. Nun öffnet sich ein Menü. Hier können Sie dann die Seite „Aktivieren“ bzw. „Deaktivieren“ (1-1.). Wenn eine Seite deaktiviert ist wird dies durch ein kleines rotes Symbol angezeigt.
Ein anderer Weg eine Seite zu aktivieren oder zu deaktivieren ist es, wenn Sie im Dropdown-Menü "Bearbeiten" auswählen. Unter dem Reiter „Zugriff“ können Sie einen Haken setzen in „Deaktivieren“ (1-2). Dadurch wird die Seite dann sichtbar (Haken nicht gesetzt) bzw. unsichtbar (Haken gesetzt).
Wenn Sie den zweiten Weg bevorzugen, müssen Sie einmal speichern (1-3).
2.3 Seiten erstellen
Um eine neue Seite zu erstellen, klicken Sie auf das Papiersymbol neben einer beliebigen Seite (1-1). Nun erscheint ein Dropdown-Menü, bei dem Sie mit der Maus auf „Seitenaktion“ (1-2) fahren und dann auf "Neu“ (1-3) klicken müssen. Nach dem Klick ist im rechten Bereich die Auswahl an welcher Position Sie die neue Seite haben möchten zu sehen.
Jetzt klicken Sie auf den kleinen schwarzen Pfeil an der Stelle wo Sie die Seite haben möchten. Ein Beispiel wäre ganz Oben (2-1). Hier wird die neue Seite als eine neue Hauptseite angelegt. Soll die Seite eine Unterseite einer anderen Seite werden, klicken Sie auf den kleinen eingerückten Pfeil unter der Seite (2-2). Sollten Sie aus Versehen eine falsche Position ausgewählt haben, ist dies nicht schlimm, da die Position auch nachträglich noch geändert werden kann (Kapitel 2.6).
Nun erscheint eine neue Seite in der noch ein paar Einstellungen gemacht werden müssen. Unter dem Reiter Allgemein (3-1) müssen Sie den Seitentitel eingetragen (3-2). Dies ist dann der Name, der in der mittleren Spalte angezeigt und jederzeit abgeändert werden kann (Kapitel 2.1).
Wichtig: Ans Speichern denken!
2.4 Seiten löschen
Um eine Seite zu löschen, klicken Sie auf das kleine Papiersymbol vor der entsprechenden Seite im Strukturbaum (1-1). Im Dropdown-Menü, das daraufhin erscheint, fahren Sie mit der Maus auf „Seitenaktion“ (1-2) und klciken dann auf „Löschen“ (1-3). Nun müssen Sie die Aktion einmal bestätigen (2-1).
2.5 Zugriff und Sichtbarkeit
Möchten Sie eine Seite nur für einen gewissen Zeitraum online stellen und dann wieder "verstecken" können Sie diesen Zeitraum einstellen. Hierfür klicken Sie einmal auf das Blattsymbol links neben dem Seitennamen im Strukturbaum und wählen im erscheinenden Menü "Bearbeiten“ aus. Nun können Sie unter dem Reiter „Zugriff“ (1-1) das Veröffentlichungsdatum (1-2) sowie Ablaufdatum (1-3) eingeben. Somit kann eine Seite vorbereitet werden, die dann automatisch zu dem angegebenen Datum automatisch online gestellt wird und wenn ein Ablaufdatum eingestellt wurde auch zu dem Datum wieder "verschwindet".
Wichtig: Ans Speichern denken!
2.6 Seite verschieben
Um die Position einer Seite im Menü zu ändern muss die Seite verschoben werden. Hierzu fahren Sie mit der Maus auf den Namen der Seite im Strukturbaum (1-1) halten die Maustaste gedrückt und zieht die Seite an die Position an der die Seite stehen soll (2-1.). Ziehen Sie die Seite unter eine andere Seite erscheint sie an dieser Stelle. Wird die Seite auf eine andere Seite gezogen wird sie zu einer Unterseite dieser Seite.
3. Inhalte
Um Internetseiten mit Leben zu füllen, müssen Inhalte erstellt und eingepflegt werden. Diese werden in Elemente eingefügt und können dann vom Browser dargestellt werden. In diesem Kapitel geht es unter anderem darum Elemente zu erstellen, zu verschieben und zu löschen. Außerdem können Sie nachlesen wie Texte und Bilder verwendet werden.
3.1 Element erstellen
Um ein neues Element zu erstellen in dem dann Texte und evtl. Bilder eingefügt werden können, schalten Sie in die „Seite“-Ansicht (Kap. 1.3), klicken dann auf die Seite in die das Element eingefügt werden soll und klicken dann auf Inhalt (1-1). Wird auf den Inhalt-Button oberhalb eines bereits existierenden Elements geklickt wird dieses drüber eingefügt. Dementsprechend erscheint ein neues Element darunter, wenn der Inhalt-Button unterhalb eines existierenden Elements geklickt wird. Die Reihenfolge können Sie auch noch nachträglich ändern (Kap. 3.5). Als nächstes müssen Sie auswählen um was für ein Element es sich handelt. Hier können Sie in der Regel "Text & Bild" (2-1) ausgewählen, auch wenn Sie kein Bild einfügen möchten, da nicht ausgefüllte Felder einfach nicht ausgegeben werden. Als nächstes müssen Sie eine Überschrift vergeben (3-1), auch wenn diese später nicht angezeigt werden soll. Wird dieses Feld nicht ausgefüllt, lässt sich das Element und damit alle eingefügten Daten nicht speichern. Soll die Überschrift nicht angezeigt werden, müssen Sie beim Feld "Typ“ unterhalb der Überschrift "verborgen“ auswählen. Der Text zu diesem Element wird dann in das Text-Feld eingefügt (3-2). Um das Thema Texte bearbeiten geht es im Kapitel 3.6.
Wichtig: Ans Speichern denken!
3.3 Element kopieren
Möchten Sie ein Element kopieren, klicken Sie auf das linke Symbol im grauen Bereich eines Elementes. Im erscheinenden Menü klicken Sie nun auf "kopieren" (1-1). Nun klicken Sie erneut auf das Symbol im grauen Bereich und dort auf "Einfügen nach“ (2-1). Dann müssen Sie bestätigen, dass Sie die Kopie einfügen möchten (3-1). Die Position lässt sich auch im Nachhinein noch ändern. Dieses wird im Kapitel 3.5. behandelt.
3.4 Element aktivieren / deaktivieren
Um ein Element sichtbar zu machen, müssen Sie es aktivieren. Genauso umgekehrt. Angezeigt wird dies dadurch, dass ein deaktiviertes Element im Gegensatz zu aktiven Elementen blasser aussieht und ein kleines rotes Symbol im grauen Bereich des Elementes zu sehen ist. Um das Element zu aktivieren klicken Sie auf das kleine Schieberegler-Symbol (1-1). Um es zu deaktivieren klicken Sie erneut auf das Symbol (2-1).
3.5 Reihenfolge von einem Element ändern
Um die Reihenfolge von Elementen zu ändern, klicken Sie in den grauen Bereich eines Elementes (1-1), halten die Maustaste gedrückt und verschieben das Element an die gewünschte Position. Die Positionen die möglich sind, werden durch grüne Bereiche gekennzeichnet die erscheinen, sobald Sie ein Element bewegen.
3.6 Texte bearbeiten
Um die Texte zu bearbeiten, klicken Sie in den weißen Bereich des Elementes in das der Text soll. Nun erscheint eine Oberfläche in der einige Felder geändert werden können. Das obere Feld ist für die Überschrift (1-1). Im unteren Bereich kann der Text eingefügt werden (1-2).
Achtung: Wenn Texte kopiert werden (z.B. aus Word) dann muss der Text einmal bereinigt werden um Darstellungsfehler durch mitkopierte Foramtierungen zu vermeiden. Hierzu klicken Sie auf das kleine Besen-Symbol (2-1), haken zusätzlich "HTML-Formatierung" an und klicken dann einmal auf "OK“ (3-1).
Besser ist es allerdings, wenn der Text zunächst in einen reinen Text umgewandelt wird. Wenn Sie mit Windows arbeiten, öffnen Sie einmal das Programm "Editor" und fügen den Text einmal ein. Dann markieren Sie den Text erneut und kopieren ihn. Nun können Sie den Text in das Eingabefeld im TYPO3 einfügen.
Nutzen Sie einen Mac, öffnen Sie das Programm "TextEdit", fügen den Text einmal ein, wählen "Format" und dann "In reinen Text umwandeln", bestätigen einmal die Meldung mit "Ok" und können nun den Text in das Text Feld im TYPO3 einpflegen.
Überschriften lassen sich mit dem Dropdown-Menü auswählen. Hier ist standardmäßig "Kein Blockformat“ ausgewählt.
Wichtig: Ans Speichern denken!
3.7 Bilder bearbeiten
Arbeiten Sie immer mit Bildern, die sie bereits hochgeladen haben. Wie dies geht, können Sie im Kapitel 4.4. nachlesen.
Um Bilder einzufügen, klicken Sie in den weißen Bereich des Elementes in dem ihr Bild erscheinen soll. Nun öffnet sich eine Oberfläche in die Texte eingegeben werden können. Als nächstes klicken Sie auf den Reiter "Bilder“ (1-1) und danach auf „Bild hinzufügen“ (1-2). In das sich öffnende Fenster in dem Bilder ausgewählt werden können klicken Sie auf den Ordner in dem sich das Bild befindet (2-1) und dann auf das Bild (2-2). Möchten Sie gleichzeitig mehrere Bilder einfügen, vergrößern Sie das Fenster (2-3) und haken alle kleinen Kästchen neben den Bildern an, die sie in das Element einfügen möchten. Nun klicken Sie noch auf das kleine Symbol oberhalb der Bilderliste.
Nun ist das Bild bzw. die Bilder eingefügt. Mit einem klick in den grauen Bereich des Bildes (3-1) öffnet sich ein Bereich in der Sie noch eine Bildunterschrift hinzügen können.Hierzu setzen Sie ein Haken in das Feld "Elementspezifischen Wert setzen“ (4-1) und dann in dem Feld darunter die Bildunterschrift (4-2).Um die Position des Bildes im Element zu ändern, klicken Sie auf den Reiter "Erscheinungsbild“ (5-1) und wählen dann die Position, die Sie gerne hätte. Dies geht entweder über das Dropdown-Menü (5-2 / 6-1) oder direkt auf das jeweilige Symbol (5-3). Weiterhin können Sie in dieser Ansicht auch die Anzahl der Spalten über ein Dropdown-Menü auswählen (7-1 / 8-1) in der die Bilder angezeigt werden sollen.
Möchten Sie ein kleines Bild links neben dem Text einfügen, müssen Sie zunächst über das Dropdown-Menü (9-1) "Bild klein" auswählen. Um das Bild nun zu positionieren, müssen sie die passende Ausrichtung auswählen, die Sie wieder über das Dropdown-Menü (9-2) einstellen. Wählen Sie jetzt "Neben dem Text links". Wenn Sie Ihre Einstellungen gespeichert haben, können Sie sich nun das Ergebnis auf Ihrer Seite ansehen (10-1 / 10-2).
Wichtig: Ans Speichern denken!
3.8 Links setzen
Um im Text Links zu setzen, müssen Sie zunächst in den Text in dem der Link erscheinen soll. In Kapitel 3.6. steht wie Sie dort hinkommen. Nun schreiben Sie den Text, der verlinkt werden soll. Dies kann der Titel des PDFs sein, die Seite "www.test.de“ oder E-Mailadresse "max@mustermann.de“ vielleicht aber auch nur ein "lesen Sie hier“. Der Text muss dann markiert werden (1-1). Als nächstes klicken Sie auf die kleine Weltkugel (1-2). Nun öffnet sich ein Fenster in dem Sie auswählen können wie der markierte Text verlinkt werden soll.
Möchten Sie auf eine Haupt- oder Unterseite verlinken, finden Sie diese unter dem Reiter "Seite“ (2-1) und wählen die Seite im Seitenbaum (2-2) aus.
Handelt es sich um eine Datei, wie z.B. ein PDF, klicken Sie auf den Reiter "Datei“ (3-1), dann auf den Ordner im Verzeichnisbaum in dem das (zuvor hochgeladende) Dokument liegt (3-2) und wählen dort das Dokument aus (3-3).
Externe Links und E-mail-Adressen haben eine Besonderheit. Wenn Sie eine URL eingeben, z.B. www.test.de und drückt dann auf Enter, wird erkannt, dass es sich um einen Link handelt und der Link ist schon gesetzt. Bei E-mail-Adressen verhält es sich genauso.
Möchten Sie aber z.B. auf eine Unterseite einer externen Seite verlinken und nicht die ganze Adresse eingeben, z.B. www.test.de/unterseite1/unterseite2/unterseite3, können Sie www.test.de in das Textfeld eingeben, markieren, auf die Kugel klicken und dann auf den Reiter "Externe URL“ (4-1). Nun können Sie in das Feld "URL“ (4-2) die lange Adresse eingeben und dann auf "Link setzen“ (4-3) klicken. Genauso kann aber auch ein belieber Text markiert und für diesen dann der Link über Externe URL gesetzt werden. Ebenso verhält es sich mit dem Reiter "E-Mail“ (5-1 / 5-2 / 5-3).
Wichtig: Ans Speichern denken!
4. Dateien verwalten
In diesem Kapitel geht es um die Dateiverwaltung in TYPO3. Dateien werden in Ordnern abgelegt, die Sie in der "Dateiliste“ finden (1-1). Die Dateien liegen in Ordnern, die sich im mittleren Bereich der Seite befinden (1-2 / 1-3). Um besser zu sehen, worum es sich bei den Dokumenten handelt, können Vorschaubilder angezeigt werden. Hierzu setzen Sie einen Haken in "Vorschaubilder anzeigen" (1-4). Die Dokumente sehen Sie untereinander aufgelistet (1-5).
4.1 Ordner anlegen
Um den Überblick nicht zu verlieren, raten wir dazu Ordner anzulegen. Die Position wählen Sie, indem Sie auf den Ordner klicken in dem der neue Ordner angelegt werden soll (1-1.). Dann klciken Sie auf das kleine Symbol mit dem "+" (1-2.). Nun können Sie auswählen wie viele Ordner Sie erstellen möchten (2-1) und dann den Namen den der/die Ordner erhalten soll/en (2-2). Als letztes müssen Sie noch auf "Ordner anlegen“ (2-3.) klicken.
4.3 Ordner löschen
Um einen Ordner zu löschen muss dieser leer sein. Zunächst müssen also alle Bilder und Dateien gelöscht werden. Um Bilder aus einem Ordner zu löschen, klicken Sie einmal auf das Symbol neben dem Bild und wählen im erscheinenden Menü "Löschen" aus. Gibt es eine Fehlermeldung, wird das Bild noch irgendwo auf der Seite verwendet und muss dort erst gelöscht werden.
Den leeren Ordner löschen Sie dann, indem Sie neben dem Ordnernamen auf das kleine Ordner-Symbol klicken (1-1) und im erscheinenden Menü auf "Löschen" (1-2). Auch hier müssen Sie den Löschvorgang bestätigen. (2-1)
4.4 Datei hochladen
Um Dateien hochzuladen klciken Sie zunächst auf den Namen des Ordners in dem die Datei abgelegt werden soll (1-1). Nun erscheinen im linken Bereich die Dateien, die sich in diesem Ordner bereits befinden. Als nächstes klicken Sie im oberen Bereich auf das mittlere Symbol (1-2).
Nun erscheint ein Fenster, in dem Sie dann Ihre Festplatte nach der Datei suchen können. Haben Sie diese gefunden, klicken Sie diese an (2-1) und dann auf "Öffnen“ (2-2). Wollen Sie gleichzeitig mehrere Dateien hochladen, können Sie auch mehrere Dateien markieren und dann auf öffnen klicken.
Dateien können auch per sogenannten "drag&drop“ hochgeladen werden. Hierbei markieren Sie die Dateien auf Ihrer Festplatte, halten die Maustaste gedrückt und ziehen die Dateien in den Bereich oberhalb des Suchfeldes (3-1) und lassen die Maustaste dann los.
5.2 Richtigen Ordner wählen / neuen Datensatz anlegen
Nachdem in die richtige Seitenansicht gewechselt wurde, muss der Aktuelles Ordner (1-2) bzw. Termine Ordner (2-2) ausgewählt werden. Oberhalb der bisherigen Einträge (1-4) befindet ich ein Plus-Symbol (1-3). Wird hierauf geklickt, können Sie einen neuen Eintrag hinzufügen.
5.3 Termin / Aktuelles ausfüllen
Haben Sie einen neuen Datensatz angelegt, muss dieser gefüllt werden. Zunächst muss eine Überschrift (1-1) eingegeben werden. Als nächstes folgt der Teaser (1-2). Hier soll einmal kurz beschrieben werden worum es in dem Termin oder Aktuelles geht. Dies soll das Interesse des Besuchers der Seite wecken und animieren auf "weiterlesen“ zu klicken. Darunter können Sie das Datum (1-3) eintragen. Hierzu in Kapitel 5.4 mehr. Im unteren Bereich befindet sich ein Feld, um die Beschreibung einzugeben (1-4). Hier können Sie den Text zum Termin oder Aktuelles eingeben. Die Eingabe in dieses Feld funktioniert genau so wie die Eingabe bei anderen Inhaltselementen. Texteingaben werden in Kapitel 3.6 behandelt.
Wichtig: Ans Speichern denken!
5.4 Datum
Das Datum ist ein wichtiger Punkt, um den Termin / Aktuelles an der richtigen Stelle erscheinen zu lassen. Zunächst klicken Sie auf das Terminkalender-Symbol (1-1) und wählen dann im erscheinenden Terminkalender Uhrzeit und Datum des Termins aus (1-2). Die Uhrzeit regelt in diesem Fall nur die Reihenfolge der Termine / Aktuelles und hat nichts mit der eigentlichen Uhrzeit des stattfindenden Termins zu tun. Einstellen kann man dies über die kleinen Pfeile (1-3 / 1-4). Den konkreten Termin sollten Sie im Text beschreiben.
Wichtig: Ans Speichern denken!
5.5 Erscheinungstermin
Aktuelles und Termine können schon im Voraus erstellt werden, selbst wenn diese erst zu einem späteren Zeitpunkt erscheinen sollen. Hierzu klicken Sie auf den Reiter "Zugriff“ (1-1) und wählen dann das Datum und die Uhrzeit aus, zu der dieser Termin / Aktuelles online geschaltet werden soll (1-2).
Wichtig: Ans Speichern denken!
6.2 Informationen
Um die Informationen des Benutzters zu ändern, klicken Sie auf den Reiter "Persönliche Daten“ (1-1). Nun können Sie den Namen (1-2) und die E-Mail-Adresse (1-3) ändern. Möchten Sie per E-Mail benachrichtig werden, wenn sich jemand mit diesem Zugang angemeldet hat, können Sie den kleinen Kasten anklicken (1-4). Hierdurch werden Sie direkt informiert, falls sich jemand unbefugt Zugang verschafft. Weiterhin können Sie hier die Sprache einstellen (1-5).
Wichtig: Ans Speichern denken!
7.2 TinyPNG
Warum lädt meine Seite zu langsam?
Wenn Ihre Seite viele Bilder enthält, kann es zu einer hohen Datenmenge kommen, die das Laden Ihrer Seite verlangsamt. Dies können Sie umgehen, wenn Sie Ihre Bilder komprimieren. Gehen Sie dafür auf die Seite tinypng.com und ziehen Sie mit Drag and Drop Ihr ausgewähltes Bild in das gestrichelte Feld (1-1). Warten Sie bis Ihr Bild vollständig komprimiert ist und klicken sie dann auf "download" (2-1). Jetzt können Sie Ihr Bild abspeichern und erneut auf Ihrer Seite hochladen. Ihre Seite sollte nun schneller laden.
Kontakt
Mues + Schrewe GmbHWerbeagentur
Kreisstraße 118
59581 Warstein-Suttrop
Telefon: 02902 97920
info(at)mues-schrewe.de
www.mues-schrewe.de