Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 32 di 66
  • livello principiante
Indice lezioni

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

Aggiungiamo i pulsanti alla nostra interfaccia facendola diventare una vera e propria barra di navigazione.
Aggiungiamo i pulsanti alla nostra interfaccia facendola diventare una vera e propria barra di navigazione.
Link copiato negli appunti

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
  1. Chiudere
    l'editor di pulsanti.
  2. 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.
  3. 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.
  4. 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.

Ti consigliamo anche