Menu de lecciones
- • Como crear una pagina web paso a paso
- • Descargar e instalar NVU
- • Configurar NVU
- • Conceptos básicos de HTML
- • Creando la pagina inicial
- • Insertando parrafos y saltos de linea en nuestra pagina
- • Crear enlaces con HTML
- • Insertar imagen con HTML
- • Hoja de estilos CSS
- • Conceptos básicos de estilos CSS
- • Poner fondo con estilos CSS
- • Centrar contenido con CSS
- • Margen y padding con estilos CSS
- • Crear listas con HTML
- • Maquetar pagina web con DIVs (capas o layouts)
- • Creando nuestro primer DIV
- • Dar formato a un DIV
- • Flotar y acomodar un DIV
- • Evitar que un DIV o capa se superponga con otra
- • Maquetando una pagina Web con DIVs o Capas (layouts)
- • Maquetar el contenedor general con CSS
- • Maquetar cabecera con CSS
- • Maquetar la barra lateral con CSS
- • Maquetar contenido con CSS
- • Maquetar pie de pagina CSS
- • Como subir una pagina Web
Compartir
Visitas a esta lección
7530
Valora esta lección
Sitios amigos
Maquetando una pagina Web con DIVs o Capas (layouts)
En esta lección aprenderemos a maquetar una pagina web integramente en CSS y HTML, cada parte de ella explicada paso a paso, con ejemplos prácticos para entenderlo mejor.
A lo largo de este curso de maquetación CSS vimos los conceptos básicos para crear y poder flotar capas entre otras cosas, ahora vamos a tratar de poner en práctica lo que aprendimos para maquetar una pagina con la siguiente estructura:
- Cabecera: acá puede ir un logo o el nombre de tu pagina web
- Barra lateral: podemos poner un menu vertical con listas HTML
- Contenido: donde irá el contenido de la web
- Pie de pagina: podemos poner lo que necesitemos, desde el copyright hasta los enlaces recomendados
La estructura deberá quedar así:
¿Listos? comenzaremos maquetando el contenedor general.
Nota: antes de continuar, asegurate de relacionar la hoja de estilos con tu archivo HTML para que todo lo que hagas a lo largo del curso te funcione.
Curso: Crear web desde cero
Lecciones relacionadas
Imprimir
Enviar por email
Favoritos
Tamaño de fuente
Deja un comentario (Con tu cuenta de Facebook)