October 16
Per agghindare la progettazione di un sito web e renderlo visivamente stimolante, è possibile aggiungere effetti alle sezioni interattive come ad esempio i pulsanti per la navigazione. Un metodo comunemente usato è un effetto di scorrimento-over o mouse. Questo permette ai visitatori di riconoscere parti cliccabili del sito scorrendo su un pulsante, che cambia colore o rivela testo. È possibile creare un effetto di scorrimento-over facile da implementare con Cascading Style Sheets (CSS).
1 Aprire il software di editing delle immagini, come MS Paint, Photoshop o Corel Draw, e creare il pulsante. L'immagine deve essere due pulsanti su uno sopra l'altro. Il pulsante in alto è il pulsante i visitatori vedono quando il caricamento della pagina Web. Il pulsante di fondo è quello che vedono quando si scorrere sopra il pulsante in alto. Salvare l'immagine come un file GIF.
2 Inserire il seguente codice HTML, utilizzando un editor HTML come Dreamweaver o FrontPage, la pagina Web in cui si desidera inserire l'effetto di scorrimento-over:
<a id="mybutton" href="#" title="ThisIsMyButton"> <span> buttonname </ span> </a>
Sostituire "#" con l'URL che si desidera visitatori per andare dopo aver fatto clic sul pulsante.
3 Aprire un nuovo file sul vostro editor HTML, e digitare la seguente codice CSS:
myButton
{
blocco di visualizzazione;
width: 107px;
Altezza: 23px;
fondo: url ( "mybutton.gif") no-repeat 0 0;
}
myButton: hover
{
background-position: 0 -23px;
}
arco myButton
{
display: none;
}
Sostituire la larghezza pulsante con la larghezza dell'immagine creata. L'altezza è l'altezza totale di un pulsante. Se l'altezza di due pulsanti impilati è di 46 pixel, quindi immettere 23 pixel come l'altezza. Sostituire "mybutton.gif" con il nome della vostra immagine. Salvare il file CSS nella stessa directory come la pagina Web.
4 Modifica la pagina Web di includere il vostro file CSS aggiungendo il seguente codice nella sezione <head> del codice HTML:
<Head>
<Link rel = "stylesheet" type = "text / css" href = "scrollover.css" />
</ Head>
Sostituire "scrollover.css" con il nome del vostro file CSS.