¿Que es el Maquetado de una Web?

Es darle forma y estructura a una pagina, luego de tener la estructura se procede a la decoración de esta, existen varios diseños de web, tu puedes elegir o diseñar cualquier modelo.

Primero debes hacer un boceto, de preferencia un dibujo en papel de lo que deseas, cono en el ejemplo:

Primer Diseño Web con CSS

Boceto


Código HTML (pagina.html)

<html>
<head>
 <title>Maquetacion con CSS y Divs</title>
 <link rel="stylesheet" href="miestilo.css" type="text/css"/>
</head>
<body>
 <div class="titulo"></div>
 <div class="menu"></div>
 <div class="contenido"></div>
 <div class="pie"></div>
</body>
</html>

Codigo CSS (miestilo.css)


.titulo
{
        background-color:#336699;/*Color de fondo*/
        width: 80%;/*Ancho respecto a la pagina*/
        height: 150px;/*Altura del titulo*/
        margin-left: 10%;/*Espacio del margen izquierdo*/
        padding: 7px;/*Margen interno de la caja*/
        border-radius: 15px;/*Bordes redondeados*/
        margin-bottom: 10px;/*Espacion inferior*/
}
.menu
{
        background-color:#aaaaaa;
        width: 80%;
        height: 30px;
        margin-left: 10%;
        padding: 7px;
        border-radius: 7px;
        margin-bottom: 10px;
        border-style: solid;/*Tipo de borde*/
        border-color: #000000;/*Color del borde*/
}
.contenido
{
        background-color:#66ccff;
        width: 80%;
        min-height: 300px;/*Indica la altura mínima*/
        margin-left: 10%;
        padding: 7px;
        border-radius: 7px;
        margin-bottom: 10px;
}
.pie
{
        background-color:#336699;
        width: 80%;
        height: 25px;
        margin-left: 10%;
        padding: 7px;
        border-radius: 15px; 
}

Segundo Diseño Web con CSS

Boceto


Código HTML (pagina.html)

<html>
<head>
 <title>Maquetacion con CSS y Divs</title>
 <link rel="stylesheet" href="miestilo.css" type="text/css"/>
</head>
<body>
 <div class="contenedor">
  <div class="opciones"></div>
  <div class="contenido"></div>
 </div>
</body>
</html>

Código CSS (miestilo.css)

.contenedor
{
        background-color: #dddddd;
        width: 80%;
        min-height: 415px;
        margin-left: 10%;
        padding: 7px;
        border-radius: 15px;
}
.opciones
{
        background-color:#336699;
        width: 20%;
        min-height: 400px;
        margin-left: 1%;
        padding: 7px;
        float: left;
        border-radius: 7px;
        border-style: solid;
        border-color: #000000;
        margin-top: 8px;/*Distancia en la parte superior*/        
}
.contenido
{
        background-color:#66ccff;
        width: 74%;
        min-height: 400px;
        margin-left: 24%;
        padding: 7px;
        border-radius: 7px;
        margin-bottom: 10px;
        margin-top: 8px;/*Distancia en la parte superior*/        
}



Tercer Diseño Web con CSS

Boceto


Código HTML (pagina.html)

<html>
<head>
 <title>Maquetacion con CSS y Divs</title>
 <link rel="stylesheet" href="miestilo.css" type="text/css"/>
</head>
<body>
 <div class="titulo"></div>
 <div class="menu"></div>
 <div class="contenedor">
  <div class="opciones"></div>
  <div class="contenido"></div>
 </div>
 <div class="pie"></div>
</body>
</html>

Código CSS (miestilo.css)

.titulo
{
        background-color:#336699;/*Color de fondo*/
        width: 80%;/*Ancho respecto a la pagina*/
        height: 150px;/*Altura del titulo*/
        margin-left: 10%;/*Espacio del margen izquierdo*/
        padding: 7px;/*Margen interno de la caja*/
        border-radius: 15px;/*Bordes redondeados*/
        margin-bottom: 10px;/*Espacion inferior*/
}
.menu
{
        background-color:#aaaaaa;
        width: 80%;
        height: 30px;
        margin-left: 10%;
        padding: 7px;
        border-radius: 7px;
        margin-bottom: 10px;
        border-style: solid;/*Tipo de borde*/
        border-color: #000000;/*Color del borde*/
}
.contenedor
{
        background-color: #dddddd;
        width: 80%;
        min-height: 415px;
        margin-left: 10%;
        padding: 7px;
        border-radius: 15px;
        margin-bottom: 10px;
}
.opciones
{
        background-color:#336699;
        width: 20%;
        min-height: 400px;
        margin-left: 1%;
        padding: 7px;
        float: left;
        border-radius: 7px;
        border-style: solid;
        border-color: #000000;
        margin-top: 8px;/*Distancia en la parte superior*/        
}
.contenido
{
        background-color:#66ccff;
        width: 74%;
        min-height: 400px;
        margin-left: 24%;
        padding: 7px;
        border-radius: 7px;
        margin-bottom: 10px;
        margin-top: 8px;/*Distancia en la parte superior*/        
}
.pie
{
        background-color:#336699;
        width: 80%;
        height: 25px;
        margin-left: 10%;
        padding: 7px;
        border-radius: 15px; 
}