Zum Hauptinhalt springen

Grundlagen

Vorbereitung

Zur Bearbeitung der Homepage wird ein handelsüblicher PC mit den Betriebssystemen Windows, Linux oder MacOS benötigt. Tablets und Smartphones sind nur sehr eingeschränkt verwendbar. Als Browser sollte möglichst Mozillas Firefox verwendet werden, der am besten mit den komplexen Funktionen im Typo3-Backend klarkommt. Scripte und Cookies müssen erlaubt sein.

Dateiformate

Für die Verwendung von Bildern, Grafiken und Dokumenten empfehlen wir folgende Dateimformate:

Fotos.jpg
Fotos mit Text im Bild.png
Grafiken, Logos, Symbole.png, .svg
Download von Text bzw. Text/Bild-Dokumenten.pdf

Bildauflösungen

Bilder müssen für die Darstellung im Internet eine geeignete Bildauflösung vorweisen. Das Responsive Design der Homepage erfordert für große Bildschirme eine Mindestauflösung, andererseits sollte die Auflösung auch nicht zu hoch sein, um lange Lade- und Verarbeitungszeiten zu vermeiden. Außerdem ist die Dateigröße für den Upload von Dateien in das Typo3-Backend begrenzt.

Empfehlungen:

VerwendungszweckMindestauflösung BreiteMaximalauflösung Breite
Slider1200 px1800 px
News800 px1200 px
Bildergalerien800 px1200 px
Bildbreite 3spaltig1000 px1200 px
Bildbreite 2spaltig600 px900 px
Bildbreite 1spaltig400 px700 px

Bildausschnitte können im Typo3-eigenem Bildeditor bestimmt werden. Zu beachten ist, dass die beschnittene Größe noch in das zur Verwendung passende Schema passt!

Backend Login

Im Browser folgende Adresse aufrufen:

https://www.drk-rhein-sieg.de/typo3

Es erscheint nebenstehendes Login-Fenster. Hier mit dem Benutzername und dem Passwort anmelden, dass Ihnen mitgeteilt wurde.

Backend Übersicht

Nach dem erfolgreichen Backend Login erscheint die Verwaltungsoberfläche im Browserfenster (Abb. links). Im schwarzen Bereich am linken Rand befindet sich die Werkzeugleiste. Im schwarzen Bereich am oberen Rand findet man unter anderem den Benutzernamen. Durch Klick auf den Benutzernamen (Abb. rechts) gelangt man zu den Benutzereinstellungen (Abb. 2. Reihe links), wo man im Reiter Passwort z.B. sein Passwort ändern kann.

Seitenleiste

Klickt man in der Werkzeugleiste links auf das Werkzeug »Seite«, öffnet sich rechts neben der Werkzeugleiste der Seitenbaum. Sollte dieser anfangs nicht vollständig sichtbar sein (wie Abb. links), kann man ihn durch Klick auf das kleine Dreieck vor der Weltkugel aufklappen.

Im Seitenbaum lassen sich Seiten verschieben:

  1. Auf Seitenbezeichnung klicken
  2. Nach oben oder unten an die gewünschte Position ziehen.
  3. Loslassen, wenn zwischen den Zielseiten eine feine Linie erscheint
  4. Zieht man auf eine andere Seite, wird die verschobene Seite als Unterseite eingegliedert

Durch Klick auf das Seitensymbol erscheint ein Kontext-Menü, mit dem man die Seite aktivieren, deaktivieren, löschen oder kopieren oder die Seiteneigenschaften aufrufen kann. In den Eigenschaften kann man z.B. die Metadaten und Suchmaschinen-relevante Inhalte pflegen. 

Seiten kopieren

Anstatt eine Seite komplett neu aufzubauen, ist es oft einfacher und schneller, eine vorhandene, ähnliche Seite zu kopieren und die Inhalte abzuändern.

  1. Quell-Seite auswählen
  2. Auf Seitensymbol klicken
  3. Im Kontextmenü auf den Befehl kopieren klicken
  4. Auf das Seitensymbol der Seite klicken, nach der die Zielseite eingefügt werden soll
  5. Im Kontextmenü auf »Einfügen nach« klicken
  6. Soll die Zielseite eine Unterseite werden, im Kontextmenü auf »Einfügen in« klicken
  7. Das Einfügen bestätigen

Die Zielseite wird automatisch im Seitenbaum deaktiviert und mit dem Zusatz »...(Kopie 1)« benannt. Wird nach dem Kopiervorgang keine neue Seite angezeigt, einfach mal den Seitenbaum neu laden durch Klick auf den kreisförmigen Doppelpfeil oberhalb des Seitenbaums.

Backend Layout

Klickt man nun die Startseite (Globus-Symbol) an, wird rechts neben dem Seitenbaum das Backend Layout eingeblendet. Hier sieht man die nun ein Raster mit entsprechend beschrifteten Gestaltungsbereichen (rot umrandet):

  • Rand
  • Vor dem Inhalt
  • Links
  • Normal
  • Rechts
  • Nach dem Inhalt
  • Fußzeile links
  • Fußzeile mitte
  • Fußeile rechts

In diese Zonen sind Content Elemente verschiedenen Typs platziert. Jedes Element kann mit Klick auf den Bearbeitungsstift in der oberen Ecke bearbeitet werden. Eine Besonderheit beinhalten die Zonen der Fußzeilen auf der Startseite: Hier platzierte Elemente werden automatisch auf allen Unterseiten angezeigt. Wird auf einer Unterseite eine Fußzeile bearbeitet, überschreibt dies jedoch die von der Startseite übernommenen Inhalte.

 

Die Inhalte sollten wie folgt auf die Zonen verteil werden:

Rand

Startseite/
Unterseite

Carousel mit großem Slider auf voller Breite. Alternativ kann auch ein Einzelbild oder für den Standort eine Karte abgebildet werden.
Vor dem InhaltStartseite

Teasertext zum Roten Kreuz, zentriert, Format Lead

UnterseitenSeitenheadline, linksbündig, Format Überschrift 1
LinksStartseite

bleibt frei

Unterseitenwichtige Interaktionselemente wie Icons, Links etc.
NormalStartseiteNews-Slider
UnterseitenHaupttext, Bilder, Tabellen, etc.
RechtsStartseite

bleibt frei

 Unterseitenentfällt
Nach dem InhaltStartseiteKarten-Menü
UnterseitenKarten-Menüs
Fußzeile linksStartseite/
Unterseiten

Links: Schnell-Auswahl (Links zu wichtigen Themen), Telefon-Hotline

Rechts: Spenden

Fußzeile mitteStartseite/
Unterseiten

Links: Service

Rechts: Blutspendetermine

Fußzeile
rechts
Startseite/
Unterseiten
Social Media Icons

In den Zonen sind die Content Elemente (CE) platziert. Durch Klick in den Kopfbereich und ziehen eines CE kann dieses in eine andere Zone verschoben werden. Beim Verschieben färben sich mögliche Zonen grün. Wenn die gewünschte Platzierung erreicht ist, Maustaste loslassen.

Durch sogenannte Grid Elemente können die Zonen noch weiter unterteilt werden. Auch in diese können die CE hineingezogen werden.

Das Bearbeiten und Hinzufügen von CE wird im weiteren Verlauf erklärt.

Vorschau

Durch Klicken auf das Lupensymbol über dem Layoutbereich wird in einem zweiten Browser-Tab eine Vorschau der Seite aufgerufen. Zur weiteren Bearbeitung das Vorschau-Tab schließen bzw. in den ersten Tab wechseln. Eventuell muss das Öffnen eines 2. Tabs durch Typo3 erlaubt werden (PopUps zulassen).

Dateiliste

Mit der Dateiliste lassen sich die zu verwenden Bilder, Grafiken, Videos oder PDF-Dateien (Downloads) verwalten. Die Dateiliste wird in der Werkzeugleiste ausgewählt (1). Anstelle des Seitenbaums erscheint nun ein Verzeichnisbaum, der anfangs aber nur die Verzeichnungswurzel (2) enthält  Mit den Werkzeugsymbolen (3) lassen sich nun Dateiordner anlegen und Dateien hochladen. Es empfiehlt sich, hier eine schlüssige, hierarchische Aufteilung vorzunehmen, so dass man über die Jahre die hochgeladenen Dateien auch schnell wiederfindet. Es können mehrere Ordner gleichzeitig angelegt werden. Wählt man im Verzeichnisbaum einen Ordner aus statt der Verzeichniswurzel, können auf gleiche Weise auch Unterordner erstellt werden. Beim Hochladen werden Dateien, die nicht webkonform benannt sind (Umlaute, Sonderzeichen etc.) automatisch umbenannt. Unterhalb der Darstellung kann man die Option »Erweiterte Ansicht« einschalten, so dass zusätzliche Informationen und Miniaturen der hochgeladenen Dateien gezeigt werden.

 

Farben

Das Farbkonzept der DRK Online-Präsenzen sieht zwei Farben vor:

Als Primärfarbe ein Rot-Ton abgleitet vom DRK-Rot

Eine blaue Sekundärfarbe.

Diese Farben sind in den entsprechenden Auswahlmenüs als Primary oder Secondary verfügbar.

Farbliche Auszeichnungen von Texten oder Hintergünden sollten ausschließlich in diesen Farbvarianten durchgeführt werden.

Begriffsklärung

BegriffAbkürzungErklärung
BackendBEVerwaltungsoberfläche für die Erstellung und Bearbeitung von Homepage-Inhalten
FrontendFEÖffentliche Darstellung der Homepage (das, was der Homepage-Besucher zu sehen bekommt)
Content ElementCEInhaltselement im Backend, das Texte, Bilder oder besondere Funktionen enhält
Viewport Sichtbarer Bereich der Homepage, definiert durch die Bildschirmgröße
Slider Breites Bildelement im Kopf der Seite, das mehrere Bildmotive und Texte enthalten kann. Auch Bühnenbild geannt
Kontaktslider Animiertes Element für Ansprechpartner, das nach rechts herausfährt, sobald es im Viewport erscheint
Responsive Design Dynamisches Gestaltungskonzept für Homepages, dass unterschiedliche Bildschirmgrößen und Bedienungskonzepte (Maus, Touchgesten) der Endgeräte (TV-Geräte, PCs, Notebooks, Tablete, Smartphones) berücksichtigt
Grid Element Rasterelement, dass für eine zusätzliche Unterteilung der Seite in das Backend Layout flexibel eingezogen werden kann. Die Anzahl und Breite der Spalten sowie das Verhalten in den verschiedenen Bildschirmgrößen des Responsive Designs lassen sich exakt einstellen. Wird zum Beispiel in den Teaser-Texten mit herausfahrendem Ansprechpartner genutzt.