Cómo crear una imagen de sustitución sencilla en dreamweaver

Video: Dreamweaver CS6 Imagen Sustitucion

Los vuelcos son una característica tan popular que Dreamweaver incluye un cuadro de diálogo especial para vuelcos: el cuadro de diálogo Insertar imagen de sustitución. Las imágenes de sustitución, como su nombre lo indica, están diseñados para reaccionar cuando alguien saca un cursor sobre una imagen. El efecto puede ser tan dramático como una imagen de un perro siendo reemplazada por una imagen de un león, o tan sutil como el color de un cambio de palabras.

Puede crear efectos más complejos Imagen de sustitución con opción de cambio de imagen en el panel Comportamientos. La opción Intercambiar imagen le permite cambiar varias imágenes al mismo tiempo.

Para crear un efecto de rollover simple con dos imágenes utilizando el cuadro de diálogo Insertar imagen de sustitución de Dreamweaver, siga estos pasos:

1. Coloca el cursor en la página donde desea que aparezca el vuelco del vehículo.

   Video: Tutorial Dreamweaver - Crear imagen de sustitucion

   efectos de conversión requieren al menos dos imágenes: una para el estado inicial y otro para el estado de rollover. Se pueden utilizar dos imágenes diferentes o dos otros similares, pero ambos deben tener las mismas dimensiones. De lo contrario, se ve efectos de escala extraño porque ambas imágenes deben mostrarse en exactamente el mismo espacio en la página.

2. Seleccione Insertar → Imagen → Imagen de sustitución.

   Como alternativa, puede utilizar la lista desplegable disponible desde el icono de Imágenes en el panel Común Insertar y seleccione Imagen de sustitución.

   Aparece el cuadro de diálogo Insertar imagen de sustitución.

   

3. En el cuadro Nombre de imagen, el nombre de su imagen.

   Video: Como poner Imagenes de Sustitucion en dreamweaver

   Antes de poder aplicar un comportamiento a un elemento, como una imagen, el elemento debe tener un nombre para que el script comportamiento se puede hacer referencia a ella. Se puede nombrar a los elementos lo que quiera, siempre y cuando no utilice espacios o caracteres especiales.

4. En el cuadro de imagen original, especifique la primera imagen que desea visible. Utilice el botón Examinar para buscar y seleccionar la imagen.

   Video: Cómo insertar imágenes de sustitución en Dreamweaver

   Si las imágenes no están ya en su carpeta de sitio local, Dreamweaver los copia en su sitio cuando se crea el vuelco del vehículo.

5. En el cuadro Imagen de sustitución, introduzca la imagen que desea hacerse visible cuando un usuario mueve el cursor sobre la primera imagen.

   Una vez más, puede utilizar el botón Examinar para buscar y seleccionar la imagen.

6. Seleccione la casilla de verificación Carga previa de imagen por encima para cargar todas las imágenes de sustitución en la caché del navegador cuando la página se carga por primera.

   Si no elige hacer este paso, los usuarios pueden experimentar un retraso debido a que la segunda imagen no se descargará hasta que un cursor se rodó sobre la imagen original.

7. En el campo Texto alternativo, escriba una descripción de las imágenes.

   El texto alternativo es opcional pero se recomienda debido a que el uso de palabras clave puede mejorar la optimización de motores de búsqueda. Del mismo modo, el texto alternativo es una parte clave de la accesibilidad web porque este texto se lee en voz alta por los navegadores especiales llamados lectores de pantalla, que son utilizados por las personas que son ciegas y otras personas con visión o movilidad limitada. El texto alternativo sólo se muestra en el navegador si las imágenes no son visibles.

8. Cuando en el clic, ir a la caja URL, introducir cualquier dirección web o navegar para localizar otra página en su sitio a la que desea vincular.

   Si no se especifica una dirección URL, Dreamweaver inserta automáticamente el # firmar como un marcador de posición en el código.

   El signo # es una técnica común para la creación de enlaces que no se enlazan en cualquier lugar. Debido a que las imágenes de sustitución que no tienen enlaces a otra página tienen muchos usos grandes, esta técnica es útil. Sólo recuerde que si usted quiere que su vuelco a enlazar, es necesario sustituir el signo # con un enlace a otra página.

9. Haga clic en Aceptar.

   Las imágenes se configuran automáticamente como un vuelco.

10. Para ver el vuelco en la acción, guardar el archivo y haga clic en el icono del globo en la parte superior del espacio de trabajo para previsualizar la página en un navegador web.

Se puede ver cómo funciona su transferencia en la vista Diseño de Dreamweaver o mediante el uso de la opción de visualización en vivo. Al hacer clic en el botón vivo en la parte superior izquierda del área de trabajo, esencialmente, a su vez Dreamweaver en un navegador web que muestra las páginas Al igual que el navegador Chrome.

Cuando estás vista previa de una página en su ordenador que incluye una imagen de sustitución, algunos navegadores web se mostrará una advertencia que indica que debe permitir que los controles ActiveX para ver la página. Esta es una advertencia de seguridad que aparece sólo cuando se abre la página en el mismo equipo donde se guarda la página.

Si publica la página en un servidor web y luego ver que a través de una conexión a Internet, usted y sus visitantes del sitio no verá este error.