dreamweaver m1_ud9_comportamientos
TRANSCRIPT
-
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.