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 |
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:
- Auf Seitenbezeichnung klicken
- Nach oben oder unten an die gewünschte Position ziehen.
- Loslassen, wenn zwischen den Zielseiten eine feine Linie erscheint
- 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.
- Quell-Seite auswählen
- Auf Seitensymbol klicken
- Im Kontextmenü auf den Befehl kopieren klicken
- Auf das Seitensymbol der Seite klicken, nach der die Zielseite eingefügt werden soll
- Im Kontextmenü auf »Einfügen nach« klicken
- Soll die Zielseite eine Unterseite werden, im Kontextmenü auf »Einfügen in« klicken
- 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/ | 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