REDAKTEURSGUIDE. Brüsseler Str Köln Fon: +49(0) Fax: +49(0)

Transkript

1 REDAKTEURSGUIDE Brüsseler Str Köln Fon: +49(0) Fax: +49(0)

2 Inhalt Einführung in Typo3 Der Login 4 Der Redaktionsbereich 5 Die Funktionsleiste 6 Die Modulleiste 6 Einzelne Funktionselemente 7 Vergleich Frontend und Backend 8 Backend 9 Das Modul Liste 10 Das Modul Datei 11 Dateiliste 12 Datei-Upload 13 Grundeinrichtung der DV-Seiten Grundeinrichtung der DV-Seiten 15 DV-Unterseite 18 Sponsoren 19 Social Media 20 Navigation, Seiten, Rahmentamplates 21 Inhalte erstellen, bearbeiten und löschen 23 Bearbeitung der Verteilerseite 27 Die Plug-Ins auf den verschiedenen Seiten 30 News erstellen in wenigen Schritten 33 Downloadboxen 34 Bildergalerien 36

3 KAPITEL 1 EINFÜHRUNG IN TYPO3

4 LOGIN Typo3 ist ein browserbasiertes Content Management System. Es ist nicht erforderlich, eine spezielle Software zu installieren, um mit Typo3 zu arbeiten. Ein Redakteur/-in kann sich von jedem Ort und zu jeder Zeit über eine Internetverbindung mit seinem Webbrowser im Redaktionsbereich einloggen. In den Einstellungen des verwendeten Webbrowsers darf die Verwendung von Javascript und Cookies jedoch nicht deaktiviert sein. Generell kann jeder Browser verwendet werden, wir empfehlen jedoch gerne den Mozilla Firefox, da er sich regelmäßig auf den neuesten Stand bringt und stabil, sicher und zuverlässig ist. Um in den Redaktionsbereich einer Typo3- Website zu gelangen, rufst du zunächst die Website auf und ergänzt nach der Domainendung die Pfadangabe mit /typo3. In den Redaktionsbereich der 72-Stunden-Website gelangst du z.b. über die Adresse: Jede/-r Redakteur/-in erhält für die nun folgende Anmeldung einen eigenen Zugang, in dem die Berechtigungen für Funktionen und Bereiche defi niert sind. Nach erfolgreichem Anmelden gelangst du hinter die Kulissen der für den Besucher sichtbaren Website. 4

5 DER REDAKTIONSBEREICH Nach dem Login gelangst du direkt in das CMS-System und somit in den Typo3 Redaktionsbereich. Dort befi ndet sich in der linken Spalte die Modulleiste. Hier fi ndest du alle Werkzeuge, die zur redaktionellen Arbeit mit Typo3 notwendig sind. Rechts neben der Modulleiste liegt der Hauptbereich, der sich bei den meisten Modulen in einen Navigationsbaum und einen Arbeitsbereich aufteilt. Eine Statusleiste befi ndet sich oberhalb der Modulleiste und des Hauptbereichs. Auf dieser kannst du dich aus Typo3 abmelden. Darüber hinaus fi ndest du hier einen kleinen Lesezeichenmanager und eine Suchfunktion für die Typo3 Seiten und die Datensätze. Modulleiste Navigations-/ Seitenbaum Arbeitsbereich 5

6 DIE FUNKTIONSLEISTE Die Funktionsleiste bleibt stationär, d.h. sie ist immer sichtbar, auch wenn du in einer langen Maske nach unten scrollst oder dich über die Reiter der Maske durch mehrere Seiten klickst. DIE MODULLEISTE WEB: Im Abschnitt Web befi nden sich die Module zur Arbeit mit Typo3 Seiten, Inhalten und Datensätzen. MEDIEN: Der Abschnitt Medien beinhaltet die Module zur Verwaltung und Pfl ege einer Online-Bilddatenbank und Dokumentenablage. 6

7 EINZELNE FUNKTIONSELEMENTE Dieses Symbol besitzt die Funktion Eingaben ungespeichert schließen, d.h. alle eingegebenen Änderungen werden gelöscht. Per Klick auf dieses Symbol werden die Eingaben gespeichert, die Eingabemaske bleibt jedoch geöffnet. Die Funktion des dritten Symbols speichert die Eingaben, die Eingabemaske bleibt geöffnet und zusätzlich werden die Änderungen in einem neuen Fenster/Tab angezeigt. Diese Funktion speichert die Eingaben und schließt die Ansicht, sodass du zurück zur Übersicht der Elemente gelangst, von welchen du zuvor eine neue Eingabemaske aufgerufen hast. Über dieses Symbol (nur in manchen Datensätzen) speicherst du die Eingaben und öffnest eine neue Eingabemaske für einen weiteren Datensatz. Diese Funktion löscht das zur Eingabemaske gehörige Element und kehrt ebenfalls zur Übersicht der Elemente zurück. Per Klick auf dieses Symbol machst du die letzte Änderung rückgängig. Gewöhnliche Seiten, die der Besucher in der Navigation der Webseite vorfi ndet, sind durch ein normales Dokumenten- Symbol gekennzeichnet. Ein leicht schraffi ertes Dokumenten-Symbol fi ndest du an Seiten, die mit der Eigenschaft versehen sind, nicht im Menü zu erscheinen (deaktiviert). Das grüne Plus auf dem Dokumenten-Symbol kennzeichnet, dass du ein neues Dokument erstellen kannst. Diese Symbole sind vollständig versteckt. Sie tauchen weder in der Navigation auf, noch kannst du über einen Direktlink aufgerufen werden. Dokumenten-Symbole mit einem kleinen Pfeil sind vom Typ Verweis. Diese Seiten besitzen keinen eigenen Inhalt, sondern dienen lediglich als Weiterleitung zu einer anderen Seite. Solche Weiterleitungen werden häufi g für übergeordnete Seiten verwendet, welche eigentlich keinen Inhalt besitzen. Eine ähnliche Funktion hat das Dokumenten-Symbol mit den Klammern. Dieses kennzeichnet ebenfalls Seiten mit Verweis, mit dem Unterschied, dass hier eine externe URL als Ziel verwendet wird. Diese Ordnerseiten-Symbole verwendest du, um die Übersichtlichkeit im Seitenbaum zu verbessern. 7

8 VERGLEICH FRONTEND UND BACKEND Der Vergleich der beiden Seitentypen (diese und nächste Folie) zeigt, dass es sich um die Frontend- und die Backendansicht der DV-Musterseite handelt. So unterschiedlich die Seitentypen auch aussehen beim näheren Hinschauen erkennt man, dass die Frontendansicht die Inhalte des Backends in gestalteter Form wiederspiegelt. Die Frontendansicht der DV-Musterseite weist sechs Hauptnavigationspunkte auf (Aktuelles, Die Aktion, Ko- Kreise, Unsere Partner, Material und Presse). Diese werden im Backend innerhalb des Seitenbaumes dargestellt. Es können maximal sechs Hauptnavigationspunkte mit Inhalten gefüllt werden sollten bspw. nur vier Punkte benötigt werden, fallen die anderen Punkte/Buttons entsprechend weg. Das Template der DV-Musterseite besteht aus der oberen Navigation, dem Contentbereich und einer rechten Spalte mit Unterseiten und Kontakdaten. Die Unternavigationspunkte in der rechten Spalte (hier Unterseite ) sind von der Anzahl her nicht begrenzt.zu jedem Hauptnavigationspunkt können beliebig viele Unternavigationspunkte angelegt werden. Im unteren Bereich befi ndet sich außerdem eine Zeile mit Sponsorenlogos, die individuell gefüllt werden kann. 8

9 BACKEND Die Backendansicht zeigt, wie genau sich die angewählte Seite Aktuelles aufbaut. Das äußere Inhaltselement mit der Überschrift DV- Musterseite gibt das Template der Seite vor DV-Musterseite steht für die Navigation, den Contentbereich und die rechte Spalte mit Kontaktdaten. Innerhalb des Templates, etwas eingerückt, gibt es ein sogenanntes Plugin, dass die Inhalte, in diesem Fall die News-Datensätze, die sich in dem Ordner News (siehe Seitenbaum Ordner Sonstiges) befi nden, an der entsprechenden Stelle ausliest. 9

10 DAS MODUL LISTE Typo3 bietet ein ausgefeiltes Modul zur Verwaltung von Datensätzen und -sammlungen wie z.b. Veranstaltungen, aber vor allem auch von Inhaltselementen, die in einer Liste aufgeführt werden sollen. Neben den aus der Seiten-Ansicht bekannten Symbolen und Buttons verfügt die Listen-Ansicht über einige erweiterte Bearbeitungsmöglichkeiten. Um in die Listen-Ansicht zu wechseln klickst du in der linken Spalte auf das Modul Liste. Das Listen-Modul beinhaltet genau wie das Seiten-Modul den Seitenbaum zur einfachen Navigation innerhalb der Seitenstruktur. In der einfachen Ansicht des Listen-Moduls hast du nur sehr eingeschränkte Bearbeitungsmöglichkeiten. Dafür ist sie optimal um sich einen schnellen Überblick über vorhandene Daten zu verschaffen. In dieser Ansicht ist es lediglich möglich neue Datensätze in einer Kategorie über das bereits aus dem Seiten-Modul bekannte Symbol mit dem grünen Pluszeichen Neues Element anlegen hinzuzufügen. Neben jedem Datensatz erscheinen mehrere Editier-Symbole. Darunter befi ndet sich das Stift-Symbol zur Bearbeitung des gesamten Datensatzes, das Info-Symbol zur Darstellung aller Informationen über einen Datensatz, sowie die Symbole Verlauf und verbergen.verbirgst du einen Datensatz wird dieser in den Erweiterungen nicht weiter verwendet. Mit Hilfe des Löschen-Symbols kannst du hier Inhalte wirklich löschen, was im Seiten-Modul nur in der Bearbeitung eines Einzel-Elements möglich ist. 10

11 DAS MODUL DATEI Das Modul Datei im Abschnitt Medien ermöglicht es Dir, in einem Dateibaum neue Ordner anzulegen und Dateien hinzuzufügen. Über das quadratische Icon mit dem Pfeil nach rechts- oder nach unten zeigend, kannst du Ordner und Unterordner auf- und zuklappen. Das Icon mit zwei grünen Pfeilen über dem Dateibaum ermöglicht es den Dateibaum jederzeit zu aktualisieren, z.b. wenn du neue Ordner anlegst und diese nicht angezeigt werden. 11

12 DATEILISTE Über dem Auswahlfeld fi ndest du zusätzlich zwei kleine Symbole mit deren Hilfe du Dateien hochladen oder neue Textdateien anlegen kannst. Unter dem Feld Einstellungen kannst du noch diverse Anpassungen zur Darstellung der Listenansicht vornehmen. Die wichtigste Einstellung ist die Option Zeige Vorschaubilder. 12

13 DATEI-UPLOAD Um zur Ansicht des Datei-Uploads zu gelangen klickst du auf das Symbol Dateien hochladen. Im Arbeitsbereich erscheint dann ein Fenster zur Auswahl der Datei von Deinem Desktop: In der Dateiverwaltung spielen Dateigröße und Bildmaße keine Rolle; wichtig ist lediglich eine gute Bildqualität. Die maximale Größe einer Datei kann dabei 8MB betragen. Sobald du eine oder mehrere Dateien hochgeladen hast, befi ndest du dich automatisch wieder in der Ansicht Liste. 13

14 KAPITEL 2 GRUNDEINRICHTUNG DER DV-SEITEN

15 Die DV-Musterseiten dienen lediglich als Vorlagen für alle Diözesanverbände und sollen von den verantwortlichen Redakteuren individuell mit Inhalten gefüllt werden. Es gibt genau zwei Templates, die den Diözesanverbänden zur Verfügung stehen die DV-Startseite, die einen Einstieg in die Inhalte bietet sowie die DV- Musterseite mit dem Contentbereich und einer rechten Spalte, die detaillierte Informationen zu den verschiedenen Bereichen der Navigation liefert. Beide Seitentypen gibt es in abgewandelter Form auch als Vorlage für die Koordinierungskreise sie tragen den Titel "Ko-Kreis-Verteilerseite" und "Ko-Kreis-Unterseite". 15

16 GRUNDEINRICHTUNG DER DV-SEITE Zunächst einmal muss die Seite des jeweiligen Diözesanverbandes einen Titel erhalten, der von der DV-Startseite aus über alle Navigationspunkte/Unterseiten hinweg vererbt wird. Um diesen Titel zu vergeben, gehst du zunächst in das Backend und klickst dort auf die oberste Seite des Seitenbaumes. Die Startseite bietet den Einstieg in die Themen des DV s und kann unterschiedliche Elemente beinhalten auf die wir später zu sprechen kommen. Um nun den Titel der DV-Seite zu vergeben, klickst du in der oberen Funktionsleiste (siehe Kapitel 1) auf das Icon das für Seiteneigenschaften bearbeiten steht. Hinter dem Reiter Diözesanverbände verbergen sich zwei Eingabefelder für eine zweizeilige Überschrift dort wird der Titel der DV-Seite vergeben. 16

17 In dem Ordner Sonstige (Seitenbaum) verbirgt sich eine Unterseite mit dem Titel Logo. Über die Seitenansicht ist zu erkennen, dass hier bereits ein Element hinterlegt wurde, das wie ein ganz normales Inhaltselement bearbeitet werden kann. Beim Klick auf den Stift im Inhaltsbereich öffnet sich das Element und im Reiter Bilder kann das Logo des jeweiligen DV s hochgeladen werden. Wichtig ist, dass das Bild bereits im File-Ordner hochgeladen wurde (siehe Kapitel Hochladen von Dateien). Nach dem Hochladen des Logos, kann innerhalb der Eingabemaske Verhalten ein Link eingetragen werden, der das Logo mit einer ausgewählten Seite verlinkt. Standardmäßig sollte dies die DV-Startseite sein. Die optimale Größe von 135px (Breite) wird im Reiter Erscheinungsbild festgelegt. 17

18 DV-UNTERSEITE Ein zentraler Baustein des Unterseiten- Templates ist die rechte Spalte mit den Kontaktdaten. Um diese auf den DV-Seiten anzupassen, gehst du wieder in den Ordner Sonstiges und klickst dort auf die Seite Rechte Spalte. Auch hier gibt es ein vorangelegtes Inhaltselement, das nur noch mit dem richtigen Inhalt (Kontaktadresse, etc.) gefüllt werden muss. Über den Bleistift gelangt man in die verschiedenen Eingabemasken des Inhaltselementes. Die Arbeit mit dem Texteditor-Feld (im Reiter Allgemein ) funktioniert ähnlich wie in dem Offi ce-programm Word. Zu beachten: Die Links innerhalb der Kontaktadresse werden nicht automatisch gesetzt. Um den Link zu setzen, markierst du die Adresse/URL, klickst auf das Icon mit der Weltkugel (oberhalb des Texteditors) und gibst in dem Eingabefeld die richtige E- Mailadresse/URL ein. Die Bestätigung der Eingabe erfolgt über den Button Link Setzen. Ein Neuladen der Seite führt zur Übernahme und Aktualisierung der Kontaktdaten im Frontend. 18

19 SPONSOREN Die Seite Unterstützer Logos befi ndet sich ebenfalls im Sonstiges-Ordner. Auch hier kann jeder DV seine eigenen Sponsoren-Logos einbinden und präsentieren. Die Headline wird über das Texteditor-Feld umbenannt und die Logos werden innerhalb eines Bildelementes hochgeladen. Unterhalb jedes hochgeladenen Bildes kann ein Link und ein Bild-Titel (Bereich Barrierefreiheit/Alternative Texte) mitgegeben werden. Die Idealgröße für die Sponsoren-Logos ist auf 56px (Höhe) festgelegt, die Breite ergibt sich von allein. 19

20 SOCIAL MEDIA Um die DV-Seite mit den beliebten Social Media-Kanälen zu verknüpfen bzw. zu teilen, müssen diese in der rechten Spalte angepasst werden. Dazu wählst du die Seitenansicht aus, klickst ganz oben im Seitenbaum auf die DV-Startseite und innerhalb der Funktionsleiste auf das Icon mit dem Stift. Im Reiter Social Media (zweiter Reiter von rechts) können diverse Angaben gemacht werden, die hilfreich sind, um Empfehlungen auf facebook, twitter und Google+ zu generieren. Das Twitterfeld ist dazu da, einen individuellen Text beim Tweeten zu verschicken, der von den Standardangaben wie Name der DV-Seite und dem Link zur Seite abweicht. Gleiches gilt für Google+ und facebook. Titel, Beschreibung und Logo werden auf allen Kanäle analog angezeigt. Was das Bild betrifft, sollte die Standardeinstellung allerdings beibehalten werden, denn hier handelt es sich um das Logo der 72-Stunden-Aktion, das über die Social Media-Kanäle kommuniziert werden soll. Im letzten Feld wird dann noch eine Social Media URL mitgegeben, die für die Empfehlung einer bestimmten Seite steht. Hier ist es sinnvoll auf die DV-Startseite zu verlinken damit der User von da aus die DV-Seite erkunden kann. Ein Klick auf das Icon neben der Eingabemaske und die Auswahl der Startseite im neugeöffneten Fenster, führt die gewünschte Empfehlung herbei. 20

21 NAVIGATION, SEITEN UND RAHMENTEMPLATES Wie im ersten Kapitel beschrieben, haben die Seitentemplates der DV-Musterseite sechs Hauptnavigationspunkte, deren Anordnung von der Programmierung her festgelegt wurde. Die Bezeichnung der Navigationspunkte kann innerhalb der Seitenansicht mit einem Doppelklick auf den Seitentitel geändert werden (alternativ über die Listenansicht und das Symbol des Bleistifts). Die Startseite, die über das Logo erreichbar ist, stellt eine Verteilerseite dar, die aus mehreren Blöcken besteht. In den einzelnen Boxen werden verschiedene Inhalte präsentiert und die Anzahl der Boxen ist nicht begrenzt. Eine rechte Spalte gibt es in diesem Template nicht dies ist nur bei den Unterseiten der Fall. Bei der Gestaltung der DV-Seiten ist also zu beachten, dass immer einer der beiden Seitentypen ausgewählt wird! Wenn du dich in der Listenansicht befi ndest und eine neue Unterseite im Bereich Aktuelles anlegen möchtest, klickst du zunächst in der Funktionsleiste auf das Icon mit dem Plus und legst den Typ der Seite fest ("Seite in" Seite im Bereich Aktuelles). Hier kann ein Titel vergeben werden und nach Freischalten der Seite durch das Aktivieren der Glühbirne, ist die Seite im Frontend sichtbar. 21

22 Als nächstes muss der neuangelegten Seite ein entsprechendes Template zugeordnet werden in der Regel handelt es sich um das Unterseiten-Template. Um dieses Template einzuzufügen, musst du zunächst in die Seitenansicht wechseln und im rechten Redaktionsbereich ein neues Element hinzufügen. Neues Element kann für zahlreiche Elemente der 72 Stunden-Webseite stehen wie z.b. Text- und Bildelement, nur ein Bild oder speziell programmierte Plugins. Nach dem Klick auf das Icon mit dem Plus scrollst du auf der darauffolgenden Seite nach ganz unten und wählst dort das Template der DV- Musterseite aus. Alle anderen Templates, die nicht die Bezeichnung DV-Zweispalter (Verteilerseite) oder DV-Musterseite haben, können ignoriert werden. Innerhalb des eingefügten Elementes sollte eine Überschrift eingetragen werden dies dient vor allem der Übersichtlichkeit im Backend. Wichtig: Die Verteilerseite muss nicht zwangsläufi g die Startseite sein. Genauso gut könnte der Navigationspunkt Aktuelles als Startseite dienen. Dann müsste lediglich in den Seiteneigenschaften der DV-Startseite das Verweis-Ziel geändert werden. 22

23 INHALTE ERSTELLEN, BEARBEITEN UND LÖSCHEN In diesem Teil des Redakteursguides geht es darum, wie die Webbeauftragten der 72-Stunden-Aktion innerhalb ihres Bereiches mit einzelnen Inhaltselementen arbeiten, Texte schreiben, Bilder platzieren und die Funktionalitäten des CMS-Systems am besten nutzen. Um dies zu verdeutlichen, fokussieren wir uns auf zwei spezielle Seiten des Seitenbaumes die Seiten Über Uns und Ko-Kreise. Die Seite Ko-Kreise enthält noch keinen Inhalt und deshalb gehen wir folgendermaßen vor: I. Über das Icon mit dem Plus legen wir zunächst ein Inhaltselement an; das Rahmentemplate (DV-Musterseite) gibt der Seite das gewünschte Layout mit dem Contentbereich und der rechten Spalte II. Um die Seite mit Content zu füllen muss innerhalb der DV-Musterseite, ebenfalls über das Icon mit dem Plus, ein Textelement eingefügt werden. 23

24 III. Im Editor selbst kann der Text nach Belieben gestaltet werden: Aufzählungen, kursive Schrift, fett-markieren des Textes ist wie im Offi ce-programm Word möglich. IV. Das was im Texteditor geschrieben wurde, wird im Frontend gleichermaßen dargestellt. 24

25 V. Innerhalb des Text-Elementes kann auch noch eine Überschrift mitgegeben werden; hier gibt es verschiedene Überschriftsformate, die im Texteditor über die Selectbox (dort wo derzeit "kein Blockformat" steht) ausgewählt werden können. VI. Verlinkung von Textbausteinen (Hyperlink): Nach dem Klick auf die Weltkugel im Texteditor öffnet sich ein neues Fenster und innerhalb des Reiters Externe URL kann die jeweilige Zielseite eingetragen werden. Hierbei ist wichtig, dass der externe Link in einem neuen Fenster geöffnet wird damit der User die 72-Stunden-Webseite bzw. die DV-Seite nicht aus dem Blick verliert. 25

26 VII. Um einzelne Datensätze, die sich auf anderen Seiten befi nden, zu nutzen klickst du innerhalb des Arbeitsbereiches auf den Ordner Datensätze durchblättern neben dem Icon mit dem Plus und nimmst bspw. den Datensatz Ansprechpartner und fügst ihn in diese Seite ein. 26

27 BEARBEITUNG DER VERTEILERSEITE Um aus der Seite Über Uns eine DV-Verteilerseite zu machen, müssen folgende Punkte ausgeführt werden: I. Über das Icon mit dem Plus legen wir zunächst ein Inhaltselement an; das Rahmentemplate (DV-Verteilerseite) gibt der Seite das gewünschte Layout mit dem Contentbereich und der rechten Spalte II. Um die Seite mit Content zu füllen muss innerhalb der DV-Musterseite, ebenfalls über das Icon mit dem Plus, ein Textelement eingefügt werden. 27

28 III. Das Element DV-Zweispalter ist dafür gedacht, Ansprechpartner auf der DV-Seite vorzustellen. Der Zweispalter kann in den Layoutvorlagen ausgewählt werden. IV. Innerhalb des Zweispalter-Templates arbeitest du mit ganz normalen Text-und Bildelementen (Typischer Seiteninhalt). Zu jeder Person kann ein Bild eingestellt/hochgeladen werden (auch hier bitte das Bild erst im File-Ordner hochladen) und außerdem ein Beschreibungstext hinzugefügt werden. Wenn du möchtest, dass das Bild zu den Kontaktpersonen in einer Lightbox geöffnet werden soll, gibst du dies im Reiter Bilder unter dem Punkt Verhalten an und setzt an der genannten Stelle das Häkchen zur Aktivierung. Die Bildgröße und Ausrichtung können im Reiter Erscheinungsbild festgelegt werden. V. Ebenso wie das Nutzen von bereits vorhanden Datensätzen über den Ordner Datensatz durchblättern", funktioniert das Kopieren von Elementen (Bsp. Bildergalerie). du gehst einfach auf die Seite, auf der sich die Bildergalerie befi ndet, klickst auf das Icon mit dem doppelten Zettel und kopierst das Element. Das Einfügen auf der Zielseite erfolgt dann über das Einfügen-Symbol, das nach dem Kopieren unter allen Inhaltselementen erscheint. 28

29 VI. Als letztes schaltest du das Inhaltselement über die Glühbirne frei. VII. Elemente löschen funktioniert am besten über die Listenansicht und das Symbol mit dem Papierkorb. 29

30 DIE PLUG-INS AUF DEN VERSCHIEDENEN SEITEN Jeder DV möchte natürlich im Laufe des Projektes über seine Projekte, Gruppen, Helfer und Unterstützer und alle Neuigkeiten informieren. Aus diesem Grund arbeiten wir an vielen Stellen der 72-Stunden-Webseite mit speziellen Plug-Ins, die extra für die Darstellung von bestimmten Inhalten programmiert wurden. In diesem Kapitel möchten wir das Arbeiten mit den Plug-Ins bzw. den Datensätzen, aus denen die News entstehen, erklären. News können in beiden Templates (DV-Verteilerseite und DV-Musterseite eingebunden werden). Innerhalb der DV-Verteilerseite befi ndet sich aktuell bereits ein solches Plugin, das die News automatisch ausliest. 30

31 Wichtig ist, dass das Plug-In als solches gekennzeichnet wird - das der Typ im Reiter Allgemein klar defi niert wurde mit Plug-In einfügen". Im Reiter Plug-In legt ihr dann noch fest, welche Inhalte ausgegeben werden sollen. In diesem Fall also die News. Auf der DV-Musterseite liegt bereits ebenfalls ein solches Plug-In, das sich hier jedoch über den kompletten Contentbereich zieht 31

32 Innerhalb der Einzelansicht wird die Newsmeldung dann mit all deinen Detailinformationen dargestellt. Wichtig im Plug-In der Einzelansicht ist, dass im Reiter Sonstige Einstellungen festgelegt wird, wohin der Zurück zu News-Button führt, der am Ende jeder News-Einzelansicht erscheint. 32

33 NEWS ERSTELLEN IN WENIGEN SCHRITTEN I. Innerhalb des File-Ordners (Modul Datei) legt ihr am besten einen eigenen Ordner für die News-Bilder an. II. Im Seitenbaum unter Sonstige befi ndet sich ein Systemordner News in dem die News-Datensätze verwaltet werden. Dieser lässt sich nur über die Listenansicht anschauen, es gibt jedoch in der Seitenansicht einen Hinweis, der ebenfalls zur Listenansicht führt. III. Das Icon mit dem Plus steht in diesem Fall für das Hinzufügen eines neuen Datensatzes. IV. Im Datensatz selbst ist der Typ News bereits festgelegt und es müssen nur noch der Titel, Untertitel (dieser erscheint nur auf der Verteilerseite) sowie der Text zur News-Meldung eingetragen werden. V. Im Reiter Special kann ein Start- und Enddatum eingetragen werden. Falls eine News ab einem bestimmten Tag bspw. nicht mehr angezeigt werden soll, wird sie mit Hilfe des Enddatums automatisch ausgeblendet/verborgen. VI. Media Hochladen von Bildern innerhalb des Datensatzes. 33

34 DOWNLOADBOXEN Die 72-Stunden-Aktion stellt den Besuchern der Webseite verschiedene Downloadmöglichkeiten zur Verfügung, die Ihr natürlich auch auf eurer DV- Seite einbauen könnt. Dafür haben wir das Element Downloadbox entwickelt, dass auf DV- und Ko-Kreisseiten gleichermaßen eingesetzt wird. Wir erklären das Element nun anhand eines Ko-Kreis- Backendzugangs. Um die Downloads zur Verfügung zu stellen, muss innerhalb des Rahmentemplates das Template für die Downloadbox angelegt werden. Es gibt auch noch andere Templates für Boxen auf der bundesweiten Seite an dieser Stelle ist zu beachten, dass wirklich nur das Template mit dem Namen Neue Downloadbox ausgewählt wird. Dateien, die zum Download angeboten werden sollen, müssen ebenfalls im File-Ordner hochgeladen werden. 34

35 Im Element der Downloadbox können die einzelnen Dateien mit einem Titel und einem Bild versehen werden. Da es sich um einen Download handelt, wird das Ganze mit der jeweiligen Datei verknüpft. Dies geschieht nach Klick auf das Link-Icon in einem neuen Fenster hinter dem Reiter Datei 35

36 BILDERGALERIEN Nun erklären wir, wie sowohl auf einer DV-Seite als auch innerhalb der Ko-Kreis-Seiten Bildergalerien angelegt werden können. Wir zeigen dies am Beispiel einer Test-DV-Seite. Um auf der Test-DV-Startseite Bilder der 72-Stunden-Aktion anzuteasern, gibt es verschiedene Möglichkeiten. Die einfachste Variante ist die, dass du innerhalb des Startseiten-Templates, über die Seitenansicht, ein neues Inhaltselement anlegst (Typischer Seiteninhalt Nur Bilder ) und in dem neuangelegten Element die Bilder auswählst, die du bereits im Datei-Ordner hochgeladen hast. Damit die Bilder beim Klick vergrößert angezeigt werden, muss auch hier unter der Eingabemaske Verhalten das Häkchen zum Aktivieren gesetzt werden. 36

37 37 Unter Erscheinungsbild wird die Breite der Bilder angegeben und außerdem kann hier die genaue Anordnung defi niert werden, bspw. vier Bilder nebeneinander. Empfehlung: Im besten Fall legst du für jede Bildergalerie einen eigenen Ordner im File-System an nur dann behälst du den Überblick über die Galerien und einzelnen Medientypen.

38 Wir haben bestimmte Einzelelemente entwickelt, die es ermöglichen, mehrere Bilder mit Hilfe von Galerien darzustellen. Zunächst legst du im Seitenbaum unter Sonstiges einen eigenen Ordner für eine Bildergalerie an und wählst innerhalb dieses Ordners den Datensatz Bildergalerie aus. Hier kannst du auch einen Galerie-Titel, einen URL-Namen und einen Beschreibungstext zur jeweiligen Galerie einfügen. Im Ordner befi n- den sich nun also alle Informationen sowie Bilder, die du den Usern auf der DV-Seite präsentieren möchtest. 38

39 Die Ausgabe der Bilder wird über ein Plug-In geregelt, dass du auf einer Inhaltsseite einfügst. Genau wie bei den News-Datensätzen gibt es auch hier eine Einzelansicht, auf der die komplette Bildergalerie dargestellt wird. Folgende Schritte müssen demnach abgearbeitet werden: I. Neue Seite im Seitenbaum einfügen mit dem Titel Bildergalerie / Bildergalerie Einzelansicht. II. Einfügen einer DV-Verteilerseite ohne rechte Spalte, da die Bildergalerie entsprechend Platz einnimmt. III. Integration des Plug-Ins Bildergalerie innerhalb der DV-Verteilerseite. Im Plug-In muss dann noch die Galerie ausgewählt werden, die wir vorab im Ordner Bildergalerie unter Sonstige hinterlegt haben. IV. Auswahl des Einstiegspunktes Sonstiges bzw. der Punkt ab dem alle untergeordneten Bildergalerien mit ausgelesen werden sollen. 39

40 Wenn alle Punkte erfüllt sind, wird die Bildergalerie über die Einzelansicht dargestellt. 40

41 Nachdem wir die Verwaltung und Ausgabe der Bildergalerie über die Einzelansicht erklärt haben, geht es nun um das Vorschau-Element, dass auf der Verteilerseite eingebunden werden kann. Dazu legst du innerhalb des Zweispalters auf der Verteilerseite das Plug-In Bildergalerie-Vorschau an, wählst auch hier wieder die Galerie aus und gibst zusätzlich einen Link an, der auf die ID der Einzelansicht verweist. 41

42 Tipp: Das Vorschau-Element macht nur dann Sinn, wenn es auch genügend Bilder enthält (vier Bilder sind bspw. zu wenig und das Element sieht dann weniger schön aus). 42

43 Die Bild-Titel können im Datensatz selbst, also in dem Ordner, der unter Datei angelegt wurde, bearbeitet werden. Dazu gehst du in den jeweiligen Datensatz und vergibst den Titel. Sinnvoll ist jedoch, dass die Bilder schon vor dem Hochladen entsprechend benannt wurden damit man sich die Benennung innerhalb des CMS-Systems gespart hat. 43