Vamos

a ver algunas de las caractersticas bsicas sobre las capas, para luego poder trabajar con ellas y aplicarles algn comportamiento. 14.1. Introduccin Las capas no son ms que unos recuadros, elementos de bloque, destinados a contener y agrupar otros elementos, igual que los prrafos son elementos de bloque destinados a contener texto. Las capas, tambin 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 pgina, obtenemos los elementos ideales para maquetar nuestra pgina, es decir, distribuir el contenido en bloques.

Unidad 14. Capas

En la imagen de arriba vemos varias capas azules distribuidas sobre una capa gris. Si estrechas o agrandas la ventana del navegador, vers que pueden llegar a solaparse. Cuando convertimos una capa en un elemento con posicin absoluta (elemento PA), se muestra as en Dreamweaver:

Las capas pueden moverse de una posicin a otra de la ventana pulsando sobre el recuadro blanco, y sin soltar el ratn, arrastrndola hacia la nueva posicin. Tambin pueden ser redimensionadas pulsando sobre los recuadros negros, y arrastrndolos hasta conseguir el tamao deseado. Dentro del recuadro de la capa es posible insertar texto, tablas, imgenes, 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 tambin la capa. Las capas, combinadas con JavaScript pueden dotar a una pgina de verdadero dinamismo. 14.2. Insertar una capa Las capas pueden insertarse en una pgina a travs del men Insertar, opcin Objeto de diseo, donde encontramos Etiqueta Div (divisin simple) y Div PA (Capa con Posicin Absoluta). Para lo que vamos a comentar, nos quedamos con la segunda opcin.

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 fcil seleccionar la deseada a la primera.

Cuando existen varias capas en un mismo documento, es preferible seleccionarlas a travs de la pestaa Elementos PA del panel CSS, que puede abrirse a travs del men Ventana opcin Elementos PA. Tambin 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. 14.3. Formato de una capa Las propiedades de la capa se especifican a travs de su inspector de propiedades.

Elemento CSSP 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 ms descriptivo, podemos hacer clic derecho sobre el borde de la capa y elegir ID... en el men contextual. Tambin puede ser cambiado a travs del panel Elementos PA, haciendo doble clic sobre l. El resto de campos se refieren a las propiedades CSS que definen la posicin y tamao de la capa. Izq y Sup indican la distancia en pxeles (tambin podemos introducir un valor en porcentaje) que hay entre los lmites 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 posicin en el documento. Si queremos que la posicin se tome con respecto al elemento padre, pero este no tiene posicionamiento absoluto, podemos darle un posicionamiento relativo empleando CSS (En las propiedades dePosicin del editor CSS, estableciendo position como relative). Esto no afectar a la posicin 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, aadiramos por CSS marginleft: 100px;. An y Al indican la anchura y la altura ndice Z es el nmero de orden de colocacin de las capas. Este valor tambin puede cambiarse a travs 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: o Default (visibilidad segn el navegador), o Inherit (se muestra la capa mientras la pgina a la que pertenece tambin se est mostrando), o Visible (muestra la capa, aunque la pgina no se est viendo) y o Hidden (la capa est oculta). La visibilidad tambin puede cambiarse a travs del panel Elementos PA, pulsando sobre la imagen del ojo. El ojo abierto indica Visible, y el ojo cerrado indica Hidden. A travs de Im. fondo y Col puede indicarse una imagen o un color de fondo para la capa. Desb. (Desbordamiento). Hasta ahora, los elementos que veamos 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 cmo aparecen las capas en un navegador cuando el contenido excede el tamao especificado de la capa. o Visible indica que el contenido adicional se muestra, excediendo los lmites de la capa. o Hidden (oculto) especifica que el contenido adicional no se mostrar en el navegador. o Scroll (desplazamiento) especifica que el navegador deber aadir barras de desplazamiento a la capa tanto si se necesitan como si no.

Auto (automtico) hace que el navegador muestre barras de desplazamiento para la capa cuando sean necesarias (es decir, cuando el contenido de la capa supere sus lmites).

Todo lo que hemos definido de la capa, aparece como propiedades CSS en la cabecera de la pgina, utilizando como selector el ID o nombre de la capa. Por eso, si queremos emplear una capa en la misma posicin en distintas pginas, podemos exportar ese estilo a una hoja de estilos, y en cada pgina crear una capa y darle el mismo ID. Recuerda que el ID ha de ser nico en la pgina, pero puede repetirse en pginas distintas. Podemos editar estas propiedades con el editor CSS en la categora Posicin. Ah vers, por ejemplo, que podemos indicar la distancia con el lado derecho (right) en vez del izquierdo como hacamos hasta ahora. O la distancia con el lado inferior (bottom). Aunque podemos hacerlo de varias formas, lo recomendable es indicar la distancia con uno de los lados y el ancho, y la distancia con el lado superior o inferior y el alto.