Come aggiungere una casella a discesa in Dreamweaver (con immagini)

Sommario:

Come aggiungere una casella a discesa in Dreamweaver (con immagini)
Come aggiungere una casella a discesa in Dreamweaver (con immagini)

Video: Come aggiungere una casella a discesa in Dreamweaver (con immagini)

Video: Come aggiungere una casella a discesa in Dreamweaver (con immagini)
Video: 3 SOFTWARE UTILISSIMI E GRATIS DA AVERE! 2024, Marzo
Anonim

Questo articolo spiega come utilizzare Adobe Dreamweaver per creare una casella a discesa per una pagina web. Le caselle a discesa sono menu che "scendono" quando si fa clic su un elemento della tua pagina web, presentando più opzioni nel processo.

Passi

Aggiungi una casella a discesa in Dreamweaver Passaggio 1
Aggiungi una casella a discesa in Dreamweaver Passaggio 1

Passaggio 1. Aprire un progetto Dreamweaver

Fare doppio clic sul file del progetto per farlo. Se desideri creare un nuovo progetto Dreamweaver, apri invece Dreamweaver, fai clic su File, clicca Nuovoe segui le istruzioni sullo schermo.

Aggiungi una casella a discesa in Dreamweaver Passaggio 2
Aggiungi una casella a discesa in Dreamweaver Passaggio 2

Passaggio 2. Creare un elenco ordinato

Per creare un menu a discesa, devi avere almeno un punto elenco. Puoi creare un punto elenco disattivando CSS (fai clic su Visualizzazione voce di menu, selezionare Rendering di stilee fare clic su Stili di visualizzazione se è selezionato), facendo clic sulla posizione in cui si desidera aggiungere il punto, facendo clic sull'icona del punto elenco nella parte inferiore della finestra e digitando il nome del punto. Dovresti quindi riattivare i CSS prima di procedere.

  • Il nome del punto qui servirà come attivatore del menu a discesa (ad esempio, il pulsante su cui si passa con il mouse o si tocca per aprire il menu a discesa).
  • Salta questo passaggio se hai già un elemento dell'elenco che desideri convertire in un menu a discesa.
Aggiungi una casella a discesa in Dreamweaver Passaggio 3
Aggiungi una casella a discesa in Dreamweaver Passaggio 3

Passaggio 3. Determina il nome della tua lista

Clicca il Codice scheda e assicurati di essere sulla Codice sorgente impostazione, quindi scorrere verso il basso fino al codice dell'elenco ordinato (sarà tra un"

"tag e un"

"tag) e cerca il tag " " sopra la parte superiore"

tag. La parola tra virgolette è il nome della tua lista.

  • Se non vedi un nome, inserisci il tag (dove nome si riferisce al tuo nome preferito della lista) direttamente sopra il

    etichetta.

Aggiungi una casella a discesa in Dreamweaver Passaggio 4
Aggiungi una casella a discesa in Dreamweaver Passaggio 4

Passaggio 4. Rimuovere i punti elenco

Assicurati di essere nel posto giusto facendo clic su Design scheda e quindi facendo clic su Designer CSS nell'angolo in alto a destra della finestra, quindi procedi come segue:

  • Clic + a destra dell'intestazione "Selettori".
  • Digita #name ul dove "name" è il nome della tua lista.
  • Premi Invio due volte.
  • Scorri verso il basso e clicca tipo-stile-lista nel riquadro in fondo al Designer CSS scheda.
  • Clic nessuno nel menu a comparsa risultante.
Aggiungi una casella a discesa in Dreamweaver Passaggio 5
Aggiungi una casella a discesa in Dreamweaver Passaggio 5

Passaggio 5. Modifica l'elenco ordinato per visualizzarlo orizzontalmente

Fare così:

  • Clic + a destra dell'intestazione "Selettori".
  • Digita #name li dove "name" è il nome della tua lista.
  • Trova l'intestazione "float" nel riquadro nella parte inferiore del Designer CSS scheda.
  • Clicca il Sinistra pulsante immediatamente a destra dell'intestazione "float".
Aggiungi una casella a discesa in Dreamweaver Passaggio 6
Aggiungi una casella a discesa in Dreamweaver Passaggio 6

Passaggio 6. Aggiungi un tag attivo per il tuo elenco

Clicca il + a destra di "Selettori", quindi digita #nome a (dove "nome" è il nome della tua lista) e premi ↵ Invio due volte.

Aggiungi una casella a discesa in Dreamweaver Passaggio 7
Aggiungi una casella a discesa in Dreamweaver Passaggio 7

Passaggio 7. Aggiungi un colore di sfondo

Seleziona il #nome a se necessario, quindi fare clic sulla scheda "Colore di sfondo" a forma di casella nella parte superiore del Designer CSS riquadro, selezionare il colore di sfondo opzione e selezionare un colore di sfondo da utilizzare.

Questo è il colore utilizzato dagli elementi dell'elenco a discesa

Aggiungi una casella a discesa in Dreamweaver Passaggio 8
Aggiungi una casella a discesa in Dreamweaver Passaggio 8

Passaggio 8. Fai in modo che gli elementi dell'elenco utilizzino il formato "blocco"

Questo formato garantisce che quando qualcuno fa clic o tocca un elemento nell'elenco, può aprirlo selezionandolo leggermente sopra o sotto invece di dover selezionare con precisione il testo:

  • Assicurati che il tuo #nome a l'elemento è selezionato nel Designer CSS scheda.
  • Scorri verso il basso fino all'intestazione "display" nel riquadro.
  • Fare clic all'estrema destra dell'intestazione "display", quindi fare clic su bloccare nel menu risultante.
Aggiungi una casella a discesa in Dreamweaver Passaggio 9
Aggiungi una casella a discesa in Dreamweaver Passaggio 9

Passaggio 9. Aggiungi imbottitura se necessario

Se noti che gli elementi della tua lista sono incastrati l'uno contro l'altro, puoi inserire uno spazio tra di loro nel modo seguente:

  • Assicurati che il tuo #nome a l'elemento è selezionato nel Designer CSS scheda.
  • Scorri verso il basso fino all'intestazione "imbottitura" nel riquadro.
  • Modifica i campi di testo "px" in alto e in basso per leggerne almeno 5.
  • Modifica i campi di testo "px" sinistro e destro per leggere almeno 10.
Aggiungi una casella a discesa in Dreamweaver Passaggio 10
Aggiungi una casella a discesa in Dreamweaver Passaggio 10

Passaggio 10. Crea un colore al passaggio del mouse

Questo è il colore che apparirà quando muovi il cursore del mouse su un elemento nel menu a discesa:

  • Clic + a destra dell'intestazione "Selettori".
  • Digita #nave a:hover (dove "name" è il nome della tua lista) e premi ↵ Invio due volte.
  • Fare clic sulla scheda "Colore di sfondo".
  • Selezionare colore di sfondo e poi seleziona un colore più chiaro di quello che hai usato per il colore di sfondo.
Aggiungi una casella a discesa in Dreamweaver Passaggio 11
Aggiungi una casella a discesa in Dreamweaver Passaggio 11

Passaggio 11. Disattiva CSS

Clicca il Visualizzazione voce di menu, selezionare Rendering di stilee fare clic su Stili di visualizzazione opzione nella finestra pop-out.

Se la Stili di visualizzazione l'opzione è disattivata, fare clic in un punto qualsiasi del documento Dreamweaver e riprovare.

Aggiungi una casella a discesa in Dreamweaver Passaggio 12
Aggiungi una casella a discesa in Dreamweaver Passaggio 12

Passaggio 12. Creare i contenuti del menu a discesa

Puoi farlo aggiungendo punti secondari sotto il punto elenco che desideri utilizzare come pulsante del menu a discesa:

  • Fare clic a destra dell'elemento dell'elenco che si desidera trasformare in un menu a discesa, quindi premere Invio.
  • Premi Tab ↹.
  • Digita il nome della prima voce del menu a discesa, quindi premi Invio.
  • Digita il nome del menu a discesa successivo, quindi premi Invio e ripeti se necessario.
Aggiungi una casella a discesa in Dreamweaver Passaggio 13
Aggiungi una casella a discesa in Dreamweaver Passaggio 13

Passaggio 13. Collega il contenuto del menu a discesa a un punto elenco

Fare così:

  • Clic + accanto a "Selettori", quindi digita #name ul ul e premi ↵ Invio due volte.
  • Scorri verso il basso e clicca Schermo, quindi fare clic su nessuno nel menu a comparsa.
  • Trova e clicca posizione, quindi fare clic su assoluto nel menu a comparsa.
Aggiungi una casella a discesa in Dreamweaver Passaggio 14
Aggiungi una casella a discesa in Dreamweaver Passaggio 14

Passaggio 14. Crea il menu a discesa stesso

Dovrai aggiungere un altro selettore per farlo:

  • Clic + accanto a "Selettori", quindi digita #name ul li:hover > ul e premi ↵ Invio due volte.
  • Trova e clicca Schermo, quindi fare clic su bloccare nel menu a comparsa risultante.
Aggiungi una casella a discesa in Dreamweaver Passaggio 15
Aggiungi una casella a discesa in Dreamweaver Passaggio 15

Passaggio 15. Visualizza i contenuti del menu a discesa verticalmente

Per impostazione predefinita, i contenuti del menu a discesa verranno visualizzati in una barra orizzontale, ma puoi forzarli in una colonna verticale effettuando le seguenti operazioni:

  • Clic + accanto a "Selettori", quindi digita #name ul ul li e premi ↵ Invio due volte.
  • Trova l'intestazione "float".
  • Fare clic su "nessuno" () a destra dell'intestazione "float".
Aggiungi una casella a discesa in Dreamweaver Passaggio 16
Aggiungi una casella a discesa in Dreamweaver Passaggio 16

Passaggio 16. Salva il tuo progetto

Premi Ctrl+S (Windows) o ⌘ Command+S (Mac) per farlo.

Se hai creato un nuovo file Dreamweaver per questo progetto, dovrai inserire un nome, selezionare una posizione di salvataggio e fare clic su Salva per salvare il tuo file.

Consigliato: