ARBEITEN MIT TYPO3 - Eine Anleitung zur redaktionellen Arbeit mit TYPO3 - Hauptsache Kommunikation GmbH. Hauptstraße Hofheim / Taunus

Transkript

1 ARBEITEN MIT TYPO3 - Eine Anleitung zur redaktionellen Arbeit mit TYPO3 - Hauptsache Kommunikation GmbH. Hauptstraße Hofheim / Taunus

2 INHALT 1. Einstieg Anmeldung und erste Schritte Einpflegen von Inhalten / Seiteninhalte ändern und anlegen Seiten anlegen und bearbeiten News anlegen Glossar

3 1. Einstieg TYPO3 ist ein freies Content-Management-System (Inhaltsverwaltungssystem), das für die Erstellung und Konfiguration von Websites, als auch für das Ändern von Website-Inhalten verwendet wird. Aufgrund seiner leichten Bedienbarkeit auch ohne Vorkenntnisse ist dieses Content Management System sehr beliebt. Ein weiterer Vorteil ist, dass Content (also Inhalte) direkt im Backend bearbeitet und für das Frontend freigeschaltet werden kann, ohne auf einen Webtechniker angewiesen zu sein: Dies bedeutet eine extrem hohe Pflegbarkeit von Content zu jeder Zeit. In dieser Anleitung soll erklärt werden, wie Inhalte im TYPO3 geändert, Seiten angelegt und verschiedene Elemente angelegt oder bearbeitet werden können. Dieses Handout leistet jedoch keine Unterstützung bei der Programmierung von Websites. 2

4 2. Anmeldung und erste Schritte Um in das persönliche Backend, den Verwaltungsbereich, zu gelangen, wird /typo3 an die eigene URL gehängt. Mit der URL gelangt man ins Backend. Nach der Anmeldung erscheint die Startseite des Backends. In der linken Spalte befindet sich der Linke Seitenbaum mit den einzelnen Modulen von TYPO3: - Über das Modul Seite können neue Seiten angelegt und bearbeitet werden. Es bietet zudem einen schnellen Zugriff auf den Hauptseiteninhalt mit allen Content-Elemente und dazugehörigen Details. - Das Modul Anzeigen zeigt die aktuelle Website an; es werden geänderte Inhalte direkt im Frontend angezeigt. - Das Modul Liste zeigt alle Datensätze einer Seite an. Hier wird eine Übersicht aller Content-Elemente einer Seite dargestellt. Anders als im Modul Seite können normale Seiten hier nicht bearbeiten werden. - Das Modul Info ermöglicht die Anzeige seitenbezogener Informationen wie Seitenzugriffe oder Änderungsprotokolle. - Das Modul Dateiliste ermöglicht den Zugriff auf Dateien und Ordner, die zuvor im Backend hochgeladen wurden. - Das Modul Funktionen beinhaltet allgemeine Export- und Importfunktion. Darüber hinaus können über dieses Modul automatisiert Seiten angelegt, bearbeitet und umsortiert werden. 3

5 In der mittleren Spalte befindet sich der TYPO3-Seitenbaum. Über diesen Seitenbaum kann auf Inhalte zugegriffen werden; gleichzeitig dient der Seitenbaum auch als Übersicht über alle vorhandenen Seiten. Zur besseren Übersichtlichkeit lassen sich die einzelnen Menüpunkte auf- und zuklappen. Im Content-Bereich können nach Anklicken der jeweiligen Seite Inhalte bearbeitet, geändert oder neu eingepflegt werden. Abb.: Startseite Linker Seitenbaum mit Modulen TYPO3-Seitenbaum Content-Bereich 3. Einpflegen von Inhalten / Seiteninhalte ändern und anlegen Zur Einpflege von Inhalten im linken Seitenbaum das Modul Seite anklicken (dies gilt für die Erstellung komplett neuer Content-Elemente). An der gewünschten Stelle auf das Icon klicken und den Inhaltstypen auswählen. Abb.: Inhaltstyp 4

6 a) Text Nach Auswahl des Text-Elements öffnet sich der Rich-Text-Editor. Es gibt zwei Möglichkeiten, Text einzufügen: 1.Möglichkeit copy+paste Soll eine Textpassage eingefügt werden, kann der ausgewählte Text einfach kopiert werden (ähnlich wie beim Kopieren eines Textes in ein Word- Dokument, copy ) und in das Textfeld eingefügt werden ( paste ). Um evtl. vorhandene Formatierungen wie Schriftarten oder Markierungen zu löschen, auswählen. Die gewünschten Formatierungen anklicken und auf okay klicken. Abb.: Textelement Über die Schaltflächen direkt über dem Textfeld, kann der Text formatiert werden (fett, kursiv, ) Nach Bearbeitung des Textes muss der Text noch gespeichert werden. Hierzu gibt es folgende Möglichkeiten: Speichern Speichern der Inhalte und anschließende Vorschau im Frontend Speichern, Inhaltselement wird geschlossen Speichern, ein neues Content-Element (Rich-Text-Editor) wird geöffnet. Komplettes Content-Element löschen Dokument ohne Änderungen schließen 5

7 2.Möglichkeit Es kann auch direkt über den Rich-Text-Editor gearbeitet werden. Hierzu einfach mit der Maus in das Textfeld klicken und den Text eintippen. Anschließend den Text speichern. b) Bilder und Grafiken Nach Klicken auf zum Hinzufügen neuer Elemente, muss als Inhaltstyp Text und Bilder oder Nur Bilder ausgewählt werden. Anschließend auf den zweiten Reiter Bilder klicken. Nun kann über direkt ein Bild hochgeladen werden. Über den dritten Reiter Erscheinungsbild kann die Bildgröße, sowie die Position bestimmt werden. Ein Bild kann auch über die Funktion hinzugefügt werden. Durch Klicken auf Bild hinzufügen öffnet sich ein Dialogfenster. Abb.: Auswahl von Media-Dateien Nach Auswahl des gewünschten Ordners auf klicken und bei Erscheinungsbild die entsprechenden Einstellungen auswählen. Abschließend alle Änderungen speichern. 6

8 EXKURS: ARBEITEN MIT DER DATEI-LISTE Auf Dateiliste im linken Seitenbaum klicken. Über kann ein neuer Dateiordner erstellt werden. Dies erleichtert später die Übersicht und den Zugriff auf Dateien. Sind bereits Ordner vorhanden, muss nun der gewünschte Ordner angeklickt werden. Anschließend auf klicken und die Dateien auswählen. Dabei bitte auf Bildgröße (nicht größer als 100Mb. Hinweis: Eine Auflösung von 70dpi sind für eine Website vollkommen ausreichend) achten und auf Umlaute im Bildtitel (Umlaute bitte als ae, ue oder oe angeben). Der Vorteil bei der Arbeit über die Dateiliste ist, dass alle für das Frontend benutzte Bilder, Grafiken und Dateien an einem zentralen Platz im Backend gesammelt sind. Damit lassen sich entsprechend alle Dateien auch an jede beliebige Stelle einpflegen. Soll ein bereits bestehendes Content-Element bearbeitet werden, auf die entsprechende Seite klicken und den Bearbeitungsstift wählen. Anschließend kann der Inhalt ähnlich wie bei einem neuen Content-Element ganz einfach geändert und gespeichert werden. Hinweis: Inhaltstypen können jederzeit geändert werden. Falls beispielsweise ein Bild zusätzlich eingefügt werden soll, muss oben nur der Typ des Content- Elements von Text in Text und Bilder geändert werden. Der Text bleibt weiterhin bestehen. c) Interne und externe Verknüpfung Content kann auch miteinander verknüpft werden. So kann beispielsweise von der Startseite auf die Kontaktseite oder gar auf eine Website oder eine Mailadresse verwiesen werden. Dazu muss der gewünschte Text / das gewünschte Bild zunächst markiert werden. Über den Button lässt sich ein neues Fenster öffnen. 7

9 Über die fünf Reiter kann ausgewählt werden, um welche Art von Verlinkung / Verweis es sich handelt. Seite Datei Ordner Externe URL Interner Verweis auf ein anderes Content-Element im Backend Verweis auf Datei Verweis auf bestehende Ordner der Dateiliste Verweis auf eine externe Website Verweis auf eine adresse Die gewünschte Verlinkungsart auswählen und bei Zielfenster Neues Fenster wählen. Anschließend bei der internen Verknüpfung auf die Zielseite klicken. Bei Datei, Ordner, Externe URL und den enstprechenden Pfad, die URL oder adresse eingeben und abspeichern. 4. Seiten anlegen und bearbeiten Um eine neue Seite anlegen zu können, mit Rechtsklick auf die entsprechende Stelle klicken. Auf Seitenaktionen klicken, dann auf Neu Es öffnet sich ein Datensatz. Hier kann die Position der neuen Seite ausgewählt werden. Einfügen einer Unterseite Einfügen einer gleichberechtigten Seite Abb.: Position der Seite wählen 8

10 Nach Wahl der Seitenposition öffnet sich ein neues Fenster. Hier muss der Seitentitel eingegeben werden. Nach Beenden der Eingabe die Änderungen speichern. Abb.: Seiten erstellen, 1 Über den zweiten Reiter Zugriff kann die Funktion Deaktivieren ausgewählt werden. So können Seiten angelegt werden, die vorerst nicht im Frontend sichtbar werden. Dies ist sinnvoll, wenn man beispielsweise noch keinen Content hat. Zudem können Seiten hier auch im Menü auf unsichtbar geschaltet werden. Hierzu einfach ein Häkchen an der entsprechenden Stelle setzen. Abb.: Seiten erstellen, 2 Seitentitel können durch Doppelklick auf den Seitentitel geändert werden. Ist der Titel blau unterlegt, kann der Name nach Belieben geändert werden. Zudem können Seiten - durch Klick auf deaktiviert werden, so dass sie im Frontend nicht mehr sichtbar sind, im Backend aber weiterhin existieren (dies ist beispielsweise bei Content sinnvoll, der nur saisonal bedingt benötigt wird, wie etwa die Ankündigung von geänderten Öffnungszeiten zu Weihnachten), - durch Klick auf ausgeschnitten werden um sie an einer anderen Stelle zu platzieren oder, - durch Klick auf kopiert werden, um sie an einer andere Stelle (oder anderen Stellen) zusätzlich zu platzieren. 9

11 5. News anlegen Auf Liste und dann auf dann auf News klicken. Mit Klick auf öffnet sich ein neuer Datensatz. Abb.: News erstellen Bei Titel die Überschrift, bei Teaser einen Einführungstext angeben, der als Aufhänger im Frontend angezeigt wird. Bei Text kann die Nachricht selbst eingegeben werden. Anschließend kann unter dem zweiten Reiter Zugriff ggf. das Veröffentlichungsdatum der News ausgewählt werden, sowie das Ablaufdatum. Wird bei letzterem ein Datum ausgewählt, wird die News ab dem ausgewählten Zeitpunkt nicht mehr ausgepielt. Unter dem dritten Reiter Beziehungen können Bilder, Grafiken oder Dateien (unter Media File ) hinzugefügt werden. Unter Verwandte Links können Verweise auf ähnliche Artikel auf externen Websites angelegt werden. Bei Verwandte Artikel kann auf interne Seiten oder Artikel auf der eigenen Site verlinkt werden. Anschließend in der oberen Leiste die Änderungen speichern. 10

12 6. Glossar GLOSSAR Backend Administrations- und Editor-Oberfläche. Das Backend dient der Pflege (Bearbeitung) von Websites Content Inhalt von Websites Content-Element Inhalts-Element, auch Inhaltstyp Content-Management-System Inhaltsverwaltungssystem. Software, die zur Verwaltung von Inhalten von Websites (Erstellung, Bearbeitung und Ändern von Inhalten) verwendet wird. Einpflege(n) Ändern und Hochladen von Inhalten im Backend, so dass diese im Frontend sichtbar werden. Frontend Die Website, wie der sie User sieht. Rich-Text-Editor Schreibprogramm von TYPO3 Dateiliste Liste aller hochgeladenen Dateien (Bilder, Dateien und Grafiken). Zentrale Sammelstelle, von der aus Dateien an jede beliebige Stelle eingepflegt werden können. Linker Seitenbaum Linke Spalte des Backends, hier werden die verschiedenen Module angezeigt Modul Bauelement Typo3-Seitenbaum Übersicht über Seiten und Content-Elemente 11