Siguiendo con esta guía CSS, llegamos al último de esta introducción antes de entrar propiamente en materia. Ya en el capítulo anterior hablamos de la importancia de tener clara la estructura de nuestra web antes de iniciar cualquier paso, y es que a partir de ahora debemos ser capaces de pensar únicamente en capas, descomponer nuestro diseño web en diferentes trozos que puestos a diferentes niveles conforman el total de nuestra página, tal cual como si estuviéramos trabajando con Photoshop, Gimp o cualquier programa que nos permita usar diferentes capas para crear nuestra composición final.

Pero como el movimiento se demuestra andando, vamos a ver una serie de ejemplos que os pueden ayudar a ver mejor todo esto, y como debe hacerse aplicado al diseño web. Antes que nada, permitirme que os recomiende particularmente un extensión para Firefox que va de perlas: Web Developer [ descargar ]. Con esta extensión, entre otras muchas cosas, podréis ver y modificar online las CSS de otras paginas para ver que efectos producen, os permitirá ver las capas utilizadas en una web, formularios, tablas, activar o desactivar las imágenes, etc. Para los que uséis Internet Explorer, primeramente id a la página web de Mozilla, descargar Firefox y seguidamente instalar la extensión.

Bien, demos paso al ejemplo, vamos a destripar tres webs:

Nota: Las webs seleccionadas sirven únicamente de ejemplo para ilustrar el tema que se trata. Los nombres de las capas y la estructuración de la página pueden no corresponder exactamente a la seguida en dichas webs.

En el primer ejemplo vemos una estructura que destripada resulta bastante sencilla, donde la complejidad reside en esas cuatro cajas de texto colocadas como en 4 columnas. Para conseguir esto (y hasta que no se implemente próximamente con la CSS3) lo que haremos es flotar cada capa para colocarla junto a la anterior. Una buena práctica siempre que flotemos capas es incluirlas todas dentro de una capa para evitarnos problemas (en este caso nuestra capa cuerpo). Cuando estudiemos la clase float lo veremos en mayor profundidad, pero de momento fiaos de mi palabra.

En el segundo caso estamos de nuevo con lo mismo que en el primero y las capas flotantes. Aparentemente parece que pudiera tratarse de un diseño de tres columnas, y que con tres capas flotando una junta a otra los podríamos solventar. La verdad es que no es mala idea hacerlo, pero lo mejor para casos en que el contenido pueda ser variable y si no queremos tener problemas de descuadre (sobretodo entre navegadores), lo podemos solventar de una manera sencilla, que es flotándolas de dos en dos, es decir y para este caso, flotamos la capa1 respecto a la capa2 y capa3 juntas y luego flotamos la capa2 respecto a la capa3. Suena un poco lío, pero lo entenderéis mejor revisando los ejemplos de arriba.

En el tercer y último caso podríamos decir que es una combinación de los dos anteriores llevada al extremo. Digamos que a nivel estructural, ya no hay más que esto. Podréis tener que flotar más capas, pero si sabéis estructurar un caso como este, ya tenéis mucha parte solventada.

Mi consejo es que practiquéis mucho, que estructuréis a vuestra manera y con vuestros nombres otras webs, que naveguéis por el código CSS de diferentes webs y os miréis bien como están estructuradas, como han solventado la puesta en escena de los diferentes elementos, como han traducido su diseño del papel a la web, porque no todo el mundo lo hace de igual forma y posiblemente vosotros acabéis encontrando vuestro sistema con el que os sentís mas cómodos y que acaba siendo vuestra señal de identidad.
El diseño de una web no es sólo saber combinar los colores para que sea más o menos bonito, en la web entran muchos factores entre los que está el diseño visible, la navegabilidad, la facilidad de encontrar la información y que la estructura del código también sea clara para que cualquier modificación futura no se convierta en una odisea.

Os dejo nuestra particular weblografía, está vez de galerías de webs realizadas en CSS, para que vayáis tomando ideas y practicando:

• http://cssvault.com
• http://www.cssclip.com
• http://cssmania.com
• http://www.cssbased.com
• http://www.csselite.com