Formularios

Vamos a ver qué es un formulario, para qué se utiliza, cómo insertar uno, qué elementos puede contener y cómo pueden validarse los datos introducidos en él.

9.1. Introducción

Los formularios se utilizan para recoger datos de los usuarios, nos pueden servir para realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir preguntas, etc.

Una vez el usuario rellena los datos y pulsa el botón para enviar el formulario se arrancará un programa que recibirá los datos y hará el tratamiento correspondiente.

Aquí vamos a ver cómo crear el formulario, (insertar campos y botones en el formulario y validarlos), pero no la parte de tratamiento de los datos, ya que para ello se necesitan nociones de programación, ya sea en PHP, en JavaScript o en otro lenguaje de programación, y esto no entra en los objetivos del curso.

A la derecha tienes un ejemplo de formulario simple.

Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables, y botones.

9.2. Elementos de formulario

Los elementos de formulario pueden insertarse en una página a través del menú Insertar, opción Formulario, o lo que es más cómodo si vamos a insertar varios elementos, desde el panel Insertar en la sección Formularios.

A través de esta opción se puede acceder a la lista de todos los objetos de formulario que pueden ser insertados en la página.

Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte de un formulario, así como algunas de sus propiedades.

Campo de texto y Área de texto

Permiten introducir texto. El Campo de texto solo permite al usuario escribir una línea, mientras que el Área de texto permite escribir varias.

Se puede pasar de Campo de texto a Área de texto a través del inspector de propiedades, marcando la opción Una línea o Multi línea respectivamente.

También es posible definirlo como Contraseña es como el campo de texto pero las letras que va tecleando el usuario se sustituyen por un carácter como podrás ver en la imagen siguiente.

A continuación tienes un ejemplo de cada uno de estos tres tipos. Puedes escribir en ellos para ver su funcionamiento.

Área de texto

A través del inspector de propiedades es posible asignar también el Ancho del cuadro de texto, el número máximo de líneas o caracteres, y el valor inicial del cuadro.

Botón

Es el botón tradicional de Windows. El botón puede tener asignadas tres opciones: Enviar formulario, Restablecer formulario (borrar todos los campos del formulario), o Ninguna (para poder asignarle un comportamiento diferente de los dos anteriores).

También es posible cambiar el texto del botón, a través de la propiedad Valor del inspector de propiedades.

Como mínimo tiene que haber un botón del tipo Enviar formulario, imprescindible para enviar los datos. Además le suele acompañar un botón Restablecer formulario para hacer reset en el caso de que el usuario quiera comenzar de nuevo a rellenarlo.

Casilla de verificación

Es un cuadrito que se puede activar o desactivar, para indicar si el usuario ha elegido una opción o no.

Deseo recibir información

Puede asignársele el Estado inicial como Activado o como Desactivado.

Botón de opción

Es un pequeño botón redondo que puede activarse o desactivarse. Si hay varios del mismo formulario con el mismo nombre, sólo puede haber uno activado. Cuando se activa uno, automáticamente se desactivan los demás. Esto obliga al usuario a sólo poder elegir una opción.

Superman
Spiderman

Lista/Menú

Una lista o menú es un elemento de formulario que lleva asociada una lista de opciones.

--- Elige opción lista --- Perro Gato Canario Loro --- Elige opción menú--- Perro Gato Canario Loro

Los elementos se añaden a través del botón Valores de lista... del Inspector de propiedades.

Cuando se trata de un menú, solo es posible elegir uno de los elementos, pero si se trata de una lista, a través de Selecciones del inspector de propiedades puede permitirse que se seleccionen varios simultáneamente.

Etiqueta

Se utiliza para ponerle nombres al resto de elementos de formulario, para que el usuario pueda saber qué datos ha de introducir en cada uno de ellos. Además, al estar asociadas al control nos permite activarlo al pulsar sobre el texto. Esto es muy práctico en casillas de verificación y botones de opción.

Sin etiqueta. Hay que pulsar sobre la casilla.
Con etiqueta. Podemos pulsar en el texto.

Una propiedad muy importante de los formularios es su nombre. Ya que al recibir los datos, a través del nombre sabremos qué control los envía.

Crear formularios

Antes de insertar los elementos o controles del formulario, hemos de crear un formulario. Los elementos los introduciremos dentro de él, ya que cuando lo demos a enviar, sólo se enviarán los datos de los elementos de dentro del formulario.

Puedes crear formularios a través del menú Insertar → Formulario, opción Formulario, o desde el panel Insertar.

Una vez creado un formulario, este aparecerá en la ventana de Dreamweaver como un recuadro formado por líneas naranjas discontinuas, similar al de la imagen siguiente.

Estas líneas son ayudas visuales al trabajar en diseño, pero no se verán en el formulario final.

Entre las propiedades del formulario, encontramos el campo Acción. En el indicamos a dónde se envían los datos. Normalmente, una página PHP que se encara de tratarlos.

Dentro de dicho formulario se podrán insertar los elementos de formulario, que como ya sabes puedes insertar a través del menú Insertar, opción Formulario o desde el panel Insertar.

Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribución de los elementos del formulario, lo que facilita su comprensión y mejora su apariencia.

Podemos cambiar la apariencia de los formularios con CSS. En este caso, podemos emplear el selector form.

9.4. Validar formularios

La validación de formularios sirve para hacer que JavaScript valide el formulario antes de que se envíe, avisando al usuario para que corrija los errores, como campos obligatorios sin rellenar. Esto es mucho más eficaz que enviar la página y validarla sólo en el servidor.

Para validar un formulario hay que abrir el panel de Comportamientos. Este panel se puede abrir a través del menú Ventana, opción Comportamientos, o pulsando Mayús + F4. ComportamientosInspector de etiquetas. forma parte del panel

En este panel hay que desplegar el botón y pulsar sobre la opción Validar formulario, deberás haber seleccionado el formulario previamente.

Entonces se mostrará una ventana como la siguiente, donde aparecen todos los elementos del formulario.

Puede seleccionarse uno por uno cada elemento del formulario, pudiendo especificar los requisitos que ha de cumplir.

Puede establecerse como campo a rellenar obligatoriamente (Valor Obligatorio), y si su contenido ha de ser numérico (Número) y si ha de estar en un rango, una Dirección de correo electrónico, etc.

Marcos

Vamos a ver qué son los marcos y para qué se utilizan. También veremos cómo insertar un marco sencillo en una página, y cómo trabajar con él.

8.1. Introducción

Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar. Además de mejorar la funcionalidad, pueden mejorar también la apariencia.

Cada uno de los marcos de una página, contiene un documento HTML individual. Por ejemplo, en la siguiente imagen puedes ver una página con dos marcos. El marco izquierdo contiene el documento menu.htm y el derecho el documento quienes.htm. Para poder visualizar la página de este modo, hemos tenido que abrir el documento index.htm, que es la página que contiene los marcos agrupados.

Es posible editar los documentos contenidos en los marcos desde la página que contiene el grupo de marcos. Esto facilita el trabajo, ya que es más fácil hacerse una idea de cómo quedará la página al final, cosa que no es posible si se editan individualmente cada uno de los documentos que contiene el marco.

El trabajar con marcos puede resultar una tarea algo complicada, sobre todo al principio, por lo que no vamos a profundizar mucho en el tema, y veremos solamente algunos conceptos básicos y ejemplos sencillos.

Actualmente los marcos están cayendo en desuso. Aunque son realmente prácticos, crean problemas a la hora de ser indexados por los buscadores. Y estar correctamente indexado y posicionado es crucial para una web.

Por ejemplo, si vemos el código fuente de una página con marcos, vemos que realmente no hay más que las llamadas a las páginas correspondientes, por lo que no hay nada que indexar. Por otro lado, si se indexa una página, puede que el visitante llegue a ella directamente, no a través del marco. Esto hace, por ejemplo, que el usuario no pueda acceder a los elementos de navegación de nuestro sitio.

La pega más común al no usar marcos es tener que repetir los elementos comunes, como el menú y logo en cada página, con la complicación correspondiente a la hora de hacer un cambio. No obstante, esto es fácilmente solucionable si empleamos PHP o JavaScript en nuestra página.

Por lo tanto, si piensas colgar tu página en internet para uso público, no te recomendamos su uso. Pero si la página es de uso privado, tal vez te facilite el trabajo emplear marcos.

Crear marcos

Existen varias formas de crear un marco. Nosotros vamos a ver solamente una de ellas.

Para crear un marco, primero hay que abrir algún documento. Puede ser uno nuevo o uno ya existente.

Después, dirigirse al menú Insertar, HTML, Marcos. A través de esta opción puede elegirse el tipo de marco que va a crearse.

Vamos a ver el marco a la Izquierda.

Si pulsamos sobre Izquierda se creará un nuevo marco a la izquierda del documento actual.

Como puedes ver en la imagen, aparece una línea que divide el documento en dos. El documento de partida era uno nuevo.

En este caso tendremos tres documentos: el de la izquierda, el de la derecha, y el que contiene el grupo de marcos. El de la derecha es el documento que teníamos inicialmente, que está en el marco conocido como marco padre (MainFrame).

Para seleccionar el documento que contiene el grupo de marcos hay que pulsar sobre la línea que separa los marcos. Esto solo es posible mientras dicho documento no se haya guardado.

Si en lugar de insertar un marco a la izquierda lo insertamos a la Derecha, el marco vacío aparecerá a la derecha del documento original.

En esta imagen puedes ver un ejemplo de marco a la derecha.

Sobre un documento ya existente, menu.htm, se ha insertado un marco a la derecha.

Al igual que en el caso anterior, tenemos tres documentos: el de la izquierda, el de la derecha, y el que contiene el grupo de marcos. En este caso, el documento que teníamos inicialmente es el de la izquierda, mientras que antes era el de la derecha. Por ello, en este caso el marco padre será el de la izquierda.

El marco padre siempre es el marco en el que se encuentra el documento inicial, sobre el que se han insertado el resto de marcos.

Seleccionar marcos

Para seleccionar los marcos del documento es necesario dirigirse al panel Marcos, que puede abrirse a través del menú Ventana. También puedes abrir el panel Marcos pulsando la combinación de teclas Mayúsculas + F2.

En el panel Marcos aparecen los marcos que contiene el documento de marcos, y se puede pasar de uno a otro pulsando sobre ellos en el panel. También puede seleccionarse la página de marcos pulsando sobre el borde que rodea a los marcos (el que aparece más grueso y en relieve en la imagen).

No es necesario seleccionar los marcos para editar los documentos que éstos contengan.

Sí es necesario seleccionar los marcos para especificar las propiedades específicas de cada uno de ellos.

8.4. Guardar

Todos los documentos que contienen marcos tienen que tener una página en cada uno de ellos. Es por esto que al crear algún marco, se cargan páginas nuevas por defecto en cada uno de ellos, a excepción del marco que contiene la página original.

Estas páginas nuevas pueden ser posteriormente sustituidas por otras ya existentes, como ya veremos más adelante.

Es necesario guardar la página que contiene el grupo de marcos, así como cada una de las páginas que están incluidas en sus marcos.

No es conveniente guardar la primera vez los marcos con la opción Guardar todo , ya que podemos equivocarnos al dar los nombres a los nuevos documentos.

Es preferible guardar cada documento uno por uno, a no ser que todos los marcos contengan alguna página ya existente, ya que en ese caso el único documento al que habrá que dar nombre será al que contiene el grupo de marcos.

Para guardar el documento que contiene el grupo de marcos, hay que seleccionarlo previamente.

Para guardar cada uno de los otros documentos, simplemente hay que situar el cursor en ellos antes de pulsar sobre Guardar .

8.5. Configurar marcos

Una vez seleccionado un marco a través del panel Marcos, pueden establecerse sus propiedades a través del inspector de propiedades.

• Cada marco tiene asignado un nombre, que puede cambiarse a través de Nombre de marco. El nombre no puede contener espacios en blanco.
• En Origen aparece el nombre del documento HTML que está contenido en el marco.
• En Bordes puede elegirse si aparecerá o no una línea separando el marco del resto de marcos. En el caso de que se muestre el borde, se puede especificar un color para éste a través de Color borde.
• Desplaz. indica si aparecerán o no las barras de desplazamiento cuando el documento del marco no pueda visualizarse completamente.
• Si la opción Mismo tamaño está activa, indica que los usuarios no podrán variar las medidas del marco desde el navegador.
• El Ancho del margen y el Alto del margen indican la separación que habrá entre el contenido del marco y sus bordes izquierdo-derecho y superior-inferior.

Si lo seleccionado es todo el conjunto de marcos (la página de marcos), el inspector de propiedades es algo diferente.

En Bordes puede elegirse si aparecerá o no una línea separando los marcos entre sí y puede especificarse un color para este a través de Color del borde. También es posible establecer un grosor para el borde a través de Ancho.

El campo Columna (o Fila dependiendo del marco elegido en Selección Fila Col.) sirve para especificar el tamaño del marco, que puede ser en Píxeles, Porcentaje (de la ventana) o Relativo (proporcional al resto de marcos).

Normalmente utilizarás dos marcos, uno de ellos con tamaño en Píxeles, que será el que contenga la barra de navegación, y el otro marco con tamaño Relativo, para que se ajuste a la ventana del navegador.

Seleccionar marcos

Para seleccionar los marcos del documento es necesario dirigirse al panel Marcos, que puede abrirse a través del menú Ventana. También puedes abrir el panel Marcos pulsando la combinación de teclas Mayúsculas + F2.

En el panel Marcos aparecen los marcos que contiene el documento de marcos, y se puede pasar de uno a otro pulsando sobre ellos en el panel. También puede seleccionarse la página de marcos pulsando sobre el borde que rodea a los marcos (el que aparece más grueso y en relieve en la imagen).

No es necesario seleccionar los marcos para editar los documentos que éstos contengan.

Sí es necesario seleccionar los marcos para especificar las propiedades específicas de cada uno de ellos.

8.4. Guardar

Todos los documentos que contienen marcos tienen que tener una página en cada uno de ellos. Es por esto que al crear algún marco, se cargan páginas nuevas por defecto en cada uno de ellos, a excepción del marco que contiene la página original.

Estas páginas nuevas pueden ser posteriormente sustituidas por otras ya existentes, como ya veremos más adelante.

Es necesario guardar la página que contiene el grupo de marcos, así como cada una de las páginas que están incluidas en sus marcos.

No es conveniente guardar la primera vez los marcos con la opción Guardar todo , ya que podemos equivocarnos al dar los nombres a los nuevos documentos.

Es preferible guardar cada documento uno por uno, a no ser que todos los marcos contengan alguna página ya existente, ya que en ese caso el único documento al que habrá que dar nombre será al que contiene el grupo de marcos.

Para guardar el documento que contiene el grupo de marcos, hay que seleccionarlo previamente.

Para guardar cada uno de los otros documentos, simplemente hay que situar el cursor en ellos antes de pulsar sobre Guardar .

8.5. Configurar marcos

Una vez seleccionado un marco a través del panel Marcos, pueden establecerse sus propiedades a través del inspector de propiedades.

• Cada marco tiene asignado un nombre, que puede cambiarse a través de Nombre de marco. El nombre no puede contener espacios en blanco.
• En Origen aparece el nombre del documento HTML que está contenido en el marco.
• En Bordes puede elegirse si aparecerá o no una línea separando el marco del resto de marcos. En el caso de que se muestre el borde, se puede especificar un color para éste a través de Color borde.
• Desplaz. indica si aparecerán o no las barras de desplazamiento cuando el documento del marco no pueda visualizarse completamente.
• Si la opción Mismo tamaño está activa, indica que los usuarios no podrán variar las medidas del marco desde el navegador.
• El Ancho del margen y el Alto del margen indican la separación que habrá entre el contenido del marco y sus bordes izquierdo-derecho y superior-inferior.

Si lo seleccionado es todo el conjunto de marcos (la página de marcos), el inspector de propiedades es algo diferente.

En Bordes puede elegirse si aparecerá o no una línea separando los marcos entre sí y puede especificarse un color para este a través de Color del borde. También es posible establecer un grosor para el borde a través de Ancho.

El campo Columna (o Fila dependiendo del marco elegido en Selección Fila Col.) sirve para especificar el tamaño del marco, que puede ser en Píxeles, Porcentaje (de la ventana) o Relativo (proporcional al resto de marcos).

Normalmente utilizarás dos marcos, uno de ellos con tamaño en Píxeles, que será el que contenga la barra de navegación, y el otro marco con tamaño Relativo, para que se ajuste a la ventana del navegador.

IMAGENES

Imágenes (I)

En este tema vamos a ver cómo insertar imágenes en un documento. También veremos cómo crear algunas imágenes especiales, como es el caso de los Rollovers y los botones flash, que ayudan a mejorar la apariencia de nuestras páginas.

6.1. Introducción

Las imágenes son un aspecto muy importante de la web. Ya sea como complementos a la información o parte del diseño, la hacen mucho más atractiva a ojos del visitante. No obstante, no conviene abusar, ya que aumentarán mucho el tamaño final de la web.

Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web. Esta información puedes consultarla aquí .

6.2. Insertar una imagen

Para insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen. Después de esto, ya es posible seleccionar una imagen a través de la nueva ventana. Cuando te acostumbres, te será más cómodo acceder con la combinación de teclas Ctrl + Alt + I.

En Relativa a es posible especificar si la imagen será relativa al documento o a la carpeta raíz del sitio. Es preferible que sea relativa al Documento, ya que si cambiamos la página de carpeta, lo habitual es cambiar también sus imágenes.

Lo mismo ocurre cuando se selecciona un documento para crear un vínculo.

La ruta en la que se encuentra la imagen aparecerá representada de una u otra forma en el campo URL de la ventana y en el campo Origen del inspector de propiedades, dependiendo de si ha sido insertada como relativa a la carpeta raíz del sitio o relativa al documento.

Por ejemplo, imagina que dentro de la carpeta raíz del sitio (la carpeta del sitio) se encuentran la carpeta imagenes y el documento en el que deseamos insertar la imagen. Dicha imagen, llamada aulaclic.jpg, se encuentra dentro de la carpeta imagenes.

En el caso de insertar la imagen como relativa al Documento la ruta sería:

imagenes/aulaclic.jpg

Mientras que en el caso de ser insertada como relativa a la Raíz del sitio la ruta sería:

/imagenes/aulaclic.jpg

Ocurre lo mismo que cuando se crea un hipervínculo a un documento relativo al documento o a la carpeta raíz del sitio.

Otra forma de insertar una imagen, es arrastrarla directamente desde el panel Archivos sobre el documento.

Si insertamos una imagen y luego la borramos, la movemos, o escribimos mal su nombre, en Dreamweaver aparecerá así indicando que el enlace al archivo está roto.

En ese caso, la imagen que aparecerá en el navegador será similar a ésta:.

Aparece un recuadro blanco con una X roja, junto con el nombre de la imagen o el contenido del campo Alt del inspector de propiedades, que explicaremos a continuación.

Propiedades de una imagen

Cuando seleccionamos una imagen el Inspector de propiedades muestra esta apariencia:

Desde aquí podremos establecer distintos atributos a la imagen:

• Ancho y Alto son las dimensiones de la imagen. Dreamweaver las pondrá directamente.
• Como pasaba con el texto, podemos crear un hiperenlace en la imagen escribiendo la dirección en el campo Vínculo, y decidir en qué ventana se abre con el campo Destino. Podemos hacer que cada zona de la imagen tenga un vínculo distinto, creando un Mapa de imagen. Puedes ver cómo en este aquí .
• En el campo Alt escribimos el texto que remplazará a la imagen si ésta no puede mostrarse. Es un atributo muy importante que deberíamos incluir siempre para hacer páginas accesibles. Por ejemplo, el texto que se escribe será leído por los programas lectores para invidentes. Si lo que queremos es mostrar un ayuda contextual cuando el usuario tenga el cursor sobre la imagen, debemos de empelar el atributo title. No podemos insertarlo desde el panel, tenemos que hacerlo desde el código fuente con el formato title="Texto a mostrar". Internet Explorer muestra Alt como ayuda contextual cuando la imagen no lleva title, pero el resto de navegadores no lo harán, respetando el estándar.
• En Clase podrás asignarle un estilo que hayas creado anteriormente, así podrás darle alineación, bordes e incluso tamaño con sólo un clic.

Existen otros atributos que afectan al diseño de la imagen. Como ya hemos explicado, la tendencia actual es utilizar CSS para todo lo relativo a diseño, por lo que estos atributos están cayendo en desuso y no deberían de ser empleados:

• Puedes asignarle un grosor de borde desde el campo Borde.
• Puedes seleccionar su alineación con respecto al texto desde el campo Alinear.
• Por último las opciones Espacio V y Espacio H te serán muy útiles para separar la imagen del texto y así no queden demasiado pegadas a él. Estos campos indican el espacio vertical y horizontal respectivamente entre la imagen y el texto.

Además, encontramos algunos controles de Edición: El botón nos permite optimizar la imagen desde Dreamweaver, cambiando el formato o creando transparencias como puedes ver aquí . Por otro lado, el icono nos permite editar la imagen con un programa externo, como Photoshop o Paint. Puedes ver cómo cambiar el programa de edición aquí .

Cambiar el tamaño de una imagen

Dentro de Dreamweaver puede modificarse el tamaño de las imágenes.

Por un lado, podemos cambiar el tamaño con el que se ve una imagen, pero dicho cambio de tamaño no se aplica directamente sobre el archivo de imagen, que conservará el tamaño original.

Es muy probable que la imagen resultante no sea de buena calidad, en comparación de cómo podría quedar modificándola desde un editor externo, como Fireworks, Photoshop, etc..

Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa el icono de Dreamweaver y modificamos su tamaño de varias formas diferentes:

Tamaño original

Con tamaño modificado

El resultado puede ser más o menos satisfactorio, dependiendo del navegador que es el que aplica realmente el reescalado, pero en ocasiones puede resultar útil modificar el tamaño de algunas imágenes aunque esto implique perder calidad.

Existen dos formas de modificar el tamaño.

Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero alguno de los recuadros negros que aparecen alrededor de la imagen.

La otra es a través de inspector de propiedades, cambiando los campos Ancho o Alto. Estos campos aparecerán en el inspector cuando esté seleccionada alguna imagen.

Si estos campos no contienen el tamaño original de la imagen, el valor aparecerá resaltado en negrita y aparecerá a la derecha una flecha circular que permite volver al tamaño original haciendo clic sobre ella.

Como hemos comentado, este cambio de tamaño se produce alterando los atributos de anchura y altura, pero no cambiando el tamaño real del archivo, por lo que el usuario deberá descargarse el archivo completo con su tamaño original.

Por ejemplo, si tenemos una fotografía de nuestra cámara de fotos, de un tamaño grande (por ejemplo 2592x1944px), y queremos mostrar una miniatura (por ejemplo, de 200x150px) esta sería una mala solución, porque el usuario se estaría descargando el archivo completo, y no una miniatura real que ocuparía mucho menos tamaño.

Dreamweaver también nos permite cambiar el tamaño real del archivo de imagen.

Para hacerlo, seleccionamos la imagen, y pulsamos en el icono del Inspector de propiedades. Se abrirá la ventana Presentación preliminar de la imagen. Nos fijamos en la pestaña Archivo.

En la sección escala, podemos establecer un porcentaje del tamaño original.

El nuevo tamaño se mostrará en An (ancho) y Al (alto). También podemos introducir directamente el nuevo tamaño.

Incluso podemos recortar un área de la imagen, seleccionando Exportar área, y seleccionando el área de la imagen en la previsualización de la derecha (no se ve en la imagen anterior).

Cuando lo tengamos, pulsamos Aceptar.

En este caso, si hemos alterado físicamente el archivo.

El resultado es bastante bueno, aunque siempre será mejor con herramientas especializadas, como Photoshop o GIMP.

Imagen de sustitución. Rollover

Un rollover es una imagen que cambia por otra cuando el puntero se sitúa sobre ella. Este tipo de imagen suele utilizarse en los menús o en los botones para desplazarnos a través de distintas páginas.

Veamos un ejemplo de rollover. Partiendo de las siguientes imágenes

Hemos creado el siguiente rollover. Sitúa el cursor sobre él para ver qué es lo que ocurre.

Para insertar un rollover hay que dirigirse al menú Insertar, Objetos de Imagen, a la opción Imagen de sustitución. En la nueva ventana hay que especificar la imagen original y la de sustitución.

Es preferible que la opción Carga previa de imagen de sustitución esté activa. Si se activa, la imagen de sustitución se carga cuando se carga la página, de este modo se evitan las demoras debidas a la descarga de la imagen cuando llega el momento de que aparezca.

El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o el que aparecerá en lugar de la imagen en el caso de que por algún motivo ésta no pueda ser mostrada en el navegador.

El texto alternativo puede asignarse a todas las imágenes, no sólo a los rollovers. Puede hacerse a través del campo Alt del inspector de propiedades de la imagen seleccionada.

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.

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 .

6.7. Objetos inteligentes

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 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 . 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 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: . 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 Actualizar desde origen.