Capas (DIV)

Vamos a ver algunas de las características básicas de elementos HTML5 que permiten definir la estructura de una página web. A estos elementos podemos después añadirles algún comportamiento.

 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.

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álogo 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,

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.

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).

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.

 

Todo lo que hemos definido de la capa, aparece como propiedades CSS en la cabecera de la página, utilizando como selector el ID o nombre de la capa. Por eso, si queremos emplear una capa en la misma posición en distintas páginas, podemos exportar ese estilo a una hoja de estilos, y en cada página crear una capa y darle el mismo ID. Recuerda que el ID ha de ser único en la página, pero puede repetirse en páginas distintas.

Podemos editar estas propiedades con el editor CSS en la categoría Posición. Ahí verás, por ejemplo, que podemos indicar la distancia con el lado derecho (right) en vez del izquierdo como hacíamos 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.