Hosting & Domini

Esercitazione > Creazione di pulsanti

Creazione di pulsanti

Ora si è pronti a trasformare in pulsante la forma vettoriale mediante la conversione in simbolo di pulsante. (Un simbolo è un elemento riusabile memorizzato nella libreria del documento). Poi si procederà a creare gli altri stati per il pulsante, per l'effetto rollover, nell'Editor di pulsanti. In Fireworks, è si puņ determinare l'oggetto che comparirà durante il rollover per ben quattro diversi stati del pulsante. Vedere Creazione di pulsanti e barre di navigazione. In questa sede, si creerà un rollover pulsante che esegue lo scambio delle forme quando il puntatore attraversa il pulsante.

 
Conversione della forma in un simbolo di pulsante

Per creare un pulsante, occorre prima creare un simbolo.

1	Con la forma vettoriale selezionata, scegliere Inserisci > Converti in simbolo.
2	Nella finestra di dialogo Proprietà simbolo, nominare il simbolo MioPulsante.
3	Selezionare Pulsante come tipo e cliccare su OK.
	Nell'area di lavoro, si noti quanto è cambiata la forma vettoriale. Il pulsante presenta una sovrapposizione, a indicare che si tratta di una porzione, che non comparirà nel file esportato. La piccola freccia nell'angolo inferiore sinistro del pulsante indica invece che l'oggetto è un'istanza del simbolo MioPulsante che compare nella Libreria. Più avanti, si userà il comando circolare del comportamento per creare un rollover disgiunto.
4	Per visualizzare il simbolo del pulsante nella libreria, scegliere Finestra > Libreria.

 
Inserimento di testo per il pulsante

Per aggiungere del testo al pulsante, aprire il pulsante nell'Editor di pulsanti, quindi aprire l'Editor di testo.

1	Con lo strumento Puntatore, cliccare due volte sull'istanza MioPulsante nell'area di lavoro.
	Comparirà l'Editor di pulsanti.
2	Nel pannello Strumenti, scegliere lo strumento Testo e cliccare sul lato sinistro del pulsante nell'Editor di pulsanti.
3	Nell'Editor di testo, scegliere Impact per il carattere, 16 punti come dimensioni e Allineamento al centro.
4	Controllare che non siano selezionati gli attributi dello stile, come grassetto e corsivo.
5	Utilizzare la casella del colore carattere per scegliere una tonalità di arancione, oppure digitare il valore esadecimale corrispondente nel campo di modifica.
	Il file Final.png utilizza una tonalità di arancione corrispondente al valore esadecimale #FF9900.
6	Accertarsi che sia selezionata l'opzione Antialiasing attenuato nel campo Livello antialiasing e che sia selezionata anche l'opzione Autocrenatura.
	L'antialiasing attenua i bordi del testo, mentre la crenatura regola la spaziatura tra determinate combinazioni di lettere per migliorare l'aspetto delle coppie.
7	Verificare inoltre che la casella di controllo Applica automaticamente (non il pulsante Applica) sia selezionata in modo da poter visualizzare il testo sul pulsante mentre lo si digita.
8	Nel campo di immissione testo, digitare Pianifica avventura e cliccare su OK.

 
Allineamento del testo

Per allineare il testo all'interno del pulsante, si utilizzano i comandi di menu.

1	Con lo strumento Puntatore, scegliere il pulsante e cliccare tenendo contemporaneamente premuto il tasto MAIUSC per scegliere il testo.
2	Scegliere Elabora > Allinea > Centrato verticale.
3	Scegliere Elabora > Allinea > Centrato orizzontale.

Nota: Se la tonalità è troppo chiara per il testo, far scorrere verso destra il dispositivo del campione colore posto a sinistra del pulsante per scurire la sfumatura.

 
Creazione di un rollover

Sino a questo punto si è intervenuti sull'aspetto che avrà il pulsante nel suo stato Su, ovvero quando il puntatore del mouse dell'utente non è ancora entrato in contatto con il pulsante. Ora si utilizzerà l'Editor di pulsanti per creare lo stato Sopra del pulsante, ovvero l'aspetto che avrà il pulsante quando il puntatore si trova sopra di esso.

1	Fare clic sulla scheda Sopra nell'Editor di pulsanti, quindi su Copia grafico Su nel lato inferiore destro della finestra.
	La funzione Copia grafico Su evita di dover creare un altro pulsante simile da zero.
2	Utilizzare lo strumento Puntatore per scegliere il pulsante. Portarsi sul menu a comparsa Preimpostazione gruppi di colori sfumatura del pannello Riempimento e scegliere Bianco, Nero.
	Si noti che i colori della sfumatura sono ora riservati alla transizione dal bianco al nero.
3	Con lo strumento Puntatore, cliccare sul testo del pulsante. Nel pannello Riempimento, utilizzare la casella colore per scegliere una sfumatura di rosso, come la #FF3300.
4	Selezionare il pulsante e far scorrere verso sinistra il dispositivo del campione colore posto sulla destra del pulsante fino a che la sfumatura non è sufficientemente scura da assicurare la leggibilità del testo.
5	Chiudere l'Editor di pulsanti facendo clic sulla sua casella di chiusura.
6	Utilizzare lo strumento Puntatore riportare il pulsante all'interno della linea guida.

Si ricorda di salvare il lavoro di frequente.

Grazie all'Editor di pulsanti, si è creato un pulsante rollover senza dover scrivere codice JavaScript. All'esportazione del file in HTML, il codice JavaScript per il rollover sarà incluso nel file HTML.

 
Visualizzazione del comportamento del pulsante

Il pannello Comportamenti permette di visualizzare e collocare i comportamenti JavaScript a pulsanti, porzioni e punti attivi. Osservando il pannello, è si puņ constatare che contiene ora un comportamento rollover.

Scegliere Finestra > Comportamenti per visualizzare il pannello Comportamenti.

 
Anteprima del pulsante

La scheda Anteprima, posta sul lato superiore sinistro della finestra del documento, mostra l'aspetto che avrà il documento in un browser Web. La scheda Originale non visualizza il rollover, ma l'azione è visualizzabile in Anteprima.

1	Nel pannello Strumenti, cliccare sull'icona Nascondi porzioni in fondo al pannello per nascondere la sovrapposizione verde.
2	Fare clic sulla scheda Anteprima.
3	Portare il puntatore sul pulsante Pianifica avventura per visualizzare l'effetto rollover.

Nota: Oltre alla scheda Anteprima, si può anche scegliere File > Anteprima nel browser, poi scegliere un browser. Il browser visualizza una versione temporanea del file.

 
Creazione di più istanze di un singolo simbolo

Ora si sperimenteranno i vantaggi di disporre di simboli riusabili nella libreria: non sarà infatti necessario ripetere i passaggi per creare altri due pulsanti rollover. Sarà sufficiente trascinare due istanze del simbolo del pulsante dalla libreria all'area di lavoro. Poi si procederà a modificare li testo delle due istanze senza incidere sul simbolo originale.

1	Per uscire da Anteprima, cliccare sulla scheda Originale.
2	Nel pannello Libreria, scegliere MioPulsante e trascinare l'istanza del pulsante sull'area di lavoro, collocandola di fianco al pulsante Pianifica avventura preesistente in modo che si agganci alle guide.
3	Trascinare un'altra istanza dello stesso pulsante e collocarla di fianco al secondo pulsante. (Accertarsi di non trascinare il comando circolare del comportamento). Anche questa volta utilizzare le guide per allineare il pulsante con gli altri due.
4	Con la seconda istanza di MioPulsante selezionata, passare al pannello Oggetto (Scegliere Finestra > Oggetto se il pannello non fosse visibile). Selezionare il testo nel campo Testo pulsante e sostituirlo con Controlla condizioni. Poi premere Invio.
5	Una finestra di dialogo richiede se modificare tutte le istanze del pulsante o solo quella corrente. Fare clic su Corrente.
6	Ripetere i passaggi 4 e 5 per l'ultimo pulsante, questa volta modificando il testo in Registro viaggi.
7	Avvalersi della scheda Anteprima per visualizzare i pulsanti rollover. Al termine, tornare alla scheda Originale.

 
Assegnazione di URL ai pulsanti

I pulsanti in tipo costituiscono un valido sistema per spostarsi nelle pagine Web. Per specificare i collegamenti per ciascuno dei pulsanti, avvalersi di Autocomposizione Collegamento.

1	Sull'area di lavoro, scegliere il pulsante Pianifica avventura, poi cliccare su Autocomposizione Collegamento nel pannello Oggetto.
2	Nella scheda Collegamento della finestra di dialogo Autocomposizione Collegamento, digitare compasssite/adventureplanner/index.html nel menu a comparsa superiore e cliccare su OK.
3	Selezionare il pulsante Controlla condizioni sull'area di lavoro e utilizzare Anteprima Collegamento per assegnarlo all'URL compasssite/checkconditions/index.html.
4	Selezionare il pulsante Registro viaggi sull'area di lavoro e assegnarlo all'URL compasssite/travelog/index.html.

Per quanto riguarda i collegamenti, sarà si puņ testarli durante l'esercitazione, dopo aver esportato il documento.