Come creare pulsanti interattivi rollover in Dreamweaver

June 21

Chiunque visiti il ​​vostro sito si aspetta di vedere i pulsanti cambia quando il mouse passa su di loro. Rollover indicano che un pulsante è attivo, e cliccando prenderanno i visitatori da qualche altra parte. Quando si controlla il vostro riferimento HTML, si scopre non è possibile aggiungere rollover; è necessario utilizzare JavaScript o CSS. Oppure è possibile utilizzare Dreamweaver per scrivere il codice per voi.

istruzione

1 Progetta la tua barra di navigazione o l'interfaccia pagina web nel vostro editor di immagini preferito. Mantenere gli elementi che non cambiano mai su un solo strato. Spostare gli strati con elementi che non cambiano mai a un livello denominato "Fixed" e gli elementi che cambieranno con il rollover di un secondo strato chiamato "Stato normale." elementi di interfaccia rollover potrebbero includere lo sfondo, il testo, barre di pulsanti o effetti speciali applicati al livello.

2 Duplicate il livello "fisso" e il nome "rollover". Apportare le modifiche che si desidera fare in modo da riflettere il nuovo stato rollover. Nascondere il livello "rollover".

3 Strumento selezione sezioni web del editor di immagini. Tagliate ogni pulsante e il nome con tavolozza Opzioni sezione del software (o strumento). Si dovrebbe anche essere in grado di aggiungere il link URL nel software di editing delle immagini. In caso contrario, è possibile aggiungere in Dreamweaver.

4 Esportare l'immagine come un documento HTML con fette (è importante che lo strato "rollover" non essere visibili in questa fase). Controllare il nuovo file HTML in un browser per assicurarsi che tutte le fette sono visibili. Quando si conoscono le opere file HTML originale, visualizzare il livello "rollover" e nascondere il livello "Stato normale". Selezionare le fette pulsante solo ed esportarli come "fette selezionato solo" ad un sottocartella all'interno della cartella immagini.

5 Aprire il file HTML in Dreamweaver. Si dovrebbe vedere l'intera immagine ricomposta nella finestra del documento. Selezionare la porzione pulsante per rivelare il confine cella della tabella.

6 Aprire la tavolozza Comportamenti. Fare clic sull'icona "+" e scegliere "Scambia immagine" dal menu a tendina per aprire il dialogo Scambia immagine. Doppio controllo per assicurarsi che il tasto destro è selezionato, e controllare le "immagini precarico" e "ripristinare le immagini sul mouse Out" opzioni. Fare clic sul pulsante "Browse" per trovare la porzione di immagine è stato salvato per lo stato rollover.

7 L'anteprima della pagina Web nel browser. Se tutto funziona correttamente, è possibile salvare la pagina web e caricarlo sul server.

Consigli e avvertenze

  • Se l'editor di immagini non supporta affettare, si dovrà tagliare i singoli elementi dal documento e salvarle come file separati, che sarà un dolore.
  • Assicurati di salvare le immagini rollover in una sottocartella all'interno della cartella immagini. In caso contrario, si sovrascrivere i normali immagini stato del pulsante.