Introducción a Dreamweaver 3

• Imágenes como enlaces
• Utilizar las imágenes como enlaces
• Insertar un "rollover" básico
• Creando y modificando mapas de imagen
• Creando barras de navegación
• Como editar los elementos de la barra de navegación

Imágenes como enlaces

 Utilizar las imágenes como enlaces

Anteriormente hemos visto como añadir enlaces en un texto de nuestros documentos. Ahora veremos como podemos usar las imágenes insertadas en un documento para que sirvan de enlace a otras URLs.

Realmente, como dijimos antes, muchos elementos incluidos entre la marca HTML <A> </A>, servirían de enlace a la URL especificada en la marca. Uno de estos elementos pueden ser las imágenes Analicemos las siguientes sentencias HTML:

<A HREF="http://www.ciberaula.com"> <P> Texto del enlace </P> </A>
<A HREF="http://www.ciberaula.com"> <IMG SRC="ciberaulalogo.gif"> </A>

La primera sentencia nos resulta más familiar, en ella tenemos un enlace en un párrafo de texto, en el que podríamos leer "Texto del enlace".

La segunda sentencia es prácticamente idéntica, con la salvedad de que el enlace contiene una imagen. Esta sentencia es perfectamente válida y funcionará correctamente. Cuando el usuario haga click sobre la imagen, iremos a la URL especificación en el enlace.

Veamos como podemos hacer esto en Dreamweaver:

1. Seleccionamos la imagen que queremos sirva de enlace
2. En la paleta Propiedades, ajustamos en el campo "Link" la URL a la que queremos enlazar
3. Establecemos el "destino" de esa URL en el campo "Target". Podemos usar si queremos cualquiera de los targets predefinidos usando la lista desplegable que hay junto a este campo.

Listo. Nuestra imagen se comportará desde ese momento como un enlace. Como vemos, no es realmente distinto el proceso de establecer un enlace de texto de establecer un enlace en una imagen. Son los mismos parámetros a ajustar.

NOTA: cuando establecemos un enlace en una imagen, el borde de esta, si lo tuviera, se visualizará del color que tengamos establecidos para los enlaces en las Propiedades del Documento. Así mismo, este borde irá cambiando de color en función a si el enlace ha sido visitado o es el enlace activo, según tengamos establecidos esos valores en las Propiedades del Documento. Esto es así, para indicar visualmente que esa imagen es un enlace. Si queremos evitar este efecto, que actualmente esta en desuso, basta con eliminar el borde de la imagen, estableciendo "0" en el campo "Border" de la paleta de Propiedades, o dejándolo vacío.

 Insertar un "rollover" básico

Ahora que ya sabemos como insertar imágenes en nuestros documentos y como utilizar estas imágenes para crear enlaces, tal vez tengamos interés en implementar la técnica de "rollover" en nuestras imágenes - enlaces, para que su apariencia sea más parecida a un botón y añadamos mayor espectacularidad a nuestra página.

Un "rollover", es básicamente una técnica por la cual una imagen es reemplazada por otra en función a un evento del usuario. Si ha navegado habitualmente por la red, se habrá encontrado con infinidad de sitios que realizan esta técnica. Si no ha visto anteriormente un "rollover" o en este momento no sabe a que nos podemos estar refiriendo, una imagen vale mas que mil palabras:

En el enlace de arriba podemos observar un clásico ejemplo de "rollover". Como verá, cuando el usuario interactúa con la imagen, ésta es sustituida por una segunda imagen, aumentando la sensación de interactividad. Este tipo de efectos se consiguen mediante funciones de javascript, aunque usando Dreamweaver, no necesitaremos generar ni una sola línea de código. Dreamweaver hará todo lo necesario por nosotros.

Veamos que pasos debemos seguir para insertar un simple "rollover" en nuestros documentos:

1. En primer lugar, hemos de tener creadas las 2 imágenes que compondrán nuestro "rollover" básico, una primera imagen que será la que este visible en un primer momento y una segunda que será la que se visualice cuando el usuario pase por encima de la imagen con el ratón. Hay que tener en cuenta que es conveniente que ambas imágenes tengan el mismo tamaño, ya que la segunda imagen se visualizará con las mismas dimensiones que hubiéramos establecido para la primera. Por tanto, si la segunda imagen no tiene el mismo tamaño que la primera, esta se verá distorsionada hasta ajustarse al alto y ancho de la primera imagen.
2. Una vez generadas las dos imágenes y salvadas correspondientemente en una de las carpetas del site actual, podemos utilizar menú Insert > RollOver Image para insertar un "rollover" en el punto en el que tengamos posicionado el cursor dentro de nuestro documento.
   

   En la ventana que se nos abrirá a continuación tendremos que rellenar los siguientes campos:

   • Image Name: como hemos dicho anteriormente, los "rollovers" se generan con funciones de Javascript. Nosotros no generaremos esas funciones, lo hará Dreamweaver por nosotros. No es necesario que sepamos como funcionan estas funciones, aunque si que sepamos que para realizar un rollover sobre una imagen con Javascript, ésta tiene que estar identificada por un nombre. En este campo, insertaremos el nombre por el que será conocida esa imagen dentro del documento, de manera que Javascript pueda reconocerla.
   • Original Image: En este campo hemos de introducir la URL de la imagen inicial, la que será visible normalmente. Si lo deseamos, podemos hacer uso del botón "Browse..." para localizar la imagen por la estructura de nuestro disco duro. Como es habitual, Dreamweaver generará la URL adecuada a la imagen que seleccionemos.
   • Rollover Image: En este campo introduciremos la URL de la imagen que hará de imagen secundaria. La que se mostrará cuando el usuario pase por encima con el ratón. Al igual que en el anterior campo, podemos hacer uso del botón "Browse..." para localizar esta imagen secundaria en nuestro disco duro.
   • Preload Rollover Image: Activando o desactivando esta opción, conseguimos que las imágenes necesarias para el rollover se carguen al cargarse el documento, de manera que las imágenes del rollover estén almacenadas en la memoria y el rollover sea instantáneo, o por el contrario que no se carguen hasta que no sean invocadas, en cuyo caso la imagen secundaría se comenzará a cargar cuando sea requerida y el rollover en consecuencia no tendrá la instantaneidad debida. Es recomendable activar esta opción.
   • When Clicked, Go to URL: En caso de que, como es previsible, queramos utilizar nuestro "rollover" como un enlace, en este campo podríamos añadir directamente la URL del documento al que queremos enlazar. El habitual botón "Browse..." nos permite localizar este documento por nuestro disco duro.

   Una vez rellenados estos campos convenientemente, bastará con hacer click en el botón "OK" y tendremos nuestro primer "rollover" en nuestro documento. Si desea comprobar el funcionamiento de su "rollover", previsualice la página en uno de los navegadores que tenga configurados en Dreamweaver.

NOTA: Si lo desea, puede realizar la inserción de un "rollover" haciendo uso del objeto "Rollover Image" de la paleta Objects > Common, en lugar de utilizar la opción localizada en el menú Insert. El resto del proceso es idéntico en ambos casos.

Una vez haya insertado su "rollover" en el documento, si lo selecciona observará que a todos los efectos éste se comporta como una imagen más del documento. De hecho es una imagen como otra cualquiera dentro del documento. Si quiere modificar cualquiera de los aspectos relativos a esta imagen, tales como alineación, borde, Link, etc..., puede hacerlo usando la paleta Propiedades, igual que lo haría con otra imagen.

Observe que el aspecto de la paleta Propiedades cuando selecciona una imagen "rollover" es exactamente el mismo que que tiene esta paleta cuando selecciona una imagen simple en su documento. Si lo desea puede ajustar las propiedades de esta imagen, sin que el "rollover" se vea afectado.

NOTA: para que un "rollover" funcione convenientemente, la imagen en cuestión ha de contener un enlace a algún sitio. Si usted no proporciona ningún enlace, Dreamweaver añadirá como enlace el símbolo "#", que es un símbolo especial para crear un enlace "nulo". Si elimina el enlace de su imagen "rollover", Dreamweaver le avisará de que el "rollover" se perderá, ya que no puede haber rollover si no hay enlace.

 Creando y modificando mapas de imagen

Hemos visto como utilizar imágenes para crear enlaces, de manera que una imagen enlace a una URL. Ahora bien, existe la posibilidad de que una misma imágenes contenga varios enlaces, siendo activado uno u otro en función a la zona, dentro de esa imagen, sobre la que el usuario haga click. Esto es lo que conocemos como mapa.

Si piensa en una mapa geográfico en el cual cada ciudad representada sea un enlace a una página distinta, entenderá la utilidad de este tipo de enlaces y el porqué de su nombre. En muchas ocasiones preferirá tener una sola imagen que contenga diferentes enlaces en diferentes zonas, que una serie de imágenes sueltas, cada una de las cuales enlace a un sitio diferente. Observé el siguiente ejemplo.

Observe como tenemos varías zonas definidas dentro de una misma imagen, cada una de las cuales tiene un enlace diferente. Compruébelo haciendo click sobre las distintas zonas. Este tipo de efecto es el que podemos conseguir creando un mapa de enlaces sobre una imagen.

Veamos como crear un mapa de enlaces sobre una imagen insertada en nuestro documento:

1. En primer lugar, seleccione la imagen que desea utilizar como mapa sobre el documento.
2. Una vez seleccionada la imagen, acuda a la paleta de Propiedades. En esta paleta encontraremos una serie de herramientas que nos permitirán definir las distintas zonas del mapa de enlaces. Estas herramientas se encuentran localizadas en la esquina inferior izquierda de la paleta de Propiedades.

Como vemos en la imagen superior, tenemos varios controles relacionados con la creación de un mapa sobre la imagen. Veamos cual es la utilidad de cada uno de estos campos:

• Map: En este campo introduciremos un nombre con el que será conocido el mapa que definiremos. El darle nombre a un mapa puede ser de utilidad para realizar distintas funciones con lenguajes como Javascript. Conviene por tanto que nombremos nuestro mapa.
• Puntero: Con esta herramienta podremos seleccionar las distintas zonas definidas en el mapa de enlaces, de manera que podamos ajustar sus propiedades o posicionarlas con más precisión dentro de la imagen.
• Rectángulo, Óvalo y Polígono: con estas 3 herramientas podemos definir las distintas zonas para nuestro mapa de enlaces. La manera de definir una zona es bastante intuitiva: Seleccionamos cualquiera de las 3 herramientas y dibujamos sobre la imagen la zona que queremos definir.

Una vez definida la zona deseada, la paleta Propiedades mostrará el siguiente aspecto:

En este momento, podemos incluir el enlace para la zona definida en el campo "Link", el "destino" para el enlace de esa zona en el campo "Target" y un texto alternativo, para la eventualidad de que la imagen no sea visible por el usuario, en el campo "ALT".

Si lo deseamos, podemos terminar con la definición de las zonas en primer lugar, y después ir seleccionando cada una de las zonas con el puntero y ajustando sus propiedades.

De esta manera tan sencilla que acabamos de ver, podemos crear mapas de enlaces con cualquiera de las imágenes que tenemos insertadas en nuestro documento.

Si seleccionamos la imagen en la que hemos establecido el mapa, veremos que a todos los efectos esta se comporta como una imagen más de nuestro documento, y que podemos ajustar sus propiedades en la paleta Propiedades, tal y como haríamos con cualquier otra imagen.

 Creando barras de navegación

Con el uso de imágenes "rollover" podemos definir fácilmente una "barra de navegación", si nunca ha visto una barra de navegación en una página web, eche un vistazo a la que hay en Correos. Es un buen ejemplo de lo que queremos decir.

Básicamente, una barra de navegación es un conjunto de imágenes dispuestas a modo de botones, o bien horizontalmente en la cabecera de un documento o al pie del mismo, o bien verticalmente, normalmente en el lado izquierdo de un documento. Los distintos "botones", que no son más que imágenes "rollover", permiten navegar por el site actual simulando el aspecto de un menú o de una interface de aplicación gráfica.

Como puede ver, este curso tiene una barra de navegación definida en el lado izquierdo de la ventana, de manera que usted puede navegar por los distintos temas de este curso.

En Dreamweaver sería sencillo la creación de una barra de ese estilo, gracias a la manera de crear "rollovers" que hemos visto anteriormente. Sin embargo, en la versión 3 de Dreamweaver, este proceso es aún mucho más fácil, ya que se ha añadido una utilidad para crear este tipo de barras de manera casi automática.

Veamos de que manera podemos crear una barra de navegación usando Dreamweaver 3:

1. En primer lugar tiene que haber creado las distintas imágenes que necesitará cada uno de los botones de la barra. Ha de tener en cuenta que cada uno de los botones puede llegar a tener hasta 4 estados, que explicamos a continuación:
   • UP: es el estado natural del botón, el que será visible cuando el usuario no interactúe con él. Esta imagen será la que marque el tamaño de las imágenes para los otros estados del botón, tal y como vimos con los "rollovers" básicos.
   • OVER: es el estado que mostrará el botón cuando el usuario pase por encima de él con el ratón. Como vemos, este estado y el anterior, son los mismos que se necesitan para hacer un "rollover" básico.
   • DOWN: Este estado será el que muestre la imagen una vez que el usuario ha hecho click sobre el botón y en consecuencia, ha abierto el enlace relacionado. Este tipo de estado, puede ser muy útil para mostrar mediante botones, en que lugar del site se encuentra el usuario actualmente. En el momento que el usuario haga click sobre otro botón, el botón actual volverá a su posición UP en detrimento del botón que el usuario acaba de pulsar, que pasará a estar en el estado DOWN. Por tanto, una sola imagen de la barra de navegación puede estar en posición DOWN al mismo tiempo.
   • OVER WHILE DOWN: Este estado define el aspecto visual del botón cuando este se encuentre en su estado DOWN y el usuario pase por encima de él con el ratón.

   Estos son los 4 estados que puede tener un botón de una barra de navegación en Dreamweaver. No es necesario que definamos una imagen para cada uno de los 4 estados del botón. Podemos querer un menú que solo tenga imágenes en el estado UP y en el estado OVER. Eso depende de nosotros. Finalmente, una vez hayamos decidido el tipo de barra que queremos y cuantos estados tendrán nuestros botones, tendremos que generar las imágenes que necesitamos para cada uno de los botones.

   NOTA: A la hora de crear estas imágenes, es conveniente que hagamos una reflexión sobre las dimensiones de cada uno de los botones de la barra, conociendo las siguientes observaciones:

   Cada uno de los botones de una barra de navegación es un "rollover", aunque puede llegar a tener más estados que un "rollover" básico y de alguna manera esta relacionado con el resto de los botones de la barra. En consecuencia, la imagen UP de cada uno de los botones será la que marque las dimensiones de las imágenes de los otros estados. Por tanto, las imágenes de los estados de un mismo botón han de ser idénticas.

   No es necesario que todos los botones de la barra tengan las mismas dimensiones, aunque por razones de estética si es conveniente que los botones tengan la misma altura en una barra horizontal, o la misma anchura en una barra vertical. En caso de no ser así, el botón más alto marcará la altura de la barra en una barra horizontal, y el botón más ancho marcará la anchura de la barra en una barra vertical.

2. Una vez ha creado y guardado convenientemente las imágenes en una de las carpetas de su site, posicione el cursor en el punto en el que quiere añadir la barra de navegación y seleccione menú Insert > Navigation Bar
   

   Aparecerá una ventana similar a la que vemos arriba, en la que muy fácilmente podremos generar la barra de navegación sin tocar una sola línea de código Javascript. Dreamweaver realizará todo el proceso de programación necesario por nosotros. Veamos cada uno de los controles de esta ventana:

   • Nav Bar Elements: en primer lugar nos encontramos una lista con los elementos o botones de la barra de navegación. Dado que aún no hemos añadido ninguno, solo encontramos en esta lista el elemento activo, que aún no se ha nombrado.

     Encima de la lista de elementos, en la parte izquierda, encontramos dos botones "+" y "-", que nos permiten añadir / eliminar elementos de la barra de navegación.

     En la parte derecha encontramos dos botones que nos permiten cambiar la posición en la lista del elemento seleccionado.

   • Element Name: En este campo introducimos el nombre con el que será conocido el elemento o botón que vamos a incluir en la barra de navegación. Como es obvio, cada uno de los elementos debe tener un nombre propio que lo diferencie del resto de los elementos.
   • Up Image: En este campo introducimos la URL de la imagen que define el estado Up del botón.
   • Over Image: En este campo introducimos la URL de la imagen que define el estado Down del botón.
   • Down Image: En este campo introducimos la URL de la imagen que define el estado Down del botón, si la hubiera.
   • Over While Down Image: En este campo introducimos la URL de la imagen que será visualizada cuando el usuario pase por encima del botón y éste se encuentre en estado DOWN.
   • When Clicked, Go to URL: En este campo introducimos la URL a la que enlazará el botón. En caso de dejarla vacía, Dreamweaver añadirá el enlace comodín "#".
   • In: En esta lista desplegable podríamos escoger la ventana destino en la que se visualizaría la URL enlazada, en caso de que estuviéramos trabajando en un documento que tuviera más de una ventana o Frame definido. Es el equivalente al "Target" del enlace, aunque no permite introducir éste de manera manual, por lo que tal vez tengamos que ajustar este parámetro posteriormente utilizando la paleta de Propiedades. Veremos esto más adelante.
   • Preload Images: Activa o desactiva la precarga de las imágenes involucradas en el rollover.
   • Show Down Image Initially: Activando esta opción obligamos a que inicialmente se visualice el estado DOWN de este elemento. Puede elegir que más de un elemento de la barra de navegación se muestre en estado DOWN inicialmente, aunque tan pronto como el usuario haga click sobre uno de los elementos de la barra, solo ese elemento mostrará su estado DOWN y el resto volverá a su estado UP.

     TRUCO: Cuando utilizamos una barra de navegación para navegar por un site, cada vez que llamamos a una nueva URL, cargamos un nuevo documento. Cada uno de esos documentos tendrá su propia barra de navegación. Utilizando esta opción, podemos hacer que el botón que sirve de enlace a la página actual, se muestre inicialmente en el estado DOWN, siendo así indicativo de que el usuario se encuentra en esa página actualmente.

   • Insert: Podemos escoger en este menú desplegable si deseamos insertar la tabla de manera horizontal o de manera vertical.
   • Use Tables: Activamos o desactivamos la opción de componer la barra de navegación usando tablas de HTML o no. El uso de tablas permite mayor control sobre el posicionamiento de los objetos, por lo que es conveniente usarlas.

   Una vez hayamos terminado de insertar los elementos necesarios en nuestra tabla de navegación, bastará con hacer click sobre el botón "OK" y en nuestro documento aparecerá la tabla, completamente funcional. Puede comprobarlo previsualizando el documento HTML en uno de los navegadores definidos en las preferencias de Dreamweaver.

TRUCO: Si lo desea, puede utilizar el objeto "Navigation Bar", situado en la paleta Objects > Common, para insertar una barra de navegación en el documento, en lugar de hacerlo a través de la opción disponible en el menú Insert.

Observe el siguiente ejemplo de barra de navegación que hemos creado para ilustrar este subcapítulo.

 Como editar los elementos de la barra de navegación

Una vez creada la barra podemos querer volver a editarla, tal vez para añadir más elementos, tal vez para cambiar la posición de los mismos, tal vez para cambiar algunos de los enlaces de estos elementos. Para hacer esto, lo único que tiene que hacer es:

1. Seleccione la barra de navegación, haciendo click en cualquiera de los elementos de la misma.
2. Con la barra seleccionada, utilice menú Modify > Navigation Bar. La ventana de definición de la barra de navegación se abrirá nuevamente y podrá editarla.
3. Una vez haya realizado los cambios oportunos, haga click en OK y Dreamweaver actualizará la barra para ajustarla a los nuevos cambios.

TRUCO: Si lo que desea es editar algo referente a uno de los elementos de la barra, tal como las dimensiones, el enlace o el "Target", puede hacerlo directamente a través de la paleta Propiedades. Basta con que seleccione dicho elemento y ajuste sus propiedades tal y como lo haría con cualquier otra imagen.