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
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
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 Immagini interattive Barra di navigazione
L'interfaccia è molto semplice ed esplicativa, diamo comunque un'occhiata a tutte le voci della maschera:
- Nome elemento: homepage .
- Immagine alzata: homepage1.gif .
- Immagine di rollover: homepage2.gif .
- Immagine abbassata: homepage3.gif .
- Immagine di rollover abbassata: homepage4.gif .
- Dopo un click, accedi all'URL: 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:
Eseguiamo un copia e incolla del seguente codice per implementare il menu:
<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 guestbook email
La voce group1 group2
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.
