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.
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:
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.
Hinweis:
Sie können Akkordeon-Widgets auch über die Kategorie „Spry“ im Bedienfeld „Einfügen“ hinzufügen.
-
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.
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.
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;
-
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.)
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.
Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.