Akkordeon
- Silvio Haase (Unlicensed)
- XIMA Admin
- Stefan Renneke
- XIMA Redakteur
Akkordeon
Überblick
Name |
|
|---|---|
Ordner |
|
Styleguide |
Inhaltsverzeichnis
- 1 Akkordeon
1. Einleitung
Das Akkordeon, eine auf-und zuklappbare Liste, ist bei Webdesignern und Onlineredakteuren ein beliebtes HTML-Gestaltungselement, um auflistbare und meist umfangreiche Informationen platzsparend darzustellen. Sehr oft findet es im Rahmen von »Häufig gestellten Fragen«, (s.g. FAQ) Anwendung. Das Akkordeon ist aber auch sehr gut dazu geeignet, Bilder und Videos darzustellen, vgl. dazu Styleguide Akkordeon und sein Einsatz ist immer eine Möglichkeit, wenn Seiten zu "lang" sind.
2. Verschiedene Darstellungsmöglichkeiten
2.1 Akkordeon mit 2 und 3 Einträgen
Die Anzahl an Einträgen in ein Akkordeon kann individuell und den jeweiligen Ansprüchen bestimmt werden. Je nach Seitenaufteilung (mit oder ohne Marginalspalte), variiert die Breite der Darstellung.
In der Beispielabbildung ist die Seitenaufteilung “Navigation-Inhalt-Marginalspalte” gewählt.
Siehe dazu Kapitel Auswahl der Seitenaufteilung
2.2 Akkordeon mit 5 Einträgen
Das Akkordeon und die Einträge in voller Seitenbreite bei einer Seitenaufteilung “Navigation-Inhalt breit” . Die einzelnen Einträge innerhalb eines Akkordeon werden dabei untereinander platziert und nehmen ebenfalls die den Seiteninhalten zur Verfügung stehende Breite ein.
Siehe dazu Kapitel Auswahl der Seitenaufteilung
2.3 Akkordeon eingebunden
Um zusammengehörende Inhalte besser zu gliedern, ist das erste Akkordeon in den Seiteninhalt “Bild + Text” eingebunden. Das zweite Akkordeon ist in den Seiteninhalt “Inhaltsteiler” eingebunden, welches die Breite des Akkordeon beeinflussen kann.
Bei der Verwendung eines Akkordeon gibt es zwei Möglichkeiten der Erstellung.
Standard (empfohlen)
Erstellen eines Akkordeon mit einer vorbelegten Anzahl an Akkordeoneinträgen. Hier kann zwischen 2 bis 5 Einträgen gewählt werden.
Die Anleitung für die schrittweise Erstellung wird im Abschnitt 3.1 Akkordeon mit Akkordeoneinträgen erklärt.
Optionales Erstellen
Erstellen eines Akkordeon ohne Akkordeoneinträge. Die einzelnen Einträge selbst können im Nachgang manuell hinzugefügt werden.
Die Anleitung für die schrittweise Erstellung wird im Abschnitt 3.2 Akkordeon ohne Einträge erklärt.
3.1 Erstellen des Seiteninhalts “Akkordeon mit Akkordeoneinträgen”
Schrittweise Erläuterung für die Erstellung eines neuen Seiteninhalts basierend auf der CMS-Vorlage “
Symbol | Aktion |
| |
|---|---|---|---|
| 1 |
| Seite öffnen | |
| 2 |
| Seiteninhalte |
|
| 3 |
| Seite erstellen & verknüpfen | |
| 4 |
| Content-Klassen Ordner “Inhalts - Templates” auswählen | |
| 5 |
| Content-Klasse “Akkordeon + x Einträge” auswählen
| |
| 6 |
| Es erscheint ein Dialogfenster mit einem aus der Content-Klasse generierten Seitennamen, der mit der späteren Überschrift des neuen Seiteninhalts belegt werden sollte. | |
| 7 |
| Mit “OK” bestätigen | |
| 8 |
| Darstellung nach Erstellung “Akkordeon + 2 Einträge” Die Abbildung zeigt das Beispiel mit 2 Akkordeoneinträgen. |
3.1.1 Bearbeiten des Seiteninhalts “Akkordeon mit Akkordeoneinträgen”
Schrittweise Erläuterung für das Bearbeiten eines neuen Seiteninhalts basierend auf der CMS-Vorlage “
Darstellung nach erstellen des Akkordeon aus der Vorlage “Akkordeon + 2 Einträge”. Das Akkordeon ist zur Bearbeitung der Akkordeoneinträge geöffnet.
Bezeichnung | Beschreibung |
|---|---|
| Bearbeitung beenden |
| Siehe dazu Kapitel 7.9 Projektfremde Seite einbinden |
| einzelne Akkordeoneinträge hinzufügen, sortieren oder entfernen Die schrittweise Erläuterung der einzelnen Schritte wird im Abschnitt 3.3 Akkordeoneinträge erklärt. |
| Akkordeoneintrag zur weiteren Bearbeitung öffnen Das Bearbeiten eines Akkordeoneintrages wird im Abschnitt 3.3.2 Akkordeoneintrag bearbeiten erklärt. |
3.2 Erstellen des Seiteninhalts “Akkordeon” ohne Einträge
Symbol | Aktion |
| |
|---|---|---|---|
| 1 |
| Seite öffnen | |
| 2 |
| Seiteninhalte | |
| 3 |
| Seite erstellen & verknüpfen | |
| 4 |
| Content-Klassen Ordner “Inhalts - Templates” auswählen | |
| 5 |
| Content-Klasse “Akkordeon” auswählen | |
| 6 |
| Es erscheint ein Dialogfenster mit einem aus der Content-Klasse generierten Seitennamen, der mit der späteren Überschrift des neuen Seiteninhalts belegt werden sollte. | |
| 7 |
| Mit “OK” bestätigen | |
| 8 |
| Ansicht nach erstellen des Akkordeon aus der Vorlage “Akkordeon. Das Akkordeon ist zur weiteren Bearbeitung geöffnet. Nun können einzelne Akkordeoneinträge hinzugefügt werden. |
3.2.1 Bearbeiten des Seiteninhalts “Akkordeon” ohne Einträge
Schrittweise Erläuterung für das Bearbeiten eines neuen Seiteninhalts basierend auf der CMS-Vorlage “
Darstellung nach erstellen des Akkordeon aus der Vorlage “Akkordeon. Das Akkordeon ist zur weiteren Bearbeitung geöffnet.
Bezeichnung | Beschreibung |
|---|---|
| schließt die Seite (Inhaltselement) “Akkordeon” |
| Siehe dazu Kapitel 7.9 Projektfremde Seite einbinden |
| einzelne Akkordeoneinträge hinzufügen, sortieren oder entfernen. Die schrittweise Erläuterung der einzelnen Schritte wird im Abschnitt 3.3 Akkordeoneinträge erklärt. |
3.3 Akkordeoneinträge
3.3.1 Akkordeoneinträge hinzufügen
Symbol | Aktion |
| |
|---|---|---|---|
| 1 | Akkordeoneinträge | ||
| 2 |
| Seite erstellen & verknüpfen | |
| 3 |
| Es erscheint ein Dialogfenster mit einem aus der Content-Klasse generierten Seitennamen, der mit der späteren Überschrift des neuen Seiteninhalts belegt werden sollte. | |
| 4 |
| Mit “OK” bestätigen | |
| 5 |
| Darstellung nach Erstellung eines Akkordeoneintrags. |
3.3.2 Akkordeoneintrag bearbeiten
In diesem Abschnitt wird die inhaltliche Bearbeitung eines Akkordeoneintrages, wie das Hinzufügen von Überschriften und Inhalten beschrieben.
Bezeichnung | Beschreibung |
|---|---|
| Seiteninhalt zur Bearbeitung öffnen |
| Bearbeitung beenden |
| Erstellen der Überschrift für den Akkordeoneintrag |
| Inhaltsbearbeitung des Akkordeoneintrages mit Hilfe des Text-Editor. Hier können die Inhalte (z.Bsp. Texte, Tabellen und/oder Grafiken) platziert werden. Das Arbeiten mit dem Text-Editor wird im Abschnitt “Text bearbeiten - Der Texteditor” beschrieben. |
| Hier können innerhalb eines Akkordeoneintrages weitere Seiteninhalte hinzugefügt sortiert oder entfernt werden. So kann ein Akkordeoneintrag mehrere, verschiedene Seiteninhalte enthalten, wie z. Bsp. Verweislisten, Bilder / Bildergalerien oder YouTube-Videos. |
Darstellung nach Bearbeiten eines Akkordeoneintrag.
Darstellung nach Bearbeiten eines Akkordeoneintrag in der Seitenvorschau mit geöffneten Akkordeon.
3.3.3 Akkordeoneinträge sortieren
In diesem Abschnitt wird erklärt, wie einzelne Seiteninhalte sortiert werden können. Da dieser Bearbeitungsschritt bei vielen Seiteninhalten gleich ist, ist die detaillierte Beschreibung im Kapitel 7.7 Sortieren von Seiteninhalten zu finden.
Symbol | Aktion |
| |
|---|---|---|---|
| 1 |
| Akkordeon öffnen | |
| 2 |
| Akkordeoneinträge |
|
| 3 |
| Die weiteren Bearbeitungsschritte sind im Kapitel 7.7 Sortieren von Seiteninhalten ab Punkt 2 beschrieben. |
3.3.4 Akkordeoneinträge entfernen
In diesem Abschnitt wird erklärt, wie einzelne Seiteninhalte entfernt werden können. Da dieser Bearbeitungsschritt bei vielen Seiteninhalten gleich ist, ist die detaillierte Beschreibung im Kapitel 7.8 Entfernen von Seiteninhalten zu finden.
Symbol | Aktion |
| |
|---|---|---|---|
| 1 |
| Akkordeon öffnen |
|
| 2 |
| Akkordeoneinträge | |
| 3 |
| Die weiteren Bearbeitungsschritte sind im Kapitel 7.8 Sortieren von Seiteninhalten ab Punkt 2 beschrieben. |
|
Frage | Antwort |
|---|---|
Wofür steht in der Wiki-Beschreibung das x innerhalb von “Akkordeon + x Einträge”? | Das x steht für die Auswahlmöglichkeiten 2 bis 5 Akoordeoneinträge. |