Tutorial para mostrar y ocultar capas en Dreamweaver CS3

Escrito por rebecca cullers | Traducido por john font
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Tutorial para mostrar y ocultar capas en Dreamweaver CS3
Adobe Dreamweaver. (internetseite image by FX Berlin from Fotolia.com)

En las versiones anteriores del software Adobe Dreamweaver para el diseño de web, las etiquetas "div" fueron llamadas capas. En Dreamweaver CS3, las capas fueron renombradas como "divs AP", que representan las divisiones de posición absoluta. Debido a la especificación de las etiquetas, las "divs AP" no se mueven cuando una ventana del navegador de Internet cambia de tamaño. Esto también permite apilar las "div AP" en la parte superior, una sobre la otra. Una vez que existan dos ventanas apiladas de esta manera, necesitas saber como ocultarlas y como desplegarlas.

Otras personas están leyendo

Dibujando una capa o div AP

Abre Dreamweaver CS3 y selecciona "Dibujar Div AP" desde la barra del menú "Formato". El cursor se convertirá en forma de cruz. Éste se usa para llamar tu capa.

Ahora tienes una capa con una posición absoluta, con cierto número de píxeles desde la izquierda y la parte superior. Puedes ver el posicionamiento en el código si te encuentas en modo de vista de pantalla dividida o en panel de "Propiedades", en la parte inferior de la pantalla. Definitivamente no puedes colocar un "div" a la derecha de la pantalla. Sin embargo, puedes cambiar la posición de un número de píxeles a centímetros u otras medidas en tu panel de la izquierda del "Estilos CSS".

Escribe algo en la capa recién creada de modo que la puedas ver claramente cuando esté oculta.

Alterna la visibilidad de las capas en el panel de 'Propiedades'

Ve a la opción "Propiedades" del panel en la parte inferior de la pantalla. Haz clic en la lista desplegable situada junto a la propiedad llamada "Vis" y selecciona "Oculto".

Cuando selecciones "Oculto", la capa se convertirá en invisible a la vista de diseño, pero podrás ver el código de la capa en modo de pantalla dividida o en el modo de codificación.

Para ver la capa de nuevo, selecciona "Visible" en el cuadro desplegable.

La tercera opción en el cuadro es "Heredar". Si has anidado "divs AP" (un "div" dentro de un div). Una capa marcada como "Heredar" heredará la configuración de visibilidad de la capa padre.

Alterna la visibilidad de las capas en el panel de 'Elementos AP'

Otra forma de ocultar y mostrar las capas es utilizar el panel de elementos AP.

Haz clic en la opción "Elementos AP" ubicada en la pestaña de la parte superior derecha de la esquina para ver una lista de todas tus capas "div AP". Cada capa que se cree será nombrada consecutivamente ("apDiv1", "apDiv2") a menos de que hagas doble clic en la etiqueta y en cada uno de los nombres únicos.

Al lado de los nombres de las capas está un ícono mostrando un ojo abierto. Haz clic en éste para ocultar la capa individual. El ícono cambiará a un ojo cerrado para mostrar que la capa está oculta.

Si tiene dos "divs" anidadas AP, la última aparecerá debajo de la "div" padre en "Elementos AP" de la tabla. Alterna el ícono del ojo al lado de la "div" padre para establecer la visibilidad para los dos.

Para mostrar u ocultar todas las capas a la vez, haz clic en el ícono del ojo en la parte superior de la "Elementos AP" de la tabla.

¿Por que deseas enconder capas?

Es útil alternar la visibilidad de las capas mientras se trabaja en un documento con muchas de ellas, pero ésta no es la razón de la propiedad oculta de la etiqueta "div".

La principal razón de ocultar una capa en su sitio web es dar a conocer de forma dinámica la capa cuando un usuario coloca el ratón sobre el botón o hace clic en éste. Para ello, tendrás que utilizar un lenguaje de scripting, como JavaScript, para dirigir el "div" y cambiar dinámicamente la visibilidad.

Puedes escribir este código tu mismo, o conseguir Dreamweaver como asistente. Dreamweaver recomienda que conozcas un poco sobre JavaScript antes de añadir comportamientos en éste lenguaje para CS3 mediante el uso del panel de "comportamientos".

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles