¿Cómo hacer una imagen de sustitución en Dreamweaver CS3

Puede utilizar imágenes de sustitución en sus páginas web para aumentar la interactividad, y llamar la atención del usuario a áreas de importancia, como una imagen usada como un botón. Un efecto de resaltado visual confirma al usuario que la imagen es interactivo, y llevará a cabo una acción cuando se hace clic. A menudo, los diseñadores web añadir efectos 3D para darle al botón de la ilusión de profundidad cuando se pulsa, o un toque de luz alrededor del borde botones. Aunque las imágenes dinámicas pueden mejorar la experiencia del usuario, es importante que no se vaya por la borda y sólo utilizarlos cuando sea necesario, o que rápidamente pierden su impacto.

Instrucciones

1 Iniciar Adobe Dreamweaver CS3, y luego haga clic en el menú "Archivo" y seleccionar "Nuevo". Haga doble clic en "HTML" en el menú "Tipo de página" para abrir una nueva página HTML.

2 Haga clic en el lugar donde desea que la imagen de sustitución añadió utilizando el código o el diseño de vista de Dreamweaver. Haga clic en el menú "Insertar" y luego haga clic en "Objetos de la imagen" y "Imagen de sustitución."

3 Escriba un nombre único para la imagen en el cuadro "Nombre de la imagen". Haga clic en el botón "Examinar" junto al cuadro de "imagen original" para seleccionar la ubicación de la imagen inicial para mostrar. Haga clic en el botón "Examinar" junto al cuadro "Imagen de sustitución" para seleccionar la ubicación de la imagen de sustitución. Introduzca una descripción de la imagen en el cuadro de "texto alternativo" para los usuarios que no pueden ver las imágenes en su navegador. Por último, haga clic en el botón "Examinar" junto al cuadro de "Ir a URL" para seleccionar la página a la que se le redirige al usuario después de que hace clic en la imagen.

4 Haga clic en el botón "OK" para insertar la imagen de sustitución. Dreamweaver añade automáticamente el código HTML y JavaScript para la renovación de la imagen.

5 Guarde la página y subir a su servidor Web. También debe cargar los archivos de imagen relevantes para el vuelco del vehículo. Abra la página en el navegador web y verá la imagen inicial aparece. Mover el puntero del ratón sobre la imagen para ver la imagen de sustitución, y luego haga clic en la imagen para ir a la página enlazada.

Consejos y advertencias

• Dreamweaver CS3 inserta el código JavaScript necesario para la renovación de imagen en la cabecera de la página. Como a menudo se requiere este código en varias páginas, se puede cortar y pegar el código JavaScript en un archivo externo para acelerar los tiempos de carga de páginas.
• Mantener los tamaños de archivo de imágenes de sustitución pequeña, como que va a cargar dos imágenes en lugar de uno, que se sumarán a la hora carga de las páginas.