Capas

Introducción

Hasta hace muy poco tiempo, las páginas web organizaban su contenido utilizando etiquetas <div></div>, también conocidas como capas. Estas etiquetas permiten crear contenedores de la información. Después podemos definir sus propiedades de ancho, alto, fondo, ubicación, etcétera a través de propiedades CSS que se asignan creando reglas de estilo con selectores de clase, de ID, de etiqueta o selectores compuestos. De ese modo, podemos crear un contenedor <div> para el área del encabezado, otro más para poner el menú, luego crear otra etiqueta <div> con el contenido principal de la página, tal vez usemos otro contenedor del mismo tipo para una barra lateral y, finalmente, otro para el pie de la página. De este modo, una sucesión de capas <div> crea la estructura de la página, al tiempo que las propiedades CSS le dan forma y ubicación. Finalmente, en cada capa podemos insertar encabezados, párrafos, imágenes, formularios, etcétera, tal y como ya estudiamos.

Con HTML5 las cosas han cambiando. Ahora se han introducido nuevas etiquetas que también sirven de contenedores para la información de una página web, pero el nombre de estas etiquetas indica de modo claro la posición de la página donde deben utilizarse. Así, tenemos una etiqueta llamada <header></header> que debe utilizarse preferentemente como encabezado de la página y en la cual ubicaremos el título. Tenemos otra más llamada <nav></nav> que funciona como recuadro contenedor del menú, etcétera. A este tipo de etiquetas se les llama semánticas, ya que su uso da una explicación lógica de la manera en que se estructura la información dentro de la página web. El tamaño, posición y otras características que deben tener estos nuevos contenedores también está dado por propiedades CSS, igual que en el caso de las etiquetas <div>. La diferencia y ventaja de utilizar etiquetas semánticas, reside en el hecho de que los buscadores de Internet pueden indexar mejor el contenido. Algunos programas de accesibilidad, como los lectores de páginas para invidentes, pueden identificar claramente el título de una página si éste se encuentra en un contenedor <header>, cosa que no puede distinguirse si se trata de uno tipo <div> y ubican mejor contenido relevante si está en, por ejemplo, una etiqueta <article>. En general, es mucho más comprensible la estructura de la página y, por tanto, la organización de su contenido.

Las capas o etiquetas <div></div> se siguen utilizando ampliamente, por supuesto. Su uso no se descarta. Podemos incluso utilizarlas dentro de algunas etiquetas semánticas, como ya mencionamos.

El panel Insertar de la versión CC de Dreamweaver tiene una categoría llamada Estructura, con la cual podemos crear las diferentes secciones de una página web. Como sabemos, no necesitamos preocuparnos por el código, ya que el programa crea las etiquetas correspondientes. Veamos algunos de los elementos estructurales de este panel y luego vamos a crear una secuencia semántica de los mismos y, finalmente, les daremos forma a través de algunas propiedades CSS básicas.

 Capas <div>

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.

Ésta 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 con posición absoluta 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. Es posible incluso insertar a su vez otras capas, con lo que tendríamos capas anidadas.

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.

 Insertar una capa

Las capas pueden insertarse a través del menú Insertar, opción Div, o bien en el mismo menú Insertar, opción Estructura, Div.

También es posible utilizar el panel Insertar, en la categoría Común, opción Div. También en la categoría Estructura, opción Div. En cualquier caso, se abre un cuadro de diálgo que nos permite definir, a través de estilos CSS, si se trata de una capa de posicionamiento absoluto, que son las que nos interesan en este apartado.

Como vamos a convertir la capa en un elemento PA, podemos dejar como está la opción En punto de inserción. Si ya tuviéramos una regla de estilo definida con propiedades de posición, podríamos elegirla del desplegable de clases. En ID podemos definir uno para la capa o bien utilizar uno de la lista siempre y cuando estuviera definido en una hoja de estilos CSS adjunta y no hubiera sido ya utilizada por otro elemento de la página. Como podrá recordar, los ID sólo pueden utilizarse una vez en alguna etiqueta HTML.

Un método simple entonces es establecer un ID para la capa que vamos a insertar y luego pulsar el botón Nueva regla CSS para establecer sus propiedades de posición. Supongamos que el ID es capa01. Las propiedades se establecen en el siguiente cuadro de diálogo, en la categoría Posición.

Observe en la imagen que la propiedad Position es absoluta, el ancho es de 175 pixels, un alto de 200 y que está a 150 pixels del margen superior de la página y a 100 del margen izquierdo. Su apariencia en la ventana de diseño sería como sigue:

Al hacer clic dentro de la capa, podemos insertar en ella texto, imágenes y cualquier otro elemento HTML como si se tratara de una página independiente.

Una vez se ha insertado la capa, pueden editarse sus atributos, pero para ello hay que seleccionarla primero haciendo clic sobre el icono  correspondiente,