Unidad 6. Imágenes (V)

6.6. Barra de navegación

Una barra de navegación es un conjunto de imágenes que se utilizan como opciones de menú para navegar dentro de una web. Una página web solo puede contener una única barra de navegación.

Para insertar una barra de navegación hay que dirigirse al menú Insertar, Objetos de imagen, a la opción Barra de navegación.

En la nueva ventana pueden especificarse cuatro imágenes diferentes para cada uno de los botones, el vínculo para cada uno de ellos, etc.

A través de los botones superiores de la ventana es posible crear y eliminar botones de la barra de navegación, así como reordenarlos. Con se crea un botón nuevo, con se elimina el botón seleccionado, y con se puede modificar la posición del botón seleccionado.

En Imagen Arriba indicamos la imagen que quieres mostrar inicialmente (cuando todavía no se ha hecho clic).

En Sobre imagen, pones la imagen que se mostrará cuando el usuario coloque el cursor sobre el botón y éste estaba mostrando la imagen asignada en Imagen Arriba.

En Imagen abajo, indicamos la imagen a mostrar después de que el usuario haya hecho clic en la imagen.

En Sobre mientras imagen abajo, indicamos la imagen a mostrar cuando el usuario mueva el puntero sobre el botón y éste estaba mostrando la imagen asignada en Imagen Abajo.

De esta forma, si asignas imágenes distintas puedes saber cuál es el último botón que ha sido pulsado (el que tiene Imagen Abajo).

Aquí tienes un ejemplo de barra de navegación. Para su creación se han utilizado las mismas imágenes para todos los botones, pero como puedes ver, en el botón del medio aparece inicialmente una imagen diferente de la de los otros dos. Esto se debe a que la opción Mostrar "Imagen abajo" inicialmente estaba activa para este botón. Sitúa el puntero sobre los distintos botones, y pulsa sobre alguno, para ver qué es lo que ocurre.

Observa el campo Texto alternativo (es lo mismo que el campo Alt). Cobra especial importancia en los elementos de navegación. Si no lo ponemos, el usuario no podrá navegar si la carga de la imagen falla.

boton1
boton2
boton3

El que existan cuatro imágenes diferentes sirve para identificar cual de los vínculos está activo, cosa que con un simple rollover no puede hacerse.

A través de la opción Insertar es posible especificar si los botones de la barra de navegación van a aparecer de forma horizontal o vertical dentro de la página.

Sólo podemos tener uno de estos menús por página, así que si intentamos insertar uno nuevo, editaremos el existente.

 

Tanto la imagen de sustitución como la barra de navegación se apoyan en JavaScript, una tecnología que permite cambiar el contenido de la página dinámicamente.

Existe una forma parecida de crear estos efectos utilizando CSS, y de hecho son más utilizados. Básicamente consiste en cambiar la imagen de fondo de un elemento. Puedes ver un ejemplo de barra de navegación utilizando CSS en este avanzado Avanzado.

6.7. Objetos inteligentes

Ver el videotutorial

Los objetos inteligentes son imágenes que obtenemos directamente desde un archivo de Photoshop (.psd).

Al insertarlo, lo hacemos igual que con cualquier imagen, eligiendo el archivo de Photoshop.

Pero una archivo .psd no es un archivo que podamos mostrar en una página web. Por eso, lo que hará Dreamweaver es convertirlo a un formato estándar. Por eso, tras abrirlo, Dreamweaver nos pedirá que elijamos uno de los formatos gif, png o jpg y lo guardemos, con las mismas opciones que encontrábamos al pulsar el botón Editar configuracionde la imagen del Inspector de propiedades.

¿Qué ventajas obtenemos con todo esto? Si observas la esquina superior izquierda del objeto inteligente encontrarás un icono como éste Objeto inteligente sincronizado. Las dos flechas verdes indican que el archivo está sincronizado, es decir, la imagen está generada a partir del último archivo de Photoshop.

Pero puede que en cualquier momento queramos modificar la imagen. Podemos hacerlo abriendo el archivo .psd, o pulsando el icono Edición: PS del Inspector de propiedades, que abrirá el archivo fuente de Photoshop.

Tras guardar los cambios, vemos que el icono de la imagen en Dreamweaver ha cambiado, mostrando ahora una flecha roja: Objeto inteligente editado. Esto indica que la imagen que estamos viendo en Dreamweaver (jpg, psd, png) no es la misma que el original (psd) ya que se ha modificado. Podemos volverla a generar pulsando el icono Sincronizar Actualizar desde origen.

 

Por lo tanto, los objetos inteligentes son útiles para imágenes que tengamos que editar frecuentemente.

 

• Ejercicio propuesto de la Unidad 6 • Prueba evaluativa de la Unidad 6
Pág. 6.5

Atrás  Inicio  Adelante