Cosa sapere
- Vai a Inserisci > Modulo > Modulo. Fai clic sulla linea tratteggiata rossa sul modulo e vai a Inserisci > Form > Lista/Menu. Scegli le opzioni di accessibilità.
- Fai clic sul menu e seleziona le sue proprietà, quindi seleziona Elenca valori per aggiungere nuove voci di menu. Fare clic sul segno più per aggiungere altri elementi.
- Aggiungi valori oggetto e scegli un oggetto predefinito. Per aggiungere azioni, vai Inserisci > Modulo > Menu S alta. Aggiungi elementi al menu di s alto e salva.
Dreamweaver semplifica la creazione di menu a discesa per il tuo sito web. Ma come tutti i moduli HTML, possono essere un po' complicati. Questo tutorial ti guiderà attraverso i passaggi per creare un menu a discesa in Dreamweaver.
Menu di s alto di Dreamweaver
Dreamweaver 8 fornisce anche una procedura guidata per creare un menu di s alto per la navigazione nel tuo sito Web. A differenza dei menu a discesa di base, questo menu farà qualcosa quando avrai finito. Non dovrai scrivere JavaScript o CGI per far funzionare il tuo modulo a discesa. Questo tutorial spiega anche come utilizzare la procedura guidata di Dreamweaver 8 per creare un menu di s alto.
In primo luogo, crea il modulo
Ad eccezione di maghi speciali come il menu di s alto, Dreamweaver non ti aiuta a far "funzionare" i moduli HTML. Per questo, hai bisogno di un CGI o JavaScript.
Quando aggiungi un menu a discesa al tuo sito Web, la prima cosa di cui hai bisogno è un modulo per circondarlo. In Dreamweaver, vai al menu Inserisci e fai clic su Modulo, quindi scegli "Modulo".
Modulo visualizzato nella visualizzazione Design
Dreamweaver mostra visivamente la posizione del tuo modulo nella vista progettazione, così sai dove inserire gli elementi del modulo perché i tag del menu a discesa non sono validi (e non funzioneranno) al di fuori dell'elemento del modulo. Come puoi vedere nell'immagine, il modulo è la linea tratteggiata rossa nella vista disegno.
Scegli elenco/menu
I menu a discesa sono chiamati voci "elenco" o "menu" in Dreamweaver. Quindi, per aggiungerne uno al tuo modulo, devi andare nel menu Modulo nel menu Inserisci e scegliere "Elenco/Menu". Assicurati che il cursore si trovi all'interno della linea tratteggiata rossa della casella del modulo.
Finestra Opzioni Speciali
Nelle Opzioni di Dreamweaver, c'è una schermata sull'Accessibilità. I tuoi menu a discesa saranno immediatamente più accessibili rispetto ad altri siti web se compili queste cinque opzioni.
Accessibilità modulo
Le opzioni di accessibilità sono:
Etichetta
Il campo dell'etichetta viene visualizzato come testo accanto all'elemento del modulo. Digita un nome per il tuo menu a discesa. Può essere una domanda o una breve frase a cui risponderà il menu a discesa.
Stile
HTML include un tag di etichetta per identificare le etichette dei moduli sul browser web. Le tue scelte sono di racchiudere il menu a discesa e il testo dell'etichetta con il tag, utilizzare l'attributo "for" sul tag dell'etichetta per identificare a quale tag del modulo fa riferimento o non utilizzare affatto il tag dell'etichetta.
Posizione
Puoi inserire la tua etichetta prima o dopo il menu a tendina.
Chiave di accesso
I visitatori possono utilizzare una chiave di accesso con i tasti "Immagine" o Opzione per accedere direttamente a quel campo del modulo. Questa scorciatoia da tastiera rende i moduli molto facili da usare senza mouse. alt="
Indice Tab
L'indice delle schede è il modo in cui gli utenti devono accedere ai campi del modulo quando utilizzano la tastiera per scorrere la pagina web.
Dopo aver aggiornato le opzioni di accessibilità, fai clic su OK.
Seleziona il menu
Una volta visualizzato il menu a discesa nella visualizzazione del design di Dreamweaver, è necessario aggiungere i vari elementi. Innanzitutto, seleziona il menu a discesa facendo clic su di esso. Dreamweaver metterà un' altra linea tratteggiata attorno al menu a discesa per mostrare che l'hai scelto.
Proprietà menu
Il menu delle proprietà cambierà nell'elenco/proprietà del menu per quel menu a discesa. Lì puoi dare al tuo menu un ID (dove dice "seleziona"), decidere se vuoi che sia un elenco 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 scelte multiple nel menu a discesa e può essere alto più di un elemento.
Se vuoi che un menu a discesa sia alto più righe, cambialo in un tipo "elenco" e lascia deselezionata la casella "selezioni".
Aggiungi nuovi elementi all'elenco
Per aggiungere nuovi elementi al tuo menu, fai clic sul pulsante "Elenca valori…", che apre la finestra sopra. Quindi, digita l'etichetta dell'articolo nella prima casella. Verrà visualizzato sulla pagina.
Aggiungi altro e riordina
Fai clic sull'icona più per aggiungere altri elementi. Se vuoi riordinarli nella casella di riepilogo, usa le frecce su e giù a destra.
Dai valori a tutti gli oggetti
Se lasci vuoto il valore, l'etichetta andrà al modulo. Ma puoi assegnare valori a tutti i tuoi articoli per inviare informazioni alternative al tuo modulo. Lo userai molto per cose come menu di s alto e collegamenti ipertestuali.
Scegli un predefinito
Per impostazione predefinita, le pagine Web mostrano l'elemento a discesa elencato per primo come elemento predefinito. Ma se vuoi selezionarne uno diverso, evidenzialo nella casella "Selezionata inizialmente" nel menu Proprietà.
Visualizza la tua lista nella vista Design
Una volta terminate le modifiche alle proprietà, Dreamweaver mostrerà il tuo elenco a discesa con il valore predefinito selezionato.
Vedi la tua lista nella vista codice
Se passi alla visualizzazione del codice, puoi vedere che Dreamweaver aggiunge il tuo menu a discesa con un codice pulito. Gli unici attributi extra sono le opzioni di accessibilità. Il codice è tutto rientrato e molto facile da leggere e capire.
Salva e visualizza nel browser
Se salvi il documento e lo visualizzi in un browser web, puoi vedere che il tuo menu a discesa ha l'aspetto che ti aspetteresti.
Ma non fa niente…
Il menu che abbiamo creato sopra sembra a posto, ma non fa nulla. Per farlo fare qualcosa, devi impostare un'azione modulo sul modulo stesso.
Fortunatamente, Dreamweaver ha un modulo di menu a discesa integrato che puoi utilizzare immediatamente sul tuo sito senza dover conoscere moduli, CGI o script. Si chiama Jump Menu.
Il menu di s alto 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 collegamento.
Vai al menu Inserisci e scegli Modulo e poi S alta menu.
Finestra del menu di s alto
A differenza del menu a discesa standard, il menu di s alto apre una nuova finestra in cui puoi nominare le 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.
Aggiungi elementi al tuo menu di s alto
Fai clic sull'elemento Aggiungi per aggiungere un nuovo elemento al tuo menu di s alto. Aggiungi tutti gli articoli che desideri.
Opzioni menu di s alto
Una volta aggiunti tutti i link desiderati, dovresti scegliere le tue opzioni:
Apri URL in
Se hai un frameset, puoi aprire i collegamenti in un frame diverso. Oppure puoi cambiare l'opzione della finestra principale su una destinazione speciale in modo che l'URL si apra in una nuova finestra o altrove.
Nome menu
Dai al tuo menu un ID univoco per la pagina. È necessario affinché lo script funzioni correttamente. Ti consente anche di avere più menu di s alto in un unico modulo: assegna loro tutti nomi diversi.
Inserisci 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 elemento dopo la modifica dell'URL
Seleziona questo se hai un prompt come "Seleziona uno" come prima voce di menu. Ciò assicurerà che l'elemento rimanga predefinito sulla pagina.
Vista del design del menu di s alto
Proprio come con il tuo primo menu, Dreamweaver imposta il tuo menu di s alto nella visualizzazione progettazione 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 elementi; in caso contrario, lo script potrebbe non funzionare.
S alta il menu nel browser
Salvare il file e premere F12 visualizzerà la pagina nel tuo browser preferito. Lì puoi selezionare un'opzione, fare clic su "Vai" e il menu di s alto funziona.
