InicioCrear web desde cero › Maquetar pagina web con DIVs (capas o layouts)

Maquetar pagina web con DIVs (capas o layouts)

Introducción a los conceptos básicos de la maquetación con CSS y capas, ¿que son las capas? ¿para que sirve?, aquí responderemos a todas las preguntas.

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.


¿Que te parece si empezamos?
 

Siguiente lección: nuestro primer DIV