viernes, 31 de enero de 2014

Diseño de un sitio WEB

archivo 1: sitio.htm

<!DOCTYPE html> <!-- SIN ESTO, NO RECONOCE html5-->
<html lang="es">
<head>
 <meta charset="utf-8" />
 <link rel="stylesheet" href="plantilla.css" type="text/css" media="all">
 <title>Recursos didácticos(jbfb)</title>
 <!-- Insertar aquí mas Metatags-->
</head>
<body>
 <div id="global">
 <div id="cabecera">
 Cecytem</div>
 <div id="navegacion">
 Menu</div>
 <div id="principal">
 Contenido de la página.
 <p> párrafo vacio</P>
 <p> párrafo vacio</P>
 <p> párrafo vacio</P>
 <p> párrafo vacio</P>
 <p> párrafo vacio</P>
 <p> párrafo vacio</P>
 <p> párrafo vacio</P>
 <p> párrafo vacio</P>
 <p> párrafo vacio</P>

 </div>
 <div class="anuncios1">
 Contenido de la zona de anuncios 1, ya que podemos poner más.
 </div>
 <div id="pie">
 Contenido del pie
 </div>
 </div>
</body>

</html>

archivo 2:plantilla.css

/* CSS Document */

body {
 background-color: #E2F47C;
}
#global {
 width:800px; height:800px;
 margin: 0 auto 0 auto;
 background-color: #ffbbbb;
}
#cabecera {
 width:800px;
 margin: 0 auto 0 auto;
 background-color: #B40068;
}
#navegacion {
 width:780px;
 margin: 0 auto 0 auto;
 background-color: #B4CD00;
 text-align:center;
}
#principal {
 width:650px;
 margin: 0 auto 0 auto;
 background-color: #ffCD68;
 float: left;
}
.anuncios1 {
 width:150px;
 margin: 0 auto 0 auto;
 background-color: #B4ff68;
 float: right;
}
#pie {
 width:800px;
 margin: 0 auto 0 auto;
 background-color: #B4C355;
 float: left;

}

No hay comentarios:

Publicar un comentario