Unidad 14. Capas (I)

Vamos a ver algunas de las características básicas sobre las capas, para luego poder trabajar con ellas y aplicarles algún comportamiento.

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

É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:

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.

Pág. 14.1

Atrás  Inicio  Adelante