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.
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 20Formularanzeigen 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 20Wä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 20Fenster 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 20Formularzugä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. 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. Sie können Ihr Etikett vor oder nach dem Dropdown-Menü platzieren. 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. 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. 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. 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. 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. 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. 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. 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. 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". Nachdem Sie die Eigenschaften bearbeitet haben, zeigt Dreamweaver Ihre Dropdown-Liste mit dem ausgewählten Standardwert an. 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. 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. 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ü. 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. Klicken Sie auf das Element zum Hinzufügen, um ein neues Element zu Ihrem Sprungmenü hinzuzufügen. Fügen Sie beliebig viele Artikel hinzu. Nachdem Sie alle gewünschten Links hinzugefügt haben, sollten Sie Ihre Optionen auswählen: 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. 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. Ich wähle das gerne, weil das Skript manchmal nicht funktioniert, wenn sich das Menü ändert. Es ist auch zugänglicher. 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. 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. 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! Stil
Position
Zugangsschlüssel
Tab Index
Wählen Sie das Menü aus
Menü Eigenschaften
Was ist der Unterschied zwischen Liste und Menü?
Neue Listenelemente hinzufügen
Mehr hinzufügen und neu ordnen
Geben Sie alle Elemente Werte
Wählen Sie einen Standard aus
Sehen Sie Ihre Liste in der Entwurfsansicht
Sehen Sie Ihre Liste in der Codeansicht
Speichern und im Browser anzeigen
Aber es tut nichts …
Sprungmenüfenster
Fügen Sie Ihrem Jump-Menü Elemente hinzu
Jump-Menüoptionen
URLs öffnen in
Menüname
Starttaste nach dem Menü einfügen
Erstes Element nach URL-Änderung auswählen
Jump-Menü-Designansicht
Sprungmenü im Browser
