Hace tiempo escribí acerca de la forma en que se pueden crear capas en Dreamweaver. Pero eso fue hace tiempo… Ahora Dreamweaver CS6 no te permite hacer capas de esa manera porque hay algo mucho mejor: las etiquetas AP DIV. Estas pueden hacer todo lo que hacían las antiguas capas, pero de una mejor manera y añaden nueva funcionalidad.
¿Y para qué sirven estas ondas?
Con estas etiquetas (y la ayuda de JavaScript), las etiquetas AP DIV pueden ser usadas para…
-
Visibilidad dinámica. Los AP DIVs pueden mostrarse o ocultarse basado en algún evento (como hacer clic en una liga, etc.).
-
Contenido “arrastrable”. El usuario puede arrastrar el AP DIV a diferentes lugares en la página.
¿Cómo puedo crearlos?
En Dreamweaver, cuando estás en la página donde quieres colocar la etiqueta AP DIV, ve al menú Insert, Layout objects y AP DIV. Esto se ve en la siguiente figura:
Otra manera de insertar, es ir al panel de inserción, seleccionar objetos de tipo Layout y seleccionar la opción Draw AP Div como se ve en la siguiente imagen:
La primera manera solo inserta un cuadro que puedes mover (tomándolo del cuadrito que está arriba de la esquina superior izquierda) o cambiar de tamaño. De la segunda forma, ya lo dibujaste del tamaño deseado en en lugar deseado (claro que se puede modificar). Se debería ver como en la siguiente imagen:
Adentro de este cuadro, puedes escribir cualquier cosa (al igual que las capas de las que escribí hace tiempo) o poner imágenes, etc. Lo que cambia es la forma en que te permite manipularlos y de eso voy a hablar en el resto de este post.
Cambiando la visibilidad
Puedo cambiar si mi cuadro es visible o no de varias formas. En la ventana de propiedades, puedo cambiar la opción de visibilidad (etiquetado como Vis) como se ve en la siguiente figura:
Al poner hidden, se oculta lo que hay en este cuadro. Para hacer que aparezca tenemos que alterar el comportamiento de Dreamweaver llamado Show-Hide elements. En este ejemplo voy a hacer que el cuadro aparezca cuando el usuario hace clic sobre una liga. Para eso, primero haz que el cuadro esté hidden, luego selecciona un texto y escribe en el botón de Link el símbolo # (esto dice que se liga a la misma página… generalmente no es muy útil, pero aquí nos va a ayudar un poco). Con este texto seleccionado, abre el pallete Tag Inspector (o presiona F9 si no lo ves). Haz clic sobre Behaviors (comportamientos) y luego en el signo + (de Add behavior) y selecciona la opción Show Hide elements. Aquí están algunas imágenes de los pasos:
Luego aparece una ventana como ésta. Aquí hay que decirle que muestre la ventana (conocido como apDiv1), así que selecciona la opción apDiv1 y haz clic sobre el botón Show. Luego puedes cerrar esta ventana:
¡Y listo! Ahora cuando se haga clic sobre esta liga, aparecerá el cuadro AP DIV con todo su contenido. También puedes hacer otra liga que cierre la ventana y es proceso es igual, solo que en lugar de presionar el botón Show de la ventana que está arriba de este párrafo, presionas Hide.
Si quiero, puedo cambiar el evento para que suceda cuando el mouse se pone sobre la liga o estaba sobre la liga y se mueve hacia otro lugar ,etc. Esto se puede cambiar en el pallet del Tag Inspector como se ve en esta figura:
¡Listo! Espero que esto te sirva para tus sitios web.
Agradezco al post del blog Adobe Webucator de donde salieron muchas ideas para realizar este post.
