07-Caracteristicas de Interactividad

Universidad Nacional del Litoral
Facultad de Ingeniería y Ciencias Hídricas

Departamento de Informática
Taller de Diseño Web
Características de interactividad.
© 2003
Hugo Minni
Unidad 7
Características de interactividad.
En esta guía de estudio utilizaremos una característica de Dreamweaver MX

denominada behaviors (comportamientos). Dreamweaver utiliza estos comportamientos para
crear rollovers, crear nuevas ventanas de browser y definir menúes. Pero antes de continuar
necesitamos definir algunos términos y conceptos nuevos:
Nuevo concepto:
Rollover
Un rollover es una transformación (generalmente cambio de color o forma) de una imagen

(generalmente un botón o hiperlink) que se desencadena a partir de la acción del usuario de
mover el puntero del mouse sobre la imagen.
El efecto de rollover requiere de la programación de piezas de código (generalmente
denominados scripts) en un lenguaje denominado JavaScript. Afortunadamente, Dreamweaver
MX incorpora ya este comportamiento, lo cual nos permite definir rollovers sin necesidad de
escribir código HTML o JavaScript
Una Imagen rollover es una imagen que cambia su color o su forma cuando el usuario mueve el
puntero del mouse sobre ella.
Nuevo concepto:
Behavior
Un behavior es una función, normalmente escrita en un lenguaje llamado JavaScript, que

permite que una imagen sea reemplazada por otra cuando ocurre un evento especificado. El
efecto es aplicado mayormente a botones de navegación pero posee muchas otras aplicaciones.
Los behaviors permiten agregar interactividad a nuestras páginas, permitiendo a los usuarios
modificar o controlar la información que visualizan.
Se puede especificar más de un evento que dispare un mismo behavior.

Un evento puede disparar varias acciones.
Dreamweaver incluye varias acciones behavior predefinidas.
Si poseemos conocimientos de JavaScript, podemos crear nuestros propios behaviors.
FICH - UNL Taller de Diseño Web. Tema 7. Pág. 2 de 44.

Archivos necesarios para realizar la Guía de estudio
Archivos de medios:
Lesson_05_Behaviors/Images/...(todos los archivos)
Archivos de inicio:
Lesson_05_Behaviors/acetylene.html
Lesson_05_Behaviors/architecture.html
Lesson_05_Behaviors/fuel.html
Lesson_05_Behaviors/light_sources.html
Lesson_05_Behaviors/lime.html
Lesson_05_Behaviors/location.html
Lesson_05_Behaviors/markings_layers.html
Lesson_05_Behaviors/markings_tables.html
Lesson_05_Behaviors/oxyhydrogens.html
Lesson_05_Behaviors/photovoltaics.html
Lesson_05_Behaviors/Text/...(todos los archivos)
Proyecto terminado:
Lesson_05_Behaviors/Completed/...(todos los archivos)
Insertar una imagen rollover
Dreamweaver permite definir rollovers automáticamente a través de uno de sus behaviors

predefinidos.
1) Cree un nuevo documento y guárdelo como local_history.html en la carpeta

Lesson_05_Behaviors. Titule la página Luces de la Costa: Historia: Ubicaciones.
Establezca un color de fondo blanco para la página.
A continuación definiremos un rollover en esta página.
2) Haga click en la ventana del documento para ubicar el puntero de inserción al principio de la
página.
En la barra Insert, en la ficha Common, haga click en el botón Rollover Image ( ).
Aparece la caja de diálogo Insert Rollover Image:

Esta caja de diálogo nos solicita toda la información que Dreamweaver MX necesita
para insertar una imagen y convertirla en rollover.
Este es el método más recomendable para cuando todavía no hemos ubicado
imágenes en la página, ya que nos permite insertar la imagen y definirla como rollover al
mismo tiempo. Más adelante crearemos también rollovers para imágenes ya ubicadas en la
página.
Consejo
Alternativamente podemos elegir Insert/Interactive Images/Rollover Image para acceder a la
misma caja de diálogo.
3) En la caja de texto Image Name, tipee local para el nombre de la imagen que poseerá el
rollover.
Si no proporcionamos un nombre a nuestras imágenes rollover, Dreamweaver les asigna

nombres genéricos automáticamente en orden numérico: Image1, Image2, etc.
Obviamente, es recomendable dar a las imágenes rollover nombres significativos que indiquen
claramente que función cumplen. También debemos tener cuidado en no utilizar ni espacios ni
caracteres especiales cuando definimos este tipo de nombres.
4) Haga click en el botón Browse junto a la caja de texto Original Image y busque el archivo
local_off.gif en la carpeta Lesson_05_Behaviors/Images.
Esta imagen es la que aparecerá en la página antes de que el usuario pase por encima de
ella con el puntero del mouse.
5) Haga click en el botón Browse junto a la caja de texto Rollover Image y busque el archivo
local_on.gif en la carpeta Lesson_05_Behaviors/Images.
Esta imagen es la que aparecerá en la página después de que el usuario pase por encima de
ella con el puntero del mouse.
O sea, cuando esta página sea visualizada en el browser, el visitante verá inicialmente la
imagen local_off.gif. Cuando el usuario pase con el puntero del mouse por sobre
local_off.gif, la imagen será reemplazada por la imagen local_on.gif.

Consejo
Cuando definimos un par de gráficos que intercambiarán sus roles a partir de un behavior, es
indispensable que definamos para ambas imágenes exactamente las mismas dimensiones. Si no
lo hacemos así, la segunda imagen será redimensionada al tamaño de la primera. El
redimensionado puede distorsionar la segunda imagen.
6) En la caja de texto Alternate Text tipee Ubicaciones.

Haga click en el botón Browse junto a la caja de texto When clicked, Go to URL y busque el
archivo location.html en la carpeta Lesson_05_Behaviors.
Nuevo concepto:
Precarga de imágenes
Una práctica habitual en la WWW es la precarga de imágenes junto con el resto de la página
aún cuando no esté previsto su visualización “inmediata”.
Por ejemplo, en el caso de los rollovers, es deseable que la imagen secundaria sea cargada
inicialmente con el contenido de la página aún cuando no vaya a estar visible hasta que ocurra el
evento que las intercambia.
El hecho de cargar las imágenes que reemplazarán a las originales con el resto de la página
permitirá que los rollovers se produzcan más rápidamente, ya que se elimina cualquier demora
provocada por la descarga en el momento en que el usuario pasa por encima de la imagen.
Sin embargo, la precarga de imágenes no es útil solo en el caso de los rollovers, sino que es una
práctica ampliamente utilizada en cualquier sitio que haga uso intensivo de gráficos.
7) Asegúrese de dejar activada la casilla de verificación Preload Rollover Image. Esta opción le
indica a Dreamweaver que deseamos que la imagen secundaria sea cargada inicialmente con el
resto de la página. Esto evitará demoras al usuario y redundará en una mejor interacción de
nuestra página.
Haga click en OK. La imagen original se muestra en la página:

Esta imagen hará las veces de hiperlink a la página location.html
La URL elegida en la caja de texto When clicked, Go to URL aparece en el Inspector de
Propiedades, en la caja de texto Link cuando la imagen es seleccionada.
Nuevo concepto:
Links nulos
Un link nulo se representa en HTML como un signo numeral (#). Los links nulos se pueden
ubicar en cualquier lugar de una página en donde pueda ubicarse un link a una URL.
Se utilizan para indicar al browser que deseamos que aparezca la mano “típica” de los links para
el elemento que posee asociada la URL pero, por otro lado, queremos que cuando el usuario
haga click sobre el elemento, el browser no navegue, sino que permanezca en la página
actual.
Ya tuvimos el primer contacto con los links nulos en la Guía de estudio Nro. 4, cuando
definimos mapas de imágenes.
Si en la caja de diálogo Insert Rollover Image no hubiésemos definido una URL en la caja de
texto When Clicked, Go To URL, Dreamweaver hubiese ubicado un link nulo (signo #) en la
caja de texto Link en el Inspector de Propiedades.
El link nulo, en este caso, haría que el browser permaneciese en la misma página cuando la
imagen rollover fuese clickeada en el browser.
Si en cambio reemplazamos el signo numeral por una URL (como en este caso), el browser
deberá navegar a esa URL cuando el usuario haga click sobre la imagen rollover.
Lo que no debemos hacer es dejar la caja de texto vacía (sin URL y sin signo numeral), ya que
hacerlo provoca que Dreamweaver elimine el código JavaScript que crea el rollover.
7) Guarde su trabajo y pruébelo en el browser.

Cierre el documento.

Consejo
Cuando definimos nuestros gráficos debemos cuidar definirlos lo más reducidos en tamaño
posible. Siempre hay que tener en cuenta que, cuando utilizamos rollovers, estamos
mostrando dos imágenes para el mismo botón. En otras palabras, el tiempo de descarga
necesario para mostrar el botón será el doble que para un botón común.
Agregar un behavior a una imagen existente
A continuación utilizaremos un método diferente: definiremos rollovers para imágenes

ya ubicadas previamente en la página. El resultado es el mismo: una imagen conmutará para
mostrar otra diferente cuando el usuario pase con el puntero del mouse por encima de ella.
Cuando usamos este método, utilizamos el panel Behaviors.

Cuando estamos creando nuestras páginas Web, si ya hemos ubicado las imágenes
originales en la página debemos usar este método. Si no la hemos ubicado aún, debemos utilizar
el método visto en el ejemplo anterior, para establecer tanto la imagen original como la imagen
rollover ambas en un único paso.
8) Abra el archivo architecture.html ubicado en la carpeta Lesson_05_Behaviors.

El archivo contiene tablas y gráficos ya ubicados de antemano.
9) En el Inspector de Propiedades, utilice la caja de texto image-name para proporcionar un

nombre a las tres imágenes cerca del pie de la página: styles_off.gif debe llamarse styles,
markings_off.gif debe llamarse markings, y construction_off.gif debe llamarse construction.
Siempre es recomendable proporcionar a las imágenes un nombre que tenga que ver con su
contenido o función. Esto facilita relacionar los nombres con los archivos de imagen.

10) Seleccione la imagen styles. Abra el grupo de
paneles Design y haga click en la ficha Behaviors. Se
abrirá el panel Behaviors.
Consejo
También puede elegir Window/Behaviors para abrir el
panel Behaviors.
11) En el panel Behaviors, haga click en el botón . Se muestran una serie de acciones:
Acciones
Una acción es algo que sucede como resultado de una interacción del usuario. Cuando
seleccionamos una acción de esta lista, Dreamweaver agrega esa acción a la lista de acciones en
el panel Behaviors.
Como podemos observar, algunas acciones están activadas y otras no. La lista desplegable de
acciones muestra las acciones permitidas y no permitidas para el elemento actualmente
seleccionado en la ventana del documento.
Dreamweaver agrega también un evento (o eventos) apropiado automáticamente para la acción

que seleccionemos.
El evento es el que provoca que ocurra la acción. Un evento puede ser, por ejemplo, el usuario
pasando con el puntero del mouse por encima de una imagen, o haciendo click a un botón.
Para rollovers, Dreamweaver usa por omisión un evento JavaScript denominado onMouseOver.
Aprenderemos a modificar estos eventos más adelante.
12) Elija la acción Swap Image.

Se abre la caja de diálogo Swap Image:
El behavior Swap Image es el que crea el efecto rollover que utilizamos en el ejemplo al
principio de esta guía (cuando el visitante pasa por sobre la imagen original con el puntero del
mouse, el behavior conmuta a una nueva imagen que reemplaza a la original).
13) En la caja de diálogo Swap Image, asegúrese que en la lista Images, esté seleccionada la
imagen styles. La imagen será listada como styles. Este es el nombre que definimos en el paso 9
para la imagen seleccionada y para la cual agregamos una acción en el paso 12.
Seleccionando la imagen en la lista estaremos indicando que cuando el usuario pase encima de
la imagen, ésta debe será reemplazada por una imagen rollover. Seleccionaremos la imagen
rollover en el próximo paso.
Nota
Si seleccionamos una imagen diferente de la lista, esa imagen sería la reemplazada pos la
imagen rollover cuando el usuario pasara por encima de la imagen styles. Haremos esto en un
próximo ejercicio.
Las imágenes sin nombre aparecen en la caja de diálogo Swap Image como “unnamed <img>“.
Por ello es que es tan importante otorgar un nombre apropiado a nuestras imágenes.
Se complica trabajar con behaviors si la imagen no posee un nombre claramente definido. En
una lista llena de imágenes sin nombre puede tornarse difícil distinguir con cuales imágenes se
va a trabajar.

Nuevo concepto:
Estados “on” y “off” de una imagen
En la jerga del diseño WWW, la apariencia original de una imagen es conocida como el
estado “off”, y la apariencia del rollover cuando el usuario mueve el puntero sobre la imagen y
la imagen cambia es conocida como estado “on”.
Las imágenes usadas para el estado “on” se muestran frecuentemente como un botón
que ha sido presionado o una palabra que ha sido resaltada. Esto ayuda a indicar al visitante que
el objeto es un elemento activo o linkeado.
Todos las imágenes rollover que utilizaremos en este ejercicio se encuentran en la carpeta
Images, y los nombres de los archivos de imagen rollover poseen todos el sufijo _on.
La caja de texto Set source To define cual será la imagen rollover.
14) Haga click en el botón Browse próximo a la caja de texto Set source To y seleccione la
imagen styles_on.gif en la carpeta Images.
Luego de elegida la imagen rollover, la caja de diálogo Swap Image muestra un * junto al
nombre de la imagen original:
15) Asegúrese que las casillas de verificación Preload Images y Restore Images OnMouseOut
estén ambas activadas. Haga click en OK.
La opción Preload Images está activada por omisión y, como se explicó antes, es altamente
recomendada para mejorar la respuesta en la interacción con el usuario.
La opción Restore Images onMouseOut también está activada por omisión y es también
recomendada. Esta opción hace que nuestras imágenes de reemplazo sean revertidas a las
imágenes originales cuando el usuario salga de encima de ellas.
Dreamweaver lista a OnMouseOut como una acción independiente en el panel Behavior.

16) Repita los pasos 10 a 15 para los botones Marking y Construction, usando como imágenes
rollover en la caja de texto Set Source To a las imágenes markings_on.gif y construction_on.gif.
Eliminar un behavior
Si necesitamos eliminar un behavior debemos hacer lo siguiente:
- En la ventana del documento, seleccionar el

objeto al cual le asociamos un behavior. (La
imagen, en este caso). Una vez que el objeto está
seleccionado, en el grupo de paneles Design, en el
panel Behaviors, podemos ver la lista de acciones
asociadas al objeto en cuestión:
- En el panel Behaviors, seleccionar con el mouse la acción que se quiere eliminar.
- En el panel Behaviors, hacer click en el botón (o presionar <Delete>)
Hasta aquí hemos definido tres imágenes con rollovers asociados, pero no hemos definido aún a
donde deben linkear cuando sean clickeadas con el mouse.
Por esta razón, cuando seleccionamos las imágenes en la ventana del documento, el Inspector de
Propiedades, en la caja de texto Link muestra el texto javascript:;.
No debemos eliminar este texto, ya que es necesario para que el rollover funcione cuando aún
no se ha definido un link.

Las imágenes cambian cuando pasa por encima de ellas.

El próximo ejercicio haremos que se produzcan dos intercambios de imágenes para un único
evento de usuario.
Intercambiar múltiples imágenes ante un único evento de usuario
Es posible hacer que varias imágenes sean intercambiadas simultáneamente (de su

imagen original a su imagen rollover) como resultado de un único evento.
Podemos pretender, por ejemplo, que, cuando el usuario pase por encima de un botón,
dos imágenes sean reemplazadas de su imagen original a su imagen rollover.
En este ejercicio aplicaremos un behavior a la imagen styles. Este behavior hará que,
cuando el usuario pase por encima del botón styles, la imagen spacer sea reemplazada por una
imagen con el texto Styles.
Al mismo tiempo, el botón styles seguirá cambiando de su imagen original a la imagen rollover
tal como lo definimos en el ejercicio anterior.
Para que el rollover adicional tenga lugar usando el mismo evento, debemos editar la acción
Swap Image existente y definir el intercambio de imagen adicional. Eso es lo que haremos en el
siguiente ejercicio.

18) En el documento architecture.htm,
seleccione el botón styles.
En el grupo de paneles Design, en el panel
Behaviors, podemos ver la lista de acciones que
definimos para el botón styles:
19) En el panel Behaviors, haga doble click sobre la acción Swap Image definida en el ejercicio
anterior.
(Asegúrese de hacer doble click sobre la acción Swap Image, y no sobre la acción Swap Image
Restore)
Se abre la caja de diálogo Swap Image.
20) En la caja de diálogo

Swap Image, seleccione la
imagen denominada
“StylesText”.
Haga click en el botón

Browse a la derecha de la caja
de texto Set Source To y elija
la imagen styles_text_on.gif
ubicada en la carpeta
Lesson_05_Behaviors/Images
.
La imagen StylesText es un rectángulo blanco ubicado debajo de la imagen styles.

Lo que estamos haciendo es seleccionar esta imagen en blanco para que sea reemplazada con la
imagen StylesText, que mostrará un texto informativo al usuario.

En la caja de diálogo Swap
Image, observe la lista Images.
Dreamweaver identifica con
un “*” a las imágenes que
poseen asociada una imagen
rollover.
La imagen styles, por ejemplo,

posee un asterisco ya que
definimos un rollover para ella
en el ejercicio anterior.
Ahora la imagen StylesText

también posee un asterisco ya
que le hemos asignado un rollover.
Revisando esta lista podemos identificar rápidamente que imágenes serán intercambiadas de sus
imágenes originales a imágenes rollover.
21) Haga click en OK para cerrar la caja de diálogo Swap Image.
22) Repita el mismo

proceso de los pasos 18 y
21 para los botones
Markings y Construction.
Las imágenes en blanco
poseen los nombres
MarkingText y
ConstructionText
respectivamente.
Las imágenes rollover
correspondientes poseen el
sufijo _on y están ubicadas
en la carpeta Images.

Intercambiar múltiples imágenes puede ser útil para proporcionar al usuario información
adicional, pero tenga en cuenta que demasiadas imágenes extra siendo intercambiadas ante una
misma acción pueden degradar la performance del browser.

Cuando nos movemos con el puntero del mouse sobre cada botón, la imagen del botón cambia,
pero cambia también la imagen de descripción textual correspondiente.
Cuando nos movemos fuera del botón, tanto el botón como su imagen de descripción textual son
restablecidos a sus imágenes originales.

Agregar behaviors a áreas clickeables de mapas de imágenes
Desplazar el puntero del mouse sobre cualquier parte de una imagen rollover estándar
invocará el código JavaScript asociado y provocará el intercambio de imágenes.
Muchas veces, sin embargo, se desea que el rollover ocurra solo cuando el usuario pasa
por encima de una cierta parte de la imagen.
En estos casos se pueden usar mapas de imágenes para definir estas áreas clickeables.
24) En la página architecture.htm, en el Inspector de Propiedades, utilice la caja de texto

image-name para dar un nombre a todas las imágenes de navegación ubicadas debajo de la
cabecera Luces de la Costa:
A nav_history.gif se le debe dar el nombre history

A nav_technology.gif se le debe dar el nombre technology
A nav_lights.gif se le debe dar el nombre lights
A nav_resources.gif se le debe dar el nombre resources
A nav_culture.gif se le debe dar el nombre culture.
Si definiéramos rollovers estándar para estas imágenes de navegación, las áreas entre cada una
de las palabras provocaría también el intercambio de imágenes.
Si en cambio usamos mapas de imágenes y definimos áreas clickeables sobre la imagen,
podemos controlar mejor sobre que área deseamos se produzca el rollover.
25) En el Inspector de Propiedades, utilice la herramienta (Rectangular Hotspot Tool) para

dibujar una área clickeable rectangular alrededor de la palabra history en la imagen
nav_history.gif.
El área clickeable hará que solo sea clickeable la palabra history en la imagen nav_history.gif.

26) En el Inspector de Propiedades, seleccione la herramienta cursor ( ) y haga click en el
área clickeable recién definida para seleccionarla.
Ahora vamos a aplicar un behavior de tipo swap image al área clickeable que acabamos de
definir.
27) Con el área clickeable seleccionada trabajaremos en el panel Behaviors.

En el panel Behaviors, y con el área clickeable seleccionada, haga click en el botón y
seleccione la acción Swap Image.
Se abre la caja de diálogo Swap Image.
28) En la caja de diálogo Swap

Image, asegúrese que en la lista
Images esté seleccionada la
imagen “history”.
Haga click en el botón Browse

junto a la caja de texto Set
Source To y ubique la imagen
nav_history_on.gif en la
carpeta Images.
Hemos seleccionado la imagen que reemplazará a la imagen nav_history.gif cuando se pase por
encima del área clickeable.
Debemos tener en cuenta que la imagen original completa será reemplazada, aún cuando el
usuario pase por encima de un área clickeable que representa solo una parte de la imagen
original.
29) Asegúrese que las casillas de verificación Preload Images y Restore Images onMouseOut
estén ambas activadas.
Haga click en OK.
La caja de diálogo se cierra y retornamos a la ventana del documento.

Si seleccionamos el área clickeable
definida, podemos ver, en el panel
Behaviors, las acciones que le hemos
asociado:
Si en cambio seleccionamos la imagen sobre la cual se ubicó el área clickeable, veremos que,
como es de esperar, no posee ninguna acción asociada.
30) Repita los pasos 25 a 29 para las imágenes technology, lights, resources y culture.
Las imágenes para el intercambio están indicadas con el sufijo _on. Por ejemplo,
nav_culture_on.gif.

Usar áreas clickeables asociadas a behaviors proporciona un control adicional sobre nuestras
imágenes, acciones y eventos.
Editar acciones y eventos
En Dreamweaver MX podemos editar acciones y eventos de varias maneras.

Podemos modificar el evento al cual está asociada una acción. También podemos
asociar varias acciones a un único evento.
También podemos modificar el orden en el cual ocurren las acciones.
Por ejemplo, Swap Image es una acción y onMouseOver el evento que corresponde al
behavior rollover.
A continuación agregaremos una acción que generará un mensaje emergente y seleccionaremos

el evento correspondiente.

32) En el documento architecture.htm, seleccione el
botón Markings.
En el panel Behaviors, haga click en el botón
para agregar una acción y elija la acción Popup
Message.
Se abre la caja de
diálogo Popup Message
33) El mensaje que se desea mostrar debe

escribirse en la caja de texto Message. Tipee
Características específicas que diferencian a
los faros.
Haga click en OK.
La acción Popup Message y el evento
correspondiente aparecen en el panel
Behaviors.

Ahora debemos indicarle a Dreamweaver que debe mostrar el mensaje emergente cuando el
usuario abandone el botón (aleje el puntero del mouse de encima del botón - evento
onMouseOut).
Nuevo concepto:
Compatibilidad entre browsers
No todos los browsers disponibles comercialmente soportan el mismo conjunto de

características. Las diferencias entre ellos se tornan más evidentes cuando pretendemos utilizar
características de interactividad más avanzadas.
Idealmente, nuestra página debería verse y actuar como deseamos en todos los browsers
disponibles. Esto generalmente es imposible, y debemos conformarnos con aplicar
características teniendo en mente que nuestra página se ejecutará preferentemente en un browser
o versión de browser.
34) En el panel Behaviors seleccione el evento

y, en la lista desplegable Events a la derecha del
evento, elija Show Events For > 4.0 and Later
Browsers.
Le estamos indicando a Dreamweaver que nos
permita elegir de entre los eventos que soportan
los browsers de las versiones 4.0 o superior.

35) En la lista desplegable Events seleccione
(onMouseOut).
Los eventos en la lista desplegable pueden diferir en dependencia de la acción y el tipo de

browser seleccionado.
La lista desplegable Events aparece solo cuando hemos seleccionado una combinación
acción/evento en la lista.
36) En el panel Behaviors, haga click en el

botón para mover el behavior Popup
Message al principio de la lista.
El browser ejecuta las acciones en el orden en el cual aparecen en la lista.

La flecha arriba mueve la acción hacia arriba en la lista. La flecha abajo mueve la acción hacia
abajo en la lista. Utilice estos botones para alterar el orden en el cual son ejecutadas las
acciones.
37) Guarde su trabajo y visualícelo en el browser.

Cuando abandonamos el botón markings, se despliega un mensaje emergente.
El comportamiento que hemos logrado para el botón markings es bastante complejo: cuando nos
acercamos con el puntero del mouse, dos imágenes son intercambiadas.
Cuando nos alejamos con el puntero del mouse, las dos imágenes son restablecidas a su estado
original, pero, además, ahora se despliega un mensaje emergente.
Definir un mensaje para la barra de estado
Los mensajes en la barra de estado permiten mostrar al navegante información extra,

generalmente acerca del destino de hiperlinks.
Estos mensajes se muestran al pie de la ventana del browser y reemplazan la visualización por
omisión (generalmente una URL o camino una página o sitio destino).
38) En el documento architecture.htm, seleccione la imagen styles.

En el panel Behaviors, haga click en el botón para agregar una acción y seleccione Set
Text/Set text of Status Bar.
Se abre la caja de diálogo Set Text of Status Bar.

El texto que se desea mostrar en la barra de estado debe escribirse en la caja de texto Message.
Escriba un mensaje cualquiera.
Cuando movemos el puntero del mouse por encima del botón styles, aparece en la barra de
estado del browser el mensaje por nosotros definido.
40) Cierre el archivo architecture.htm.
Detección del browser que utiliza el navegante
No todos los browsers soportan características tales como layers y animaciones.

Dreamweaver incorpora una acción Check Browser que nos permite detectar que browser está
utilizando el visitante a nuestro sitio.
Esta detección nos permite, por ejemplo, redireccionar, en función del browser del usuario, a,
por ejemplo, una página que proporcione características avanzadas que no se comportarían
correctamente en otros browsers.
Si, por ejemplo, nuestra página contiene layers, podemos crear una página estática sin las layers
o animaciones y luego redireccionar a los usuarios con los browsers adecuados (versión 4.0) a la
página con la animación.
Los usuarios con browsers más antiguos o con JavaScript desactivado permanecerán en la
página estática.
A continuación utilizaremos una página construida con tablas HTML y otra página similar pero
definida con layers. Agregaremos un behavior Check Browser y redireccionaremos a los
usuarios con browsers versión 4.0 a la página que utiliza layers.
41) Abra el archivo markings_tables.htm ubicado en la carpeta Lesson_05_Behaviors.

Esta página ha sido definida utilizando tablas y, por lo tanto se mostrará apropiadamente en la
mayoría de los browsers.
42) En el Selector de Etiquetas, seleccione la etiqueta <body> haciendo click sobre ella.
Vamos a asociar la acción de chequeo de browser a la etiqueta

<body>.
Esto nos permitirá redireccionar al usuario antes de que la
página se cargue.
<body> debe aparecer en la barra de título del panel Behaviors,
indicando que la etiqueta <body> está seleccionada.
43) En el panel Behaviors, haga click en el botón para agregar una acción y elija Check
Browser.
Se abre la caja de diálogo Check Browser:
44) Tanto para Netscape Navigator 4.0 como para Internet Explorer 4.0, elija Go to URL de la
lista desplegable apropiada.
Tanto para Netscape Navigator 4.0 como para Internet Explorer 4.0, elija Stay on This Page en
la lista desplegable Otherwise.
En la lista desplegable Other Browsers, seleccione Stay on This Page.

Vamos a redireccionar a otra página a los usuarios que posean browsers más modernos.
45) Haga click en el botón Browse junto a la caja de texto URL y ubique el archivo
marking_layers.html en la carpeta Lesson_05_Behaviors.
Esta será la página a la cual redireccionaremos a los usuarios con los browsers más modernos.
Esta página ha sido creada utilizando layers, una característica avanzada no soportada por todos
los browsers.

46) Haga click en OK.
En el panel Behaviors, la acción Check Browser

recién definida aparece asociada al evento onLoad.

Como Ud. posee instalado Internet Explorer 5.0 o superior, verá brevemente la página
marking_tables.html antes de ser redireccionado a la página marking_layers.html.
Puede cerrar el archivo.
Consejo
Es una buena práctica testear el comportamiento de nuestras páginas en diferentes versiones de
Netscape e Internet Explorer.
Abrir una nueva ventana del browser
A continuación definiremos un behavior que nos permita abrir una nueva ventana del
browser cuando una determinada página se carga.
Esta técnica se utiliza frecuentemente en sitios comerciales para visualizar propagandas,
ayudas al usuario o cualquier otra información.
Vale aclarar que podemos también abrir una nueva ventana del browser utilizando el
target _blank para cualquier link de los estudiados en la Guía de estudio Nro. 4. Sin embargo, en
estos casos no tendremos ningún control sobre los atributos de la nueva ventana.
Dreamweaver MX incorpora el behavior Open Broser Window, que nos permite un

control absoluto sobre el tamaño y los atributos (barra de desplazamiento, menúes, etc.) de la
ventana del browser a abrir.
Consejo
Siempre evalúe que sea necesaria una ventana extra antes de utilizar esta técnica en sus páginas.
Los usuarios generalmente se muestran molestos cuando se abren continuamente nuevas
ventanas mientras navegan por la Web.
48) Abra el archivo light_sources.htm ubicado en la carpeta Lesson_05_Behaviors.

49) Seleccione la palabra en negrilla lime cerca del final del primer párrafo.
En el Inspector de Propiedades, en la caja de texto Link, defina un link nulo para esta palabra.
Es preciso que definamos un link nulo ya que esta página debe permanecer en la ventana
principal del browser mientras se abre la segunda ventana.
Este link nulo nos permitirá a continuación asociar el behavior Open Browser Window a la
palabra.
50) Ubique el puntero de inserción en la palabra lime.

En el panel Behaviors, haga click en el botón para agregar una acción a la palabra.
Seleccione la acción Open Browse Window.
Se abre la caja de diálogo Open Browser Window:

51) Haga click en el botón Browse y localice el archivo lime.html. Este archivo es la página que
se cargará en la nueva ventana.
52) En la caja de texto Window Width, tipee 350 para definir el ancho de la nueva ventana.
En la caja de texto Window Height, tipee 100 para definir la altura de la nueva ventana.
Haga click en OK.
El ancho y el alto de las ventanas se elige generalmente en función del tamaño del contenido a
mostrar. Si Ud. simplemente muestra un “banner” de propaganda, seguramente ajustará el
tamaño de la ventana al tamaño de la imagen que constituye el banner.
Además del tamaño, podemos también establecer un cierto número de atributos para la ventana.
Los atributos aplicables a las nuevas ventanas son los siguientes:
Barra de herramientas de navegación Es la barra de botones del browser que incluye botones para ir hacia
atrás, hacia adelante y recargar un documento.
Deje la casilla de verificación desactivada para este ejercicio.
Barra de herramientas Location Es la fila del browser que incluye la barra de direcciones.
Barra de estado Es el área al pie de la ventana del browser en la cual aparecen mensajes
(como el tiempo restante de carga o la URL asociada a links)
Barra de menú Es el área de la ventana del browser donde aparecen los menúes File,
Edit, View, Go y Help.
Debe activar esta opción si desea que los usuarios puedan navegar desde
la nueva ventana.
Si no activa esta opción, los usuarios solo pueden cerrar o minimizar la
ventana.
Barras de desplazamiento Especifica que deben aparecer barras de desplazamiento si el contenido
se extiende más allá del área visible.
Si no se activa esta opción, no aparecen barras de desplazamiento.
Si está desactivada la opción Resize Handles también, los usuarios no
tienen manera de ver contenido que se extienda más allá del tamaño
original de la ventana.
Si este es el caso, debe asegurarse de que la ventana esté correctamente
dimensionada para el contenido que se desea mostrar.
Si la ventana es demasiado pequeña o demasiado grande y no posee
barras de desplazamiento, esto frustrará a los usuarios.
Manejadores de redimensionado Especifica que los usuarios pueden redimensionar la ventana, ya sea
arrastrando el borde de la misma o maximizándola.
Si no habilita esta opción, no estarán disponibles los controles de
redimensionado y el usuario no podrá arrastrar los bordes de la ventana.
Nombre de la ventana Es el nombre de la nueva ventana.
La ventana debe poseer un nombre si se desea que sea destino de algún
link o se desea controlarla con JavaScript.

54) Repita los pasos 49 a 52 para el resto de los términos en negrilla en la página.
Las páginas a invocar para el resto de los términos son oxyhydrogen.html, fuel.html,
acetylene.html y photovoltaics.html.
Crear un menú desplegable
El lenguaje JavaScript permite integrar a una página WWW menúes desplegables como
los que estamos acostumbrados a ver en las aplicaciones Windows.
Dreamweaver incorpora un behavior que nos permite definir este tipo de menúes. Estos
menúes, sin embargo, solo funcionan correctamente en las versiones 4.0 y superior de Netscape
Navigator e Internet Explorer.
55) Abra el documento architecture.htm.

Haga click sobre el área clickeable sobre la imagen history a fin de seleccionarla.
El área clickeable está seleccionada cuando se muestran manejadores de selección de color azul
alrededor del área definida.

Si el área clickeable está seleccionada, debe poder
observar dos acciones listadas para ella en el panel
Behaviors, correspondientes al rollover que creó
para la imagen anteriormente en esta misma guía.
56) En el panel Behaviors, haga click en el botón para asociar una acción al área
clickeable. Elija la acción Show Pop-up Menu.
Aparece la caja de diálogo Show Pop-Up Menu con la ficha Contents activa:

La ficha Contents nos permite definir las opciones que incluirá el menú desplegable.
En la caja de texto Text tipee Ubicación.

Haga click en el ícono junto a la caja de texto Link.
Ubique el archivo location.html y selecciónelo.
La opción Ubicación es agregada a la lista de opciones del menú. Para esta opción apuntaremos
al documento location.html.
57) Haga click en el botón para agregar una nueva opción.

En la caja de texto Text tipee Fuentes de Luz.
Haga click en el ícono junto a la caja de texto Link.
Ubique el archivo light_sources.html y selecciónelo.

Agregue una tercer opción al menú. Nómbrela Historia Local y linkéela al archivo
local_history.html.

Agregue una cuarta opción al menú. Nómbrela Marcas y linkéela al archivo
marking_layers.html.

Los nombres de las opciones del menú y las páginas correspondientes a las cuales apuntan
pueden ser editadas seleccionando un elemento en la lista y modificando el contenido de las
cajas de texto Text y Link de cada opción.
Consejo
Para eliminar una opción, selecciónela de la lista de opciones y haga click en el botón .
El orden de las opciones definidas para el menú puede ser reacomodado fácilmente con los
botones y .
58) En la lista de opciones del menú, seleccione Fuentes de Luz.

Haga click en el botón para mover la opción Fuentes de Luz al principio de la lista.
En la lista de opciones del menú, seleccione Ubicación.
Haga click en el botón para moverla al final de la lista.

Nota
Es posible crear sub-opciones para una opción determinada seleccionando la opción para la
cual se desea crear una sub-opción y haciendo click en el botón identar-elemento ( ).
El botón permite mover una sub-opción a un nivel superior.
59) En la caja de diálogo Show Pop-Up Menu, haga click en la ficha Appearance.

En la primer lista desplegable, seleccione Vertical Menu.
En la lista desplegable Font seleccione el conjunto de fuentes Verdana, Arial, Helvetica, sans-
serif.
En la caja de texto Size tipee 9.
No active ni itálica ni negrilla.
Elija alineación izquierda.

60) Utilice las cajas de color para definir los siguientes colores:
Up State Text: #999999 (gris)
Up State Cell: #000000 (negro)
Over State Text: #FFCC66 (amarillo)
Over State Cell: #000000 (negro)

61) Haga click en la ficha Advanced.

Las listas desplegables Cell Width y Cell Height deben estar establecidas a Automatic.
Establezca lo siguiente:
Cell Padding: 3
Cell Spacing: 0
Text Indent: 0
Menu Delay: 1000
Active la casilla de verificación Show Borders.
Establezca el borde a 0.
Establezca el color del borde a #666666 (gris), el color de sombra (Shadow) a #333333 (gris
oscuro) y el color de resaltado a #FFFFFF.
La opción Menu Delay permite definir el tiempo en que demora en desaparecer el menú cuando
el usuario lo abandona.

Como dejamos activada la casilla de verificación Show Borders pero establecimos el tamaño del
borde a 0¸ desactivamos los bordes externos a la vez que dejamos finas líneas separando las
opciones del menú.
62) Haga click en la ficha Position.

Seleccione el segundo botón Menu Position.
Establezca:
- Coordenada X = 5
- Coordenada Y = 26.
Asegúrese que esté activada la casilla de verificación Hide Menu on onMouseOut event.

Pruebe el funcionamiento del menú definido. Cuando pasamos con el puntero del mouse por
encima de la imagen de navegación history se despliegan las opciones definidas.
La apariencia y posición que definimos para el menú hacen que el mismo se integre
correctamente al resto de la barra de navegación.

Nota
Cuando inserta un menú desplegable, Dreamweaver MX crea un archivo JavaScript externo
(con extensión .js), normalmente llamado mm_menu.js. No elimine este archivo, ya que es
necesario para que el menú funcione.
Que hemos aprendido
¡Felicitaciones!. Hemos llegado al final de la última guía de estudio de la materia. El

siguiente es un resumen de lo que hemos aprendido hasta aquí. Hemos:
- Definido rollovers.
- Asociado múltiples behaviors a una acción de usuario, haciendo que más de una imagen en el
documento sean intercambiadas cuando el usuario efectúa un mouse over sobre un elemento.
- Aprendido a editar behaviors eligiendo diferentes eventos y agregando acciones.
- Creado un mensaje en la barra de estado.
- Utilizado el behavior Check Browser para redireccionar usuarios a diferentes páginas en base a
los browsers y versiones por ellos utilizadas.
- Utilizado un behavior para hacer que se abra una nueva ventana del browser mientras se carga
una página.
- Creado un menú desplegable con varias opciones.

07-Caracteristicas de Interactividad

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

07-Caracteristicas de Interactividad

Cargado por

Copyright:

Formatos disponibles

Universidad Nacional del Litoral

Facultad de Ingeniería y Ciencias Hídricas

Taller de Diseño Web

En esta guía de estudio utilizaremos una característica de Dreamweaver MX

Un rollover es una transformación (generalmente cambio de color o forma) de una imagen

Un behavior es una función, normalmente escrita en un lenguaje llamado JavaScript, que

Se puede especificar más de un evento que dispare un mismo behavior.

FICH - UNL Taller de Diseño Web. Tema 7. Pág. 2 de 44.

Insertar una imagen rollover

Dreamweaver permite definir rollovers automáticamente a través de uno de sus behaviors

1) Cree un nuevo documento y guárdelo como local_history.html en la carpeta

A continuación definiremos un rollover en esta página.

Aparece la caja de diálogo Insert Rollover Image:

FICH - UNL Taller de Diseño Web. Tema 7. Pág. 3 de 44.

Si no proporcionamos un nombre a nuestras imágenes rollover, Dreamweaver les asigna

FICH - UNL Taller de Diseño Web. Tema 7. Pág. 4 de 44.

6) En la caja de texto Alternate Text tipee Ubicaciones.

Haga click en OK. La imagen original se muestra en la página:

FICH - UNL Taller de Diseño Web. Tema 7. Pág. 5 de 44.

7) Guarde su trabajo y pruébelo en el browser.

FICH - UNL Taller de Diseño Web. Tema 7. Pág. 6 de 44.

Agregar un behavior a una imagen existente

A continuación utilizaremos un método diferente: definiremos rollovers para imágenes

Cuando usamos este método, utilizamos el panel Behaviors.

8) Abra el archivo architecture.html ubicado en la carpeta Lesson_05_Behaviors.

9) En el Inspector de Propiedades, utilice la caja de texto image-name para proporcionar un

FICH - UNL Taller de Diseño Web. Tema 7. Pág. 7 de 44.

Dreamweaver agrega también un evento (o eventos) apropiado automáticamente para la acción

12) Elija la acción Swap Image.

FICH - UNL Taller de Diseño Web. Tema 7. Pág. 9 de 44.

FICH - UNL Taller de Diseño Web. Tema 7. Pág. 10 de 44.

- En la ventana del documento, seleccionar el

- En el panel Behaviors, seleccionar con el mouse la acción que se quiere eliminar.

- En el panel Behaviors, hacer click en el botón (o presionar <Delete>)

17) Guarde su trabajo y pruébelo en el browser.

FICH - UNL Taller de Diseño Web. Tema 7. Pág. 11 de 44.

Intercambiar múltiples imágenes ante un único evento de usuario

Es posible hacer que varias imágenes sean intercambiadas simultáneamente (de su

FICH - UNL Taller de Diseño Web. Tema 7. Pág. 12 de 44.

20) En la caja de diálogo

Haga click en el botón

La imagen StylesText es un rectángulo blanco ubicado debajo de la imagen styles.

FICH - UNL Taller de Diseño Web. Tema 7. Pág. 13 de 44.

La imagen styles, por ejemplo,

Ahora la imagen StylesText

21) Haga click en OK para cerrar la caja de diálogo Swap Image.

22) Repita el mismo

FICH - UNL Taller de Diseño Web. Tema 7. Pág. 14 de 44.

23) Guarde su trabajo y pruébelo en el browser.

FICH - UNL Taller de Diseño Web. Tema 7. Pág. 15 de 44.

24) En la página architecture.htm, en el Inspector de Propiedades, utilice la caja de texto

A nav_history.gif se le debe dar el nombre history

25) En el Inspector de Propiedades, utilice la herramienta (Rectangular Hotspot Tool) para

FICH - UNL Taller de Diseño Web. Tema 7. Pág. 16 de 44.

27) Con el área clickeable seleccionada trabajaremos en el panel Behaviors.

28) En la caja de diálogo Swap

Haga click en el botón Browse

La caja de diálogo se cierra y retornamos a la ventana del documento.

FICH - UNL Taller de Diseño Web. Tema 7. Pág. 17 de 44.

FICH - UNL Taller de Diseño Web. Tema 7. Pág. 18 de 44.

Editar acciones y eventos

En Dreamweaver MX podemos editar acciones y eventos de varias maneras.

A continuación agregaremos una acción que generará un mensaje emergente y seleccionaremos