7/31/2019 Dreamweaver M1_UD9_Comportamientos

1/6

Forinsur S.L. Centro de Formacin | Manual de Usuario

C o m p o r ta m ie n to s

Qu son los compor tam ien tosLos c o m p o r t a m i e n t o s son acc iones que suceden cuando los usuar ios

rea l i zan a lgn even to sob re un ob j e to , como puede ser mover el ratn

sobre una imagen, pulsar sobre un texto, hacer doble clic sobre un mapa

de imagen, etc.

Los comportamientos no existen como cdigo HTML, se programan en

JavaScript. Dreamweaver permite insertarlos a travs del panel

C o m p o r t a m i e n t o s, por lo que no es necesario escribir ninguna lnea de

cdigo JavaScript para programarlos.

Otros comportamientos que ya has visto son los que se aplican sobre las

imgenes de sustitucin y las barras de navegacin, que ya estn

predefinidos, por lo que no es necesario introducir este conjunto de

comportamientos a travs del panel C o m p o r t a m i e n t o s.

Para validar formularios ya viste algunas caractersticas del panel

C o m p o r t a m i e n t o s. Vamos a recordar las que necesitamos para poder

insertar comportamientos ms tarde.

El panel C o m p o r t a m i e n t o s se puede abrir a travs del men Ventana ,

opcin C o m p o r t a m i e n t o s. Tambin pulsando M a y s+ F4 .

En este panel hay que desplegar el botn pulsando sobre l, y en

Mos t ra r even tos pa ra elegir una versin de la lista de navegadores.

7/31/2019 Dreamweaver M1_UD9_Comportamientos

2/6

7/31/2019 Dreamweaver M1_UD9_Comportamientos

3/6

Forinsur S.L. Centro de Formacin | Manual de Usuario

Tambin aparece la lista de todas las acciones posibles para el navegador

elegido previamente, de entre las que se puede seleccionar una.

Segn el elemento sobre el que se desee aplicar el comportamiento, se

podrn elegir unas acciones, mientras que otras no.

En este caso la accin Va l i da r f o rmu la r i o no puede seleccionarse porque

no existe ningn formulario en la pgina.

Despus de elegir alguna accin, el comportamiento correspondiente

aparece en el panel C o m p o r t a m i e n t o s. En este caso se han insertado dos

comportamientos.

Como puedes ver, cada comportamiento tiene asociados un evento y unaaccin.

Las acciones son las que se han elegido en la lista anterior y el evento indica

cundo se debe de realizar la accin.

Para eliminar un comportamiento, hay que seleccionarlo en el panel

C o m p o r t a m i e n t o s y pulsar sobre el botn . Tambin es posible cambiar

7/31/2019 Dreamweaver M1_UD9_Comportamientos

4/6

Tcnico Especialista en Diseo, Animacin y Programacin Web

el orden de los comportamientos aplicados a un objeto, seleccionndolos y

ordenndolos mediante los botones .

U t i li z an d o c om p o r t a m i e n t o sUno de los comportamientos ms habitual e interesante es el de M o s t r a r -

Ocu l tar capas. Resulta obvio que para poder aplicar este comportamiento

han de existir capas en el documento.

En la pgina anterior tenas un ejemplo de este tipo. Vamos a ver qu

eventos y acciones hay que establecer para que se produzca dicho

comportamiento.

Despus de seleccionar la imagen hay que seleccionar una accin de la

lista, pulsando sobre el botn . En este caso la accin tiene que ser la de

Mos t ra r -Ocu l ta r capas.

Tras elegir la accin, hay que especificar qu capas han de mostrarse u

ocultarse para el evento. Para ello hay que pulsar dos veces sobre la

accin, en el panel C o m p o r t a m i e n t o s.

Entonces aparece una nueva ventana, con la lista de todas las capas que

hay en la pgina, en la que puede indicarse la variacin que se va a producir

sobre la visibilidad de cada una de las capas.

7/31/2019 Dreamweaver M1_UD9_Comportamientos

5/6

Forinsur S.L. Centro de Formacin | Manual de Usuario

Puede indicarse si se van a Mos t ra r , si se van a Ocul tar , o si van a

adquirir la visibilidad inicial (P r e d e t e r m i n a d a).

Para determinar la visibilidad de cada una de las capas es necesario

seleccionarlas una por una, indicando su visibilidad a travs de los botones

inferiores de la ventana.

No es necesario aplicar una visibilidad diferente a todas las capas de la

pgina, solamente a las que se desea que cambien al producirse el evento.

Por ejemplo, en este caso a la capa g a t o m e s no se le ha aplicado ninguna

visibilidad diferente, ya que no se desea que vare al producirse el evento.

Si se desea eliminar una visibilidad establecida para alguna de las capas,

simplemente hay que volver a pulsar sobre el botn correspondiente a la

visibilidad que ya tiene aplicada. Por ejemplo, para eliminar la visibilidad

aplicada a la capa g a t o s e m a n a habra que volver a pulsar sobre el botn

Mos t ra r .

Hay que tener en cuenta en este caso que lo que se desea es que al situar el

puntero sobre la imagen, se muestre la capa, y que cuando el puntero deje

de estar sobre la imagen, la capa se vuelva a ocultar. Para ello es necesario

insertar dos comportamientos con la accin Mos t ra r -Ocu l ta r capas. Uno

de ellos mostrar la capa para el evento onMouseOver (cuando el ratn

est sobre), mientras que el otro la ocultar para el evento onMouseOut

(cuando el ratn est fuera).

7/31/2019 Dreamweaver M1_UD9_Comportamientos

6/6

Tcnico Especialista en Diseo, Animacin y Programacin Web

I nse r tand o SCRI PTS m anua lm en te (p r og ram adores )

Otro de los comportamientos que puede aplicarse sobre algn objeto es el

de Llamar Javascr ip t . Este comportamiento permite insertar cdigo

JavaScript dentro del cdigo del documento.

Por ejemplo, es posible hacer que se cierre la ventana del navegador al

pulsar sobre un objeto. Para ello hay que insertar la lnea JavaScript

"w i n d o w . c l o s e ( ) ; ".

Al igual que para el ejemplo de las capas, lo primero que hay que hacer es

seleccionar el objeto sobre el que se desea aplicar el comportamiento.

Seguidamente hay que seleccionar la accin Llamar Javascr ip t a travs

del botn .

Entonces aparece una nueva ventana en la que hay que introducir la lnea

JavaScript.

Una vez insertado el comportamiento, en el panel C o m p o r t a m i e n t o s hay

que establecer el evento onc l i ck (al hacer clic) para que la llamada a

JavaScript se produzca al pulsar una vez sobre el objeto.

Pulsando dos veces sobre la accin vuelve a abrirse la ventana anterior, y es

posible modificar la lnea de cdigo.