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

I collegamenti principali

In questa lezione impareremo a strutturare la barra di navigazione principale.
In questa lezione impareremo a strutturare la barra di navigazione principale.
Link copiato negli appunti

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.

Ti consigliamo anche