Wählen Sie „Einfügen“ > „Spry“ > „Spry-Akkordeon“.
Zuletzt aktualisiert am
1. Mai 2021
Hinweis:
Spry-Widgets werden ab Dreamweaver CC durch jQuery-Widgets ersetzt. Sie können zwar vorhandene Spry-Widgets auf der Seite noch ändern, aber Sie können keine neuen Spry-Widgets hinzufügen.
Akkordeon-Widget
Ein Akkordeon-Widget besteht aus einem Satz reduzierbarer Paletten, die umfangreiche Inhalte auf kleinstem Raum aufnehmen können. Der Seitenbesucher blendet die im Akkordeon gespeicherten Inhalte durch Klicken auf die Titelleisten der Paletten ein bzw. aus. Die Paletten eines Akkordeons lassen sich durch Klickaktionen entsprechend erweitern bzw. reduzieren. Allerdings kann in einem Akkordeon jeweils nur ein Inhaltsfenster angezeigt werden. Im folgenden Beispiel ist ein Akkordeon-Widget dargestellt, dessen erste Palette erweitert ist:
A. Titelleiste der Akkordeonpalette B. Inhaltsfenster der Akkordeonpalette C. Akkordeonpalette (geöffnet)
Das Standard-HTML für das Akkordeon-Widget besteht aus einem äußeren div-Tag mit allen Paletten, einem div-Tag für jede Palette sowie einem Header-div- und einem Inhalts-div innerhalb des Tags für jede Palette. Ein Akkordeon-Widget kann eine beliebige Anzahl an einzelnen Paletten enthalten. Der HTML-Code für das Akkordeon-Widget enthält außerdem script-Tags im Kopf des Dokuments und unterhalb des HTML-Markups für das Akkordeon.
Eine ausführliche Erläuterung der Funktionsweise von Akkordeon-Widgets, einschließlich der vollständigen Code-Struktur, finden Sie unter www.adobe.com/go/learn_dw_spryaccordion_de.
Ein Tutorial zum Verwenden des Akkordeon-Widgets finden Sie unter www.adobe.com/go/vid0167_de.
Akkordeon-Widget einfügen und bearbeiten
Akkordeon-Widget einfügen
Hinweis:
Sie können Akkordeon-Widgets auch über die Kategorie „Spry“ im Bedienfeld „Einfügen“ hinzufügen.
Bedienfeld zu einem Akkordeon-Widget hinzufügen
-
Wählen Sie ein Akkordeon-Widget im Dokumentfenster aus.
-
Klicken Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) auf die Schaltfläche zum Hinzufügen von Paletten (+).
-
Optional: Ändern Sie den Namen, indem Sie in der Entwurfsansicht den Titel auswählen und bearbeiten.
Bedienfeld aus einem Akkordeon-Widget löschen
-
Wählen Sie ein Akkordeon-Widget im Dokumentfenster aus.
-
Wählen Sie im Bedienfeldmenü des Eigenschafteninspektors („Fenster“ > „Eigenschaften“) den Namen der zu löschenden Palette aus und klicken Sie auf das Minussymbol (-).
Bedienfeld zum Bearbeiten öffnen
-
Führen Sie einen der folgenden Schritte aus:
Deuten Sie mit dem Mauszeiger auf die Titelleiste der jeweiligen Palette, um es in der Entwurfsansicht zu öffnen. Klicken Sie dann auf das Augensymbol, das rechts im Register angezeigt wird.
Wählen Sie ein Akkordeon-Widget im Dokumentfenster aus und klicken Sie dann im Bedienfeldmenü des Eigenschafteninspektors („Fenster“ > „Eigenschaften“) auf den Namen der zu bearbeitenden Palette.
Reihenfolge der Bedienfelder ändern
-
Wählen Sie ein Akkordeon-Widget im Dokumentfenster aus.
-
Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) den Namen der zu verschiebenden Akkordeonpalette aus.
-
Klicken Sie auf den Rechts- bzw. Linkspfeil, um die Palette nach oben oder unten zu verschieben.
Akkordeon-Widget anpassen
Sie können mit dem Eigenschafteninspektor zwar einfache Änderungen an einem Akkordeon-Widget vornehmen, benutzerdefinierte Stilaufgaben werden allerdings nicht unterstützt. Der Stil des Akkordeons lässt sich über die CSS-Regeln für das Akkordeon-Widget individuell anpassen.
Eine Kurzanleitung zum Ändern der Farben des Akkordeon-Widgets finden Sie im Artikel von David Powers Quick guide to styling Spry tabbed panels, accordions, and collapsible panels (Kurzanleitung zum Ändern des Stils von Spry-Widgets wie Paletten mit Registerkarten, Akkordeons und reduzierbare Paletten).
Eine erweiterte Liste mit Stilaufgaben finden Sie unter www.adobe.com/go/learn_dw_spryaccordion_custom_de.
Alle CSS-Regeln der folgenden Themen beziehen sich auf die Standardregeln in der Datei „SpryAccordion.css“. Jedes Mal, wenn Sie ein Akkordeon-Widget erstellen, speichert Dreamweaver die Datei „SpryAccordion.css“ im Ordner „SpryAssets“ Ihrer Site. Diese Datei enthält außerdem kommentierte Informationen zu verschiedenen Stilen für das jeweilige Widget und bietet damit eine nützliche Informationsquelle.
Hinweis:
Sie können die Regeln für das Akkordeon-Widget entweder schnell und einfach in der CSS-Datei oder mit dem Bedienfeld „CSS-Stile“ bearbeiten. Dieses Bedienfeld vereinfacht, speziell bei Verwendung des Modus „Aktuell“, das Auffinden der CSS-Klassen, die den verschiedenen Bereichen des Widgets zugewiesenen sind.
Textstil für Akkordeon-Widgets
Sie können den Textstil eines Akkordeon-Widgets bearbeiten, indem Sie Eigenschaften für den gesamten Widget-Container bzw. die der Widget-Komponenten einzeln konfigurieren.
-
Um den Textstil eines Akkordeon-Widgets zu bearbeiten, suchen Sie in folgender Tabelle die richtige CSS-Regel und fügen Sie Ihre eigenen Eigenschaften und Werte hinzu:
Zu ändernder Text
Relevante CSS-Regel
Beispiel für hinzuzufügende Eigenschaften/Werte
Text im gesamten Akkordeon (inklusive Titelleiste und Inhaltsfenster)
.Accordion oder .AccordionPanel font: Arial; font-size:medium;
Nur der Text in der Titelleiste der Akkordeonpalette
.AccordionPanelTab font: Arial; font-size:medium;
Nur der Text im Inhaltsfenster der Akkordeonpalette
.AccordionPanelContent font: Arial; font-size:medium;
Hintergrundfarben für Akkordeon-Widget ändern
-
Um die Hintergrundfarben verschiedener Bereiche eines Akkordeon-Widgets zu ändern, suchen Sie in folgender Tabelle die richtige CSS-Regel und fügen Sie Ihre eigenen Eigenschaften und Werte für die Hintergrundfarben hinzu:
Zu ändernder Widget-Bereich
Relevante CSS-Regel
Beispiel für hinzuzufügende/zu ändernde Eigenschaften/Werte
Hintergrundfarbe der Titelleisten der Akkordeonpaletten
.AccordionPanelTab background-color: #CCCCCC (dies ist der Standardwert)
Hintergrundfarbe der Inhaltsfenster des Akkordeons
.AccordionPanelContent background-color: #CCCCCC;
Hintergrundfarbe der geöffneten Akkordeonpalette
.AccordionPanelOpen .AccordionPanelTab background-color: #EEEEEE (dies ist der Standardwert)
Hintergrundfarbe der Hover-Palettenregister
.AccordionPanelTabHover color: #555555 (dies ist der Standardwert)
Hintergrundfarbe des geöffneten Hover-Palettenregisters
.AccordionPanelOpen .AccordionPanelTabHover color: #555555; (dies ist der Standardwert.)
Breite eines Akkordeons beschränken
Akkordeon-Widgets passen sich standardmäßig dem verfügbaren Raum an. Sie können die Breite eines Akkordeon-Widgets allerdings einschränken, indem Sie die entsprechende Eigenschaft im Akkordeon-Container anpassen.
-
Suchen Sie nach der CSS-Regel „.Accordion“ in der Datei „SpryAccordion.css“. Diese Regel definiert die Eigenschaften für das Haupt-Containerlement des Akkordeon-Widgets.Hinweis:
Sie können die Regel auch suchen, indem Sie das Akkordeon-Widget auswählen und das Bedienfeld „CSS-Stile“ („Fenster“ > „CSS-Stile“) anzeigen. Dazu muss sich das Bedienfeld im Modus „Aktuell“ befinden.
-
Fügen Sie eine Breiteneigenschaft und einen Wert zur Regel hinzu, wie z. B. width: 300px;.
