Come creare un menu a discesa in Dreamweaver

È possibile posizionare l'etichetta prima o dopo il menu a discesa.

Chiave di accesso

Questa è la chiave che può essere utilizzata insieme ai tasti Alt o Opzione per accedere direttamente al campo del modulo. Questo rende le tue forme molto facili da usare senza bisogno di un mouse.

Indice tab

Questo è l'ordine in cui è necessario accedere al campo modulo quando si utilizza la tastiera per passare da una pagina all'altra.

Dopo aver aggiornato le opzioni di accessibilità, fai clic su OK.

Seleziona il menu

Una volta visualizzato il menu a discesa nella vista di progettazione di Dreamweaver, è necessario aggiungervi i vari elementi. Innanzitutto seleziona il menu a discesa facendo clic su di esso. Dreamweaver inserirà un'altra linea tratteggiata attorno al menu a discesa, per mostrare che l'hai selezionata.

Proprietà del menu

Il menu delle proprietà passerà alle proprietà elenco / menu per quel menu a discesa. Lì puoi dare un ID al tuo menu (dove dice "seleziona"), decidere se vuoi che sia una lis o un menu, assegnargli una classe di stile dal tuo foglio di stile e assegnare valori al menu a discesa.

Qual è la differenza tra elenco e menu?

Dreamweaver chiama un menu a discesa qualsiasi menu a discesa che consente solo una selezione. Un "elenco" consente più scelte nel menu a discesa e può essere superiore a un elemento.

Se si desidera che un menu a discesa sia composto da più righe, modificarlo in un tipo di "elenco" e lasciare deselezionata la casella "selezioni".

Aggiungi nuovi elementi della lista

Per aggiungere nuovi elementi al tuo menu, fai clic sul pulsante "Elenca valori …". Questo aprirà la finestra sopra. Digita l'etichetta dell'articolo nella prima casella. Questo è ciò che verrà visualizzato sulla pagina. Se lasci il valore vuoto, è anche quello che verrà inviato nel modulo.

Aggiungi altro e riordina

Fai clic sull'icona più per aggiungere altri elementi. Se si desidera riordinarli nella casella di riepilogo, utilizzare le frecce su e giù sulla destra.

Dare tutti i valori degli articoli

Come ho menzionato nel passaggio 8, se lasci il valore vuoto, l'etichetta verrà inviata al modulo. Ma puoi dare tutti i valori degli articoli - per inviare informazioni alternative al tuo modulo. Lo userai molto per cose come i menu di salto e l'hyperlinking.

Scegli un valore predefinito

Le pagine Web predefinite per visualizzare qualsiasi elemento a discesa è elencato per primo come elemento predefinito. Ma se vuoi che sia selezionato uno diverso, selezionalo nella casella "Inizialmente selezionato" nel menu Proprietà.

Vedi la tua lista in Design View

Una volta che hai finito di modificare le proprietà, Dreamweaver mostrerà il tuo elenco a discesa con il valore predefinito selezionato.

Vedi la tua lista in Code View

Se si passa alla vista codice, è possibile vedere che Dreamweaver aggiunge il proprio menu a discesa con un codice molto pulito. Gli unici attributi extra sono quelli che abbiamo aggiunto con le opzioni di accessibilità. Il codice è tutto indentato e molto facile da leggere e capire. Inserisce anche l'attributo = "selezionato" selezionato perché ho detto a Dreamweaver che per impostazione predefinita sto scrivendo XHTML.

Salva e visualizza nel browser

Se si salva il documento e lo si visualizza in un browser Web, è possibile vedere che il menu a discesa appare esattamente come ci si aspetterebbe.

Ma non fa niente …

Il menu che abbiamo creato sopra sembra soddisfacente, ma non fa nulla. Per poter fare qualcosa, è necessario impostare un'azione modulo sul modulo stesso.

Fortunatamente, Dreamweaver ha un modulo menu a discesa integrato che puoi utilizzare immediatamente sul tuo sito senza bisogno di informazioni su moduli, CGI o script. Si chiama menu di salto.

Il menu Jump di Dreamweaver imposta un menu a discesa con nomi e URL. Quindi puoi scegliere un elemento nel menu e la pagina Web si sposterà in quella posizione, proprio come se avessi fatto clic su un link.

Vai al menu Inserisci e scegli Modulo e poi Vai al Menu.

Salta la finestra del menu

A differenza del menu a discesa standard, il menu Jump apre una nuova finestra in cui puoi dare un nome alle voci del menu e aggiungere dettagli su come dovrebbe funzionare il modulo.

Per il primo elemento, cambia il testo "senza titolo1" in quello che vuoi che legga e aggiungi un URL a cui quel collegamento dovrebbe andare.

Aggiungi elementi al tuo menu Jump

Fare clic sulla voce Aggiungi per aggiungere un nuovo elemento al menu Jump. Aggiungi tutti gli elementi che desideri.

Salta le opzioni del menu

Una volta aggiunti tutti i collegamenti desiderati, dovresti scegliere le opzioni:

Apri URL in

Se si dispone di un set di frame, è possibile aprire i collegamenti in una cornice diversa. Oppure puoi cambiare l'opzione della finestra principale su un bersaglio speciale in modo che l'URL si apra in una nuova finestra o altrove.

Nome del menu

Dai al tuo menu un ID univoco per la pagina. Questo è necessario affinché lo script funzioni correttamente. Permette anche di avere più menu di salto in un unico modulo - basta dare loro tutti i nomi diversi.

Inserisci il pulsante Vai dopo il menu

Mi piace selezionarlo perché a volte lo script non funziona quando il menu cambia. È anche più accessibile.

Seleziona il primo oggetto dopo la modifica dell'URL

Seleziona questo se hai una richiesta come "Seleziona uno" come prima voce di menu. Ciò assicurerà che quell'elemento rimanga predefinito sulla pagina.

Salta la vista del disegno del menu

Proprio come con il tuo primo menu, Dreamweaver imposta il tuo menu di lancio in visualizzazione struttura con l'elemento predefinito visibile. Puoi quindi modificare il menu a discesa come faresti con qualsiasi altro.

Se lo modifichi, assicurati di non modificare alcun ID sugli articoli, altrimenti lo script potrebbe non funzionare.

Salta il menu nel browser

Salvando il file e premendo F12 verrà visualizzata la pagina nel browser preferito. Qui puoi selezionare un'opzione, fare clic su "Vai" e il menu Salta funziona!