Comportamientos en Dreamweaver El panel comportamientos

Use el panel Comportamientos para adjuntar comportamientos a los elementos de la pgina (ms concretamente, a las etiquetas). Para abrir el panel Comportamientos, elija: Ventana > Comportamie ntos.

La etiqueta actualmente seleccionada en la ventana de documento aparece en la barra de ttulo del panel Comportamientos. Los comportamientos que ya se han adjuntado al elemento de pgina actualmente seleccionado aparecen en la lista de comportamientos (el rea principal del panel), en orden alfabtico por eventos. Si hay varias acciones para un mismo evento, las acciones aparecen en el orden en que se ejecutarn. Si en la lista de comportamientos no aparece ningn comportamiento, signif ica que no hay ningn comportamiento adjuntado al elemento actualmente seleccionado. Las opc iones de l panel Comportamientos son las siguientes: Acciones (+): Despliega el siguiente men emergente de las acciones que se pueden adjuntar al elemento actualmente seleccionado. Cuando se selecciona una accin de esta lista, aparece un cuadro de dilogo en el que se pueden especificar los parmetros correspondientes a la accin. Si todas las acciones aparecen atenuadas, signif ica que el elemento seleccionado no puede generar ningn evento.

Profesor: Samuel Molina Javier

Pgina 1

Comportamientos en Dreamweaver

Eliminar

(-):

Elimina

la

accin

el

evento

seleccionados

de

la

lista

de

comportamientos. Eventos Eventos (el men que aparece al hacer clic en el botn de f lecha que hay junto al nombre del evento seleccionado en la lista de comportamientos) es un men emergente que contiene todos los eventos que pueden desencadenar la accin. Este men solamente se ve cuando hay un evento de la lista de comportamientos seleccionado. Aparecern distintos eventos dependiendo del objeto seleccionado. Si no aparecen los eventos esperados, asegrese de que est seleccionado la etiqueta o el elemento de pgina correcto. En la siguiente lista se describen los eventos que pueden asociarse a las acciones relacionadas en el men emergente Acciones (+) del panel Comportamientos. Cuando

Profesor: Samuel Molina Javier

Pgina 2

Comportamientos en Dreamweaver
un visitante de la pgina Web interacta con la pgina (por ejemplo, haciendo clic en una imagen) el navegador genera sucesos que pueden utilizarse para llamar a funciones JavaScript que, a su vez, provocan la ejecucin de una accin.

onAbort (NS3, NS4, IE4, IE5) Se genera cuando el visitante detiene el

navegador antes de que se cargue completamente una imagen (por ejemplo, cuando el usuario hace clic en el botn Detener del navegador mientras se est cargando una imagen).

onBounce (IE4, IE5) Se genera cuando el contenido de un elemento de

marquesina ha alcanzado el lmite de la marquesina.

onChange (NS3, NS4, IE3, IE4, IE5) Se genera cuando el visitante cambia un
valor de la pgina, como, por ejemplo, cuando el visitante elige un elemento de un men o cambia el valor de un campo de texto y, seguidamente, hace clic en algn otro lugar de la pgina.

onClic k (NS3, NS4, IE3, IE4, IE5) Se genera cuando el visitante hace clic en el
elemento especificado, como, por ejemplo, un vnculo, un botn o un mapa de imagen. (El clic no termina hasta que el visitante suelta el botn del ratn; puede usar onMouseDown para que se produzca una accin en el momento en que se presiona el botn.)

onDblClic k (NS4, IE4, IE5) Se genera cuando el visitante hace doble clic en el
elemento especificado. (Hacer doble clic consiste en presionar y soltar rpidamente el botn del ratn mientras se seala al elemento.)

onError (NS3, NS4, IE4, IE5) Se genera cuando se produce un error en el

navegador al cargar una pgina o una imagen.

onFinish (IE4, IE5) Se genera cuando el contenido de un elemento de

marquesina completa un bucle.

onHelp (IE4, IE5) Se genera cuando el visitante hace clic en el botn de Ayuda o
elige Ayuda del men de un navegador.

onKey Down (NS4, IE4, IE5) Se genera en el momento en que el visitante

presiona cualquier tecla. (No es preciso que el visitante suelte la tecla para que se genere este evento.) El navegador no puede detectar qu tecla se ha presionado.

onKeyPress (NS4, IE4, IE5) Se genera cuando el visitante presiona y suelta

cualquier tecla; este evento es una combinacin de los eventos onKeyDown y onKeyUp. El navegador no puede detectar qu tecla se ha presionado.

Profesor: Samuel Molina Javier

Pgina 3

Comportamientos en Dreamweaver
onKeyUp (NS4, IE4, IE5) Se genera cuando el visitante suelta una tecla despus
de presionarla. El navegador no puede detectar qu tecla se ha presionado.

onLoad (NS3, NS4, IE3, IE4, IE5) Se genera cuando termina de cargarse una
imagen o una pgina.

onMouse Down (NS4, IE4, IE5) Se genera cuando el visitante presiona el botn
del ratn. (No es necesario que el usuario suelte el botn del ratn para que se genere este evento.)

onMouseMove (IE3, IE4, IE5) Se genera cuando el visitante mueve el ratn

mientras seala al elemento especificado. (Es decir, el puntero permanece dentro de los lmites del elemento.)

onMouseOut (NS3, NS4, IE4, IE5) Se genera cuando el puntero abandona el

elemento especificado. (Normalmente, el elemento especificado es una imagen, o un vnculo adjuntado a una imagen.) Este evento se usa a menudo junto con el comportamiento "Restaurar imagen intercambiada"" para devolver una imagen a su estado original cuando el visitante deja de sealarla con el puntero del ratn.

onMouseOver (NS3, NS4, IE3, IE4, IE5) Se genera cuando el ratn se mueve
por primera vez para sealar el elemento epecificado (es decir, cuando el puntero pasa de no estar sealando a estar sealando el eleme nto). El elemento especificado para este evento es generalmente un vnculo.

onMouse Up (NS4, IE4, IE5) Se genera cuando se suelta un botn del ratn que
se encuentra presionado.

onMove (NS4) Se genera cuando se mueve una ventana o un marco. onReset (NS3, NS4, IE3, IE4, IE5) Se genera cuando se restauran los valores
predeterminados de un formulario.

onResize (NS4, IE4, IE5) Se genera cuando el visitante cambia el tamao de la

ventana del navegador o de un marco.

onSc roll (IE4, IE5) Se genera cuando el visitante desplaza la pgina hacia arriba
o hacia abajo.

onSe lect (NS3, NS4, IE3, IE4, IE5) Se genera cuando el usuario selecciona
texto en un campo de texto.

onStart (IE4, IE5) Se genera cuando el contenido de un elemento de marquesina

inicia un bucle.

onSubmit (NS3, NS4, IE3, IE4, IE5) Se genera cuando el visitante enva un
formulario.

Profesor: Samuel Molina Javier

Pgina 4

Comportamientos en Dreamweaver
onUnload (NS3, NS4, IE3, IE4, IE5) Se genera cuando el visitante abandona la
pgina.

Adjuntar un comportamiento Se pueden adjuntar comportamientos al documento completo (es decir, a la etiqueta body) o a vnculos, imgenes, elementos de formulario o a cualquier otro elemento HTML. El navegador de destino que se elija determinar los eventos posibles para un elemento dado. Internet Explorer 4.0, por ejemplo, tiene una gama de eventos para cada elemento mucho ms amplia que Netscape Navigator 4.0, o que la versin 3.0 de cualquier otro navegador. Nota: No se puede adjuntar un comportamiento a texto normal. Se puede especificar ms de una accin para cada evento. Las acciones tienen lugar en el orden en el que se enumeran en la columna Acciones del panel Comportamientos. Para adjuntar un comportamiento:

1. Seleccione un elemento de la pgina como una imagen o un vnculo, por

ejemplo. Para adjuntar un comportamiento a la pgina completa, haga clic en la etiqueta <body> en el selector de etiquetas, situado en la parte inferior izquierda de la ventana de documento.

2. Elija Ve ntana > para abrir el pane l Comportamientos. 3. Haga clic en el botn de signo ms (+) y elija una accin del men emergente
Acciones. Cuando se elige una accin, aparecer un cuadro de dilogo en el que se mostrarn los parmetros e instrucciones de la accin.

4. Introduzca los parmetros de la accin y haga clic en Aceptar.

Nota: Todas las acciones proporcionadas con Dreamweaver funcionan con los navegadores de la versin 4.0 y posteriores. Algunas acciones no funcionan en los navegadores antiguos.

Profesor: Samuel Molina Javier

Pgina 5

Comportamientos en Dreamweaver
En el men emergente "Eventos" aparecen diferentes eventos en funcin del objeto seleccionado y de los navegadores especificados en el submen Mostrar eventos para. Los eventos pueden aparecer atenuados si los objetos pertinentes an no existen en la pgina o si el objeto seleccionado no puede recibir eventos. Si no aparecen los eventos esperados, asegrese de que est seleccionado el objeto correcto o cambie los navegadores de destino en el men emergente Mostra r eventos pa ra. Comportamientos y texto No se puede adjuntar un comportamiento a texto normal. Las etiquetas como <p> y <span> no generan eventos en los navegadores, por lo que no es posible

desencadenar una accin a partir de esas etiquetas. Sin embargo, s se puede adjuntar un comportamiento a un vnculo. Por ello, la manera ms fcil de adjuntar un comportamiento a texto consiste en aadir un vnculo nulo (que no seala a nada) al texto, y luego adjuntar el comportamiento al vnculo. Tenga en cuenta que al hacerlo, el texto tendr apariencia de vnculo. (Puede cambiar el color del vnculo y eliminar el subrayado si no desea que parezca un vnculo, si bien, de esta manera los visitantes del sitio no se darn cuenta de que hay una razn para hacer clic en ese texto.) Para adjuntar un comportamiento a l texto seleccionado:

1. En el inspector de propiedades, introduzca javascript:; (incluyendo el ;) en el

campo Vnculo. Asegrese de incluir tanto los dos puntos como el punto y coma. Nota: Si lo desea, como alternativa, puede usar un signo de almohadilla ( #) en el campo Vnculo. El problema de usar un signo de almohadilla es que cuando un visitante hace clic en un vnculo, el navegador salta a la parte superior de la pgina. Hacer clic en el vnculo nulo de JavaScript no produce efecto alguno en la pgina, por lo que la solucin de JavaScript suele ser la pre ferible.

2. Con el texto todava seleccionado, abra el panel Comportamientos (Ventana>

Comportamientos).

3. Elija una accin en el men emergente Acciones, introduzca los parmetros de

la accin y seleccione un evento que desencadene la accin.

Profesor: Samuel Molina Javier

Pgina 6

Comportamientos en Dreamweaver
Para cambiar la aparienc ia del texto vinculado:

1. Abra el inspector de cdigos (Ventana > Inspector de cdigos) o la vista Cdigo

de la ventana de documento.

2. Busque el vnculo. 3. En la etiqueta a href del vnculo, inserte este atributo: style="text decoration:none; color:black". Al incluir este atributo, se desactiva el subrayado y el color del texto se establece en negro. (Por supuesto, si el texto contiguo es de un color distinto, use ese color en lugar del negro.) Para cambiar la apariencia del texto vinc ulado en todos los lugares en que aparece en la pgina o en todo el sitio, use los estilos CSS para crear un nuevo estilo para los enlaces. Acciones De Comportamientos Comprobar navegador Use la accin Comprobar navegador para enviar a los visitantes a distintas pginas, dependiendo de las marcas y versiones de sus navegadores. Por ejemplo, puede resultar conveniente que los visitantes vayan a una pgina si su navegador es Netscape Navigator 4.0 o una versin posterior, que vayan a otra pgina si tienen Microsoft Internet Explorer 4.0 o una versin posterior o que permanezcan en la pgina actual si usan un navegador de algn otro tipo. Resulta til adjuntar este comportamiento a la etiqueta body de una pgina que sea compatible prcticamente con cualquier navegador (y que no use ninguna otra secuencia JavaScript); de esta manera, los visitantes que visiten la pgina con JavaScript desactivado podrn, aun as, ver algo de contenido.

Profesor: Samuel Molina Javier

Pgina 7

Comportamientos en Dreamweaver

Para usar la accin Comprobar navegador:

1. Seleccione un objeto y abra el panel Comportamientos. 2. Haga clic en el botn de signo ms (+) y elija Comprobar navegador del men
emergente Acciones.

3. Determine el criterio de separacin que desea aplicar a los visitantes: por

marca de navegador, por versin de navegador o por ambas. Por ejemplo, desea que todos los usuarios que tengan un navegador de la versin 4.0 vean una pgina y que los dems vean otra pgina distinta? O pref iere quiz que los usuarios de Netscape Navigator vean una pgina y que los usuarios de Microsoft Internet Explorer (IE) vean otra distinta?

4. Especifique una versin de Netscape Navigator. 5. En los mens emergentes contiguos, elija las opciones sobre lo que debe ocurrir
si el navegador es la versin de Netscape Navigator especificada o posterior y lo que debe ocurrir en caso contrario. Las opciones son Ir a URL, Ir a Alt URL y Permanecer en esta pgina.

6. Especifique una versin de Microsoft Internet Explorer.

Profesor: Samuel Molina Javier Pgina 8

Comportamientos en Dreamweaver
7. En los mens emergentes contiguos, elija las opciones sobre lo que debe ocurrir
si el navegador es la versin de Internet Explorer especificada o posterior y lo que debe ocurrir en caso contrario. Las opciones son Ir a URL, Ir a Alt URL y Permanecer en esta pgina.

8. Elija una opcin en el men emergente Otros navegadores para especificar lo

que debe ocurrir si el navegador no es Netscape Navigator ni Microsoft Internet Explorer. (Por ejemplo, el visitante puede estar utilizando un navegador basado en texto como Lynx.) Permanecer en esta pgina es la mejor opcin para los navegadores distintos de Navigator e IE porque la mayora de ellos no son compatibles con JavaScript y, si no pueden leer este comportamiento, permanecern en la misma pgina en cualquier caso.

9. Introduzca las rutas y los nombres de archivo del URL y del URL alternativo en
los campos de texto situados en la parte inferior del cuadro de dilogo. Si introduce un URL remoto, deber introducir el prefijo http:// adems de la direccin www.

10. Haga clic en Aceptar.

Arrastrar capa Use esta accin para crear puzzles, controles deslizantes y otros elementos mviles de interfaz. Se puede especificar la direccin en la que el visitante puede arrastrar la capa (horizontalmente, verticalmente o en cualquier direccin), un destino hasta el que el visitante debe arrastrar la capa, si la capa debe ajustarse al destino cuando aqulla se encuentra a un cierto nmero de pxeles del destino y qu suceder cuando la capa llegue al destino, entre otras opciones. Dado que la llamada a la accin Arrastrar capa debe producirse antes de que el visitante pueda arrastrar la capa, asegrese de que el evento que desencadena la accin se produzca antes de que el visitante intente arrastrar la capa. Es recomendable adjuntar la accin Arrastrar capa al objeto body (con el evento onLoad), aunque

Profesor: Samuel Molina Javier

Pgina 9

Comportamientos en Dreamweaver
tambin puede adjuntarla a un vnculo que llene toda la capa (como, por ejemplo, un vnculo alrededor de una imagen) usando el evento onMouseOve r.

Para usar la acc in Arrastrar capa:

1. Elija Insertar > Capa o haga clic en el botn Capa en el panel Objetos y
arrastre una capa a la ventana de documento.

2. Seleccione la etiqueta body haciendo clic en <body> en el selector de etiquetas

que se encuentra en la parte inferior de la ventana de documento.

3. Abra el panel Comportamientos. 4. Haga clic en el botn de signo ms (+) y elija Arrastrar capa del men
emergente Acciones.

5. Seleccione la capa que desea hacer desplazable del men-emergente-Capa. 6. Seleccione Restringido o No restringido en el men emergente-Movimiento.
El movimiento no restringido es adecuado para puzzles y otros juegos de arrastrar y soltar. Para los controles deslizantes y los escenarios mviles, como cajones de archivos, cortinas y minipersianas, elija movimiento restringido.

7. Para movimiento restringido, introduzca valores (en pxeles) en los campos

Arriba, Abajo, Derecha e Izquierda.

Profesor: Samuel Molina Javier

Pgina 10

Comportamientos en Dreamweaver
Los valores son relativos a la posicin inicial de la capa. Para restringir el movimiento a una regin rectangular, introduzca valores positivos en los cuatro campos. Para permit ir solamente el movimiento vertical, introduzca valores positivos para Arriba y Abajo, y 0 para Izquierda y Derecha. Para permit ir solamente el movimiento horizontal, introduzca valores positivos para Izquierda y Derecha, y 0 para Arriba y Abajo.

8. Introduzca valores (en pxeles) en los campos Izquierdo y Superior para def inir
el destino de la capa. El destino de la capa es la zona hasta la que usted desea que el visitante arrastre la capa. Se considera que una capa ha alcanzado el destino cuando sus coordenadas izquierda y superior coinciden con los valores introducidos en los campos Izquierdo y Superior. Los valores son relativos al ngulo superior izquierdo de la ventana del navegador. Haga clic en la opcin Obtener posicin actual para rellenar automticamente los campos con la posicin actual de la capa.

9. Introduzca un valor (en pxeles) en el campo Ajustar si a menos de, para

determinar lo cerca del destino que el visitante tiene que soltar la capa para que esta se ajuste al destino. Los valores grandes facilitan al visitante la localizacin el destino para soltar la capa.

10. Para puzzles simples y manipulacin de escenarios, puede detenerse aqu. Para
definir el manejador de arrastre de una capa, controlar el movimiento de una capa mientras est siendo arrastrada y desencadenar una accin al soltar la capa, haga clic en la ficha Avanzado.

11. Para definir una zona determinada de la capa en la que el visitante debe hacer
clic para arrastrarla, elija "Interior de capa" en el men emergente Arrastrar selector; luego introduzca las coordenadas izquierda y superior, as como los valores de ancho y alto del manejador de arrastre.

Profesor: Samuel Molina Javier

Pgina 11

Comportamientos en Dreamweaver
Esta opcin resulta til cuando la imagen contenida en la capa incluye un elemento que sugiere la posibilidad de arrastrarla, como una barra de ttulo o un asa de cajn. No configure esta opcin si desea que el visitante pueda hacer clic en algn lugar de la capa para arrastrarla.

12. Elija

las

opciones

Al

arrastrar

que

desee

utilizar:

Seleccione Traer la capa al frente si la capa debe desplazarse a la primera posicin en el orden de apilamiento mientras se est arrastrando. Si selecciona esta opcin, utilice el men emergente para determinar si desea dejar la capa en la primera posicin o devolverla a su posicin original en el orden de apilamiento.

13. Introduzca cdigo JavaScript o un nombre de f uncin (por ejemplo,

monitorLayer()) en el campo Llamar JavaScript para ejecutar repetidamente el cdigo o funcin mientras se est arrastrando la capa. Por ejemplo, podra escribir una funcin que controle las coordenadas de la capa y muestre mensajes y consejos como "ya est cerca" o "est lejsimos del destino do nde soltar la capa" en el campo de texto.

14. Introduzca cdigo JavaScript o un nombre de f uncin (por ejemplo,

evaluateLayerPos()) en el segundo campo Llamar JavaScript para ejecutar el cdigo o la funcin cuando se suelte la capa. Seleccione la opcin "Slo si se ajusta" cuando el cdigo JavaScript deba ejecutarse solamente si la capa ha alcanzado a su destino.

15. Haga clic en Aceptar.

Nota: No se puede adjuntar la accin Arrastrar capa a un objeto con los eventos onMouseDown u onClick. Abrir ventana de l navegador Use la accin Abrir ventana del navegador para abrir un URL en una nueva ventana. Se pueden especificar las propiedades de la nueva ventana, incluidos su tamao, sus atributos (si se puede cambiar su tamao, si tiene barra de mens, etc.) y su nombre . Por ejemplo, este comportamiento se puede usar para abrir una imagen ms grande en otra ventana distinta cuando el visitante hace clic en una imagen en miniatura; con

Profesor: Samuel Molina Javier

Pgina 12

Comportamientos en Dreamweaver
este comportamiento, puede hacer que la nueva ventana tenga el mismo tamao que la imagen. Si no se especifican los atributos de la ventana, se abrir con el mismo tamao y los mismos atributos de la ventana que la inici. Para usar la acc in Abrir ventana de l navegador:

1. Seleccione un objeto y abra el panel Comportamientos. 2. Haga clic en el botn de signo ms (+) y elija Abrir ventana del navegador del
men emergente Acciones.

3. Haga clic en Examinar para seleccionar un archivo o introduzca el URL que

desea ver.

4. Configure las opciones que desee de las siguientes:

Ancho de la ventana Especifica la anchura de la ventana en pxeles. Alto de la ve ntana Especifica la altura de la ventana en pxeles. Barra de herramie ntas de navegacin Es la fila de botones del navegador que incluye Atrs, Adelante, Inicio y Actualizar. Barra de he rramientas de ubicacin Es la fila de opciones del navegador que incluye el campo de ubicacin. Barra de estado Es la zona situada en la parte inferior de la ventana del navegador en la que aparecen mensajes (como el tiempo de carga restante y los URL asociados a los vnculos). Barra de mens Es la zona de la ventana del navegador (Windows) o del escritorio (Macintosh) en la que aparecen mens tales como Archivo, Edicin, Ver, Ir a y Ayuda. Esta opcin debe establecerse explcitamente si desea que los visitantes puedan navegar desde la nueva ventana. Si no se ve esta opcin, el usuario solamente podr cerrar o minimizar la ventana (Windows), o cerrar la ventana y salir de la aplicacin (Macintosh) desde la nueva ventana.

Profesor: Samuel Molina Javier

Pgina 13

Comportamientos en Dreamweaver
Barras despl. Si son necesarias, especifica que debern aparecer las barras de desplazamiento que sean precisas si el contenido se extiende ms all de la zona visible. Si no se establece explcitamente esta opcin, no aparecern barras de desplazamiento. Si la opcin Selectores de cambi o de tamao tambin est desactivada, los visitantes no tendrn una forma fcil de ver el contenido situado ms all del tamao original de la ventana. (Aunque siempre pueden desplazar la ventana arrastrando el borde de la misma.)

Selectores de cambio de ta mao Especifica que el usuario tenga la posibilidad de cambiar el tamao de la ventana, bien sea arrastrando el ngulo inferior derecho de la ventana, o bien haciendo clic en el botn maximizar (Windows) o en el cuadro de tamao (Macintosh) situado en la esquina superior derecha. Si esta opcin no se establece explcitamente, los controles de cambio de tamao no estarn disponibles y el ngulo inferior derecho no se podr arrastrar. Nombre de la ventana Es el nombre de la nueva ventana. Es imprescindible asignar un nombre a la ventana si desea usarla como destino de vnculos o controlarla con cdigo JavaScript. Este nombre no puede contener espacios ni caracteres especiales.

5. Haga clic en Aceptar. 6. Compruebe que el evento predeterminado es el que usted de sea.
Si no lo es, seleccione otro evento en el men emergente. Si los eventos que busca no aparecen en la lista, cambie el navegador de destino en el men emergente Mostrar eventos para. Mensaje emerge nte La accin Mensaje emergente presenta una alerta de JavaScript con el mensaje que usted desee. Dado que las alertas de JavaScript slo tienen un botn (Aceptar), esta accin resulta ms adecuada para proporcionar informacin que para proponerle una eleccin. Puede incrustar en el texto cualquier llamada, propiedad, variable global u otra expresin de funcin JavaScript vlida. Para incrustar una expresin JavaScript,

Profesor: Samuel Molina Javier

Pgina 14

Comportamientos en Dreamweaver
encirrela entre llaves ({}). Para que aparezca una llave, antepngale una barra invertida (\{).

Ejemplo: El URL correspondiente a esta pgina es {window.location} y hoy es {new Date()}. Para usar la accin Mensaje emergente:

1. Seleccione un objeto y abra el panel Comportamientos. 2. Haga clic en el botn de signo ms (+) y elija Mensaje emergente del men
emergente Acciones.

3. Introduzca el mensaje en el campo Mensaje. 4. Haga clic en Aceptar. 5. Compruebe que el evento predeterminado es el que usted desea. 6. Si no lo es, seleccione otro evento en el men emergente.Si los eventos que
busca no aparecen en la lista, cambie el navegador de destino en el men emergente Mostrar eventos para.

Mostrar-Ocultar capas La accin Mostrar-Ocultar capas muestra, oculta o restaura la visibilidad

predeterminada de una o ms capas. Esta accin resulta til para mostrar informacin a medida que el usuario va interactuando con la pgina. Por ejemplo, cuando el usuario pasa el puntero del ratn por encima de la imagen de una planta, se puede

Profesor: Samuel Molina Javier

Pgina 15

Comportamientos en Dreamweaver
mostrar una capa que le ofrezca informacin sobre la poca y regin de crecimiento de la planta, las horas de sol que necesita, el tamao que suele alcanzar, etc. La accin Mostrar-Ocultar capas tambin es til para crear una capa de carga previa, es decir, una capa grande que, en un principio, oculta el contenido de la pgina y luego desaparece cuando todos los c omponentes de la pgina se han terminado de cargar.

Para usar la acc in Mostrar-Oculta r capas:

1. Elija Insertar > Capa o haga clic en el botn Capa en el panel Objetos y dibuje
una capa en la ventana de documento. Repita este paso para crear capas adicionales.

2. Haga clic en la ventana de documento para anular la seleccin de la capa y

luego abra el panel Comportamientos.

3. Haga clic en el botn de signo ms (+) y elija Mostrar-Ocultar capas del men
emergente Acciones. Si la accin Mostrar-Ocultar capas no est disponible, es muy probable que haya una capa seleccionada. Dado que las capas no aceptan eventos en la versin 4.0 de ninguno de los dos navegadores, deber seleccionar un objeto diferente, como la etiqueta body, o un vnculo (etiqueta a), o bien c ambiar el navegador de destino a IE 4.0 en el men emergente Mostrar eventos para.

4. Seleccione la capa cuya visibilidad desea cambiar en la lista Capas con nombre. 5. Haga clic en Mostrar para mostrar la capa, en Ocultar para ocultarla, o en
Predeterminada para restaurar la visibilidad predeterminada de la capa.

Profesor: Samuel Molina Javier

Pgina 16

Comportamientos en Dreamweaver
6. Repita los pasos 4 y 5 para todas las capas restantes cuya visibilidad desee
cambiar en este momento. (Se puede cambiar la visibilidad de mltiples capas con un solo comportamiento.)

7. Haga clic en Aceptar. 8. Compruebe que el evento predeterminado es el que usted desea.
Si no lo es, seleccione otro evento en el men emergente.Si los eventos que busca no aparecen en la lista, cambie el navegador de destino en el men emergente Mostrar eventos para. Puede que las capas reduzcan su tamao para ajustarse al contenido cuando se muestren en una ventana de Netscape Navigator. Para evitar que esto ocurra, aada texto o imgenes a las capas o establezca valores de recorte de capa. Para crear una capa de carga previa :

1. Haga clic en el botn Dibujar capa de la categora Comn del panel Objetos y
dibuje una capa grande en la vista Diseo de la ventana de documentos. Asegrese de que la capa cubra todo el contenido de la pgina.

2. En el panel Capas, arrastre el nombre de la capa hasta la primera posicin de la

lista de capas para especificar que la capa debe estar encima de todas las dems en el orden de apilamiento.

3. Seleccione la capa si no est ya seleccionada, y asgnele el nombre loading,

usando para ello el campo situado ms a la izquierda del Inspector de propiedades.

4. Con la capa todava seleccionada, establezca el color de fondo de la capa con el

mismo color que el del fondo de la pgina del Inspector de propiedades.

Profesor: Samuel Molina Javier

Pgina 17

Comportamientos en Dreamweaver

5. Haga clic dentro de la capa (que ahora debe estar ocultando el resto del
contenido de la pgina) y, si lo desea, escriba un mensaje. Por ejemplo, los mensajes "Espere a que se cargue la pgina" o "Cargan do..." informan a los visitantes de lo que est ocurriendo para que sepan que la pgina tiene contenido.

Profesor: Samuel Molina Javier

Pgina 18

Comportamientos en Dreamweaver
6. Haga clic en la etiqueta <body> en el selector de etiquetas, situado en el
ngulo inferior izquierdo de la ventana de documento.

7. En el panel Comportamientos, seleccione Mostrar-Ocultar capas en el men

emergente Acciones.

8. Seleccione la capa llamada "Cargando" en la lista de Capas con nombre. 9. Haga clic en Ocultar. 10. Haga clic en Aceptar.
Intercambiar Imagen

Pulsaremos sobre l para desplegar el men de comportamientos disponible para el objeto seleccionado. Esto ltimo es importante tenerlo en cuenta, pues los comportamientos cambian segn sea el objeto seleccionado. Un texto, o un link, no soportan los mismos comportamientos que, por ejemplo, una imagen.

Como tenemos seleccionada una imagen, vamos a seleccionar de la tabla un comportamiento que slo podemos aplicar a imgenes. "Intercambiar imagen". Este comportamiento logra un efecto muy bonito, se trata de que en una pgina web, cuando el usuario pase el puntero del ratn sobre la imagen, esta imagen cambie y sea sustituida por otra distinta. Se pueden conseguir pginas muy efectivas con este comportamiento y un poco de imaginacin y buen gusto.

Profesor: Samuel Molina Javier

Pgina 19

Comportamientos en Dreamweaver

Tras pulsar en la opcin intercambiar imagen. Dreamweaver nos mostrara un cuadro de dilogo en el que nos pedir que definamos el origen, esto simplemente quiere preguntarnos por cul imagen quiera que sea sustituida la imagen seleccionada?

Ya conocemos como examinar las carpetas para encontrar la imagen deseada, en este caso haremos lo mismo, vamos a seleccionar la imagen "rbol" y pulsaremos el botn aceptar

Profesor: Samuel Molina Javier

Pgina 20

Comportamientos en Dreamweaver

Cuando hayamos seleccionado la imagen volveremos a la ventana de dilogo "intercambiar imagen" y pulsaremos aceptar. Hay un punto que no he comentado, y que es apropiado hacerlo antes de salir de esta ventana. En la zona inferior de la ventana hay dos opciones marcadas Una es "carga previa de imgenes" y la otra es "restaurar imgenes onmouseout". Por defecto ambas opciones estn marcadas. Es conveniente conocer la funcin de ambas opciones, la primera funcin se encarga de que cuando el usuario visualiza la pgina por primera vez, su ordenador descargue todas las imgenes relacionadas, incluida la de intercambio con qu objetivo? Pues para que cuando el usuario pase el puntero del ratn sobre la imagen, el intercambio sea instantneo pues ya ha cargado previamente la imagen.

Profesor: Samuel Molina Javier

Pgina 21

Comportamientos en Dreamweaver
La segunda funcin "restaurar imgenes onmouseout" se encarga de restaurar la imagen original cuando el puntero del ratn deje de estar sobre la imagen, esta es una opcin que depende ms del gusto esttico que de caractersticas tcnicas. As que este punto es totalmente opcional.

En la imagen superior vemos como queda el panel etiqueta despus de aadir nuestros comportamientos.

Cuando visualicemos la pgina se ver como la imagen superior de manera normal, pero si superponemos el puntero del ratn la pgina se ver como la imagen inferior

Profesor: Samuel Molina Javier

Pgina 22