Erstellen Sie individuelle Menüs in Adobe Dreamweaver CS3

Dreamweaver, eine führende Webseite-Design-Programm unterstützt viele Möglichkeiten zum Erstellen von Menüs. Die einfachsten und am häufigsten verwendeten Methoden zählt des Programms integrierte Spry-Menüleiste, eine Dreamweaver mehrere vorkonfigurierten Spry-Framework-Ressourcen. Mit nur wenigen Mausklicks Spry-Menüleiste das Menü für Sie erstellt, und dann können Sie cascading Stylesheets oder CSS, das Menü anpassen.

Anweisungen

1 Öffnen Sie eine vorhandene HTML-Seite in Dreamweaver, oder starten Sie eine neue Seite: Klicken Sie auf das Menü "Datei" und wählen Sie "Neu", um das Dialogfeld Neues Dokument öffnen. Wählen Sie "HTML" Seite in der Liste, wählen Sie das gewünschte Layout aus der Liste "Layout" und klicken Sie auf "Erstellen".

Beispielsweise wenn Sie ein horizontales Menü erstellen möchten, wählen Sie die Option "1 Spalte behoben, zentriert, Kopf- und Fußzeile". Dadurch entsteht eine Layout mit CSS Header Container für Ihr Menü. Wenn Sie ein vertikales Menü erstellen möchten, wählen Sie die Option "2-Spalten fixiert, Linke Seitenleiste". Dadurch entsteht eine Layout mit CSS Seitenleiste Container für Ihr Menü.

2 Klicken Sie in der CSS-Container, in dem Sie ein Menü zum Einfügen des Cursors erstellen möchten. Ist dies eine neue Seite, fordert Dreamweaver Sie auf die Schaltfläche speichern. Klicken Sie auf "OK", um das Dialogfeld Speichern unter angezeigt. Nennen Sie die Seite und klicken Sie auf "Speichern". Das Spry-Menüleisten-Dialogfeld wird angezeigt.

3 Wählen Sie das gewünschte Menü. Um ein Menü am oberen Rand Ihrer Web-Seite zu erstellen, wählen Sie "Horizontal". Um ein Menü an der Seite Ihrer Web-Seite zu erstellen, wählen Sie "Vertikal".

4 Wählen Sie den ersten Etikett Menütext, "Item 1" und geben Sie die Menü-Element-Bezeichnung im Feld "Text" im Bedienfeld "Eigenschaften". Wiederholen Sie diesen Schritt, um Bezeichnungen für jedes Menüelement erstellen.

Sie können ein zusätzliches Menü-Element aus dem Bedienfeld "Eigenschaften" hinzufügen. Wenn Sie einen obersten Menüeintrag hinzufügen möchten, klicken Sie auf das Pluszeichen (+) über die erste Spalte im Bereich und benennen Sie dann das Menüelement im Feld "Text". Zweiten und dritten Ebene hinzufügen Menüpunkte, klicken Sie auf das Pluszeichen (+) oberhalb des Zweitens und dritte Spalten in den Eigenschaften panel, beziehungsweise, und ändern Sie dann die Etikettennamen im Feld "Text".

5 Klicken Sie im ersten Menü Element auf der Seite des Cursors eingefügt.

6 Klicken Sie im Bedienfeld "Eigenschaften" Öffnen Sie das Dialogfeld CSS-Regel-Definition "Regel bearbeiten". Von hier aus können Sie den Menü-Punkt-Schrift, Hintergrund, Form und Feld Grenzen ändern. Beispielsweise um im Menü Element-Hintergrund zu ändern, wählen Sie "Hintergrund" in der Liste Kategorie. Dies zeigt die Optionen für den Hintergrund anpassen. Sie können die Farbe ändern, aus dem Hintergrund--Color Swatch fliegen, oder Sie können ein Hintergrundbild aus dem Background-Image-Feld.

7 Klicken Sie auf "Übernehmen", um die Änderungen zu übernehmen. Wiederholen Sie diesen Vorgang für jedes Menü Item-Eigenschaft, die Sie ändern möchten.

8 Klicken Sie auf "OK", um das Dialogfeld CSS-Regel-Definition zu schließen.

Tipps & Warnungen

• Wenn Sie die Seite speichern, erstellt Dreamweaver einen Ordner mit dem Namen SpryAssets. Dieser Ordner enthält die Bilder und Scripte für das Menü. Wenn Sie die Seite auf einem Webserver hochladen, stellen Sie sicher, dass Sie auch diesen Ordner hochladen. Andernfalls wird Ihr Menü nicht korrekt dargestellt.