Tutorial

Cada vez que usted inserta una imagen a su documento podrá observar en la parte inferior izquierda del panel Propiedades algo similar a lo siguiente:

Estas opciones se despliegan en el panel Propiedades cuando es seleccionada una imagen.

Lo cual indica que usted puede crear mapas de imágenes, un mapa de imagen simplemente es una imagen que se ha divido en varias zonas interactivas. Estas zonas interactivas generaran una cierta acción al hacer click en ellas. Estas acciones implican abrir un nuevo documento, esto se hace a través de vínculos.

En fin, para insertar un mapa de imagen, en primera instancia deberá seleccionar la imagen, seguidamente desde el panel Propiedades en el cuadro de texto Mapa, asigne un nombre que identifique al mapa de imagen, este nombre debe ser exclusivo para ese mapa. Esto es importante hacerlo notar, ya que es posible que usted defina más de un mapa de imagen en un mismo documento, por lo cual es importante diferenciar muy bien un mapa de otro.

Asignándole un nombre adecuado al mapa de imágenes.

Para crear las zonas interactivas tiene tres opciones: La herramienta zona interactiva oval Botón herramienta zona interactiva oval, la herramienta zona interactiva rectángular Botón herramienta zona interactiva rectángular y la herramienta zona interactiva poligonal Botón herramienta zona interactiva poligonal.

Las dos primeras herramientas trabajan de manera similar, debe ubicarse dentro de la imagen y luego arrastrar el cursor del mouse hasta que usted lo considere adecuado.

La tercera herramienta le permitirá crear zonas interactivas irregulares, para trabajar con esta herramienta en primer lugar debe ubicarse dentro de la imagen, para comenzar la zona interactiva haga click al botón izquierdo del mouse, para continuar la construcción de la zona interactiva irregular deberá dar click en las esquinas de lo será dicha zona, Dreamweaver se encargara de unir los puntos trazando una recta entre ellos. Para finalizar la zona interactiva irregular deberá seleccionar la herramienta Puntero Botón herramienta puntero de zona interactiva..

Luego de tener todas las zonas interactivas de nuestro mapa de imagen listas, procederemos a seleccionar cada una de estas zonas y se le asignara un comportamiento. Para asignar los comportamientos a dichas zonas nos dirigiremos al panel Propiedades.

A continuación se detallan las opciones que se presentan en el panel Propiedades:

Vínculo
Como se menciono previamente en este artículo la acción que generan las zonas interactivas al hacer click en ellas es abrir un nuevo documento, esto se hace a través de vínculos. Por lo tanto, podremos realizar lo siguiente:

  • Abrir una nueva página HTML, una imagen, un PDF, entre otros.
  • Crear un vínculo de anclaje con nombre, lo cual conduce a una parte especifica dentro de un documento.
  • Un vínculo de correo electrónico.
  • También cabe la posibilidad de generar vínculos a scripts.
Destino
Acá se encuentran las opciones: _blank, _parent, _top, _self.
alt —Texto Alternativo—
Es muy importante que usted rellene este campo en cada zona interactiva que cree. Macromedia Dreamweaver le advierte sobre ello: Describa el mapa de imágenes en el campo ‘alt‘ del inspector de Propiedades. Esta descripción ayudará a las personas con problemas de visión que utilizan herramientas que les leen páginas web.
Clase
Esto se refiere a alguna clase de estilo para la imagen especificada, esto se puede controlar a través de las hojas de estilo en cascada o CSS, también puede implementarse para algún tipo de script que necesite de este campo para realizar sus funciones.

Al finalizar el rellenado de todas las propiedades de cada una de las zonas interactivas que definio en el mapa de imágenes, haga click en una área en blanco del documento para que de esta manera cambie el panel Propiedades y continue con su trabajo.

25 diciembre, 2014
dreamweaver

Mapas de Imágenes con DreamWeaver

Cada vez que usted inserta una imagen a su documento podrá observar en la parte inferior izquierda del panel Propiedades algo similar a lo siguiente: Lo […]
25 diciembre, 2014
dreamweaver

Inserción de etiquetas meta con DreamWeaver

Las etiquetas meta suministran información sobre la página web, esta información puede ser sobre el autor del documento, la descripción de la página, palabras claves o […]
25 diciembre, 2014
dreamweaver

Botones Flash con DreamWeaver

Los Botones Flash al igual que las imágenes de sustitución describen un comportamiento interactivo, este comportamiento se activa al pasar el cursor del mouse encima del […]
25 diciembre, 2014
dreamweaver

La ventana de documento en DreamWeaver

En la vista de Diseño, la ventana de documento muestra el documento actual aproximadamente igual a como aparecerá en un navegador Web. La barra de título […]
25 diciembre, 2014
dreamweaver

Cambiar el tamaño de la ventana de documento en DreamWeaver

La barra de estado de la ventana de documento muestra las dimensiones actuales de la ventana (en píxeles). Si hace clic en este tamaño de ventana, […]
25 diciembre, 2014
dreamweaver

Marcos (frames) en Dreamweaver. Paso a paso.

Introducción Qué son los marcos y para qué se utilizan. Cómo insertar un marco sencillo en una página, y cómo trabajar con él es lo que […]
25 diciembre, 2014
dreamweaver

Utilizar la barra del lanzador en DreamWeaver

La barra del lanzador contiene botones que permiten abrir y cerrar diversos inspectores, paneles y ventanas. También puede ver el lanzador, un panel flotante con idénticos […]
25 diciembre, 2014
dreamweaver

Crea textos en Flash directamente desde DeamWeaver

Una forma muy sencilla de crear botones con animación para los vínculos es, con el denominado, texto flash . Le damos a Insertar > Imágenes interactivas […]
25 diciembre, 2014
dreamweaver

Utilizar la barra de herramientas en DreamWeaver

La barra de herramientas de Dreamweaver contiene botones que permiten alternar entre diferentes vistas del documento rápidamente: Código, Diseño y una tercera vista que combina las […]
25 diciembre, 2014
dreamweaver

Redireccionar a otra página o actualizar con DreamWeaver

Con esta opción se podrá redirigir la página actual o simplemente actualizar el documento al transcurrir cierta cantidad de segundos, regularmente está opción se usa para […]
25 diciembre, 2014
dreamweaver

Utilizar Menús Contextuales con DreamWeaver

Dreamweaver emplea de forma extensiva los menús contextuales, que proporcionan un método para acceder rápidamente a los comandos y las propiedades más útiles relacionados con la […]
25 diciembre, 2014
dreamweaver

Imágenes de sustitución en DreamWeaver

La imagen de Sustitución describe un comportamiento interactivo que se activa simplemente al pasar el cursor del mouse encima de la imagen en cuestión, es decir, […]
25 diciembre, 2014
dreamweaver

Validar nuestro código en DreamWeaver

Poniendo a tono nuestro programa Simplemente abra Dreamweaver MX 2004 y seleccione en el menú Edición » Preferencias (PC: Ctrl+U, MAC: Cmd+U). Seleccione la opción Accesibilidad […]
25 diciembre, 2014
dreamweaver

CSS Hojas de estilo en DreamWeaver

La idea básica del diseño web actual es separar el contenido y la estructura del estilo y la apariencia. El estilo y la apariencia estarán contenidos […]
25 diciembre, 2014
dreamweaver

Cinco pasos hacia páginas más profesionales con Dreamweaver

Cinco pasos hacia páginas más profesionales con Dreamweaver MX Dicen que un mal artesano siempre le echa la culpa a sus herramientas. Y tienen razón. No […]
25 diciembre, 2014
dreamweaver

Cómo hacer un rollover con Dreamweaver

Cómo hacer un rollover con Dreamweaver Antes de empezar debes tener dos imágenes (pueden ser JPEG o GIF) para este ejercicio. Una será la imagen original […]
25 diciembre, 2014
dreamweaver

Creando tablas con esquinas redondeadas en DreamWeaver

Creando tablas con esquinas redondeadas en Dreamweaver Mediante unas pequeñas imágenes de forma redondeada, conseguiremos este tan usado efecto de tablas con esquinas redondeadas. Este es […]
25 diciembre, 2014
dreamweaver

Cambiar el color de los enlaces con DreamWeaver

Cuando escribimos un enlace, por defecto aparece de color azul y subrayado. Como podemos ver aquí: Para que aparezca de otro color e incluso poder quitarle […]
25 diciembre, 2014
dreamweaver

Editar código con DreamWeaver

Tarde o temprano tendremos que editar el código de nuestra web para insertar un contador, script, o algún otro código que nos hayan dado. Podemos hacerlo […]
25 diciembre, 2014
dreamweaver

Las Capas en DreamWeaver

Uno de los comportamientos más habitual e interesante es el de Mostrar-Ocultar capas. Resulta obvio que para poder aplicar este comportamiento han de existir capas en […]
25 diciembre, 2014
dreamweaver

Marquesinas en DreamWeaver

Las marquesinas son texto, imágenes, o una mezcla entre texto e imágenes, que pueden desplazarse de un lado a otro de la ventana en forma de […]
25 diciembre, 2014
dreamweaver

Creación de un menu desplegable en Dreamweaver

Creación de un menú desplegable en Dreamweaver   Muchas veces, nuestras páginas tienen tantos contenidos que si quisiéramos que apareciesen todos estos en un determinado lugar […]