Manual de utilización del Dreamweaver MX 2004

Transcripción

1 Manual de utilización del Dreamweaver MX 2004 COMPORTAMIENTOS y CAPAS en DREAMWEAVER. Los comportamientos son acciones que suceden cuando los usuarios realizan algún evento sobre un objeto, como puede ser mover el ratón sobre una imagen, pulsar sobre un texto, hacer doble clic sobre un mapa de imagen, etc. Los comportamientos no existen como código HTML, se programan en JavaScript. Dreamweaver permite insertarlos a través del panel Comportamientos, por lo que no es necesario escribir ninguna línea de código JavaScript para programarlos. La imagen que aparece a continuación tiene asociado un comportamiento. Cuando se sitúa el puntero sobre ella, aparece un texto. El panel Comportamientos se puede abrir a través del menú Ventana, opción Comportamientos. También pulsando Mayús+F4. En este panel hay que desplegar el botón pulsando sobre él, y en Mostrar eventos para elegir una versión de la lista de navegadores. Algunos comportamientos no funcionan para algunos navegadores, por lo que dependiendo del navegador elegido aparecerán unos u otros comportamientos posibles. Existen comportamientos que funcionan en Internet Explorer pero no en otros. Debido a que la mayoría de usuarios utiliza Internet Explorer, vamos a seleccionar este navegador pese a que nosotros mismos no lo usamos en el aula. Una vez elegido un navegador ya no es necesario volver a elegirlo las siguientes veces que se desee insertar algún comportamiento.

2 Insertar un comportamiento Abre Dreamweaver y crea una nueva página HTML en tu sitio. Llámala COMPORTAMIENTOS y pon en ella lo que se ve en esta imagen Lo primero que hay que hacer es seleccionar el objeto sobre el que se ha de aplicar el comportamiento, como puede ser una imagen, un fragmento de texto, etc. También aparece la lista de todas las acciones posibles para el navegador elegido previamente, de entre las que se puede seleccionar una. Al desplegar el botón del panel Comportamientos aparece la opción Mostrar eventos para, a través de la cual se había elegido el navegador. Según el elemento sobre el que se desee aplicar el comportamiento, se podrán elegir unas acciones, mientras que otras no.

3 Para añadir un comportamiento a nuestro trabajo, vamos a ver previamente algo sobre las CAPAS. Las capas no son más que unos recuadros, que pueden situarse en cualquier parte de la página, en los que podemos insertar contenido HTML. Dichas capas pueden ocultarse y solaparse entre sí, lo que proporciona grandes posibilidades de diseño. Las capas pueden insertarse en una página a través del menú Insertar, opción Objeto de diseño, Capa. Una vez se ha insertado la capa, pueden editarse sus atributos, pero para ello hay que seleccionarla primero. La capa se puede mover pulsando el cuadrado blanco. Además aparece en la pestaña Diseño. Muévela y observa que en la paleta de propiedades aparece su nombre (Layer 1)

4 Desde la paleta de propiedades, cambia el color de fondo de la capa, haz que esté oculta (hidden), y asigna una imagen a su fondo.

5 Cuando pulses F12 verás que la capa NOse ve porque está oculta. Una vez que tenemos creada la capa, volvemos a nuestro diseño de comportamientos. Activa la etiqueta de comportamientos y, con la palabra AQUÍ marcada, pulsa el signo +. En Mostrar-Ocultar capas aparece la capa Layer1 (la nuestra). Pulsa Mostrar y luego Aceptar.

6 Vuelve a hacer lo mismo para añadir otro efecto. Esta vez pulsa Ocultar Te habrán aparecido los dos comportamientos. Pulsa en el botón de despliegue de cada comportamiento y haz que se correspondan con: Mostrar capa onmouseover (cuando el ratón pasa por encima) Ocultar capa onmouseout (cuando el ratón abandona la zona)

7 Puedes probar la página pulsando F12 y pasando el ratón por la palabra AQUÍ