Estudio de diseño especializado en diseño web

Curso de diseño web 2012

para diseñadores y estudiantes de diseño en comunicación visual y multimedia

Comportamientos con javascript (Dreamweaver 8 y CS3)

Nota diciembre 2011: Los diseñadores siempre buscamos agregar algo de interactividad a un sitio y para ello recurrimos al lenguaje javascript. Lo que antes se resolvía mediante comportamientos de Dreamweaver, ahora hace unos años lo resolvemos con plugins de JQuery, que también es lenguaje javascript pero actualizado y con infinitas posibilidades

Un comportamiento es una acción (abrir ventana, intercambiar imagen, mostrar capa...) provocada por un evento que realiza el usuario (pasar el mouse por arriba de una imagen, hacer clic en un vínculo...). Esta acción es código javascript dentro del html.

Los comportamientos se pueden aplicar a una imagen, un rollover, un link de texto o a toda la página seleccionando la etiqueta body.

Diferencias entre Dreamwever 8 y CS3

Siempre conviene que la imagen o el texto al que se vaya a aplicar el comportamiento tenga un vínculo real o nulo (ver apunte enlaces). En el Dreamweaver 8 está mejor resuelto, porque se selecciona la imagen, se aplica el comportamiento y luego, al elegir el evento se selecciona <a>onclick o <a>otro evento.... y eso hace que se coloque alrededor de la imagen la etiqueta de enlace con "javascript:;". Pero cuando el enlace es de texto hay que hacerlo manualmente y en Dreamweaver CS3 siempre hay que hacerlo así.
Entonces para asegurarse de que salga bien en cualquier versión de Dream con texto o imagen, conviene seguir los siguientes pasos:

1) seleccionar la imagen o el texto
2) en Propiedades, en el campo vínculo escribir javascript:;
3) si es una imagen, en el campo borde escribir "0" (Dream 8 lo hace solo)
4) seleccionar la etiqueta <a> y aplicar el comportamiento
5) al seleccionar evento, elegir los que no tienen <a>

Abrir ventana del navegador (pop-ups)

Ejemplo: ampliar imagen

1) crear un archivo html y colocar la imagen ampliada. En este caso la imagen mide 300 x 240 px y la página tiene margen izquierdo y superior de 30 px y color de fondo negro. Cerrar este archivo.
2) colocar la imagen chica y desde propiedades colocar un vínculo nulo (javascript:;)
2) seleccionar la etiqueta <a> de la imagen chica y en Comportamientos ir a Abrir ventana del navegador
3) con el botón Examinar buscar el html que contiene la imagen ampliada y colocar las medidas con las que debe abrir. En este caso 360 x 300 px.

Nota: este comportamiento se usa también aplicado a la etiqueta body con evento onload para que al cargar la página se abra el pop-up (generalmente para publicidades o anuncios del mismo sitio) pero no es muy recomendable ya que la mayoría de los navegadores lo bloquean.

Mostrar-ocultar capas

cerrar X

Ejemplo: ampliar imagen

1) colocar la imagen chica y desde Propiedades agregar un vínculo nulo (javascript:;)
2) dibujar una capa y en ella colocar una tabla de 360 px de ancho con dos celdas, en la de arriba, con alineación a la derecha va el texto "cerrar" y en la celda de abajo con alineación centrada va la imagen ampliada (300 px de ancho)
3) desde el panel capas (o Elementos PA en Dreamweaver CS3) ocultar la capa, también se puede hacer desde Propiedades Vis:Hidden.
4) seleccionar la etiqueta <a> de la imagen chica y en Comportamientos ir a Mostrar-Ocultar capas (elemetos PA en Dreamweaver CS3). Seleccionar de la lista la capa que se quiere mostrar y cliquear en el botón mostrar.
5) seleccionar el texto "cerrar", convertirlo en vínculo nulo, seleccionar la etiqueta <a> y desde Comportamientos/Mostrar-ocultar capas seleccionar al misma capa y cliquear en el botón ocultar.

Intercambiar imagen

Ejemplo: crear una galería de imágenes

1) se prepara el diseño con las imágenes chicas y una imagen grande (la primera de la galería), el resto de las imágenes grandes quedan en la carpeta imágenes, el comportamiento las va a llamar desde el hosting.
2) a la imagen grande hay que ponerle nombre desde la ventana Propiedades, por ejemplo "ampliaciones"
3) con la etiqueta <a> seleccionada, en el panel Comportamientos seleccionar Intercambiar imagen. Aparece una ventana que tiene una lista de imágenes, lo primero que hay que hacer es seleccionar de esa lista la imagen que se llama "ampliaciones". Luego desde el botón Examinar... se busca la imagen ampliada que corresponde a la imagen chica a la que le estamos aplicando el comportamiento. Conviene destildar Restaurar imágenes onMouseOut y aceptar.
4) En le panel comportamientos aparece la acción y un evento asociado por defecto. Este evento puede modificarse, por ejemplo en vez de usar onMouseOver, cambiarlo por onClick.

6) Para completar la galería se repite el paso 3 y 4 con cada imagen chica. La imagen grande no se cambia, queda siempre la primera que es la que sirve de destino de la acción.

Nota: si las imágenes ampliadas son de diferente tamaño, a la primera (la que tiene nombre) hay que borrarle las medidas de alto y ancho.