Unidad 12. Capas

Vamos a ver algunas de las características básicas sobre las capas, para luego poder trabajar con ellas y aplicarles algún comportamiento.

Introducción

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 moverse de una posición a otra de la ventana pulsando sobre el recuadro blanco, y sin soltar el ratón, arrastrándola hacia la nueva posición.

También pueden ser redimensionadas pulsando sobre los recuadros negros, y arrastrándolos hasta conseguir el tamaño deseado.

Dentro del recuadro de la capa es posible insertar texto, tablas, imágenes, animaciones flash, y todos los elementos que puede contener un documento HTML.

La capa no solo aparece representada por el recuadro anterior, sino que también aparece la imagen en el documento, cuando está abierto en Dreamweaver.

Este icono sirve para seleccionar la capa al pulsar sobre él, y al eliminarlo se elimina también la capa.

Insertar una capa

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.

Una capa puede seleccionarse de varias maneras. Una de ellas es pulsando sobre el icono correspondiente, pero esto no resulta útil cuando existen muchas capas en un mismo documento, ya que todas las capas tienen asociada una imagen igual a esta, y no es fácil seleccionar la deseada a la primera.

Cuando existen varias capas en un mismo documento, es preferible seleccionarlas a través de la pestaña Capas del panel Diseño, que puede abrirse a través del menú Ventana opción Capas. Si la opción Capas no te aparece directamente en este menú, posiblemente esté dentro de la opción Otros. También puedes abrir el panel pulsando F2.

En dicho panel aparecen los nombres de todas las capas que existen en el documento actual, y para seleccionar una de ellas simplemente hay que pulsar sobre el nombre en el panel.

Formato de una capa

Las propiedades de la capa se especifican a través de su inspector de propiedades.

ID de capa es el nombre de la capa. También puede ser cambiado a través del panel Capas, haciendo doble clic sobre él.

Iz y Sup indican la distancia en pixels que hay entre los límites izquierdo y superior del documento y la capa.

An y Al indican la anchura y la altura de la capa.

Índice Z es el número de orden de colocación de las capas. Este valor también puede cambiarse a través del panel Capas. Una capa será solapada por aquellas capas cuyo índice Z sea mayor que el suyo.

Vis indica la visibilidad inicial de la capa. La visibilidad puede ser de cuatro tipos:

Default (visibilidad según el navegador),

Inherit (se muestra la capa mientras la página a la que pertenece también se esté mostrando),

Visible (muestra la capa, aunque la página no se esté viendo) y

Hidden (la capa está oculta).

La visibilidad también puede cambiarse a través del panel Capas, pulsando sobre la imagen del ojo. El ojo abierto indica Visible, y el ojo cerrado indica Hidden.

A través de Im. fondo y Col puede indicarse una imagen o un color de fondo para la capa.

Desb. (Desbordamiento) controla cómo aparecen las capas en un navegador cuando el contenido excede el tamaño especificado de la capa.

Visible indica que el contenido adicional aparece en la capa. La capa se amplía para darle cabida.

Hidden (oculto) especifica que el contenido adicional no se mostrará en el navegador.

Scroll (desplazamiento) especifica que el navegador deberá añadir barras de desplazamiento a la capa tanto si se necesitan como si no.

Auto (automático) hace que el navegador muestre barras de desplazamiento para la capa cuando sean necesarias (es decir, cuando el contenido de la capa supere sus límites).

Para practicar puedes realizar el Ejercicio paso a paso Insertar una capa.

  Ejercicios del Tema 12.

  Prueba evaluativa del Tema 12.

Pág. 12.1