Arbeiten mit dem Widget „Spry Reduzierbare Palette“

Suchen

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.

Widget „Reduzierbare Palette“

Beim Widget „Reduzierbare Palette“ handelt es sich um eine Palette, mit der sich Inhalte auf kleinstem Raum speichern lassen. Der Seitenbesucher blendet die in der reduzierbaren Palette gespeicherten Inhalte durch Klicken auf den Widget-Titel ein bzw. aus. Das folgende Beispiel zeigt eine reduzierbare Palette im erweiterten bzw. reduzierten Zustand:

A. Erweitert B. Reduziert

Der HTML-Code für Widgets vom Typ „Reduzierbare Palette“ besteht aus einem äußeren div-Tag mit dem div-Tag des Inhalts und dem div-Tag des Titelcontainers. Es enthält außerdem Skript-Tags im Kopf des Dokuments und unterhalb des HTML-Markups der reduzierbaren Palette.

Eine ausführliche Erläuterung der Funktionsweise von Widgets vom Typ „Reduzierbare Palette“, einschließlich der vollständigen Code-Struktur, finden Sie unter www.adobe.com/go/learn_dw_sprycollapsiblepanel_de.

Widgets vom Typ „Reduzierbare Palette“ einfügen und bearbeiten

Widgets vom Typ „Reduzierbare Palette einfügen“

Wählen Sie „Einfügen“ > „Spry“ > „Spry Reduzierbare Palette“.

Hinweis:

Sie können Widgets vom Typ „Reduzierbare Palette“ auch über die Kategorie „Spry“ im Bedienfeld „Einfügen“ hinzufügen.

Reduzierbare Palette in der Entwurfsansicht öffnen oder schließen

Führen Sie einen der folgenden Schritte aus:
- Deuten Sie mit dem Mauszeiger auf den Titel der Palette, um sie in der Entwurfsansicht zu öffnen. Klicken Sie dann auf das Augensymbol, das rechts im Titel angezeigt wird.
- Wählen Sie ein Widget vom Typ „Reduzierbare Palette“ im Dokumentfenster aus und dann im Popupmenü „Anzeige“ des Eigenschafteninspektors („Fenster“ > „Eigenschaften“) die Option „Geöffnet“ bzw. „Geschlossen“.

Standardstatus des Widgets „Reduzierbare Palette“ festlegen

Sie können den Standardstatus („Geöffnet“ bzw. „Geschlossen“) des Widgets „Reduzierbare Palette“ für das Laden der Webseite in einem Browser festlegen.

Wählen Sie ein Widget vom Typ „Reduzierbare Palette“ im Dokumentfenster aus.
Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) im Menü „Standardstatus“ die Option „Geöffnet“ bzw. „Geschlossen“ aus.

Animation für das Widget „Reduzierbare Palette“ aktivieren oder deaktivieren

Wenn Sie die Animation für ein Widget vom Typ „Reduzierbare Palette“ aktivieren, wird die Palette per Standardeinstellung langsam geöffnet bzw. geschlossen, wenn ein Site-Besucher auf ihr Register klickt. Ist die Animation deaktiviert, wird die reduzierbare Palette abrupt geöffnet bzw. geschlossen.

Wählen Sie ein Widget vom Typ „Reduzierbare Palette“ im Dokumentfenster aus.
Aktivieren bzw. deaktivieren Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) die Option „Animation aktivieren“.

Widget „Reduzierbare Palette“ anpassen

Sie können mit dem Eigenschafteninspektor zwar einfache Änderungen an diesen Widgets vornehmen, benutzerdefinierte Formatierungsaufgaben werden allerdings nicht unterstützt. Sie können die CSS-Regeln für Reduzierbare-Paletten-Widgets ändern und ihren Stil individuell anpassen.

Eine Kurzanleitung zum Ändern der Farben des Reduzierbare-Paletten-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 Formatierungsaufgaben finden Sie unter www.adobe.com/go/learn_dw_sprycollapsiblepanel_custom_de.

Alle CSS-Regeln der folgenden Themen beziehen sich auf die Standardregeln in der Datei „SpryCollapsiblePanel.css“. Jedes Mal, wenn Sie ein Widget vom Typ „Reduzierbare Palette“ erstellen, speichert Dreamweaver die Datei „SpryCollapsiblePanel.css“ im Ordner „SpryAssets“ Ihrer Site. Diese Datei enthält außerdem nützliche kommentierte Informationen zu verschiedenen Stilen für das jeweilige Widget.

Hinweis:

Sie können die Regeln für diese Widgets 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 das Widget „Reduzierbare Palette“

Sie können den Textstil eines Widgets vom Typ „Reduzierbare Palette“ bearbeiten, indem Sie Eigenschaften für den gesamten Widget-Container oder die Eigenschaften der Widget-Komponenten einzeln konfigurieren.

Um das Textformat solcher Widgets zu bearbeiten, suchen Sie in folgender Tabelle die richtige CSS-Regel und fügen Sie Ihre eigenen Eigenschaften und Werte hinzu:

Zu ändernder Stil	Relevante CSS-Regel	Beispiel für hinzuzufügende/zu ändernde Eigenschaften/Werte
Text in der gesamten reduzierbaren Palette	.CollapsiblePanel	font: Arial; font-size:medium;
Nur Text im Palettenregister	.CollapsiblePanelTab	font: bold 0.7em sans-serif (dies ist der Standardwert)
Nur Text im Inhaltsfenster	.CollapsiblePanelContent	font: Arial; font-size:medium;

Hintergrundfarben für das Widget „Reduzierbare Palette“ ändern

Um die Hintergrundfarben verschiedener Bereiche solcher Widgets zu ändern, suchen Sie in folgender Tabelle nach der richtigen CSS-Regel und fügen Sie Ihre eigenen Eigenschaften und Werte für die Hintergrundfarben hinzu:

Zu ändernde Farbe	Relevante CSS-Regel	Beispiel für hinzuzufügende/zu ändernde Eigenschaften/Werte
Hintergrundfarbe des Palettenregisters	.CollapsiblePanelTab	background-color: #DDD (dies ist der Standardwert)
Hintergrundfarbe des Inhaltsfensters	.CollapsiblePanelContent	background-color: #DDD;
Hintergrundfarbe des Registers bei geöffneter Palette	.CollapsiblePanelOpen .CollapsiblePanelTab	background-color: #EEE (dies ist der Standardwert)
Hintergrundfarbe des geöffneten Palettenregisters beim Zeigen mit der Maus	.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover	background-color: #CCC; (dies ist der Standardwert)

Breite einer reduzierbaren Palette beschränken

Widgets vom Typ „Reduzierbare Palette“ passen sich standardmäßig dem verfügbaren Raum an. Sie können die Breite eines solchen Widgets allerdings einschränken, indem Sie die entsprechende Eigenschaft im Container der reduzierbaren Palette anpassen.

Suchen Sie nach der CSS-Regel „.CollapsiblePanel“ in der Datei „SpryCollapsible Panel.css“. Diese Regel definiert die Eigenschaften für das Haupt-Containerelement des Widgets „Reduzierbare Palette“.

Hinweis:

Sie können die Regel auch suchen, indem Sie das 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;.