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 120x26 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.