Tutorial per crear una imatge en Dreamweaver

Una imatge de reenviament és una imatge que canvia a una altra imatge quan vostè o el vostre client mou el ratolí sobre ella. Aquests s'utilitzen habitualment per crear una sensació interactiva, com ara botons o pestanyes. Tanmateix, podeu crear imatges de sobre de tot.

Aquest tutorial està dissenyat per ajudar-vos a crear una imatge de renovació a Dreamweaver. Està destinat a ser utilitzat per persones que utilitzen les següents versions de Dreamweaver:

Dreamweaver MX
Dreamweaver MX 2004
Dreamweaver 8
Dreamweaver CS3
Dreamweaver CS4
Dreamweaver CS5
Dreamweaver CS6

Requisits per a aquest tutorial

DreamweaverUna de les versions enumerades anteriorment.
Una imatge originalAssegureu-vos d'optimitzar aquesta imatge. Això ajudarà a que les pàgines es carreguin amb més rapidesa.
La imatge de voltorAquesta imatge hauria de ser la mateixa que la imatge original. I, com la imatge original, s'hauria d'optimitzar per ajudar els temps de càrrega de la pàgina.
Una pàgina webAquesta és la pàgina HTML on posareu la vostra imatge de sobre.

Començar

Comença Dreamweaver
Obriu la pàgina web on vulgueu la vostra substitució

Introduïu un objecte d'imatge de pas de dia

Dreamweaver facilita la creació d'una imatge de sobrevolt.

Aneu al menú Insereix i cap avall Objectes d'imatge submenú.
Selecciona Retransmissió de la imatge o Imatge del rodatge.

Algunes versions anteriors de Dreamweaver criden als objectes d'imatge "Imatges interactives".

Digueu a Dreamweaver quines imatges usar

Dreamweaver mostra un quadre de diàleg amb els camps que heu d'omplir per crear la vostra imatge de reenviament.

Nom de la imatge

Trieu un nom d'imatge únic per a la pàgina. Hauria de ser una sola paraula, però podeu utilitzar els números, els guions baixos (_) i els guions (-). Això s'utilitzarà per identificar la imatge per canviar.

Imatge original

Aquesta és l'URL o la ubicació de la imatge que s'iniciarà a la pàgina. Podeu utilitzar URL de ruta relativa o absoluta en aquest camp. Aquesta hauria de ser una imatge que existeixi al servidor web o que carregui amb la pàgina.

Passa la imatge

Aquesta és la imatge que apareixerà quan feu clic sobre la imatge. Igual que la imatge original, aquest pot ser un camí absolut o relatiu de la imatge, i hauria d'existir o carregar-se quan carregueu la pàgina.

Preload Image Rollover

Aquesta opció està seleccionada de manera predeterminada, ja que ajuda a que la reproducció aparegui amb més rapidesa. En seleccionar la precàrrega de la imatge de rollover, el navegador web l'emmagatzemarà en una memòria cau fins que el ratolí passi per sobre.

Text alternatiu

Un bon text alternatiu fa que les teves imatges siguin més accessibles. Sempre haureu d'utilitzar algun tipus de text alternatiu quan afegiu imatges.

Quan feu clic a, aneu a l'URL

La majoria de la gent fa clic a una imatge quan veu una a una pàgina. Per tant, hauríeu de fer-los clicar. Aquesta opció us permet especificar la pàgina o URL per fer que l'espectador faci clic a la imatge. No obstant això, aquesta opció no és necessària per crear un canvi de domini.

Quan hagueu completat tots els camps, feu clic a D'acord Perquè Dreamweaver creï la teva imatge de reenviament.

Dreamweaver Escriu el JavaScript per a vostè

Si obriu la pàgina en la visualització de codi, veuràs que Dreamweaver insereix un bloc de JavaScript al fitxer del vostre document HTML. Aquest bloc inclou les 3 funcions que necessiteu perquè les imatges s'intercanvinguin quan el ratolí passi sobre ells i la funció de precàrrega si heu optat per això.

funció MM_swapImgRestore ()funció MM_findObj (n, d)funció MM_swapImage ()funció MM_preloadImages ()

Dreamweaver afegeix el codi HTML per a la recuperació

Si escolliu que Dreamweaver preloades les imatges de la funció de sobrecàrrega, veureu el codi HTML al cos del document per trucar a l'script de precàrrega perquè les vostres imatges es carreguin amb més rapidesa.

onload = "MM_preloadImages ('shasta2.jpg')"
Dreamweaver també afegeix tot el codi de la teva imatge i el vincula (si heu inclòs una URL). La porció de rollover s'afegeix a l'etiqueta d'ancoratge com a atributs onmouseover i onmouseout.

onmouseout = "MM_swapImgRestore ()"onmouseover = "MM_swapImage ('Image1', '', 'shasta1.jpg', 1)"
Proveu el pas del temps

Vegeu la imatge de la funció de reenviament totalment funcional i apreneu sobre la ment de Shasta.