Was man wissen sollte
- Gehe zu Einfügen > Formular > Formular. Klicken Sie auf die gepunktete rote Linie im Formular und gehen Sie zu Einfügen > Formular > Liste/Menü. Barrierefreiheitsoptionen auswählen.
- Klicken Sie auf das Menü und wählen Sie seine Eigenschaften aus. Wählen Sie dann Werte auflisten, um neue Menüpunkte hinzuzufügen. Klicken Sie auf das Pluszeichen, um weitere Elemente hinzuzufügen.
- Elementwerte hinzufügen und Standardelement auswählen. Um Aktionen hinzuzufügen, gehen Sie zu Einfügen > Formular > Sprungmenü. Elemente zum Jump-Menü hinzufügen und speichern.
Dreamweaver erleichtert das Erstellen von Dropdown-Menüs für Ihre Website. Aber wie alle HTML-Formulare können sie etwas knifflig sein. Dieses Tutorial führt Sie durch die Schritte zum Erstellen eines Dropdown-Menüs in Dreamweaver.
Dreamweaver-Sprungmenüs
Dreamweaver 8 bietet auch einen Assistenten zum Erstellen eines Sprungmenüs für die Navigation auf Ihrer Website. Im Gegensatz zu einfachen Dropdown-Menüs wird dieses Menü etwas tun, wenn Sie fertig sind. Sie müssen kein JavaScript oder CGIs schreiben, damit Ihr Dropdown-Formular funktioniert. In diesem Tutorial wird auch erklärt, wie Sie mit dem Dreamweaver 8-Assistenten ein Sprungmenü erstellen.
Erstellen Sie zuerst das Formular
Außer speziellen Assistenten wie dem Sprungmenü hilft Ihnen Dreamweaver nicht, HTML-Formulare "funktionieren" zu lassen. Dazu benötigen Sie ein CGI oder JavaScript.
Wenn Sie Ihrer Website ein Dropdown-Menü hinzufügen, brauchen Sie als Erstes ein Formular, das es umgibt. Gehen Sie in Dreamweaver zum Menü „Einfügen“und klicken Sie auf „Formular“. Wählen Sie dann „Formular“.
Formularanzeigen in der Entwurfsansicht
Dreamweaver zeigt die Position Ihres Formulars visuell in der Entwurfsansicht an, sodass Sie wissen, wo Sie Ihre Formularelemente platzieren müssen, 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 rot gepunktete Linie in der Entwurfsansicht.
Liste/Menü auswählen
Dropdown-Menüs werden in Dreamweaver "Listen"- oder "Menü"-Elemente genannt. Um also einen zu Ihrem Formular hinzuzufügen, müssen Sie im Menü „Einfügen“in das Menü „Formular“gehen und „Liste/Menü“auswählen. Stellen Sie sicher, dass sich Ihr Cursor innerhalb der rot gepunkteten Linie Ihres Formularfelds befindet.
Spezielle Optionen-Fenster
In den Dreamweaver-Optionen gibt es einen Bildschirm zur Barrierefreiheit. Ihre Dropdown-Menüs sind sofort besser zugänglich als andere Websites, wenn Sie diese fünf Optionen ausfüllen.
Zugänglichkeit des Formulars
Zugriffsoptionen sind:
Label
Das Beschriftungsfeld wird als Text neben Ihrem Formularelement angezeigt. Geben Sie einen Namen für Ihr Dropdown-Menü ein. Es kann eine Frage oder ein kurzer Satz sein, den das Dropdown-Menü beantwortet.
Stil
HTML enthält ein Label-Tag, um Ihre Formular-Labels für den Webbrowser zu identifizieren. Sie haben die Wahl, das Dropdown-Menü und den Beschriftungstext mit dem Tag zu umschließen, das "for"-Attribut im Beschriftungs-Tag zu verwenden, um zu identifizieren, auf welches Formular-Tag es verweist, oder das Beschriftungs-Tag überhaupt nicht zu verwenden.
Position
Sie können Ihr Etikett vor oder nach dem Dropdown-Menü platzieren.
Zugriffsschlüssel
Besucher können einen Zugriffsschlüssel mit den "Bild"- oder Optionstasten verwenden, um direkt zu diesem Formularfeld zu gelangen. Mit dieser Tastenkombination können Sie Ihre Formulare ganz einfach ohne Maus verwenden. alt="
Tab Index
Über den Tab-Index sollten Benutzer auf die Formularfelder zugreifen, wenn sie mit der Tastatur durch die Webseite navigieren.
Wenn Sie Ihre Eingabehilfen aktualisiert haben, klicken Sie auf OK.
Menü auswählen
Sobald Ihr Dropdown-Menü in der Dreamweaver-Designansicht angezeigt wird, müssen Sie die verschiedenen Elemente hinzufügen. Wählen Sie zunächst das Dropdown-Menü aus, indem Sie darauf klicken. Dreamweaver fügt nur um das Dropdown-Menü eine weitere gepunktete Linie ein, um anzuzeigen, dass Sie es ausgewählt haben.
Menüeigenschaften
Das Eigenschaftenmenü ändert sich zu den Listen-/Menüeigenschaften für dieses Dropdown-Menü. Dort können Sie Ihrem Menü eine ID geben (wo "auswählen" steht), entscheiden, ob es eine Liste oder ein Menü sein soll, ihm eine Stilklasse aus Ihrem Stylesheet zuweisen und dem Dropdown-Menü Werte zuweisen.
Was ist der Unterschied zwischen Liste und Menü?
Dreamweaver ruft ein Menü-Dropdown-Menü auf, jedes Dropdown-Menü, das nur eine Auswahl zulässt. Eine "Liste" ermöglicht mehrere Auswahlmöglichkeiten im Dropdown-Menü und kann mehr als ein Element enth alten.
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.
Neue Listeneinträge hinzufügen
Um Ihrem Menü neue Elemente hinzuzufügen, klicken Sie auf die Sch altfläche "Werte auflisten…", die das obige Fenster öffnet. Geben Sie dann Ihre Artikelbezeichnung in das erste Feld ein. Es wird auf der Seite angezeigt.
Mehr hinzufügen und neu anordnen
Klicken Sie auf das Plus-Symbol, um weitere Artikel hinzuzufügen. Wenn Sie sie im Listenfeld neu anordnen möchten, verwenden Sie die Aufwärts- und Abwärtspfeile auf der rechten Seite.
Geben Sie allen Elementen Werte
Wenn Sie den Wert leer lassen, wird das Label in das Formular übernommen. Sie können jedoch allen Ihren Artikeln Werte zuweisen, um alternative Informationen an Ihr Formular zu senden. Sie werden dies häufig für Dinge wie Sprungmenüs und Hyperlinks verwenden.
Standard auswählen
Webseiten zeigen standardmäßig das Dropdown-Element an, das zuerst als Standardelement aufgeführt ist. Wenn Sie jedoch eine andere auswählen möchten, markieren Sie sie im Feld "Anfangs ausgewählt" im Menü "Eigenschaften".
Liste in der Designansicht anzeigen
Sobald Sie mit der Bearbeitung der Eigenschaften fertig sind, zeigt Dreamweaver Ihre Dropdown-Liste mit dem ausgewählten Standardwert an.
Siehe Ihre Liste in der Codeansicht
Wenn Sie zur Codeansicht wechseln, können Sie sehen, dass Dreamweaver Ihr Dropdown-Menü mit sauberem Code hinzufügt. Die einzigen zusätzlichen Attribute sind die Zugänglichkeitsoptionen. Der Code ist eingerückt und sehr einfach zu lesen und zu verstehen.
Speichern und im Browser anzeigen
Wenn Sie das Dokument speichern und in einem Webbrowser anzeigen, sehen Sie, dass Ihr Dropdown-Menü genau so aussieht, wie Sie es erwarten würden.
Aber es tut nichts…
Das Menü, das wir oben erstellt haben, sieht gut aus, aber es tut nichts. Damit es etwas tut, müssen Sie eine Formularaktion auf dem Formular selbst einrichten.
Glücklicherweise verfügt Dreamweaver über ein integriertes Dropdown-Menüformular, das Sie sofort auf Ihrer Website verwenden können, ohne sich mit Formularen, CGIs oder Skripten vertraut machen zu müssen. Es heißt Sprungmenü.
Das Sprungmenü von Dreamweaver richtet ein Dropdown-Menü mit Namen und URLs ein. Dann können Sie ein Element im Menü auswählen und die Webseite wird an diese Stelle verschoben, als ob Sie auf einen Link geklickt hätten.
Gehe zum Menü Einfügen und wähle Formular und dann Sprungmenü.
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 "un titled1" so, wie er gelesen werden soll, und fügen Sie eine URL hinzu.
Elemente zu Ihrem Jump-Menü hinzufügen
Klicken Sie auf das Element hinzufügen, um Ihrem Sprungmenü ein neues Element hinzuzufügen. Fügen Sie so viele Elemente hinzu, wie Sie möchten.
Sprungmenüoptionen
Sobald Sie alle gewünschten Links hinzugefügt haben, sollten Sie Ihre Optionen auswählen:
URLs öffnen in
Wenn Sie ein Frameset haben, können Sie die Links in einem anderen Frame öffnen. Oder Sie können die Option des Hauptfensters auf ein spezielles Ziel ändern, sodass die URL in einem neuen Fenster oder woanders geöffnet wird.
Menüname
Geben Sie Ihrem Menü eine eindeutige ID für die Seite. Es ist erforderlich, damit das Skript korrekt funktioniert. Es ermöglicht Ihnen auch, mehrere Sprungmenüs in einem Formular zu haben - geben Sie ihnen alle unterschiedliche Namen.
Go-Sch altfläche nach Menü einfügen
Ich wähle das gerne aus, weil das Skript manchmal nicht funktioniert, wenn sich das Menü ändert. Es ist auch leichter zugänglich.
Erstes Element nach URL-Änderung auswählen
Wählen Sie dies, wenn Sie als ersten Menüpunkt eine Eingabeaufforderung wie "Wählen" haben. Dadurch wird sichergestellt, dass dieses Element standardmäßig auf der Seite bleibt.
Jump Menu Design View
Genau wie bei Ihrem ersten Menü richtet Dreamweaver Ihr Sprungmenü in der Entwurfsansicht ein, wobei 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 auf den Elementen ändern; andernfalls funktioniert das Skript möglicherweise nicht.
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.
