Wie legen Sie ein vertikales "Spry" Menü in Dreamweaver CS5

May 12

Adobe Dreamweaver CS5, eine Web-design und Entwicklungsprogramm bietet verschiedene Tools um Designer erstellen Sie interaktive Websites. Zu diesen Werkzeugen ermöglicht Dreamweavers Spry-Frameworks Webseitenelemente bestehend aus JavaScript (eine beliebte Webseite Skriptsprache), HTML (die Programmiersprache zum Erstellen von Webseiten) und CSS (cascading Stylesheets, ein Stil-Sheet-Sprache zum Formatieren von Elementen einer Webseite) zu erstellen. Dreamweaver verfügt über mehrere vordefinierte Spry Web-Seite-Elemente, einschließlich Spry-Menüleiste, das Ihnen erlaubt, die vertikal und horizontal Flyout-Menüs in Ihre Webseiten einfügen, ohne viel Code zu schreiben.

Anweisungen

Ein vertikales "Spry" Menü Einfügen in eine Webseite

1 Öffnen Sie eine vorhandene HTML-Seite in Dreamweaver, in dem Sie ein vertikales Spry Menü erstellen möchten, oder ein neues starten: Klicken Sie auf das Menü "Datei" und wählen Sie "Neu." Dies öffnet das Dialogfeld "neues Dokument". Wählen Sie den Typ der Seite und Layout, die und klicken Sie dann auf "Erstellen".

2 Klicken Sie im Bereich der Webseite, wo Sie ein vertikales Menü erstellen möchten. (Ist dies eine neue Seite, Dreamweaver bittet euch, die Seite zu speichern. Klicken Sie auf "OK". Dies zeigt das Dialogfeld "Speichern unter". Benennen und Speichern der Seite.) Das Spry-Menüleisten-Dialogfeld wird angezeigt.

3 Klicken Sie in "Radio" neben "Vertikal", und klicken Sie auf "OK". Dreamweaver fügt ein vertikales Menü in Ihre Webseite ein.

Die Menü-Bezeichner ändern

4 Wählen Sie den Menütext (d. h. "Eintrag 1", "Eintrag 2" und so weiter) und geben den neuen Beschriftungstext. Dadurch können Sie die oberen Menü-Elementbezeichnungen ändern. Sie können die untergeordneten Menüelemente aus Dreamweavers Split Dokumentansicht ändern.

5 Klicken Sie auf "Split" in der oberen linken Ecke, direkt unter der Menüleiste. Dieses legt Dreamweaver in einem geteilten Bearbeitungsmodus, die Ihnen erlaubt, den HTML-Code bearbeiten. Untermenü Elementbezeichnungen befinden sich in HTML ungeordnete Listen mit Formatierung, die folgendermaßen aussieht:

< Ul Id = "MenuBar1" Class = "MenuBarVertical" >

< li >< eine Klasse "MenuBarItemSubmenu" Href = "#" = > Eintrag 1 </a >

<ul>

<li><a href="#">Item 1.1</a></li>

<li><a href="#">Item 1.2</a></li>

<li><a href="#">Item 1.3</a></li>

</ul>

</li >

6 Wählen Sie das gewünschte Etikett-Element zu ändern (d. h. "Item 1.1" oder "Item 1.2") und geben den neuen Beschriftungstext. Untermenü-Einträge zugeordnet, welche Top-Menü-Elemente entsprechend beschriftet sind. Z. B. Element für obere Menü Punkt 3 "Punkt 3.1," beschriftet"untergeordneten Menüelemente 3.2" und so weiter.

Ändern der vertikalen Menü Darstellung

7 Klicken Sie unter dem Menüpunkt, für die Sie die Darstellung des Cursors einfügen ändern möchten.

8 Eigenschaftenpanel unterhalb des Dokumentfensters, und klicken Sie auf "Regel bearbeiten". Dies öffnet das Dialogfeld CSS-Regel-Definition. Von hier aus können Sie den Menü-Punkt-Schrift, Hintergrund, Form, Rahmen und verschiedene andere Optionen ändern.

9 Die Option Darstellung, die Sie in der Liste Kategorie auf der linken Seite des Dialogfeldes ändern möchten. Beispielsweise wenn Sie die Hintergrundfarbe ändern möchten, klicken Sie in der Liste Kategorie auf "Hintergrund" und dann klicken Sie auf das Farbfeld "Hintergrundfarbe" und wählen Sie eine Farbe aus dem Flyout-Menü.

10 Klicken Sie auf "Übernehmen", um die Änderung zu übernehmen. Gehen Sie folgendermaßen vor, um zusätzliche Darstellung Änderungen vorzunehmen, und klicken Sie auf "OK", wenn Sie die Änderungen abgeschlossen haben.

Tipps & Warnungen