So ändern Sie das Aussehen eines Spry-Menüs

Das Spry Menü war eines der Elemente des Spry-Widget in der Version CS3, Dreamweaver hinzugefügt. CS4 enthält 16 verschiedene Widgets wie folgt um verbessern die Darstellung von Webseiten und solche Dinge wie Benutzer-ID und Kennwort-Funktionalität hinzufügen zu vereinfachen. Die Menü-Bar-Version in Spry bietet Gelegenheit, Stack Menü oder Navigation Entscheidungen bis zu drei Ebenen, weit mehr Flexibilität als grundlegende HTML oder Hypertext Markup Language, zu codieren. Mithilfe von Cascading Style Sheets oder CSS, eingebaut in Spry ermöglicht die direkten Kontrolle über mehrere Anzeigeelemente.

Anweisungen

1 Öffnen Sie das Programm Dreamweaver, und öffnen Sie eine Seite mit einem vorhandenen Spry Menü. Bewegen Sie den Cursor auf einen beliebigen Bereich der Menüleiste. Dies macht das Spry Panel-Widget mit einem blauen Hintergrund und Text lesen "Spry Menü Bar: MenuBar1" sichtbar (vorausgesetzt, Sie nur ein Menü auf der Seite haben und nicht umbenannt). Die Eigenschaften werden im Bedienfeld am unteren Rand des Bildschirms aufgeführt.

2 Ändern Sie das Aussehen des Menüs, indem Sie auf "dieses Widget auf der linken Seite des Fensters Eigenschaften anpassen". Dieses öffnet ein Fenster zum Adobe-Hilfe-Bildschirm mit allen Einzelheiten zum 1) verändern den Textstil eines Menüelements; 2) die Hintergrundfarbe eines Menüelements zu ändern; 3) ändern Sie die Dimension der Menüelemente; und 4) die Untermenüs zu positionieren. Innerhalb dieser vier Möglichkeiten gibt es fünf verschiedene Änderungen nur für den Textstil. Jeder umfasst mehrere CSS-Regeln für insgesamt 10 plus fünf verschiedene Farbeigenschaften für Haupt- und Untermenüs. Beschreibt alle diese Einschränkungen dieses Artikels hinausgeht, aber einige Beispiele veranschaulichen den Basic-Prozess.

3 Suchen die entsprechenden CSS-Stile auf der Adobe-Seite aufgeführt, um die Hintergrundfarbe eines Menüelements zu ändern. Der Stil für dieses ist "Ul. MenuBarVertical a "oder"Ul. "MenuBarHorizontal" ein. " Die Standardfarbe ist "#EEE." Klicken Sie im Abschnitt "CSS-Stile" auf der rechten Seite des Bildschirms. Klicken Sie auf das "Pluszeichen (+)"-Zeichen neben "SpryMenuBarHorizontal.css" alle Stile für diese (oder der vertikale Balken) ausbauen. Einen Bildlauf nach unten, bis Sie "Ul finden. "MenuBarHorizontal" ein "und klicken Sie darauf. Dies öffnet das Eigenschaften-Fenster. Klicken Sie auf die Standardfarbe, die eine Farbkarte öffnen wird. Wählen Sie eine neue Farbe aus dem Diagramm.

4 Ändern Sie die Abmessungen der Menüelemente, die mit den anwendbaren CSS-Stil auf der Adobe-Hilfe-Seite und das beschriebene in Schritt 3 die Größe. Die horizontale Menüleiste-Abmessungen werden gesteuert durch CSS-Stil "Ul. "MenuBarHorizontal" li"wo können Sie die Width-Eigenschaft ändern. Im Stil wie Mode, ein anderes CSS Steuerelemente des Textformat. Dies ist der "Ul. "MenuBarHorizontal" ein "oder"Ul. MenuBarVertical a"Stil. Die Textfarbe zu ändern, wenn der Mauszeiger bewegt, über das Menü mit "Ul wird. "MenuBarHorizontal" a: Hover "(oder das vertikale Äquivalent).

Tipps & Warnungen

• Als Alternative zu den CSS-Stile bearbeiten klicken Sie auf "HTML" im Abschnitt Eigenschaften oder "Source Code" im oberen Menü. Sie können die Darstellung dann mithilfe von HTML-Tags wie Schriftart und Farbe ändern. Diese Methode verringert die Anzahl der möglichen Stiländerungen gegenüber der Verwendung von CSS.
• Spry-Widgets erstellen mehrere JavaScript und CSS Dateien. Diese müssen auf Ihren Webserver zusammen mit der Web-Seite hochgeladen werden, bevor das Widget funktioniert.
• Seien Sie vorsichtig, wie Sie mit Farbänderungen zu experimentieren. Setzen Sie nicht die Farben, die den Text schwer zu lesen auf einem anderen Display-Monitor machen. Als ein Beispiel wenn Sie die Hintergrundfarbe des Menü-weiß und die Hover-Hintergrundfarbe ein hellgelb, kann der Text nahe unlesbar sein.