Wie Sie eine Dropdown-Menü mit "Spry" in Dreamweaver erstellen?

May 8

Ein Dropdown-Menü in einer Web-Seite wird geöffnet, wenn ein Benutzer klickt oder ihr Mauszeiger über ihm schwebt. Drop-Down-Menüs können in Dreamweaver eine Webseite-Erstellungsprogramm, mit dem Programm integrierte Spry-Menüleisten-Widget. Spry-Menüleiste wird die Drop-Down-Menü und das Framework erstellt. Alles, was Sie tun müssen, ist die Menü-Beschriftungen bearbeiten und konfigurieren Sie die Menüstruktur auf Ihre Bedürfnisse zugeschnitten.

Anweisungen

1 Öffnen Sie die Dreamweaver HTML-Datei, in der Sie ein Dropdown Menü erstellen möchten, oder starten Sie eine neue HTML-Datei, klicken Sie im Menü "Datei" und wählen "Neu." Dies öffnet das Dialogfeld "neues Dokument". Wählen Sie "HTML" aus der Liste und das gewünschte Layout aus der Layout-Liste, und klicken Sie auf die Schaltfläche "Erstellen".

2 Klicken Sie im Menü "Datei" und wählen "Speichern unter". Benennen Sie und speichern Sie die Datei im Dialogfeld "Speichern unter"

3 Klicken Sie auf den Speicherort auf der Webseite, wo Sie das Drop-Down-Menü zu platzieren möchten.

4 Klicken Sie im Menü "Einfügen" wählen Sie "Spry" und wählen Sie dann aus dem Dropdown-Menü "Spry-Menüleisten". Das Spry Menü Bar im Dialogfeld wird geöffnet.

5 Aktivieren Sie das Optionsfeld "Horizontal" und klicken Sie auf "OK". Dreamweaver erstellt ein horizontales Dropdown-Menü auf der Seite

6 Gehen Sie zum Bereich "Eigenschaften" und wählen Sie "Eintrag 1" in der ersten Spalte der Menü-Beschriftungen. Die erste Spalte im Bereich Eigenschaften sind die Top-Level-Menü-Beschriftungen.

7 Wählen Sie den vorhandenen Text im Feld "Text" im Bedienfeld "Eigenschaften" und geben Sie Ihre erste Menü-Bezeichnung.

8 Wählen Sie die Nummernzeichen (# aus) im Feld "Link" im Bedienfeld "Eigenschaften", und geben Sie die URL für dieses Menüelement.

9 Wiederholen Sie Schritte 6 bis 8, bis Sie alle Etiketten in der ersten Spalte umbenannt und URLs zugewiesen haben. Sie können zusätzliche Menüelemente erstellen, indem Sie auf die Schaltfläche "Add Menu Item", ein Pluszeichen (+)-Symbol oberhalb der Spalte.

10 Wählen Sie "Punkt 1.1" in der zweiten Spalte im Bedienfeld "Eigenschaften". Die zweite Spalte enthält die zweite Menüebene.

11 Wählen Sie den vorhandenen Text im Feld "Text" und geben Sie die Bezeichnung für dieses Menüelement.

12 Wählen Sie die Nummernzeichen (# aus) im Feld "Link" im Bedienfeld "Eigenschaften", und geben Sie die URL für dieses Menüelement.

13 Wiederholen Sie die Schritte 10 bis 8, bis Sie alle Etiketten in der zweiten Spalte umbenannt und URLs zugewiesen haben. Sie können zusätzliche Menüelemente auf zweiter Ebene erstellen, indem Sie auf die Schaltfläche "Add Menu Item", ein Pluszeichen (+)-Symbol oberhalb der Spalte.

Tipps & Warnungen

  • Um Elemente der dritten Ebene Dropdown-Menü zu erstellen, wählen Sie das Menüelement der zweiten Ebene im Bereich Eigenschaften, für die Sie eine dritte Ebene Menü erstellen möchten, und klicken Sie auf die Schaltfläche "Add Menu Item" die dritte Spalte. Dreamweaver erstellt automatisch den dritten Ebene Menüpunkt in der dritten Spalte.
  • Beim Speichern einer Webseite mit einem Spry Menü Dreamweaver erstellt unterstützende JavaScript und CSS-Dateien und speichert sie in einem Unterordner im Stammverzeichnis der Website mit dem Namen SpryAssets. Wenn Sie die Webseite auf einem Webserver hochladen, vergessen Sie nicht den Ordner "SpryAssets" hochladen. Andernfalls wird Ihr Drop-Down-Menü nicht angezeigt und ordnungsgemäß funktioniert.

SIE KÖNNEN AUCH GERNE