Leitfaden. Einführung in das TYPO3-Redaktionssystem für die FU-Orts-, Kreis- und Bezirksverbände

Transkript

1 Leitfaden Einführung in das TYPO3-Redaktionssystem für die FU-Orts-, Kreis- und Bezirksverbände

2 Inhalt 1. Anmerkungen zum Dokument Allgemeine Formate und Konventionen Formatierbarer Text (Rich Text Editor) TYPO3 Grundlagen Benutzeroberfläche in TYPO Symbol (Icon) Erklärung Bearbeiten von Inhalten Seiten-Vorschau Löschen von Inhalten Verschieben von Inhalten Module Inhaltselement für Wir über uns Inhaltselement für Aktuelles/Termine Klapper Abgeordnete/Vorstand Bildergalerien anlegen... 15

3 1. Anmerkungen zum Dokument In diesem Dokument wird die Pflege der Ortsverbände innerhalb der fu-bayern.de über das Redaktionssystem (Content Management System, kurz CMS) TYPO3 erläutert und dokumentiert. Hierfür werden die grundsätzlichen Funktionen und Regeln des CMS beschrieben. Zugangsberechtigt zum neuen Redaktionssystem sind alle FU-Orts-, Kreis- und Bezirksvorsitzenden, deren E- Mail-Adresse in der CSU-Mitgliederverwaltung hinterlegt ist. Zusätzlich können Internetbeauftragte benannt werden. Internetbeauftragte müssen in der Mitgliederverwaltung der CSU eingetragen werden. Um dies zu veranlassen, schreiben Sie bitte eine an 2. Allgemeine Formate und Konventionen Formatierbarer Text (Rich Text Editor) Über den Rich Text Editor (RTE) kann der Redakteur Texte formatieren, Textlinks setzen und Tabellen und Aufzählungen einfügen (nummeriert und mit Bullet Points). Der Redakteur kann Texte u. a. fetten, kursiv setzen oder unterstreichen. Über das Dropdown-Menü können Texte als Absatz (normaler Fließtext) oder als Überschriften der Hierarchien H2, H3 oder H4 formatiert werden. Es besteht die Möglichkeit, Bilder, Bildergalerien und Videos einzubinden. Siehe hierzu Inhaltselement für Wir über uns. 3

4 3. TYPO3 Grundlagen 3.1 Benutzeroberfläche in TYPO3 Die Benutzeroberfläche unterteilt sich in drei großen Bereiche: Menü, Seitenbaum (= Struktur der Webseite) und Inhaltsbereich (= der Inhalt der ausgewählten Seite): 3.2 Symbol (Icon) Erklärung Generell: Wenn die Maus auf ein Symbol gefahren wird, öffnet sich ein kleines Fenster (Tooltipp) unterhalb des Mauszeigers, der das Symbol erklärt. Symbole mit Auge: Seite ansehen, öffnet die aktuelle Seite in einem neuen Tab. Symbole mit Stift: Element bearbeiten Über das linke Symbol unten mit dem grünen Plus werden neue Inhalte hinzugefügt. 4

5 Glühbirne: Element sichtbar/unsichtbar machen (dadurch wird es auf der Homepage nicht mehr angezeigt). Leuchtet die Glühbirne, ist das Element sichtbar. Warndreieck: Pflichtfeld Grüne Pfeile im Kreis: Seitenbaum aktualisieren, wenn eine neue Seite angelegt wurde, hier klicken, damit sie im Seitenbaum angezeigt wird X: Schließen (Die Seite wird geschlossen ohne Änderungen zu speichern) Diskette: Speichern Diskette mit Auge: Speichern und Seite ansehen (öffnet neuen Tab im Browser, wie oben) Diskette mit X: Speichern und schließen Diskette mit grünem Plus: Speichern und neues Element hinzufügen Mülleimer: Element löschen Grüner Pfeil: Letzte Änderung rückgängig machen (Achtung: nur gespeicherte Änderungen!) Bearbeiten von Inhalten Zum Ändern von Inhalten einer bestehenden Seite wird die Seite im Seitenbaum (siehe 3.1 Screenshot) angewählt. Die aktuellen Inhalte werden im Inhaltsbereich als Module angezeigt. Bestehende Inhalte können modulweise oder spaltenweise bearbeitet werden. Per Klick auf das Stift-Symbol in den Headern oder im jeweiligen Modul öffnet sich die Eingabemaske und Inhalte können editiert werden. Hinweis: Ist im Inhaltsbereich kein entsprechendes Modul zu finden, wurden die Inhalte eventuell in den Seiteneigenschaften gepflegt und können hier bearbeitet werden. 5

6 3.2.2 Seiten-Vorschau Nachdem eine Seite gespeichert wurde, kann per Rechtsklick mit der Maustaste auf den Seitennamen die Seitenvorschau aufgerufen werden, oder über das Speichern und Ansehen Symbol. Per Klick auf Ansehen öffnet sich die Vorschau der Seite in einem neuen Fenster/Browser-Feld. Werden Seiteninhalte geändert und gespeichert, erscheinen die neuen Inhalte in der Vorschau (ggf. nach Neuladen der Seite) Löschen von Inhalten Inhalte können modulweise gelöscht werden. Zum Löschen von bestimmten Inhalten einer Seite wird die Seite per Klick in den Seitenbaum angewählt. Zum Löschen einzelner Module muss der Mauszeiger auf das Modul bewegt werden. Beim Überfahren mit der Maus erscheint im Kopfbereich das Löschen -Symbol. 6

7 3.2.4 Verschieben von Inhalten Module können ebenfalls bei gedrückter linker Maustaste, markiert (per Drag&Drop) verschoben werden. Wird ein Modul bewegt, werden alle Positionen als grüne Balken markiert, an denen das Modul eingefügt werden kann; das dunkle Grün gibt die aktuell ausgewählte Position an. 3.3 Module Nach dem Klick auf das Symbol mit dem grünen Plus zum Anlegen eines neuen Inhaltes erscheint folgendes Auswahlfeld. Die benötigen Module werden im folgenden beschrieben. 7

8 Um leere Module und damit leere Bereiche in der Seite zu vermeiden, müssen in neue Module bestimmte Pflichtfelder gepflegt werden, um speichern zu können (Fett = Pflicht, Regular = optional). 8

9 3.3.1 Inhaltselement für Wir über uns Um den Inhalt des Bereiches Wir über uns zu bearbeiten, wählen Sie das Inhaltselement Standard. Im Text Editor können Sie hier einen Text und Unterüberschriften eintragen. Bilder Screenshot 1 9

10 Optional kann ein Bild (z. B. Gruppenfoto) hochgeladen werden (über den Button Neues Bild hinzufügen siehe Screenshot 1). Anschließend geht ein neues kleines Fenster auf, in dem Sie die Datei auswählen bzw. hochladen können. 1. Ordner Verbände anklicken 2. Dort Bilder durchsuchen 3. Bild auswählen 4. Hochladen 5. Bild auswählen Unter Bildunterschrift kann eine kurze Beschreibung des Bildes stehen. Wichtig: Nur Querformat-Fotos (16.9) bzw. 956x538px verwenden. 10

11 Bildausschnitt Im Menü > Dateiliste > Ordner mit Bildern auswählen hier Verbaende. Vor den Bildern ist ein kleines Symbol, welches mit der linken Maustaste angeklickt wird und im Kontextmenü der obere Punkt Bearbeiten ausgewählt wird: Auf den Reiter Bildausschnitt klicken und anschließend auf Bildbeschnitt (siehe Screenshot unten) Anschließend können Sie mit der Maus den Bildbeschnitt Ihres Bildes auswählen. Ausnahme: Das Bild hat bereits die maximale Größe und ist zum Ausschneiden/Verkleinern zu klein. 11

12 12

13 3.3.2 Inhaltselement für Aktuelles/Termine Meldungen und Termine werden auf dieselbe Weise angelegt - über den Inhaltstyp Meldung/Termin. Als Überschrift wird das Thema des Termins oder der Meldung eingetragen. Das Feld Datum entspricht dem Datum, an dem die Meldung geschrieben wurde. Bei Terminen steht hier das Datum des Termins. Optional kann ein Bild hinzugefügt werden. Über das Feld Beschreibungstext wird die Meldung oder weitere Infos der Veranstaltung eingetragen. Entspricht dem Standard, Text ist linksbündig und rechts Weißfläche. Achtung: Es kann kein Bild dazu geladen werden. Modul am besten nicht verwenden, damit alle Texte einheitlich aussehen Klapper Falls ein Beitrag sehr lange ist, können Sie unter den Beitrag ein zusätzliches Inhaltselement Klapper anlegen. Hier geben Sie bei Überschrift mehr lesen ein und im Texteditor den restlichen Text der Meldung. So entsteht auf der Website ein Klapper, der sich durch Klick öffnet, um den gesamten Text anzuzeigen. 13

14 3.3.3 Abgeordnete/Vorstand Zur Vorstellung von Abgeordneten oder Vorständen wird dieses Modul verwendet. Das Feld Überschrift entspricht dem Namen/Position der Person. Es können drei Bilder hinzugefügt werden, diese werden nebeneinander angezeigt. Bei 1-2 Bildern bleibt eine Weißfläche stehen. Als Bildunterschrift sollte ein Satz eingetragen werden, z. B.: [Name] wurde am TT.MM.JJJJ in [Ort] geboren. Im Beschreibungstext wird ein tabellarischer Lebenslauf angelegt. 14

15 4. Bildergalerien anlegen Abb 1 1. Gehen Sie im Menü auf Liste 2. Wählen Sie den Ordner Medien unter Ihrem Verband aus 3. Wählen Sie oben Neuer Datensatz 4. Und dann den Ordner Medium Abb Wählen Sie den Medientyp Galerie und betiteln (Überschrift gelbes Warndreieck) Sie Ihre Bildergalerie 2. Wählen Neues Bild hinzufügen 15

16 Abb 3 1. Durchsuchen und gewünschte Bilder hochladen 16

17 Abb 4 1. Wählen Sie mit der linken Mouse-Taste (direkt auf den Bildnamen) das gewünschte Bild aus -> das popup-fenster schließt sich wieder 2. Sie finden es nun in der Backend-Seite wieder (Abb 5) 17

18 Abb Die Bilder werden als Bildergalerie hochgeladen 2. Hier können Sie die Reihenfolge der Bilder definieren 3. Klicken Sie abschließend auf Speichern und schließen Gehen Sie nun wieder im Menü -> Seitenbaum auf Ihren Verband und wählen Sie die Stelle aus, an der Sie die Galerie haben wollen -> neuer Datensatz an diesem Ort hinzufügen Abb. 6 18

19 Wählen Sie anschließend Medium aus (Abb 7: 1.) Abb. 7 19

20 Abb 8 1. Ordner (Datensätze durchblättern) mit Galerie heraussuchen -> es öffnet ein neues Pop-up-Fenster (siehe nächste Abb) 1. gewünschte (Ihre gerade angelegte) Galerie aussuchen (Pop-Up-Fenster schließt sich wieder) 2. Und wieder speichern und den Datensatz schließen 20

21 EXKURS: vom Hochformat ins Querformat: BILDBEARBEITUNG mit gimp Laden Sie Gimp unter kostenlos herunter und installieren Sie es. Neue Datei erstellen Maße 956x538 (16:9) Das zu bearbeitende Bild als neue Ebene öffnen 21

22 Das eingefügte Bild ist zu groß (vgl. gepunktete Linie) Ebene skalieren Bildgröße anpassen 22

23 Dateiname und -format wählen Vorzugsweise.png oder.jpg Das Bild im Hochformat erhält einen weißen Rand 23