Maquetar pagina web con DIVs (capas o layouts)
Por: Lucas MuñozIntroducció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:
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?
- ¿Cómo hago para añadir una imagen a mi página con HTML?
- Cuantos caracteres puedo poner en la meta descripcion?
- Como posiciono mi pagina web? ayuda por favor
- JQuery o Mootools? ayudenme a elegir
- Sombras invertidas con CSS?
- Cómo puedo agregar el botón "Me gusta" de Facebook en mi pagina?
- que es lo que tengo que poner en "cancion.mid"?
- tengo mi pagina y se me borro el public html como lo regreso a l puesto donde era
- como consigo un html
- que es maquetación básica?
- con embed se oye solo en chrome y en ie, hay otro código, bgsound no gracias
- como se hace lengujehtml y se pegando imagenes
- como hago para colocar imagenes debajo del menu principal en paginaswebgratis es tl?
- como hago para colocar un enlace a mi pagina web
- por que mi firefox mosilla no agarra bgsound y tampoco embed?
- dj juancho dj ja
- No tengo nada de eso
- En donde programo php???
- en esta leccion de creando Formulario en HTLM5
- como administrar mi dominio
- Como poner 2 imagenes pero que solo se muestre una y que alla un boton para cambiar a la otra
- deseo crear una pagina esoterica y ganar por visitas "como lo hago"
- que es el programa NVU
- buenos dias, en la segund aparte te coloco la preguntita
Imprimir
Enviar por email
Favoritos
Tamaño de fuente
