Photoshop e Dreamweaver: immagine di rollover

Di: Lorenz`o | 26/09/2020 19:37:32
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 ;) .

Risposte


Nessuna risposta trovata!