Vamos a ver algunas de las características básicas sobre
las capas, para luego poder trabajar con ellas y aplicarles
algún comportamiento.
1. Introducción
Las capas no son más que unos recuadros, elementos de bloque, destinados
a contener y agrupar otros elementos, igual que los párrafos son elementos de
bloque destinados a contener texto.
Esta es una capa con borde verde
Las capas, también llamadas layers o divisiones, se crean con la
etiqueta <div></div>.
Al ser elementos contenedores, son muy útiles para organizar nuestros
elementos. Si esto lo combinamos con el posicionamiento absoluto, una propiedad CSS que nos permite colocar los elementos donde queramos
en nuestra página, obtenemos los elementos ideales para maquetar nuestra
página, es decir, distribuir el contenido en bloques.
En la imagen de arriba vemos varias capas azules distribuidas sobre una
capa gris. Si estrechas o agrandas la ventana del navegador, verás que pueden
llegar a solaparse.
Cuando convertimos una capa en un elemento con posición absoluta (elemento PA), se muestra así en Dreamweaver:
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.
Este icono 
sirve para seleccionar la capa
al pulsar sobre él, y al eliminarlo se elimina también la capa.
sirve para seleccionar la capa
al pulsar sobre él, y al eliminarlo se elimina también la capa.
Las capas, combinadas con JavaScript pueden dotar a una página de
verdadero dinamismo.
2. Insertar una capa
Las capas pueden insertarse en una página a través del menú Insertar, opción Objeto
de diseño, donde encontramos Etiqueta Div (división simple) y Div
PA (Capa con Posición
Absoluta). Para lo que vamos a comentar, nos quedamos con la segunda opción.
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 ésta, y no es fácil seleccionar la
deseada a la primera.
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 ésta, 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 Elementos
PA del panel CSS, que puede abrirse a
través del menú Ventana opciónElementos
PA. 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.
3. Formato de una capa
Las propiedades de la capa se especifican a través de su inspector de propiedades.
Elemento
CSS-P es el nombre o ID
de la capa. Desde aquí podemos asignarle otro ID, pero si lo hacemos perderá las
propiedades que hayamos indicado para este elemento. SI lo que queremos es
cambiar el ID por otro más descriptivo, podemos hacer clic derecho sobre el
borde de la capa y elegir ID... en el menú contextual. También puede ser
cambiado a través del panel Elementos PA, haciendo doble clic sobre él.
El resto de campos se refieren a las propiedades CSS que definen la
posición y tamaño de la capa.
Izq y Sup indican la distancia en píxeles (también
podemos introducir un valor en porcentaje) que hay entre los límites izquierdo
y superior del documento y los lados superior e izquierdo de la capa
respectivamente.
Por defecto se toman los lados del documento, a no ser que creemos una
Capa PA dentro de otra capa posicionada. En este caso, la distancia se referirá
a los lados de la capa padre, independientemente de su posición en el
documento.
Si queremos que la posición se tome con respecto al elemento padre, pero
este no tiene posicionamiento
absoluto, podemos darle un
posicionamiento relativo empleando CSS (En las propiedades de Posición del editor CSS, estableciendo position como relative). Esto no afectará a la posición del elemento
padre si no cambiamos las propiedades left, top, right o bottom.
Truco: Si queremos centrar una capa con respecto al elemento que la contiene podemos hacerlo empleando
CSS. Para ello, en Izq. ponemos 50%. Para que el lado izquierdo cuente a partir del
centro, le damos un
margen izquierdo negativo que
sea la mitad del ancho de la capa. En la imagen anterior, como el ancho es
200px, añadiríamos por CSS margin-left: -100px;.
An y Al indican la anchura y la altura
Í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 Elementos PA. 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 Elementos PA,
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). Hasta ahora, los elementos
que veíamos se ajustaban a su contenido. En el caso de las Capas PA podemos
indicar un ancho y alto, por lo que puede que el contenido no quepa dentro de
la capa. Con esta propiedad controlamos 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 se muestra,
excediendo los límites de la capa.
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).
visible. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.
auto. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.
auto. Éste sí cabe.
scroll. Éste sí cabe.
4. Capas prediseñadas
Al crear un nuevo documento, habrás visto que aparece la columna Diseño.
Estos diseños, que podemos elegir, están basados en capas.
Lo que harán será dividir nuestra página en las filas y columnas que
elijamos, con anchos fijos o variables.
El nombre es bastante descriptivo, y además están acompañadas de
gráficos que representan el diseño, por lo que no necesitan más explicación.
Una vez seleccionado un diseño, sólo tendremos que reemplazar el texto
de ejemplo por el contenido que queramos.
.gif)
_blank:
