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:
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.
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.
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.
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; |
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.
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.
Bei Ihrem Konto anmelden