Wählen Sie „Einfügen“ > „Spry“ > „Spry Paletten mit Registerkarten“.
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 „Paletten mit Registerkarten“
Beim Widget „Paletten mit Registerkarten“ handelt es sich um einen Satz Paletten, mit denen sich Inhalte auf kleinstem Raum speichern lassen. Der Seitenbesucher blendet die in den Paletten mit Registerkarten gespeicherten Inhalte durch Klicken auf das Register der gewünschten Palette ein bzw. aus. Die Paletten des Widgets lassen sich durch Klickaktionen des Besuchers entsprechend erweitern bzw. reduzieren. Beim Widget „Paletten mit Registerkarten“ kann nur jeweils ein Inhaltsfenster auf einmal geöffnet sein. Das folgende Beispiel zeigt eine Widget vom Typ „Paletten mit Registerkarten“, dessen dritte Palette geöffnet ist:
A. Titel B. Inhalt C. Widget „Paletten mit Registerkarten“ D. Palette mit Registerkarten
Der HTML-Code für dieses Widget besteht aus einem äußeren div-Tag mit allen Paletten, einer Liste der Register, einem div-Tag für die Inhaltsfenster sowie einem div-Tag für jedes einzelne Inhaltsfenster. Der HTML-Code für dieses Widget enthält außerdem Skript-Tags im Kopf des Dokuments und unterhalb des HTML-Markups des Widgets.
Eine ausführliche Erläuterung zur Funktionsweise von Widgets vom Typ „Paletten mit Registerkarten“, einschließlich der vollständigen Code-Struktur, finden Sie unter www.adobe.com/go/learn_dw_sprytabbedpanels_de.
Widgets vom Typ „Paletten mit Registerkarten“ einfügen und bearbeiten
Widget „Paletten mit Registerkarten“ einfügen
Hinweis:
Sie können Widgets vom Typ „Paletten mit Registerkarten“ auch über die Kategorie „Spry“ im Bedienfeld „Einfügen“ hinzufügen.
Palette zum Widget „Paletten mit Registerkarten“ hinzufügen
-
Wählen Sie ein Widget vom Typ „Paletten mit Registerkarten“ im Dokumentfenster aus.
-
Klicken Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) auf die Schaltfläche zum Hinzufügen von Paletten (+).
-
Optional: Ändern Sie den Registernamen, indem Sie ihn in der Entwurfsansicht auswählen und bearbeiten.
Bedienfeld aus dem Widget „Paletten mit Registerkarten“ löschen
-
Wählen Sie ein Widget vom Typ „Paletten mit Registerkarten“ 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 das Register 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 Widget vom Typ „Paletten mit Registerkarten“ 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 Widget vom Typ „Paletten mit Registerkarten“ im Dokumentfenster aus.
-
Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) den Namen des zu verschiebenden Widgets.
-
Klicken Sie auf den Rechts- bzw. Linkspfeil, um die Palette nach oben oder unten zu verschieben.
Standardmäßig geöffnetes Bedienfeld festlegen
Sie können festlegen, welches Paletten-Widget mit Registerkarten beim Öffnen der Seite in einem Browser angezeigt wird.
-
Wählen Sie ein Widget vom Typ „Paletten mit Registerkarten“ im Dokumentfenster aus.
-
Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) im Popupmenü „Standardpalette“ die Palette aus, die standardmäßig geöffnet werden soll.
Widget „Paletten mit Registerkarten“ anpassen
Sie können mit dem Eigenschafteninspektor zwar einfache Änderungen an diesem Widget vornehmen, benutzerdefinierte Stilaufgaben werden allerdings nicht unterstützt. Sie können die CSS-Regeln für Paletten-mit Registerkarten-Widgets ändern und ihren Stil individuell anpassen.
Eine Kurzanleitung zum Ändern der Farben des Widgets „Paletten mit Registerkarten“ 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_sprytabbedpanels_custom_de.
Alle CSS-Regeln der folgenden Themen beziehen sich auf die Standardregeln in der Datei „SpryTabbedPanels.css“. Jedes Mal, wenn Sie ein Widget vom Typ „Paletten mit Registerkarten“ erstellen, speichert Dreamweaver die Datei „SpryTabbedPanels.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 dieses 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 das Widget „Paletten mit Registerkarten“
Sie können den Textstil eines Widgets vom Typ „Paletten mit Registerkarten“ bearbeiten, indem Sie Eigenschaften für den gesamten Widget-Container oder die Eigenschaften der Widget-Komponenten einzeln konfigurieren.
-
Um den Textstil eines solchen Widgets zu bearbeiten, suchen Sie in folgender Tabelle nach der richtigen 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 Widget
.TabbedPanels font: Arial; font-size:medium;
Nur Text in Palettenregistern
.TabbedPanelsTabGroup oder .TabbedPanelsTab font: Arial; font-size:medium;
Nur Text in den Inhaltsfenstern
.TabbedPanelsContentGroup oder .TabbedPanelsContent font: Arial; font-size:medium;
Hintergrundfarben des Widgets „Paletten mit Registerkarten“ ändern
-
Um die Hintergrundfarben verschiedener Bereiche dieses 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 der Palettenregister
.TabbedPanelsTabGroup oder .TabbedPanelsTab background-color: #DDD (dies ist der Standardwert)
Hintergrundfarbe der Inhaltsfenster
.Tabbed PanelsContentGroup oder .TabbedPanelsContent background-color: #EEE (dies ist der Standardwert)
Hintergrundfarbe des ausgewählten Registers
.TabbedPanelsTabSelected background-color: #EEE (dies ist der Standardwert)
Hintergrundfarbe der Palettenregister beim Zeigen mit der Maus
.TabbedPanelsTabHover background-color: #CCC; (dies ist der Standardwert)
Breite von Paletten mit Registerkarten beschränken
Widgets vom Typ „Paletten mit Registerkarten“ 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 anpassen.
-
Suchen Sie nach der CSS-Regel „.TabbedPanels“ in der Datei „SpryTabbedPanels.css“. Diese Regel definiert die Eigenschaften für das Haupt-Containerelement des Widgets Paletten mit Registerkarten.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;.
