Skip to main content

WIE MAN: So erstellen Sie ein Dropdown-Menü in Dreamweaver - 2021

Bootstrap Tutorial | Full Bootstrap Responsive Web Design Tutorial For Beginners | Learn Bootstrap (September 2021).

Bootstrap Tutorial | Full Bootstrap Responsive Web Design Tutorial For Beginners | Learn Bootstrap (September 2021).

Inhaltsverzeichnis:

Anonim

Mit Dreamweaver können Sie auf einfache Weise Dropdown-Menüs für Ihre Website erstellen. Aber wie alle HTML-Formulare können sie etwas kompliziert sein. In diesem Lernprogramm werden Sie durch die Schritte zum Erstellen eines Dropdown-Menüs in Dreamweaver geführt.

Dreamweaver-Sprungmenüs

Dreamweaver 8 bietet auch einen Assistenten zum Erstellen eines Sprungmenüs für die Navigation auf Ihrer Website. Im Gegensatz zu den einfachen Dropdown-Menüs führt dieses Menü nach dem Abschluss tatsächlich etwas aus. Sie müssen kein JavaScript oder CGIs schreiben, damit Ihr Dropdown-Formular funktioniert. In diesem Lernprogramm wird auch erläutert, wie Sie mit dem Dreamweaver 8-Assistenten ein Sprungmenü erstellen.

01 von 20

Erstellen Sie zuerst das Formular

Wichtiger Hinweis zu HTML-Formularen und Dreamweaver:

Abgesehen von speziellen Assistenten wie dem Sprungmenü hilft Dreamweaver nicht, HTML-Formulare zum Funktionieren zu bringen. Dafür benötigen Sie ein CGI oder JavaScript. Weitere Informationen finden Sie in meinem Tutorial HTML-Formulare erstellen.

Wenn Sie Ihrer Website ein Dropdown-Menü hinzufügen, benötigen Sie als erstes ein Formular, das die Website umgibt. Gehen Sie in Dreamweaver zum Menü Einfügen und klicken Sie auf Formular. Wählen Sie dann "Formular".

02 von 20

Formularanzeigen in der Entwurfsansicht

Dreamweaver zeigt Ihre Formularposition visuell in der Entwurfsansicht an, damit Sie wissen, wo Sie Ihre Formularelemente ablegen. Dies ist wichtig, da Dropdown-Menü-Tags außerhalb des Formularelements nicht gültig sind (und nicht funktionieren). Wie Sie im Bild sehen können, ist das Formular die rote gepunktete Linie in der Entwurfsansicht.

03 von 20

Wählen Sie Liste / Menü

Dropdown-Menüs werden in Dreamweaver als "Listen" oder "Menü" bezeichnet. Um ein Formular zu Ihrem Formular hinzuzufügen, müssen Sie im Menü Einfügen im Menü Formular die Option "Liste / Menü" auswählen. Stellen Sie sicher, dass sich der Cursor innerhalb der roten gepunkteten Linie Ihres Formularfelds befunden hat.

04 von 20

Fenster mit speziellen Optionen

In den Dreamweaver-Optionen finden Sie einen Bildschirm zum Thema Barrierefreiheit. Ich möchte, dass Dreamweaver mir alle Attribute für die Barrierefreiheit anzeigt. Und dieser Bildschirm ist das Ergebnis davon. Formulare sind ein Ort, an dem viele Websites nicht mehr erreichbar sind. Wenn Sie diese fünf Optionen ausfüllen, sind Ihre Dropdown-Menüs sofort zugänglich.

05 von 20

Formularzugänglichkeit

Die Eingabehilfen sind:

Etikette

Dies ist der Name für das Feld. Es wird als Text neben Ihrem Formularelement angezeigt.Schreiben Sie, was Sie als Dropdown-Menü aufrufen möchten. Dies kann eine Frage oder ein kurzer Satz sein, den das Dropdown-Menü beantworten wird.

Stil

HTML enthält ein Label-Tag, um Ihre Formularbeschriftungen für den Browser zu identifizieren. Sie haben die Wahl, das Dropdown-Menü und den Beschriftungstext mit dem Tag zu umschließen, das Attribut "for" für das Label zu verwenden, um zu identifizieren, auf welches Form-Tag es verweist, oder das Label-Tag überhaupt nicht zu verwenden.Ich ziehe es vor, das Attribut for zu verwenden, da das Label dann aus irgendeinem Grund immer noch an das richtige Formularfeld angehängt werden muss.

Position

Sie können Ihr Etikett vor oder nach dem Dropdown-Menü platzieren.

Zugangsschlüssel

Dies ist der Schlüssel, der zusammen mit den Alt- oder Wahltasten verwendet werden kann, um direkt zu diesem Formularfeld zu gelangen. Dadurch können Sie Ihre Formulare sehr einfach verwenden, ohne eine Maus zu benötigen.

Tab Index

Dies ist die Reihenfolge, in der auf das Formularfeld zugegriffen werden soll, wenn Sie mit der Tastatur durch die Webseite blättern.

Wenn Sie Ihre Zugriffsoptionen aktualisiert haben, klicken Sie auf OK.

06 von 20

Wählen Sie das Menü aus

Nachdem Sie Ihr Dropdown-Menü in der Dreamweaver-Entwurfsansicht angezeigt haben, müssen Sie die verschiedenen Elemente hinzufügen. Wählen Sie zuerst das Dropdown-Menü aus, indem Sie darauf klicken. Dreamweaver wird eine weitere gepunktete Linie um das Dropdown-Menü einfügen, um anzuzeigen, dass Sie es ausgewählt haben.

07 von 20

Menü Eigenschaften

Das Eigenschaften-Menü wechselt zu den Listen- / Menü-Eigenschaften für dieses Dropdown-Menü. Dort können Sie Ihrem Menü eine ID zuweisen (wobei "select" steht), entscheiden, ob es sich um eine LIS oder ein Menü handeln soll, ihm eine Style-Klasse aus Ihrem Stylesheet zuweisen und der Dropdown-Liste Werte zuweisen.

Was ist der Unterschied zwischen Liste und Menü?

Dreamweaver ruft ein Dropdown-Menü auf, in dem nur eine Auswahl möglich ist. Eine "Liste" ermöglicht mehrere Auswahlmöglichkeiten in der Dropdown-Liste und kann mehr als einen Eintrag enthalten.

Wenn Sie möchten, dass ein Dropdown-Menü mehrere Zeilen hoch ist, ändern Sie es in einen "Listentyp" und lassen Sie das Kontrollkästchen "Auswahl" deaktiviert.

08 von 20

Neue Listenelemente hinzufügen

Um Ihrem Menü neue Elemente hinzuzufügen, klicken Sie auf die Schaltfläche "Werte auflisten …". Dies öffnet das obige Fenster. Geben Sie Ihr Artikeletikett in das erste Feld ein. Dies wird auf der Seite angezeigt. Wenn Sie den Wert leer lassen, wird dies auch im Formular gesendet.

09 von 20

Mehr hinzufügen und neu ordnen

Klicken Sie auf das Plus-Symbol, um weitere Elemente hinzuzufügen. Wenn Sie sie im Listenfeld neu anordnen möchten, verwenden Sie die Auf- und Abwärtspfeile rechts.

10 von 20

Geben Sie alle Elemente Werte

Wie ich in Schritt 8 erwähnt habe, wird das Etikett an das Formular gesendet, wenn Sie den Wert leer lassen. Sie können jedoch allen Ihren Elementen Werte zuweisen, um alternative Informationen an Ihr Formular zu senden. Sie werden dies häufig für Dinge wie Sprungmenüs und Hyperlinks verwenden.

11 von 20

Wählen Sie einen Standard aus

Webseiten zeigen standardmäßig an, welches Dropdown-Element zuerst als Standardelement angezeigt wird. Wenn Sie jedoch eine andere auswählen möchten, markieren Sie sie im Menü "Eigenschaften".

12 von 20

Sehen Sie Ihre Liste in der Entwurfsansicht

Nachdem Sie die Eigenschaften bearbeitet haben, zeigt Dreamweaver Ihre Dropdown-Liste mit dem ausgewählten Standardwert an.

13 von 20

Sehen Sie Ihre Liste in der Codeansicht

Wenn Sie zur Codeansicht wechseln, können Sie sehen, dass Dreamweaver Ihr Dropdown-Menü mit sehr sauberem Code hinzufügt. Die einzigen zusätzlichen Attribute sind diejenigen, die wir mit Eingabehilfenoptionen hinzugefügt haben. Der Code ist alles eingerückt und sehr einfach zu lesen und zu verstehen. Es setzt sogar das selected = "selected" -Attribut ein, weil ich Dreamweaver mitteilte, dass ich standardmäßig XHTML schreibe.

14 von 20

Speichern und im Browser anzeigen

Wenn Sie das Dokument speichern und in einem Webbrowser anzeigen, können Sie feststellen, dass Ihr Dropdown-Menü genau so aussieht, als würden Sie es erwarten.

15 von 20

Aber es tut nichts …

Das oben erstellte Menü sieht gut aus, macht aber nichts. Damit Sie etwas tun können, müssen Sie eine Formularaktion auf dem Formular selbst einrichten.

Glücklicherweise verfügt Dreamweaver über ein integriertes Dropdown-Menü, das Sie sofort auf Ihrer Site verwenden können, ohne sich mit Formularen, CGIs oder Skripts vertraut zu machen. Es wird ein Sprungmenü genannt.

Das Dreamweaver-Sprungmenü richtet ein Dropdown-Menü mit Namen und URLs ein. Sie können dann im Menü ein Element auswählen, und die Webseite wird an diesen Ort verschoben, als ob Sie auf einen Link geklickt hätten.

Gehen Sie zum Menü Einfügen und wählen Sie Formular und dann Sprungmenü.

16 von 20

Sprungmenüfenster

Im Gegensatz zum Standard-Dropdown-Menü öffnet das Jump-Menü ein neues Fenster, in dem Sie Ihre Menüelemente benennen und Details zur Funktionsweise des Formulars hinzufügen können.

Ändern Sie für das erste Element den Text "untitled1" in das, was Sie lesen möchten, und fügen Sie eine URL hinzu, zu der der Link führen soll.

17 von 20

Fügen Sie Ihrem Jump-Menü Elemente hinzu

Klicken Sie auf das Element zum Hinzufügen, um ein neues Element zu Ihrem Sprungmenü hinzuzufügen. Fügen Sie beliebig viele Artikel hinzu.

18 von 20

Jump-Menüoptionen

Nachdem Sie alle gewünschten Links hinzugefügt haben, sollten Sie Ihre Optionen auswählen:

URLs öffnen in

Wenn Sie über ein Frameset verfügen, können Sie die Links in einem anderen Frame öffnen. Oder Sie können die Option des Hauptfensters in ein spezielles Ziel ändern, sodass die URL in einem neuen Fenster oder anderswo geöffnet wird.

Menüname

Geben Sie Ihrem Menü eine eindeutige ID für die Seite. Dies ist erforderlich, damit das Skript ordnungsgemäß funktioniert. Sie können auch mehrere Sprungmenüs in einem Formular verwenden - geben Sie ihnen einfach alle Namen.

Starttaste nach dem Menü einfügen

Ich wähle das gerne, weil das Skript manchmal nicht funktioniert, wenn sich das Menü ändert. Es ist auch zugänglicher.

Erstes Element nach URL-Änderung auswählen

Wählen Sie diese Option, wenn Sie als ersten Menüpunkt eine Aufforderung wie "Wählen Sie eine" haben. Dadurch wird sichergestellt, dass das Element standardmäßig auf der Seite angezeigt wird.

19 von 20

Jump-Menü-Designansicht

Genau wie bei Ihrem ersten Menü richtet Dreamweaver Ihr Sprungmenü in der Entwurfsansicht so ein, dass das Standardelement sichtbar ist. Sie können das Dropdown-Menü dann wie jedes andere bearbeiten.

Wenn Sie es bearbeiten, stellen Sie sicher, dass Sie keine IDs für die Elemente ändern. Andernfalls funktioniert das Skript möglicherweise nicht.

20 von 20

Sprungmenü im Browser

Wenn Sie die Datei speichern und F12 drücken, wird die Seite in Ihrem bevorzugten Browser angezeigt. Dort können Sie eine Option auswählen, auf "Los" klicken und das Sprungmenü funktioniert!