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.
