5 Capas y Maquetación “Tabless”

Adobe Dreamweaver - Diseño Web – Centro Educativo INEP

Usando capas
Las capas son recuadros que se comportan como elementos de bloque destinados a contener y agrupar otros
elementos. Si pensamos en un texto, estas tendrían el mismo rol de los párrafos de bloque destinados a contener texto.

Este es un ejemplo de una capa con borde

Las capas, también llamadas “layers”, se crean con la etiqueta HTML <div></div>.

Al ser elementos contenedores, son muy útiles para organizar y maquetar nuestra página sin la necesidad de usar
tablad. De ahí el nombre “Tabless” del estilo. Si esto lo combinamos con el posicionamiento absoluto, una propiedad
CSS que nos permite colocar los elementos donde lo necesitemos, obtenemos los elementos ideales para maquetar, es
decir, distribuir el contenido en bloques.

En la imagen de arriba vemos varias capas distribuidas dentro una capa “madre” o “contenedora”. Si achica o agranda la
ventana del navegador, estas se irán desplazando de acuerdo al tamaño de la ventana. Este concepto lo conocemos
como “Diseño Fluído” que profundizaremos más adelante.

Cuando convertimos una capa en un elemento con posición absoluta (elemento PA), se muestra así en Dreamweaver:

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.

1
 5 Capas y Maquetación “Tabless”
Adobe Dreamweaver - Diseño Web – Centro Educativo INEP

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. Recordemos que combinadas con JavaScript, pueden dotar a una página de
verdadero dinamismo.

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), Etiqueta Div de diseño de cuadrícula fluida y Div PA (Capa con Posición
Absoluta).

Una vez insertada, 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 de cada una, pero esto no resulta útil cuando se crearon múltiples
capas en un mismo documento, ya que 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ón Elementos 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.

2
 5 Capas y Maquetación “Tabless”
Adobe Dreamweaver - Diseño Web – Centro Educativo INEP

Formato de una capa

Los cambios que se quieran hacer sobre la capa se especifican a través del 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 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 CSSmargin-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

3
 5 Capas y Maquetación “Tabless”
Adobe Dreamweaver - Diseño Web – Centro Educativo INEP

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.

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.

Maquetación y modelo de caja:

Cuando hablamos de “maquetar” nos referimos a la ubicación y

formato de las capas en la caja contenedora principal. Para ello es muy
importante aprender algunas propiedades CSS relativas a las capas
como son MARGIN, PADDING, HEIGHT, WIDTH, etc. Vamos a ver un
modelo de caja y a detallar sus propiedades principales:

Contenido: Este espacio será el que albergará, en su totalidad, tanto al

texto como a las imágenes que insertemos entre las etiquetas <div …>
y </div> así como a cualquier otro bloque que pertenezca a él.

Ancho y alto (width – height): Especifican exactamente las

dimensiones que tendrá la superficie que alberga el CONTENIDO.

Borde (border): Determina la decoración del bloque; es decir, si está recuadrado o no con líneas, en su totalidad o solo
en algunos de sus lados, si son visibles o no, el tipo de línea que emplea, el color, etc.

4
 5 Capas y Maquetación “Tabless”
Adobe Dreamweaver - Diseño Web – Centro Educativo INEP

Relleno (padding): Consiste en el espacio que intermedia entre el borde y el contenido. Podríamos interpretarlo como
los márgenes “interiores”. Se controlan los cuatro a la vez, o de forma individualizada.

Margen (margin): Controla la distancia entre el borde de nuestro bloque y los elementos del bloque contenedor; es
decir, del bloque en el que esté introducido nuestro bloque en cuestión, dado que los bloques pueden ser hijo o padres
de otros. Para no hacernos un lío, los margenes de toda la vida, el espacio en el que no podemos escribir nada. Para
diferenciarlo del padding, podríamos decir que son los márgenes “exteriores”.

Otras propiedades de nuestro bloque a tener en cuenta son:

Imagen de fondo (backgroun-image): Muestra, como fondo, la imagen a la que se enlace, teniendo en cuenta que
rellenará la superficie que abarque tanto el CONTENIDO como el PADDING, si es que el tamaño de la imagen da para
ello, aunque esto se podría solucionar.

Color de fondo (background-color): Muestra, como fondo, el color que se le asigne. Abarca la misma superficie que la
imagen de fondo, pero por detrás de ésta si están los dos elementos establecidos. La imagen de fondo con zonas
transparentes permitirá ver el color de fondo, dado que éste quedaría como la capa de nivel inferior.

Unidades de medida: Para establecer las dimensiones, debemos utilizar las unidades. Existen de tres tipos: absolutas (in,
cm, mm, pt, pc), porcentajes (x%), y relativas (px, em, ex). De entre ellas, emplearemos las relativas, ya que se adaptarán
mejor a todos los dispositivos que visualicen las páginas.

• px = píxel (relativa a los puntos de la pantalla en la que se visualice la página).

• em = ancho de la letra M mayúscula de la fuente que se esté utilizando.
• ex = alto de la letra x de la fuente que se esté utilizando.

Colores: La forma más extendida consiste en establecerlo por medio del código RGB rojo-verde-azul (Red-Green-Blue) en
hexadecimal, anteponiéndole el símbolo “#”. Por ejemplo, el rojo puro sería #FF0000. Cualquier programa de edición de
imágenes puede facilitarnos la paleta de colores y su equivalente en hexadecimal, el cual trasladaríamos a nuestro
código. Es posible establecer 17 colores indicando su nombre, pero está opción, por su limitación no se suele emplear.

Ejercicio: Primer maquetación con CSS y DIV

Como se puede observar el diseño está formado por una cabecera, un menú, dos
divs flotando uno a la derecha y otro a la izquierda y un pie de página. Nótese
que están contenidos en un “contenedor” (como un borde general).

Para realizar este diseño se necesitan dos ficheros, uno HTML y uno CSS. A
continuación abra Dreamweaver y copie este código HTML. Es realmente
sencillo. Hay seis divs de los cuales uno contiene a los otros cinco, y dos de ellos
están flotando a la derecha y a la izquierda respectivamente.

El código del fichero HTML sería el siguiente:

5
 5 Capas y Maquetación “Tabless”
Adobe Dreamweaver - Diseño Web – Centro Educativo INEP

<html>
<head>
<title>Maquetacion con CSS y Divs</title>
<link rel="stylesheet" href="css/maquetacion.css" type="text/css"/>
</head>
<body>
<div id ="contenedor">
<div id ="cabecera"></div>
<div id ="menu"></div>
<div id ="izquierda"></div>
<div id ="derecha"></div>
<div id ="pie"></div>
</div>
</body>
</html>

Guarde el archivo que acaba de copiar en una carpeta llamada “maquetar” dentro de su carpeta de trabajos. Recuerde
que esta página principal se llamará “index”.

Una vez guardado, haga click en “Diseño” y verá que sólo

tenemos un rectángulo de línea punteada solamente. Como en
el código ya estamos haciendo referencia a un archivo CSS
externo llamado “maquetación.css”, veremos que
Dreamweaver lo reconoce pero no lo puede editar dado que
aún no lo hemos escrito.

Para solucionar este inconveniente tenemos que crear el archivo antes de copiar el código.
Para ello vaya a Archivo y elija Nuevo. En el asistente que aparece elija en “Tipo de página”
la opción CSS y presione el botón “Crear”.

Ahora tenemos el documento CSS vacío y antes de escribir el texto que le proporcionamos
en la clase, lo guardaremos en una carpeta llamada CSS. Recuerde que el nombre del archivo
debe ser “maquetacion” (SIN ACENTO) y del tipo CSS

Ahora sí, escriba el código CSS. Observe que para el footer (o pie), el clear lo pone debajo de los que están flotando.

6
 5 Capas y Maquetación “Tabless”
Adobe Dreamweaver - Diseño Web – Centro Educativo INEP

#contenedor{
background-color:#F4ABF2;
border:2px solid #FF0000;
}
#cabecera{
background-color:#E5BC7A;
height:20%;
}
#menu{
height:10%;
background-color:#C8CACC;
}
#izquierda{
height:50%;
background-color:#BDD2EF;
float:left;
width:50%;
}
#derecha{
height:50%;
background-color:#DAF7E2;
float:right;
width:50%;
}
#pie{
height:20%;
background-color:#D3D1C1;
clear:both;
}

Guarde todos los cambios y vea la vista previa en el navegador. Este debe ser el resultado final: