Diseño web: máxima compatibilidad: Maquetar el esqueleto con CSS

Buenas!

En esta entrada, veremos cómo maquetar el esqueleto de nuestra web, usando CSS.

Así, esta será la última entrada que trate de, por así decirlo, la "teoría" de CSS. La siguiente entrada serán trucos y "hacks" para obtener buenos resultados a varios niveles: ya sean archivos CSS más reducidos, o efectos misceláneos que den más vida a nuestras obras.

Empecemos con un poco de teoría:

Para crear un esqueleto con CSS, hay que tener en cuenta que debemos meter objetos dentro de otros objetos. Esto nos ayudará a mover grupos de ellos sin tener que cambiar casi nada.

Y, ¿cómo agrupamos estos objetos? yo siempre intento seguir el siguiente esquema:

• Creo un objeto (div) principal, que engloba todo
• Sobre el diseño, trazo líneas rectas, allí donde se pueda.
• Éstos serán los objetos (div) principales.
• Mientras se pueda, iré sobre esos objetos, haciendo partes más pequeñas.

Para ilustrar el ejemplo, usaré la imagen de aquel boceto que subí hace unas cuantas entradas.

He hecho cuadrados de diferentes colores para -intentar- ilustrar cómo se haría un esqueleto de este modelo (o, al menos, como lo haría yo).

• En color rojo: div general, lo engloba todo
• En color rojo oscuro: los dos div principales; la sección de botones y la sección de contenido.
• En color verde: ítems dentro de los anteriores, a saber:
• Parte de botones: cada uno de los botones
• Parte de contenido: la sección "puramente" de contenido y la sección de cabecera
• En color azul: ítems dentro de los anteriores, que son:
• Parte de contenido:
• Parte de cabecera: contenedor "imaginario" que engloba todo el contenido de la cabecera
• En color lila-morado-violeta: ítems dentro del ítem azul:
• Parte de contenido:
• Parte de cabecera:
• Parte de contenido de cabecera:
• Sección para logo
• Título de página

También he dejado las guías del dibujo, para mostrar que no siempre los div que salen son los que muestran las guías (en este caso, el div de color azul).

Ahora que ya sabemos cómo estarán distribuidos los div dentro del esqueleto, falta maquetar unas clases CSS que hagan la distribución.

Entonces, creamos uno grande de 800x600, y dentro de este irán dos: para los botones y para el contenido.

En cuanto a los botones, una vez creado el div que aguantará todos los botones, no tenemos más que crear cuatro div consecutivos, ya que éstos ocuparán el 100% del ancho, y por tanto, se mostrarán automáticamente uno debajo de otro.

Para el contenido, haremos un div centrado para el contenido en sí, y otro para la parte de la cabecera.

En la parte de la cabecera, haremos un div centrado para el contenido. Dentro de ese div, haremos uno pequeño para el logo y otro para el título.

En cuanto queramos modificar algún componente, no tendremos más que cambiar alguna cosa del CSS... pero, por ejemplo, digamos que queremos ensanchar todos los botones; no tenemos más que ensanchar el div que contiene todos los botones...

Por ahora, esto es todo para esta entrada; se que no es gran cosa, pero quiero reservar gran parte del material para la próxima entrada, donde veremos varios aspectos del CSS que nos ayudarán a dar vida a las web y a que sean compatibles con todos los navegadores.

Saludos, buenas fiestas y...

¡Hasta la próxima!