Grafica  »  Guide  »  Guida Fireworks 

In questa lezione impareremo a strutturare la barra di navigazione principale, cioè quella che troverà posto nel frame alto. I pulsanti avranno un effetto rollover che farà cambiare il colore del testo da arancione in bianco e rimarranno di quest'ultimo colore se premuti.

Apriamo il file interfaccia.png e in una parte vuota del documento disegnamo un rettangolo 60x20 senza contorno e con riempimento #FFCC00.

Prendiamo lo strumento testo e nel pannello Ispezione Proprietà impostiamo arial, 12, grassetto, allineamento centrato e colore #FF6600 e scriviamo Oceania (è il testo più lungo fra quelli da inserire nei pulsanti).

Selezioniamo il testo e il rettangolo, apriamo il pannello Allinea e centriamo i due oggetti.

Convertiamo i due oggetti in simbolo (Elabora > Simbolo > Converti in simbolo); si tratterà ovviamente di un simbolo di tipo Pulsante a cui daremo proprio il nome "pulsante".

Apriamo il pannello Libreria e facciamo doppio clic sull'anteprima del simbolo appena creato. In questo modo si aprirà la finestra dell'editor pulsanti. Spostiamoci nella scheda Sopra e clicchiamo sul pulsante Copia grafico Su, selezioniamo il testo e cambiamo il colore in bianco.

Passiamo alla scheda Giù e clicchiamo sul pulsante Copia grafico Sopra. Chiudiamo l'editor dei pulsanti cliccando su Fatto.
Dal pannello Libreria trasciniamo nel documento altre quattro istanze del pulsante e dal pannello Ispezione Proprietà cambiamo i nomi (campo Testo) rispettivamente in Africa, America, Asia, Europa.
Posizioniamo i cinque pulsanti come indicato:

• Africa: X = 300, Y = 74
• America: X = 380, Y = 74
• Asia : X = 460, Y = 74
• Europa : X = 540, Y = 74
• Oceania : X = 620, Y = 74

Rimangono da creare i collegamenti alle pagine Selezioniamo il primo pulsante a sinistra e nella parte destra del pannello Ispezione Proprietà riempiamo i tre campi a disposizione come segue:
Colleg. = africa.htm
Alt = Immagini dall'Africa
Obiettivo: = mainFrame

Ripetiamo lo stesso procedimento cambiando ovviamente il nome della pagina a cui collegarsi e il testo nel campo Alt.

Testiamo il lavoro premendo F12 (cliccando sui vari pulsanti il browser cerca di aprire una pagina inesistente in una nuova finestra e manda un messaggio d'errore; l'effettivo funzionamento dei link potrà essere testato solo dopo aver esportato tutte le pagine e aver ricostruito i frameset in Dreamweaver).

Salviamo il documento.

Altri articoli

Altre guide

Altre newsletter