So fügen Sie eine Dropdown-Box in Dreamweaver hinzu (mit Bildern)

In diesem wikiHow zeigen wir dir, wie du mit Adobe Dreamweaver eine Dropdown-Box für eine Webseite erstellst. Dropdown-Felder sind Menüs, die beim Klicken auf ein Element auf Ihrer Webseite "herunterfallen", um weitere Optionen anzuzeigen.

Schritte

Hinzufügen einer Dropdown-Box in Dreamweaver Schritt 1

Schritt 1. Öffnen Sie ein Dreamweaver-Projekt

Doppelklicken Sie dazu auf die Datei des Projekts. Wenn Sie ein neues Dreamweaver-Projekt erstellen möchten, öffnen Sie stattdessen Dreamweaver, klicken Sie auf Datei, klicken Neu, und befolgen Sie alle Anweisungen auf dem Bildschirm.

Hinzufügen einer Dropdown-Box in Dreamweaver Schritt 2

Schritt 2. Erstellen Sie eine geordnete Liste

Um ein Dropdown-Menü zu erstellen, müssen Sie mindestens einen Aufzählungspunkt haben. Sie können einen Aufzählungspunkt erstellen, indem Sie CSS deaktivieren (klicken Sie auf das Sicht Menüpunkt, auswählen Stil-Rendering, und klicke Anzeigestile wenn es aktiviert ist), klicken Sie auf die Stelle, an der Sie den Punkt hinzufügen möchten, klicken Sie auf das Aufzählungszeichen-Symbol unten im Fenster und geben Sie den Namen des Punkts ein. Sie sollten CSS dann wieder aktivieren, bevor Sie fortfahren.

Der Name des Punkts hier dient als Aktivator Ihres Dropdown-Menüs (z. B. die Schaltfläche, über die man schwebt oder tippt, um das Dropdown-Menü zu öffnen).
Überspringen Sie diesen Schritt, wenn Sie bereits über ein Listenelement verfügen, das Sie in ein Dropdown-Menü umwandeln möchten.

Hinzufügen einer Dropdown-Box in Dreamweaver Schritt 3

Schritt 3. Bestimmen Sie den Namen Ihrer Liste

Drücke den Code Tab und vergewissern Sie sich, dass Sie auf der Quellcode und scrollen Sie dann nach unten zum Code Ihrer bestellten Liste (er wird zwischen einem"

"Tag und ein"

" -Tag) und suchen Sie nach dem " " -Tag über dem oberen Rand"

"-Tag. Das Wort in Anführungszeichen ist der Name Ihrer Liste.

Wenn Sie keinen Namen sehen, fügen Sie das Tag (wobei sich name auf Ihren bevorzugten Namen der Liste bezieht) direkt über dem ein

Hinzufügen einer Dropdown-Box in Dreamweaver Schritt 4

Schritt 4. Entfernen Sie den/die Aufzählungspunkt(e)

Stellen Sie sicher, dass Sie an der richtigen Stelle sind, indem Sie auf klicken Entwurf Registerkarte und klicken Sie dann auf CSS-Designer Tab in der oberen rechten Ecke des Fensters und gehen Sie dann wie folgt vor:

Klicken + rechts neben der Überschrift "Selektoren".
Geben Sie #name ul ein, wobei "name" der Name Ihrer Liste ist.
Drücke zweimal ↵ Enter.
Scrollen Sie nach unten und klicken Sie Listen-Stil-Typ im Fenster am unteren Rand des CSS-Designer Tab.
Klicken keiner im resultierenden Popup-Menü.

Hinzufügen einer Dropdown-Box in Dreamweaver Schritt 5

Schritt 5. Ändern Sie Ihre geordnete Liste so, dass sie horizontal angezeigt wird

Um dies zu tun:

Klicken + rechts neben der Überschrift "Selektoren".
Geben Sie #name li ein, wobei "name" der Name Ihrer Liste ist.
Suchen Sie die Überschrift "Float" im Bereich am unteren Rand des CSS-Designer Tab.
Drücke den Links direkt rechts neben der Überschrift "float".

Hinzufügen einer Dropdown-Box in Dreamweaver Schritt 6

Schritt 6. Fügen Sie Ihrer Liste ein aktives Tag hinzu

Drücke den + rechts neben "Selektoren", dann tippe #name a ein (wobei "name" der Name deiner Liste ist) und drücke zweimal auf ↵ Enter.

Hinzufügen einer Dropdown-Box in Dreamweaver Schritt 7

Schritt 7. Fügen Sie eine Hintergrundfarbe hinzu

Wähle aus #nennen Sie ein Wenn nötig, klicken Sie dann auf die kastenförmige Registerkarte "Hintergrundfarbe" oben im CSS-Designer Bereich, wählen Sie die Hintergrundfarbe Option, und wählen Sie eine zu verwendende Hintergrundfarbe aus.

Dies ist die Farbe, die die Elemente Ihrer Dropdown-Liste verwenden

Hinzufügen einer Dropdown-Box in Dreamweaver Schritt 8

Schritt 8. Lassen Sie Ihre Listenelemente das Format "Block" verwenden

Dieses Format stellt sicher, dass jemand, der auf ein Element in der Liste klickt oder tippt, es öffnen kann, indem er etwas darüber oder darunter auswählt, anstatt genau den Text auswählen zu müssen:

Stellen Sie sicher, dass Ihre #nennen Sie ein Artikel ist in der ausgewählt CSS-Designer Tab.
Scrollen Sie im Bereich nach unten zur Überschrift "Anzeige".
Klicke ganz rechts neben der Überschrift "Anzeige" und dann auf Block im resultierenden Menü.

Hinzufügen einer Dropdown-Box in Dreamweaver Schritt 9

Schritt 9. Fügen Sie bei Bedarf Polster hinzu

Wenn Sie feststellen, dass Ihre Listenelemente aneinandergeklemmt sind, können Sie wie folgt etwas Platz dazwischen platzieren:

Stellen Sie sicher, dass Ihre #nennen Sie ein Artikel ist in der ausgewählt CSS-Designer Tab.
Scrollen Sie im Bereich nach unten zur Überschrift "Padding".
Ändern Sie die oberen und unteren "px"-Textfelder, um mindestens 5 zu lesen.
Ändern Sie das linke und das rechte "px"-Textfeld, um mindestens 10 zu lesen.

Hinzufügen einer Dropdown-Box in Dreamweaver Schritt 10

Schritt 10. Erstellen Sie eine Hover-Farbe

Dies ist die Farbe, die angezeigt wird, wenn Sie den Mauszeiger über ein Element im Dropdown-Menü bewegen:

Klicken + rechts neben der Überschrift "Selektoren".
Tippe #nave a:hover ein (wobei "name" der Name deiner Liste ist) und drücke zweimal auf ↵ Enter.
Klicken Sie auf die Registerkarte "Hintergrundfarbe".
Auswählen Hintergrundfarbe und wählen Sie dann eine hellere Farbe als Sie für die Hintergrundfarbe verwendet haben.

Hinzufügen einer Dropdown-Box in Dreamweaver Schritt 11

Schritt 11. Deaktivieren Sie CSS

Drücke den Sicht Menüpunkt, auswählen Stil-Rendering, und klicken Sie auf Anzeigestile Option im Pop-Out-Fenster.

Wenn die Anzeigestile ausgegraut ist, klicken Sie auf eine beliebige Stelle in Ihrem Dreamweaver-Dokument und versuchen Sie es erneut.

Hinzufügen einer Dropdown-Box in Dreamweaver Schritt 12

Schritt 12. Erstellen Sie den Inhalt des Dropdown-Menüs

Sie können dies tun, indem Sie Unterpunkte unter dem Aufzählungspunkt hinzufügen, den Sie als Schaltfläche des Dropdown-Menüs verwenden möchten:

Klicke rechts neben dem Listenelement, das du in ein Dropdown-Menü verwandeln möchtest, und drücke dann auf ↵ Enter.
Drücken Sie Tab ↹.
Tippe den Namen deines ersten Dropdown-Menüpunkts ein und drücke dann auf ↵ Enter.
Gib den Namen des nächsten Dropdown-Menüs ein, drücke dann auf ↵ Enter und wiederhole den Vorgang nach Bedarf.

Hinzufügen einer Dropdown-Box in Dreamweaver Schritt 13

Schritt 13. Verbinden Sie den Inhalt des Dropdown-Menüs mit einem Aufzählungspunkt

Um dies zu tun:

Klicken + neben "Selektoren" tippe dann #name ul ul ein und drücke zweimal auf ↵ Enter.
Scrollen Sie nach unten und klicken Sie Anzeige, dann klick keiner im Popup-Menü.
Suchen und klicken Position, dann klick absolut im Popup-Menü.

Hinzufügen einer Dropdown-Box in Dreamweaver Schritt 14

Schritt 14. Erstellen Sie das Dropdown-Menü selbst

Dazu müssen Sie einen weiteren Selektor hinzufügen:

Klicken + neben "Selektoren" tippe dann #name ul li:hover > ul ein und drücke zweimal auf ↵ Enter.
Suchen und klicken Anzeige, dann klick Block im resultierenden Popup-Menü.

Hinzufügen einer Dropdown-Box in Dreamweaver Schritt 15

Schritt 15. Lassen Sie den Inhalt des Dropdown-Menüs vertikal anzeigen

Standardmäßig wird der Inhalt des Dropdown-Menüs in einer horizontalen Leiste angezeigt, aber Sie können sie wie folgt in eine vertikale Spalte zwingen:

Klicken + neben "Selektoren" tippe dann #name ul ul li ein und drücke zweimal auf ↵ Enter.
Suchen Sie die Überschrift "Float".
Klicken Sie auf "keine" (\) rechts neben der Überschrift "Float".

Hinzufügen einer Dropdown-Box in Dreamweaver Schritt 16

Schritt 16. Speichern Sie Ihr Projekt

Drücke dazu Strg+S (Windows) oder ⌘ Command+S (Mac).

Wenn Sie für dieses Projekt eine neue Dreamweaver-Datei erstellt haben, müssen Sie einen Namen eingeben, einen Speicherort auswählen und auf klicken Speichern um Ihre Datei zu speichern.