Zum Hauptinhalt springen Skip to page footer

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:

Verwendungszweck Mindestauflösung Breite Maximalauflösung Breite
Slider 1200 px 1800 px
News 800 px 1200 px
Bildergalerien 800 px 1200 px
Bildbreite 3spaltig 1000 px 1200 px
Bildbreite 2spaltig 600 px 900 px
Bildbreite 1spaltig 400 px 700 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 Inhalt Startseite

Teasertext zum Roten Kreuz, zentriert, Format Lead

Unterseiten Seitenheadline, linksbündig, Format Überschrift 1
Links Startseite

bleibt frei

Unterseiten wichtige Interaktionselemente wie Icons, Links etc.
Normal Startseite News-Slider
Unterseiten Haupttext, Bilder, Tabellen, etc.
Rechts Startseite

bleibt frei

  Unterseiten entfällt
Nach dem Inhalt Startseite Karten-Menü
Unterseiten Karten-Menüs
Fußzeile links Startseite/
Unterseiten

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

Rechts: Spenden

Fußzeile mitte Startseite/
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

Begriff Abkürzung Erklärung
Backend BE Verwaltungsoberfläche für die Erstellung und Bearbeitung von Homepage-Inhalten
Frontend FE Öffentliche Darstellung der Homepage (das, was der Homepage-Besucher zu sehen bekommt)
Content Element CE Inhaltselement 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.

 

Zurück