Introducción al uso de capas con CSS y XHTML / HTML

Actualizado el 07/04/2010 < > 2 Cometarios

Resúmen: Breve introducción a la maquetación de páginas web mediante CSS y definición del concepto de capa.

Meneame Bitacoras

La maquetación de una página web es el orden en que se colocan los elementos que la componen, de forma que tenga una estructura visual determinada. La estructura de una página web, tiene una serie de reglas que están basadas en dos aspectos importantes: la tendencia de los usuarios de internet a mirar hacia ciertos puntos de la página, y el uso habitual de ciertas estructuras que hace que los usuarios tengan tendencia a buscar los algunos elementos en determinados lugares.

Así por ejemplo, los logotipos suelen colocarse en la parte superior izquierda de la página, los menús de navegación debajo del encabezado o en la columna izquierda de la página (o en ambos lados en caso de sitios complejos) y los contenidos principales en una columna ancha ubicada en el centro o levemente volcada a uno de los lados de la página.

Las primeras páginas web tenían un diseño muy sencillo, generalmente con una única columna donde se colocaba todo el contenido. El mejoramiento de los lenguajes trajo aparejado el mejoramiento de la distribución de los contenidos, y con ello apareció la maquetación.

Las primeras maquetaciones, antes de la aparición de las hojas de estilo en cascada, se hacían a través del empleo de un truco, que consistía en el empleo de tablas para distribuir los contenidos por la página. Y se trata de un truco, debido a que las tablas no fueron pensadas con la finalidad de ser una herramienta de maquetación, sino como forma de colocar los elementos que requerían tabulación.

Hojas de estilo en cascada y las capas

La aparición de las hojas de estilo en cascada significó un cambio radical en la maquetación de páginas web. La aparición de los DIV (abreviatura de divisiones) sustituyó y mejoró la maquetación hecha con tablas.

Las capas, reemplazaron a las tablas dotando a los diseñadores de páginas web de una herramienta de mucha mayor flexibilidad que permite una mayor eficiencia en el trabajo. Mientras que para realizar cambios en una serie de páginas, un diseñador debía cambiar el código de todas ellas, con el empleo de las hojas de estilo solo debe cambiar unas pocas líneas, sobre todo si esta se encuentra en un archivo separado del código HTML.

Las capas, son una especie de caja contenedora donde el diseñador colocará los contenidos de la página. A estas capas, debe darles una ubicación determinada, de forma tal que siga la estructura que se desea que tenga el conjunto. De acuerdo con los valores que se den a los atributos de una capa, esta se comportará de formas diversas, permitiendo a los diseñadores una gran libertad para definir estructuras de gran complejidad en forma relativamente sencilla.

Atributos de las capas

De acuerdo a los valores que se den a los atributos de las capas, estas se mostrarán y se comportarán de una forma determinada. Los atributos y sus valores, son definidos en las hojas de estilo en cascadas. Las capas, al igual que los demás elementos cuyos atributos son definidos por las hojas de estilo en su identificador (id) o su clase (class).

Cuando la capa es definida como un elemento único, se le identifica en forma individual en la hoja de estilos y en el documento HTML, mientras que las capas que conforman un grupo con atributos iguales, se les identifica como pertenecientes a una clase, definiéndose el conjunto en la hoja de estilos y marcando cuales son las capas que pertenecen a esa clase en el documento HTML.

Para tener una idea más clara de estos conceptos, haremos una pequeña prueba. En primer lugar, abriremos dos documentos de un editor de texto. Al primero lo guardaremos como “index.html” y al segundo como “estilo.css”.

En estos documentos colocaremos los siguientes códigos. En index.html:

<html>
<head>
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="caja">Hola</div>
<div id="capa">Mundo</div>
<div class="caja">lawebera.es</div>
</body>
</html>

En el primero, en el encabezado del documento (todo lo que se encuentra entre las etiquetas <head> y </head>), nos encontramos con un link que vincula al archivo que contiene el código CSS con el documento HTML. Luego se encuentra el cuerpo del documento (todo lo que está dentro de las etiquetas <body> y </body>) donde habremos colocado tres capas, una llamada “capa” y dos pertenecientes a la clase “caja”, cada una con una palabra a modo de contenido. Si a continuación abrimos esta página en un navegador, nos encontraremos con que la misma se limita a las tres palabras, tal como puede apreciarse en la siguiente imagen:

Capas sin atributos

Siguiendo con la prueba, colocaremos el siguiente código en el archivo CSS:

/* Aquí definimos la capa que llamaremos "capa" */
#capa {
width: 300px;
height: 50px;
background-color: #ff8800;
}
/* Ahora definiremos al grupo de capas que denominaremos clase "caja" */
.caja {
width: 300px;
height: 50px;
background-color: #0088ff;
}

Guardamos los cambios realizados. El resultado podemos verlo haciendo click en el botón refrescar del navegador, obteniendo el siguiente resultado:

Capas con atributos definidos en hojas de estilo

Algunos atributos

En el código CSS que hemos colocado, nos encontramos con algunos de los atributos que pueden modificarse en una capa. Los dos primeros, “width” y “heitght”, corresponden al ancho y la altura del elemento. En caso de que el ancho no se defina, la capa se extenderá por todo el ancho de la página o de la capa que la contenga o hasta el límite de una capa contigua. En caso de que la altura no quede definida, la capa se extenderá hasta donde llegue el contenido de la misma, y en caso de que no tenga contenido, simplemente su altura será cero. Estos dos atributos pueden ser definidos en tres modos diferentes:

  • Valor fijo: Se establece una medida precisa (en el ejemplo pixeles cuya abreviatura es px).
  • Porcentaje: Se establece un valor en porcentaje, tras lo cual la capa tendrá diferentes dimensiones, de acuerdo a como y donde se encuentre ubicada, tal como veremos más adelante.
  • Automático: Se establece escribiendo la palabra auto. Su comportamiento en este caso, también es variable, tal como se describirá más adelante.

Otro atributo que encontramos en el código CSS es “background-color”, que define el color de fondo de la capa. Tiene dos modos, que son un color sólido o transparente. Cuando se desea que la capa sea transparente, el valor que se debe introducir es “transparent”, mientras que para definir un color sólido existen varias formas de hacerlo. La que empleamos en el ejemplo es la de un código de seis dígitos hexadecimales divididos en pares, cada uno de los cuales define un color (Rojo, verde y azul, en ese orden) y que se encuentran precedidos por el símbolo #.

Conclusión

En este artículo, hemos visto que son las capas y como se definen los atributos. Las capas ofrecen al diseñador una infinidad de posibilidades que, en esta breve introducción es imposible de enumerar y mucho menos de desarrollar y analizar. En artículos posteriores, iremos viendo como hacer que las capas se distribuyan por la superficie de la página, tomen determinados atributos y nos sirvan para maquetar la página y darle el aspecto visual que deseamos.

Meneame Bitacoras

Publicado el 07/04/2010, última actualización 07/04/2010.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Andrés Fernández

URL: LaWebera.es :: Diseño Web

Añadir Comentario (Subir al texto)

2 Cometarios

  1. Tamaño, margen, relleno y bordes de capas con CSS y XHTML / HTML

    [...] el artículo anterior, nos hemos introducido brevemente en el uso de capas mediante el empleo de CSS en XHTML y en HTML, [...]

    Lunes, 12 de abril 2010

  2. Maquetación de páginas web: posición de las capas (primera parte)

    [...] presente trabajo pretende mostrar como se posicionan las capas empleando HTML y CSS. Para poder comprender la totalidad de los conceptos que se verterán, es [...]

    Miércoles, 21 de abril 2010

(Subir al texto)

Añadir Comentario

* Campos obligatorios