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

  1. Wählen Sie „Einfügen“ > „Spry“ > „Spry-Akkordeon“.

Hinweis:

Sie können Akkordeon-Widgets auch über die Kategorie „Spry“ im Bedienfeld „Einfügen“ hinzufügen.

Bedienfeld zu einem Akkordeon-Widget hinzufügen

  1. Wählen Sie ein Akkordeon-Widget im Dokumentfenster aus.
  2. Klicken Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) auf die Schaltfläche zum Hinzufügen von Paletten (+).
  3. Optional: Ändern Sie den Namen, indem Sie in der Entwurfsansicht den Titel auswählen und bearbeiten.

Bedienfeld aus einem Akkordeon-Widget löschen

  1. Wählen Sie ein Akkordeon-Widget im Dokumentfenster aus.
  2. 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

  1. 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

  1. Wählen Sie ein Akkordeon-Widget im Dokumentfenster aus.
  2. Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) den Namen der zu verschiebenden Akkordeonpalette aus.
  3. 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.

  1. 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

  1. 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.

  1. 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.

  2. Fügen Sie eine Breiteneigenschaft und einen Wert zur Regel hinzu, wie z. B. width: 300px;.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie