Operation Manual

473
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
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.
1 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.
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.
2 Fügen Sie eine Breiteneigenschaft und einen Wert zur Regel hinzu, wie z. B. width: 300px;.
Arbeiten mit dem Spry-QuickInfo-Widget
QuickInfo-Widget
Das Spry-QuickInfo-Widget zeigt Zusatzinformationen an, wenn ein Benutzer den Mauszeiger über bestimmte
Elemente einer Webseite hält. Die Zusatzinformationen werden wieder ausgeblendet, wenn sich der Mauszeiger nicht
mehr über dem Element befindet. Sie können für QuickInfo-Einblendungen auch festlegen, dass sie länger angezeigt
werden, damit Benutzer mit QuickInfo-Inhalten interagieren können.
QuickInfo-Widgets bestehen aus den folgenden drei Komponenten:
• QuickInfo-Container. Diese Komponente enthält die Meldung oder die Inhalte, die angezeigt werden sollen, wenn
der Benutzer die QuickInfo aktiviert.
• Seitenelemente, mit denen die QuickInfo aktiviert wird.
• Konstruktor-Skript. Dabei handelt es sich um JavaScript-Code, mit dem Spry angewiesen wird, die QuickInfo-
Funktionalität zu erstellen.
Wenn Sie ein QuickInfo-Widget einfügen, wird in Dreamweaver mithilfe von
div-Tags ein QuickInfo-Container
angelegt und das Auslöserelement (das die QuickInfo aktivierende Seitenelement) in
span-Tags eingeschlossen. Diese
Tags werden in Dreamweaver standardmäßig verwendet. Als Tags für die QuickInfo und den Auslöser können jedoch
beliebige Tags verwendet werden, solange sie sich innerhalb des body-Tags der Seite befinden.
Beachten Sie beim Verwenden des QuickInfo-Widgets die folgenden Punkte:
• Eine geöffnete QuickInfo wird geschlossen, bevor die nächste QuickInfo geöffnet wird.
• Eine QuickInfo wird angezeigt, solange der Benutzer den Mauszeiger über den Auslösebereich hält.
Zu ändernde Farbe Dazugehörige CSS-Regel Beispiel für hinzuzufügende/zu ändernde
Eigenschaften/Werte
Hintergrundfarbe der Palettenregister
.TabbedPanelsTabGroup or
.TabbedPanelsTab
background-color: #DDD (dies ist der
Standardwert)
Hintergrundfarbe der Inhaltsfenster
.Tabbed PanelsContentGroup or
.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)