MAQUETACIÓN
La maquetación con CSS y Divs es el tipo de maquetación más utilizado en la actualidad en las páginas WEB.
Al modelar o maquetar la página se puede observar que el diseño esta formado por una cabecera, un menú, dos divs flotando uno a la derecha y otro a la izquierda y un pie de página.
Elementos básicos de una página Web:
- Una cabecera: En la que aparecerá un logotipo y un título o lema.
- Un menú de navegación: Para acceder fácilmente a cualquier página del sitio Web.
- Un cuerpo principal: Donde aparecerá el contenido de la página. Este espacio puede subdividirse si asi lo requiere el programador.
- Un pie: En el que se colocarán referencias del autor, derechos de autor, etc.
Para realizar este diseño se necesitan dos ficheros, uno HTML y uno CSS.
Observa y analiza:
1. Crear la siguiente pagina (La plantilla que es un archivo html)
<html>
<head>
<title>Maquetacion con CSS y Divs</title>
<!<link rel="stylesheet" href="maquetacion.css" type="text/css"/>
<link rel="stylesheet" href="estilos02.css" type="text/css"/>
</head>
<body>
<div id ="contenedor">
<div id ="cabecera"></div>
<div id ="menu"></div>
<div id ="izquierda"></div>
<div id ="derecha"></div>
<div id ="pie"></div>
</div>
</body>
</html>
2. Crear el estilo (El estilo o formato individualizado que es un archivo css)
#contenedor{
background-color:red;
border:2px solid black;
}
#cabecera{
background-color:blue;
height:20%;
}
#menu{
height:10%;
background-color:pink;
}
#izquierda{
height:50%;
background-color:cyan;
float:left;
width:70%;
}
#derecha{
height:50%;
background-color: magenta;
float:right;
width:30%;
}
#pie{
height:20%;
background-color:yellow;
clear:both;
}
REVISAR!!
Observa el siguiente ejemplo
<html>
<head>
<title>OTRO EJEMPLO HTML - CSS </title>
<link rel="stylesheet" href="DIV02.css" type="text/css"/>
</head>
<body>
<div id ="uno"></div>
<div id ="dos"></div>
<div id ="tres"></div>
<div id ="cuatro"></div>
<div id ="cinco"></div>
</body>
</html>
La página de estilo es "DIV02.css"
#uno{
background-color:#1EB300;
height:100%;
WIDTH:20%;
float:left
}
#dos{
height:100%;
background-color:#FFE49F;
WIDTH:20%;
float:left
}
#tres{
height:100%;
background-color:#FFB73A;
WIDTH:20%;
float:left
}
#cuatro{
height:100%;
background-color:#41C3FF;
WIDTH:20%;
float:left
}
#cinco{
height:100%;
background-color:#AB79B5;
WIDTH:20%;
float:left
}
