Il menu in un sito è di estrema importanza, l'aspetto grafico e comunicativo, l'impatto che ha con l'utente, contribuisce a contraddistinguere il nostro sito nella moltitudine di Internet. Un menu chiaro, pulito, navigabile, rende più semplice e piacevole la navigazione per un utente.
In questo articolo prenderemo in analisi la realizzazione di un menu con Macromedia Dreamweaver, servendoci di una delle librerie JavaScript che questo fantastico software ci mette a disposizione. Il menu è davvero semplice e può essere attivato da chiunque abbia un minimo di pratica delle pagine HTML.
Utilizzeremo il nostro programma di grafica preferito per la creazione di immagini più o meno complesse, questo aspetto sarà a carico dello sviluppatore, in questo articolo vedremo come creare una serie di link che:
- cambieranno colore al testo al passaggio del mouse
- torneranno dello stesso colore all'uscita del mouse dall'area del link
- cambieranno il colore del puntatore del link al click del mouse rendendolo il link attivo
- cambieranno colore al testo al passaggio del mouse anche sul link attivo
- cambieranno il colore del puntatore del link attivo al click su di un altro link che si attiverà.
Per questo menu consiglio, o meglio si rende necessario, l'utilizzo dei frame per un semplice motivo: linkando ad un'altra pagina il menu verrà perso dalla memoria del browser per ricaricarsi nella pagina che è stata aperta, quindi torneranno le impostazioni di default del menu.
Si suppone che il lettore sappia creare una pagina con i frame, utilizzando o meno Dreamweaver (vedi «Creiamo un sito suddiviso in frame | Guida Web Design»). Il numero di frame che utilizzeremo non è rilevante ai fini del funzionamento del menu, ne basterebbero anche due, il numero di frame verrà deciso dallo sviluppatore in base alla scelta di un template che riguarda l'intero sito.
Direi di lavorare insieme di pari passo, facendo tutti le stesse cose, quindi avviamo la nostra copia di Dreamweaver e creiamo tre pagine:
- index.htm - la pagina che contiene i frameset
- menu.htm - la pagina in cui andremo a posizionare il menu, il cui frame avrà nome menu
- principale.htm - la pagina di destinazione dei link, il cui frame avrà nome principale
I nomi indirizzano il file nel frameset giusto e solo indicativi: in fase di reale sviluppo userete quelli che più vi piacciono o riterrete più esplicativi per la destinazione finale di quel frameset. Trattandosi ora di un esempio, utilizziamo per il frameset gli stessi nomi.
Creeremo quattro file in formato gif o png, o qualsiasi formato adatto al Web, quattro per ogni voce del menu, secondo le specifiche sopra elencate e posizioniamo tutti i file del progetto in un'unica cartella.
Supponiamo che le voci del nostro menu siano più o meno le classiche di un sito amatoriale, ad esempio:
- Homepage
- Chi sono
- I miei lavori
- I miei interessi
- Le mie foto
- I miei amici
- Ringraziamenti
- Lascia un commento
- Contattami.
Di questi limitiamoci a creare solo le immagini per il link "Homepage", altrimenti non finiamo più :-)
Torniamo su Dreamweaver sul file menu.htm, scegliamo il punto del file in cui costruire il menu, selezioniamo dalla menubar la voce Inserisci e scegliamo la voce Immagini interattive, poi, dal sottomenu, scegliamo la sottovoce Barra di navigazione, a questo punto si aprirà questa finestra:
L'interfaccia è molto semplice ed esplicativa, diamo comunque un'occhiata a tutte le voci della maschera:
- Nome elemento: assegniamo un nome all'immagine del menu, in questo caso homepage.
- Immagine alzata: scegliamo l'immagine che deve apparire al caricamento, in questo caso homepage1.gif.
- Immagine di rollover: scegliamo l'immagine col testo del link colorato al passaggio del mouse, in questo caso homepage2.gif.
- Immagine abbassata: scegliamo l'immagine col puntatore del link colorato al click del mouse, in questo caso homepage3.gif.
- Immagine di rollover abbassata: scegliamo l'immagine col testo colorato al passaggio del mouse ed il puntatore colorato al click del mouse , in questo caso homepage4.gif.
- Dopo un click, accedi all'URL: scegliamo l'url di destinazione al click del mouse che, ricordiamoci, dobbiamo modificare nel collegamento da codice aggiungendo, in questo caso, target="principale" che Dreamweaver non riconosce in automatico se nel progetto non si fa riferimento alla pagina coi frameset. In questo caso ho usato il carattere speciale cancelletto (#) per bloccare il link.
- Usa tabelle: Spuntiamo questa voce se intendiamo utilizzare la formattazione in tabelle per il menu, cosa che consiglio vivamente.
Eseguiamo un copia e incolla del seguente codice per implementare il menu:
<tr>
<td>
<a href="#" onClick="MM_nbGroup('down','group1','homepagÈ,'homepage3.gif',1)" onMouseOver="MM_nbGroup('over','homepagÈ,'homepage2.gif','homepage4.gif',1)" onMouseOut="MM_nbGroup('out')">
<img name="homepage" src="homepage1.gif" border="0" onLoad="" width="150" height="20">
</a>
</td>
</tr>
Modifichiamo tutte le voci homepage con la voce del link successivo, ad esempio guestbook, email ecc. e così ci comporteremo per tutte le voci successive.
La voce group1 non va mai modificata, è indicativa di uno stesso gruppo di link. Se si desidera creare una successiva serie di link nella stessa pagina che non fanno parte dello stesso insieme di link, bisognerà modificare la voce nella parte di codice copiata in group2 e cosi via per tutti i link che ci interessano.
Possiamo visualizzare l'esempio aprendo il file menu.htm.
Concludo l'articolo con un avvertimento ai pigroni amanti delle comodità: Dreamweaver è un software eccezionale come altri, (Homesite, Interdev) ma non bisogna adagiarsi sulle comodità che questi software offrono. Sfruttare Dreamweaver per un lavoro del genere credo che vada anche bene, ma per andare avanti nel mondo del lavoro e del Web Design bisogna essere competitivi ed essere anche cultori del codice, in caso contrario non ci potremo mai definire dei professionisti.
