Macromedia » Dreamweaver » Realizzare un menu ad albero con Dreamweaver
Realizzare un menu ad albero con Dreamweaver
Difficoltà:
Scritto da Michele Sassi
Sito Web: http://www.comefaccio.net 
Questo tutorial è stato letto 1425 volte
Con il tutorial di oggi impareremo a realizzare un menu ad albero con Dreamweaver 8. Implementata già nelle precedenti versioni di Dreamweaver, questa funzionalità è stata resa ancora più performante grazie all'integrazione con Fireworks nel nuovo pacchetto Macromedia Studio 8.
Realizzare un menu ad albero spesso può richiedere una buona dose di programmazione manuale del codice. Infatti alla base di tali menu c'è una buona parte di codice Javascript che deve permettere di mostrare solo i link appartenenti alla categoria selezionata e di nascondere gli altri. In molti altri casi bisogna affiancare al Javascript alcuni linguaggi tipo XML o PHP per recuperare le varie voci dei link da basi di dati esterne, sia che essi siano fogli XML, sia che essi siano veri e proprio database.
Ebbene, Dreamweaver ci permette di realizzare menu ad albero con pochi click e soprattutto senza richiedere alcuna conoscenza dei linguaggi di programmazione. Noi opereremo sulle finestre del programma e lui scriverà per noi tutto il codice necessario. Questo spiega il fatto che Dreamweaver è un editor WYSIWYG (Cioò che vedi è ciò che ottieni). Senza perdere altro tempo, mettiamoci subito al lavoro.
Innanzitutto inseriamo un'immagine che sarà quella del nostro menu ed assegnamole un id (identificativo) nella barra delle proprietà delle immagini. Questo passaggio è fondamentale per la realizzazione del menu. Per comodità nell'esempio che segue abbiamo inserito un semplice segnaposto immagine:
<img src="" alt="MENU" name="MENU" width="160" height="32" id="MENU" style="background-color: #FF9900" />
Successivamente, con il segnaposto selezionato (basta un click su di esso) scegliamo apriamo il pannello dei Comportamenti dal menu Window / Behaviors, o più semplicemente premendo Shift + F4.
Come primo passo fondamentale, assicuriamoci di poter inserire comportamenti che siano supportati un po' da tutti i browser, quindi non ci spingiamo nel definire un determinato browser piuttosto recente, ma limitiamoci a scegliere un linguaggio che è di uguale interpretazione per tutti i browser, ovvero l'HTML. Clicchiamo sul "+" che troviamo sotto la voce Behaviors e scegliamo la voce Show Events For / Html 4.01.
Successivamente riclicchiamo sul "+" e scegliamo la voce Show Pop-Up menu. Nell'esempio che segue abbiamo realizzato un menu con due voci principali ovvero "Storia" e "Informazioni". Abbiamo poi inserito delle sottocategorie sia per la voce "Storia", ovvero "Dal 1900 al 1950" e "Dal 1950 al 2000" e sia per la voce "Informazioni", ovvero "Chi siamo" e "La mission Aziendale". Per questioni di praticità è stato realizzato un menu semplicissimo con sole due voci, ma ovviamente, una volta capito il meccanismo, siete libero di personalizzarlo in base alle vostre necessità.
Eccovi la videata realizzata per mostrarvi il menu:
Come potete notare dall'immagine, vanno settati alcuni parametri, che l'immagine rende alquanto chiari. Dobbiamo scegliere il testo da visualizzare nel menu (Text), il target ovvero la finestra del browser in cui aprire la pagina correlata, e il link ovvero appunto la pagina correlata.
Le icone "+" e "-" indicate dal numero 1 in figura servono rispettivamente ad aggiungere e a rimuovere una voce del menu.
Le icone rappresentate dal numero 2 servono a settare una determinata voce come categoria (la prima delle due icone) o come sottocacegoria (la seconda delle due icone). Ad esempio, per la voce "Dal 1900 al 1950" abbiamo cliccato la seconda icona del gruppo numero 2 per renderla una sotto-voce della categoria "Storia".
Con il gruppo di icone indicato dal numero 3 possiamo ordinare le voci del menu, salendone o scendendone la posizione.
Per quanto riguarda le altre schede della finestra, ovvero "Appearance", "Advanced" e "Position" non ci resta che settare i parametri a nostro piacimento ovvero i colori da utilizzare per bordi e sfondo, la posizione del menu e quant'altro.
Noterete anche che, una volta salvato il menu, verrà automaticamente generato un file denominato "mm_" seguito dal nome dell'id dell'immagine (o del segnaposto) inserito in partenza e da un'estensione .js. Nel nostro caso, in cui il segnaposto era identificato come "menu", ci ritroveremo un file chiamato "mm_menu.js".
Aggiungi questo tutorial ai preferiti
