¿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;
}
