Operation Manual

466
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
{imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
Note: Wenn Sie von einer vertikalen in eine horizontale Menüleiste konvertieren, fügen Sie die Vorausladeoption
imgDown nebst Komma hinzu.
7 Optional: Wenn Ihre Seite keine weiteren horizontalen Menüleisten-Widgets enthält, löschen Sie den Link zur
Datei „MenuBarHorizontal.css“ im Dokumentkopf.
8 Speichern Sie die Seite.
Menüleisten-Widget anpassen
Sie können mit dem Eigenschafteninspektor zwar einfache Änderungen an einem Menüleisten-Widget vornehmen,
benutzerdefinierte Stilaufgaben werden allerdings nicht unterstützt. Sie können die CSS-Regeln für Menüleisten-
Widgets ändern und ihren Stil individuell anpassen.
Alle CSS-Regeln in den nachfolgenden Themen beziehen sich auf die Standardregeln der Datei
„SpryMenuBarHorizontal.css“ bzw. „SpryMenuBarVertical.css“ (je nach Auswahl). Jedes Mal, wenn Sie ein Spry-
Menüleisten-Widget erstellen, speichert Dreamweaver diese CSS-Dateien im Ordner „SpryAssets“ Ihrer Site. Diese
Dateien enthalten außerdem nützliche kommentierte Informationen zu verschiedenen Stilen für das jeweilige Widget.
Sie können die Regeln für das Menüleisten-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.
More Help topics
“Das Bedienfeld „CSS-Stile“ im Modus „Aktuell“” on page 139
Textstil eines Menüelements ändern
Die mit dem <a>-Tag verknüpfte CSS-Datei enthält Informationen zu Textstilen. Außerdem sind an dieses Tag
verschiedene relevante Textstilklassen angehängt, die sich auf unterschiedliche Menüzustände beziehen.
❖ Um den Textstil eines Menüelements zu ändern, suchen Sie in folgender Tabelle die jeweilige CSS-Datei und
ändern Sie dann den Standardwert:
Zu ändernder Stil CSS-Regel für eine vertikale bzw.
horizontale Menüleiste
Dazugehörige Eigenschaften und
Standardwerte
Standardtext
ul.MenuBarVertical a,
ul.MenuBarHorizontal a
color: #333; text-decoration: none;
Textfarbe beim Zeigen mit der Maus
ul.MenuBarVertical a:hover,
ul.MenuBarHorizontal a:hover
color: #FFF;
Textfarbe im Fokus
ul.MenuBarVertical a:focus,
ul.MenuBarHorizontal a:focus
color: #FFF;
Farbe des Menüleistenelements beim Zeigen
mit der Maus
ul.MenuBarVertical
a.MenuBarItemHover,
ul.MenuBarHorizontal
a.MenuBarItemHover
color: #FFF;
Farbe des Untermenüelements beim Zeigen
mit der Maus
ul.MenuBarVertical
a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal
a.MenuBarItemSubmenuHover
color: #FFF;