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
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.
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.
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
Schild.
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ü.
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".
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.
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
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ü.
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.
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.
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.
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.
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ü.
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ü.
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".
Schritt 16. Speichern Sie Ihr Projekt
Drücke dazu Strg+S (Windows) oder ⌘ Command+S (Mac).
