Ejemplo de Plantilla CSS (Ejemplo2)

El siguiente ejemplo de plantilla tiene la siguiente estructura:

Encabezado: Para titulo de la página
Cuerpo: Con las secciones siguientes.
       Caja izquierda para menú
       Caja central para contenido
       Caja derecha para publicida
Caja inferior para pie de página

Ejemplo de plantilla usando CSS.

Enlace para descargar el ejemplo:

https://googledrive.com/host/0BxfUn2LNLVPeUlMtZmJxbkxqT1U/ejemplo2_plantilla_css.zip

Enlace para ver el ejemplo:

https://googledrive.com/host/0BxfUn2LNLVPeUmhrU0NxUk5MaVE/index.html

Código HTML del Ejemplo (index.html).

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Examen de MIW</title>

<link type="text/css" rel="stylesheet" href="estilos.css" />

</style>

</head>

<body>

<div class="contenedorglobal"> 

<div class="encabezado">
<h1>TITULO COLOR AZUL CON FONDO GRIS<h1>
</div>

<div class="contenedorinterno">    

    <div class="izquierdo">
    <center><br>
        MI MENU
    </center>
    </div>

          <div class="central">
    <h2>TITULO COLOR ROJO....</h2>
    <P>
    Y este es el texto normal con color verde.
    Las hojas de estilo son lo mejor para el diseÄno de tu sitio web.
    </P>
    </div>

    <div class="piepagina">
         <h1>
PIE DE PAGINA COLOR BLANCO FONDO NEGRO webmaster: pavillalta@ugb.edu.sv</h1>
         </div>


       <div class="derecho">
           <center><br>
        CONTENEDOR DERECHO
           </center>
       </div>

     </div> 

</div> 

</body>
</html>

Código CSS del Ejemplo(estilos.css).

body{

   padding:20px;
   margin:20px 60px;
   font-family:Arial;
   font-size: 12px;
   background-color:silver;
}

.contenedorglobal{
   width: 95%;
   height: 780px;
   background-color: white;
   margin: 10px 10px 10px 10px ;
   border:2px inset purple;
}

.encabezado
{
   width: 95%;
   height: 75px;
   background-color: #848484;
   margin: 10px 10px 10px 10px ;
   border:2px inset purple;
   color: #0000FF;
   text-align:center;
}

.contenedorinterno{
   width: 95%;
   height: 650px;
   background-color: white;
   margin: 10px 10px 10px 10px ;
   border:2px inset purple;
}

.izquierdo{
   width: 20%;
   height: 500px;
   background-color: D0FA58;
   margin: 10px 10px 10px 10px ;
   float: left;
   border:2px inset purple;
   text-align:center;
   cursor: crosshair;

}

.central{
   width: 57%;
   height: 500px;
   background-color: D0FA58;
   margin: 10px 10px 10px 10px ;
   float: left;
   border:4px inset purple;
   text-align:center;
   color:#298A08;
}

h2{
   color:#FF0000;
}

.piepagina{
   width: 80%;
   height: 75px;
   background-color: #000000;
   margin: 10px 10px 10px 10px ;
   border-color: black;
   border:2px;
   border:2px inset purple;
   font-family:Arial;
   font-size: 10px;
   color:#FFFFFF;
   text-align:center;

   float: left;
}

.derecho
{
   width: 15%;
   height: 600px;
   background-color: D0FA58;
   margin: 10px 10px 10px 10px ;
   border:2px inset purple;
   text-align:top;
   position: relative;
   left:890px;
    top:4px;

}

Enlace para descargar el ejemplo:

https://googledrive.com/host/0BxfUn2LNLVPeUlMtZmJxbkxqT1U/ejemplo2_plantilla_css.zip