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
4194
Maquetar el contenedor general con CSS
En esta lección de maquetación aprenderemos a maquetar el contenedor general de nuestra pagina web
Contenedor general
La primer capa que tendremos que crear es un contenedor general al que le aplicaremos un ancho y alto fijo para todo el sitio Web.
Para este ejemplo lo haremos con estas medidas:
- Ancho: 900 pixeles
- Alto: 400 pixeles
Sabiendo esto podemos ponernos manos a la obra :)
A este DIV lo llamaremos "contenedor", y sería algo asi:
#contenedor {
width: 900px;
height: 400px;
}
Ahora abrimos el archivo HTML (index.html) y comenzamos a armar las capas, por ahora solo tenemos que llamar a la capa "contenedor", así:
<html>
<head>
<title>Maquetando con estilos CSS</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="contenedor">
</div>
</body>
</html>
Ya tenemos el contendor general, ahora maquetaremos la cabecera.
Curso: Crear web desde cero
Imprimir
Enviar por email
Favoritos
Tamaño de fuente