Photoshop e Dreamweaver: immagine di rollover

Visto che per molti, spesso, raffigura un problema.. ecco un breve e semplice tutorial su come editare un bottone " roll-over " utilizzando due metodi:

1) Photoshop + Dreamweaver

2) Dreamweaver + Css

Analizziamo il primo metodo:

La prima cosa da fare è creare il nostro Pulsante con photoshop ( Figura 1 )




Il bottone creato sarà quello senza nessuno " stato attivo".
Ora associamo a quest'ultimo un effetto qualunque che sarà attivo al passaggio del mouse ( Figura 2) nel mio caso ho semplicemente aggiunto un bagliore interno.



Perfetto, salviamo i due bottoni separatamente ed apriamo Dreamweaver !


Dal Menù in alto ( Inserisci > Oggetti Immagine > Immagine di Roll Over ) ( Figura 3 )




Nella schermata che si apre, selezioniamo le immagini.

Adesso basta salvare, vedere l'anteprima ed ecco fatto :) il nostro bottone è pronto in pochi e semplici passi :)



Ora Passiamo al secondo metodo.

Questa volta avremo solo bisogno di Dreamweaver e poche righe di codice :)

Supponiamo di avere il nostro bottone che da Blue diventa Arancio al Roll Over ;)

Iniziamo: Apriamo una nuova pagina Css e dichiariamo il nostro selettore che conterrà il collegamento web;
Supponiamo di volerlo chiamare " Bottone ":

#bottone a {
background-color: #006699;
padding: 25px 35px;
color: #000000;

}

dove " background-color: #006699; " è il colore di sfondo;
"padding: 25px 35px;" è la spaziatura dei margini ( attenzione per spaziatura intendo, lo spazio vuoto che resta nei margini non la distanza );
"color: #000000;" il colore del testo.

Ora creiamo lo stato " hover " del link :);
Sotto il precedente codice digitiamo:

#bottone a:hover {
background-color: #FF6600;
padding: 25px 35px;
color: #FFFFFF;
}

Con questo codice abbiamo appena dichiarato che al passaggio del mouse lo sfondo del link diventerà di colore arancione.
Salviamo la pagina con il nome " Stile.css" o quello che preferite.

Ora creiamo una pagina html e prima di tutto linkiamo la pagina stile.css con il tag <link rel="stylesheet" href="stile.css" />


Adesso non ci resta che creare il nostro link di rollover ;)


<div id="bottone" ><a href="www.ciao.it">home</a></div>


Con questo tag abbiamo creato il nostro divisore contenente il link " home " che avrà le caratteristiche in precedenza scelte ;) Salvate il file nella stessa cartella dove avete salvato " stile.css" ed avrete il vostro bottone di roll over utilizzando solamente Dreamweaver ;) .


 Lorenz`o, N.D.
001design.it ® è un marchio registrato.
© 2004-2017 Molfese Paolo - P.Iva: 03430820617 - All rights reserved | Tutti i diritti sono riservati.