Maquetar pagina web con DIVs (capas o layouts)

La maquetación es una de las etapas mas importantes a la hora de crear una pagina web, de hecho es una etapa que no se puede omitir, a lo largo de esta lección vamos a aprender todo el proceso para maquetar nuestra pagina web.

Pero, ¿que es eso de la maquetación?

En pocas palabras, maquetar una pagina web es pasar el diseño a código HTML, poniendo cada cosa en su lugar (una cabecera, un menu, etc.).

Hasta hace unos años la única manera de maquetar una pagina web era mediante tablas HTML (<table>), pero esto tiene muchas desventajas y limitaciones, por eso la técnica de maquetación fue evolucionando con los años hasta llegar al punto donde no se usan tablas, si no capas (los famosos DIVs) a las que se le dan formato mediante CSS.

¿Capas, layouts, divs? ¿que es eso?

Las capas, layouts o divs son la misma cosa con distinto nombre jeje, para tener un concepto mental mas fuerte de lo que son, podemos imaginarlos como contenedores o bloques donde podemos meter lo que queramos dentro (imágenes, texto, animaciones, otro bloque, o todo al mismo tiempo) a los que se le asigna un ancho, alto y posición, de esta manera se van a ir posicionando consiguiendo la estructura que queremos.

veamos un ejemplo gráfico:

Ejemplo uno de maquetación y estructura con capas

Como podemos ver, tenemos 3 capas estructuradas de la siguiente manera:

Capa 1: es la capa principal y contenedora
Capa 2: capa dentro de la capa contenedora 1 y alineada a la izquierda (float:left;)
Capa 3: igual que la capa 2, solo que tiene un margen con respecto a esta ultima (float:left; margin: 10px; ya veremos esto mas en detalle).

No te compliques mucho tratando de entender el concepto de golpe, ya lo vamos a ir viendo mas detenidamente durante estas lecciones.

Recuerda que si te surgen dudas, tenes el foro donde podes preguntar, para eso esta ;)

¿Que te parece si empezamos?

Siguiente lección: nuestro primer DIV