Videotutorial: introducción a la maquetación con CSS

Una vez más, presentamos una entrega de nuestro Videotutorial de CSS, con un capítulo meramente introductorio a las posibilidades de maquetación de una web utilizando las Hojas de Estilo en Cascada, lo que también se conoce como maquetación por capas y que está en contraposición a la arcaica maquetación por tablas HTML.

La maquetación web se refiere a la forma en la que se posicionan los elementos en la página y se dimensionan para que ocupen exactamente los espacios que deseamos. Sobran explicaciones profundas, en texto, sobre lo que es la maquetación CSS, pues ya lo hemos visto en reiteradas ocasiones en DesarrolloWeb.com, como por ejemplo en el Manual de Maquetación CSS.

Es conveniente decir que la maquetación CSS es un tema fundamental para hacer webs de última generación y que no es un asunto trivial, que se pueda explicar en pocas palabras o abordar sin una introducción previa sobre las posibilidades. En esta ocasión queremos presentar simplemente unas guías iniciales para las personas que quieren abordar este tema, para que sepan de qué manera CSS nos puede ayudar cuando diseñamos el layout o aspecto que tendrán los elementos en la página.

Al querer realizar el videotutorial de CSS de manera práctica, donde las personas puedan aprender sobre ejemplos de trabajo en el día a día como diseñadores, nos hemos visto en la necesidad de comenzar explicando de manera breve cómo la maquetación CSS funciona. Así pues, estos vídeos son simplemente una demostración sobre las posibilidades que veremos en profundidad en futuros vídeos. No esperamos pues que estos vídeos sirvan para conocer al detalle cómo maquetar una web con CSS, sino que tengamos una aproximación inicial al modo de trabajo que deberemos poner en marcha.

Estos dos vídeos que veremos a continuación en realidad es el mismo, partido en dos partes para que no ocupen más de 10 minutos y subirlos a Youtube, donde las personas puedan verlos de manera más fiable.

Parte 1 del vídeo de introducción a la maquetación CSS

En esta parte construiremos un código HTML con dos capas y un contenedor que englobará a ambas. Veremos cómo con atributos CSS podemos definir las dimensiones de las capas y los espacios que ocuparán cada una de ellas para formar dos columnas.

Parte 2 del vídeo de introducción a la maquetación CSS

En esta segunda parte del vídeo veremos cómo podemos definir una tercera capa con más texto y hacer que forme una tercera columna en el layout de esta página web de prueba. Además mostraremos cómo se puede definir el color de fondo en el contenedor global de estas capas y resolveremos uno de los problemas típicos que nos encontraremos al maquetar webs, donde hay capas que tienen un color de fondo que no llega a cubrir todo el espacio. Este problema ya lo hemos tratado en el pasado en DesarrolloWeb.com y ocurre cuando el contenido de las capas es "flotante, es decir tiene un float a izquierda o derecha.

Como decíamos seguiremos abordando el tema de la maquetación CSS en el siguiente articulo con un ejemplo práctico, pero además, para las personas más impacientes y que quieran seguir viendo otros vídeos sobre el tema un poco más avanzados, sugerimos ver los vídeos de maquetación CSS con 960 Grid System.