En esta lección vamos a ver una funcionalidad avanzada de Dreamweaver, que facilita mucho la creación de páginas web más dinámicas.
Estos son los comportamientos.
Los comportamientos son, valga la redundancia, comportamientos que asignamos a determinados sucesos para que la página reaccione de una manera determinada.
Todo esto lo veremos mejor un ejemplo.
Podemos acceder a los comportamientos en el grupo de paneles de la derecha de la ventana de Dreamweaver.
El primer paso es seleccionar el objeto sobre el que deseamos aplicar el comportamiento, por ejemplo una de las imágenes de la tabla.
A continuación desplegaremos el menú "etiqueta" y pulsaremos sobre la pestaña comportamientos.
Debajo de la leyenda "comportamientos" encontramos un signo "+".
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 según sea el objeto seleccionado. Un texto, o un link, no soporta los mismos comportamientos que, por ejemplo, una imagen.
Como tenemos seleccionada una imagen, vamos a seleccionar de la tabla un comportamiento que sólo podemos aplicar a imágenes.
"Intercambiar imagen". Este comportamiento logra un efecto muy bonito, se trata de que en una página web, cuando el usuario pase el puntero del ratón sobre la imagen, esta imagen cambie y sea sustituida por otra distinta.
Se pueden conseguir páginas muy efectivas con este comportamiento y un poco de imaginación y buen gusto.
Tras pulsar en la opción intercambiar imagen. Dreamweaver nos mostrara un cuadro de diálogo en el que nos pedirá que definamos el origen, esto simplemente quiere preguntarnos ¿por cual 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 botón aceptar
Cuando hayamos seleccionado la imagen volveremos a la ventana de diálogo "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 imágenes" y la otra es "restaurar imágenes onmouseout". Por defecto ambas opciones están marcadas.
Es conveniente conocer la función de ambas opciones, la primera función se encarga de que cuando el usuario visualiza la página por primera vez, su ordenador descargue todas las imágenes relacionadas, incluida la de intercambio ¿con qué objetivo? Pues para que cuando el usuario pase el puntero del ratón sobre la imagen, el intercambio sea instantáneo pues ya ha cargado previamente la imagen.
La segunda función "restaurar imágenes onmouseout" se encarga de restaurar la imagen original cuando el puntero del ratón deje de estar sobre la imagen, esta es una opción que depende más del gusto estético que de características técnicas. Así que este punto es totalmente opcional.
En la imagen superior vemos como queda el panel etiqueta después de añadir nuestros comportamientos.
Cuando visualicemos la página se verá como la imagen superior de manera normal, pero si superponemos el puntero del ratón la página se verá como la imagen inferior
|
1. Diseño: composición y tipografía Estos dos elementos son clave para la creación de un buen diseño, ya sea... [02/09/03] |
39.211 | ||||
|
2. Nociones básicas de diseño Las diversas tecnologías y métodos utilizados antiguamente para la manipulación y... [03/09/03] |
119.094 | ||||
|
3. AutoCAD 3D AutoCAD en la actualidad, es uno de los programas más utilizados por profesionales... [13/09/04] |
110.627 | ||||
Cursos para compartir lo que sabes
