Come creare pulsanti interattivi rollover in Fireworks

November 4

effetti di rollover sono diventati elementi di interfaccia obbligatori per le pagine web moderne. Fanno più di aggiungere effetti freddi al tuo sito; indicano all'utente che un collegamento è attivo. Ma, non è necessario per gestire decine di file e scrivere il codice JavaScript per aggiungere rollover alla tua pagina. Con Fireworks è possibile rendere i pulsanti e lasciare che il programma di scrivere il codice.

istruzione

1 Progetta la tua barra di navigazione o la pagina web di interfaccia in Fireworks. Creare lo sfondo, pulsante Forme, bordi e il testo su livelli separati. Spostare gli strati con elementi che non cambiano mai a una cartella di livelli denominata "Static" e gli elementi che cambieranno con il rollover di una seconda cartella denominata "Stato normale."

2 Copiare gli elementi che si desidera modificare a nuovi livelli. Spostare gli strati di rollover a un gruppo di terza cartella chiamata "rollover Stato." Apportare le modifiche in modo che gli elementi appaiono nel modo desiderato loro di guardare quando il mouse passa sopra un pulsante.

3 Tagliate il documento. Assicurarsi di creare una sezione separata per ogni tasto.

4 Aprire la tavolozza Frame. Trascinare il fotogramma 1 per l'icona "nuovo / duplicato Frame" nella barra delle opzioni della palette. Si vedrà un nuovo telaio identico al primo.

5 Mostrare e nascondere i livelli in ogni fotogramma per mostrare gli effetti che si desidera rendere visibili in quello stato del mouse. Assicurarsi che il fotogramma 1 mostra i pulsanti nel loro stato normale del mouse, e Frame 2 mostra i pulsanti nel loro stato rollover.

6 Maiusc selezionare le fette pulsante nello strato fetta. Aprire la tavolozza Comportamenti e cliccare sul pulsante "Add Behavior" (sembra un "+"). Selezionare "Rollover semplice" dalla lista pop-up. L'effetto rollover verrà applicato a tutte le sezioni tasto selezionato.

7 Scegliere "Anteprima nel browser" dal menu File. Quando si è soddisfatti con l'effetto rollover andare in modalità Anteprima per ottimizzare le fette. Esportare le fette come "HTML" e le immagini per scrivere il codice HTML e caricare le fette in una cartella di immagini.

Consigli e avvertenze

  • Troverete è molto più facile progettare intero sito web o barra di navigazione come un documento di Fireworks di creare pulsanti rollover individuali. Fuochi d'artificio saranno organizzare e mantenere il codice ottimizzato per voi.
  • Utilizzare la tavolozza Proprietà per assegnare un nome alle sezioni dei pulsanti. In questo modo sarà più facile tenere traccia dei vostri grafici dei pulsanti nelle loro cartelle e quando si modifica il codice HTML in un secondo momento.
  • Non basta creare una nuova cornice nella palette Frames. Il nuovo telaio non avrà nulla in essa, e si dovrà copiare tutti i livelli dal primo fotogramma. Assicurarsi di duplicare il primo fotogramma.