domenica 22 marzo 2009

Creare una barra di navigazione usando Fireworks

Vediamo come creare una barra di navigazione, utilizzando come software FIREWORKS, (puoi scaricare la versione DEMO cliccando sul link). La barra conterrà 6 pulsanti con relativi collegamenti alle pagine html del sito ed arricchiti con effetti di rollover. La barra una volta terminata sarà tipo questa:


Iniziamo con l'aprire il programma, e clicchiamo su nuovo documento, impostiamo i valori in base alle dimensioni che abbiamo a disposizione nel nostro sito per la barra di navigazione, io imposterò i valori su 900x32 pixel.



fatto ciò avremo un area di lavoro stretta e lunga di colore trasparente, selezioniamo adesso lo strumento "rettangolo arrotondato" e disegniamo all'interno dell'area trasparente un rettangolo che ne occupi tutto lo spazio.



selezioniamo adesso il secchiello per dare un colore di sfondo alla nostra barra di navigazione


adesso bisogna, selezionando lo strumento testo, andare a scrivere all'interno della barra il nome di quelli che saranno i nostri pulsanti.


una volta scritti i nomi dei pulsanti, necessita trasformare i semplici testi scritti in simboli pulsante, per far ciò, selezioniamo la scritta "HOME" per esempio e clicchiamo sul tasto "F8" , si aprirà una finestrella che ci consentirà di trasformare il semplice testo in un vero e proprio pulsante.


ripetiamo l'operazione per tutti i pulsanti della nostra barra di navigazione. Noteremo subito che quando trasformiamo una scritta in pulsante, nell'area del pulsante appariranno due iconcine, una in basso a sinistra raffigurante una freccina ritorta, ed un icona al centro della scritta raffigurante un mirino.


Cliccando sull' iconcina(mirino), è possibile andare ad inserire il collegamento alla pagina web di destinazione, mentre cliccando due volte sulla prima iconcina (freccina ritorta) si apre una schermata in cui è possibile andare ad impostare i comportamenti di rollover (SU, SOPRA, GIU', SOPRA E PREMUTO, AREA ATTIVA).


Per creare lo stato del pulsante ci si deve avvalere degli strumenti di disegno e modifica posti nella finestra in basso "proprietà". Una volta impostati i comportamenti per ogni pulsante ed i relativi collegamenti, basta salvare il lavoro fatto ed ecco creata la nostra barra di navigazione.


2 commenti:

  1. la spiegazione è molto chiara ma io voglio sapere come proseguire, cioè cosa devo cliccare una volta entrata nella finestra del pulsante ovvero dove c'è scritto: su, sopra, giu, sopra e premuto ecc..
    una volta qui che devo fare???

    RispondiElimina
  2. Ciao, innanzitutto grazie per aver postato questo commento. Adesso ti spiego cosa fare. Riferendoci all'esempio della figura cioè al tasto "HOME" e trovandoci nella posizione "SU", basta andare a modificare dei parametri nella zona delle proprietà(carattere,colore,dimensione,etc..etc..)
    per dare al tasto HOME una veste grafica diversa da quella di base, quando ci passiamo sopra con il mouse. Basta fare la stessa procedura anche quando ti trovi nelle altre finestre "SOPRA, GIU'.......". L'ultima linguetta quella denominata "AREA ATTIVA" ti consente di determinare la quantità di spazio nel tasto "HOME" che sarà cliccabile.
    Spero di essere stato chiaro, se dovessi avere altri dubbi non esitare a contattarmi, cercherò di risponderti il prima possibile.

    RispondiElimina

Ciao,lascia qui il tuo commento a questo post.