Vai al contenuto

Tutorial: Rollover in Dreamweaver


Messaggi raccomandati

Creare un effetto rollover in Dreamweaver MX

Introduzione

Dreamweaver è un programma dalle caratteristiche professionali, che ci permette di sviluppare interi siti Web con relativa semplicità. Per il momento ci soffermeremo alle semplici pagine HTML. Esse non sono altro che dei documenti, scritti appunto in HTML, ai quali sono collegati immagini ed altri file. In questo tuttorial impareremo a creare immagini con l'effetto Rollover: sono quelle immagini nel web che quando ci passiamo spora con il mouse cambiano il loro aspetto. Con la nuova versione di Dreamweaver crearle è davvero facile e veloce e non richiede conoscenze di nessun linguaggio, poichè Dreamweaver si occuperà per noi di stendere il linguaggio HTML (quello della pagina web) e quello JavaScript (quello dell'effetto Rollover). Allora... iniziamo!

Andiamo nel Finder e creiamo una cartella dove vogliamo salvare il mini-sito (io di solito la faccio sul desktop) e diamole un nome, del tipo "prova rollover". Dobbiamo inserire due immagini, simili tra loro ma che possano costituire l'effetto RollOver... ecco un esempio: salvatele nella cartella appena creata.

aboutmeoff.jpg ... e ... aboutmeon.jpg

Ora apriamo Dreamwaver. Si può acquistare o si può scaricare la versione Trial (completa anche di salvataggio ma limitata per 30 gg) dal sito http://www.macromedia.com . Individuiamo l'icona nel dock ed apriamolo:

dreamlogo.jpg

Ci apparirà davanti a noi un foglio bianco... è lì che possiamo iniziare a comporre le nostre "opere". Andiamo nel menu File e ancor prima di iniziare il lavoro clicchiamo SaveAs. Salviamolo come rollover.html nella cartella creata poco fa. Ora possiamo inserire l'immagine con questo strumento:

rollovertool.jpg

Ci si aprirà una nuova finestra con dei campi da compilare. Nel campo "nome" inseriamo ciò che ci pare, per esempio "about_me". In original image digitiamo il nome dell'immagine (che deve essere nella stessa cartella del documento HTML!) che sarà visualizzata. Noi mettiamo "aboutmeoff.jpg". Nel capo successivo dovremo inserire l'immagine che apparirà quando passeremo sopra il mouse. L'immagine è "aboutmeon.jpg". Il campo Preload dobbiamo lasciarlo selezionato: ciò ci permette di caricare l'immagine subito, appena aperta la pagina ed evitare spiacevoli ritardi nel cambio di immagine quando ci passiamo sopra il mouse. Alternate text rappresenta invece ciò che verrà visualizzato dai browser che non supportano le immagini. GoToUrl, infine, rappresenta l'indirizzo Web che sarà raggiunto quando cliccheremo sull'immagine: possiamo lasciarlo vuoto, per ora non ci serve. Diamo l'OK.

rolloverimpost.gif

Ora vediamo l'immagine AboutMe grigia nella nostra pagina. Se vogliamo provare subito il risultato, salviamo con Mela+S ed andiamo nella nostra cartella rollover. Troveremo un file chiamato rollover.html. Apriamolo (con Safari o InternetExplorer, non con Dreamweaver) e notoremo il buon funzionamento dello script: passando il mouse sopra l'immagine, quest'ultima cambierà aspetto. Quando il mouse non è più sopra, l'immagine tornerà alla versione originale.

Tip: se l'immagine di rollover sarà una gif animata, il risultato sarà ancora più piacevole.

Se vogliamo ora possiamo sbizzarrirci nell'inserire altre foto, scritte o quant'altro per completare ancor meglio il lavoro. I comandi sono simili a quellli di un editor per testi... non dovrebbero esserci molte difficoltà. Il risultato è visitabile qui:

http://utenti.lycos.it/fabionetwork/italia...r/rollover.html

ciao e alla prossima :D

Fabio "Fabionetwork" Lanzone

:aereo:

Link al commento
Condividi su altri siti

Archiviato

Questa discussione è archiviata e chiusa a future risposte.

×
×
  • Crea Nuovo...