Unidad 10. 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.
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:
Capa PA
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. 
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 Descripción: http://www.aulaclic.es/dreamweaver-cs4/graficos/selector_capa.gif 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 lefttopright 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.
hidden. 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.

No hay comentarios:

Publicar un comentario