Creazione di una interfaccia. Parte II: creare una barra di navigazione

In questo tutorial aggiungeremo i pulsanti all’interno dell’interfaccia facendoli diventare una barra di navigazione completa. Per visualizzare il risultato cliccare qui.

1. Aprire il documento creato durante la prima parte del tutorial.
2. Scegliere Inserisci > Nuovo pulsante e disegnare un rettangolo 120×26 applicandogli un riempimento Lineare con gradiente Rame e l’effetto Smusso interno Attenuato 10 – 75% – 3 – 135 Sollevato.
3. Scrivere, al centro del pulsante, “gif animate” (Verdana, 16 pt, grassetto, bianco)
4. Copiare la grafica sui quattro stati apportando poi le seguenti modifiche all’effetto dal vivo:

• Sopra: preimpostazione pulsante = Evidenziato
• Giù: preimpostazione pulsante = Concentrico (controllare che siano selezionate le opzioni Mostra stato Giù al caricamento e Includi come appropriato).
• Sopra e premuto: preimpostazione pulsante = Inverso

5. Chiudere l’editor di pulsanti.
6. Aggiungere al documento 5 istanze del pulsante appena creato e posizionare tutto all’interno dell’interfaccia. Per ottenere un lavoro accurato può essere utile non visualizzare le aree attive cliccando sul pulsante in basso a sinistra nel pannello degli Strumenti.
7. Dal pannello Oggetti cambiare il testo dove serve e associare ad ogni pulsante l’URL corrispondente (nell’esempio ho usato come URL pag_1.htm, pag_2.htm, ecc.), il testo alternativo e il messaggio da barra di stato.
8. Chiudere e salvare il documento.

Premendo F12 è possibile vedere un’anteprima nel browser.

Nota: può succedere che i pulsanti nell’anteprima sembrino nella posizione corrispondente allo stato Sopra e premuto. Si tratta di una visualizzazione difettosa che comunque non pregiudica il risultato che si ottiene al momento dell’esportazione.

Nelle pagine web sono spesso presenti mappe immagini, cioè immagini in cui zone diverse (dette punti attivi) risultano collegate a URL diversi.

Fireworks mette a disposizione tre strumenti per tracciare queste aree nel modo più preciso possibile: Punto attivo rettangolare, Punto attivo circolare e Punto attivo poligonale.

È anche possibile tracciare rapidamente un punto attivo che comprenda uno o più oggetti selezionati scegliendo Inserisci > Punto attivo. I punti attivi sono evidenziati con un colore azzurro semitrasparente e al centro compare un cerchietto con il quale si gestiscono i comportamenti di “trascina e rilascia” (vedi terza parte del tutorial sulla creazione dell’interfaccia). Per attivare o disattivare la visualizzazione dei punti attivi si possono usare i due pulsanti in basso nel pannello degli strumenti oppure agire sulla visibilità del Livello Web.

Ad ogni punto attivo, mediante il pannello Oggetto, è possibile associare un URL, un testo alternativo e un obiettivo (cioè specificare se la pagina di destinazione deve aprirsi in un frame particolare, in una nuova finestra del browser ecc.).

Una volta creata, la mappa immagine deve essere esportata con il comando File > Esporta. Nella finestra di dialogo le impostazioni da utilizzare sono le seguenti:

• Casella Salva con nome: scegliere HTML e immagini
• Casella HTML: scegliere Esporta file HTML
• Casella Porzioni: scegliere nessuna

Volendo si può selezionare l’opzione Inserisci immagine nella sottocartella per salvare il file HTML e l’immagine in due cartelle diverse.

Nota: se nella casella HTML della finestra Esporta si sceglie Copia negli Appunti è possibile incollare il solo codice in un qualsiasi editor HTML.