Maquetación CSS con 960 Grid System, Parte II

Estamos maquetando una web con CSS, para mostrar a todos los lectores de DesarrolloWeb.com el proceso de creación de una página web con el framework CSS 960 Grid System. Esta práctica la estamos haciendo desde cero y explicando paso por paso los detalles, no sólo de la maquetación de la propia web, sino también las técnicas que utilizamos para aplicar estilo a diversos componentes de la página, como cajas de contenido, listas, etc.

El presente artículo forma parte de una serie de artículos que se puede encontrar en el Manual de 960 Grid System . En anteriores entregas ya comenzamos a maquetar este caso real de página web, con un aspecto bastante profesional. Todo el proceso lo estamos grabando en vídeo, para que cualquier lector pueda además ver en su ordenador cómo hemos realizado nosotros esta práctica.

En el presente artículo veremos la maquetación de la parte principal del cuerpo de la página y llegaremos hasta el punto que se puede ver pulsando este enlace. Recordemos que la cabecera de la página ya explicamos cómo se hacía en el artículo anterior .

Así pues, comencemos a ver cómo hemos realizado este trabajo, aunque cabe decir que las explicaciones en texto de este artículo serán bien básicas, puesto que todo el proceso explicado se puede ver en el vídeo que hemos publicado y que se encuentra disponible al final de este artículo.

Maquetación del Cuerpo

Todo lo que vamos a colocar en el cuerpo se tiene que incluir dentro de un contenedor. Cuando hicimos la cabecera se creó ya en un contenedor, pero ahora como el cuerpo tiene otros estilos, por lo que nos conviene crear una nueva capa DIV para el cuerpo, que hará las veces de contenedor y tal como hemos hecho en otras ocasiones utilizaremos la class="container_12". Dentro del contenedor colocaremos, como venimos explicando en este manual, varias divisiones o espacios que se definirán a través de elementos DIV con clases grid_xx, siendo xx el número de columnas que utiliza esa división.

La maquetación principal del cuerpo, con el contenedor y las cajas grid_xx sería la siguiente:

<div class="container_12" id="cuerpo">
   <div class="grid_12" id="navegador">
      Aquí va el navegador
   </div>
   <div class="clear"></div>
   
   <div class="grid_8">
      Aquí va la columna de la izquierda del cuerpo
   </div>
   <div class="grid_4">
      Aquí va la columna de la derecha del cuerpo
   </div>
   <div class="clear"></div>
</div>

Lo primero que hemos realizado en este artículo es la barra de navegación que hay debajo de la cabecera. Lo interesante de esta barra de navegación es que la hemos hecho con listas. Las listas nos vienen muy bien a la hora de maquetar con CSS, porque son muy versátiles para presentar elementos uno detrás de otro.

El navegador lo colocamos en una fila de manera independiente, con una caja grid_12, porque no hay nada más en esta fila.

La parte de la izquierda del cuerpo la hemos definido en un grid_8, porque tiene 8 columnas de anchura. Dentro colocamos varias noticias de portada en unos recuadros bastante sencillos, a los que les hemos asignado un borde y un fondo plano.

La parte de la derecha del cuerpo es la que más detalles tiene. La hemos colocado con un grid_4, para que ocupe 4 columnas de anchura, tal como se diseñó en Photoshop y para completar el espacio disponible en el container_12 (8 columnas de la parte de la izquierda + 4 columnas de la derecha = 12 columnas del container_12). Se ha creado un tipo de caja, con un titular y un cuerpo que tiene un degradado. Dentro los contenidos son diversos y tienen a su vez diversas clases de estilos CSS para conseguir el aspecto que andábamos buscando. Nota: Para las explicaciones, recordar siempre que hay un vídeo al final del artículo donde se ve paso a paso la maquetación y se dan las razones por las que hemos optado por esos estilos CSS y todas las guías para conseguir el resultado final. Un vídeo vale más que mil palabras ;)

Código HTML y CSS del ejemplo

Ahora coloco aquí el código HTML y CSS del ejemplo, tal y como está desarrollado hasta el momento:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
   <title>Diseño desde cero</title>
   <link rel="STYLESHEET" type="text/css" href="960-grid-system/code/css/reset.css">
   <link rel="STYLESHEET" type="text/css" href="960-grid-system/code/css/text.css">
   <link rel="STYLESHEET" type="text/css" href="960-grid-system/code/css/960.css">

<style type="text/css">
BODY{
   background-color: #2b1f1f;
   color: #FFF;
   font-family: verdana, arial, helvetica;
}
A{
   color: #bce7e4;
}
#cabecera{
   background: #fff url(images/fondo-cabecera.gif) repeat-x;
}
#titulogeneral img{
   padding: 28px 0 0 0;
}
#buscador{
   background: transparent url(images/fondo-buscador.gif) no-repeat bottom right;
   text-align: right;
}
#buscador input{
   font-size:8pt;
}
#buscador form{
   padding: 40px 30px 6px 0px;
}
#cuerpo{
   background-color: #000;
}
#navegador{
   font-size: 12pt;
   margin-top: 10px;
   margin-bottom: 10px;
}
#navegador a{
   color: #FFF;
   font-weight: bold;
   text-decoration: none;
}
#navegador ul{
   list-style-type: none;
   margin: 0;
   padding: 0;
}
#navegador li{
   float: left;
   margin: 0 20px 0 0;
   padding: 0;
}
.itemportada{
   border: 3px solid #3b1010;
   background-color: #3c2a2a;
   padding: 10px;
   margin-bottom: 10px;
   overflow:hidden;
}
.imagenitemportada{
   float: right;
   margin-left: 10px;
}
.tituloitemportada{
   font-weight: bold;
   font-size: 120%;
   margin-bottom: 6px;
}
.autoritemportada{
   font-size: 8pt;
   margin-bottom: 4px;
}
.introitemportada{

}
.comentariositemportada{
   font-size: 8pt;
   margin-top: -10px;
}
.titlateral{
   background-color: #4b0d0d;
   padding: 10px;
}
.cuerpolateral{
   background: #612323 url(images/fondo-cuerpo-lateral.gif) repeat-x;
   overflow: hidden;
   padding: 10px 7px 10px 7px;
   margin-bottom: 15px;
}
.imagencuerpolateral{
   float: left;
}
.cuerpolateral form{
   margin: 0px;
}
.cuerpolateral form span{
   display: block;
   margin: 5px 0 5px 0;
}
.textocuerpolateral{
   margin-left: 110px;
}
.cuerpolateral input{
   font-size: 8pt;
}
.cuerpolateral ul{
   list-style-type: none;
   margin: 15px 0 0 0;
   padding: 0;
}
.cuerpolateral li{
   padding: 0 0 0 20px;
   margin: 0 0 6px 0;
   background: transparent url(images/estrellita.png) no-repeat scroll 0 4px;
}
.nube{
   font-size: 10px;
   text-align:center;
}
.nube span.etiqueta1{font-size: 100%}
.nube span.etiqueta2{font-size: 120%}
.nube span.etiqueta3{font-size: 140%}
.nube span.etiqueta4{font-size: 160%}
.nube span.etiqueta5{font-size: 180%}
.nube span.etiqueta6{font-size: 200%}
.nube span.etiqueta7{font-size: 220%}
.nube span.etiqueta8{font-size: 240%}
.nube span.etiqueta9{font-size: 260%}
.nube span.etiqueta10{font-size: 280%}
.nube a{
   color: #fff;
   text-decoration: none;
}
</style>
</head>

<body>
<div id="cabecera" class="container_12">
   <div id="titulogeneral" class="grid_6 suffix_2">
      <img src="images/titulo-general.png" width="443" height="30" alt="Diseño de una web desde cero">
   </div>
   <div id="buscador" class="grid_4">
      <form>
      <input type=text>
      <input type=button value="buscar">
      </form>
   </div>
   <div class="clear"></div>
</div>
<div class="container_12" id="cuerpo">
   <div class="grid_12" id="navegador">
      <ul>
      <li><a href="#">Portada</a></li>
      <li><a href="#">Secciones</a></li>
      <li><a href="#">Tutoriales</a></li>
      <li><a href="#">Recursos</a></li>
      <li><a href="#">Contacto</a></li>
      </ul>
   </div>
   <div class="clear"></div>
   
<div class="grid_8">
   <div class="itemportada">
      <img src="images/foto-desarolloweb.jpg" width="258" height="250" alt="Foto" class="imagenitemportada"/>
      <div class="tituloitemportada"><a href="#">Título de un artículo</a></div>
      <div class="autoritemportada">DesarrolloWeb.com</div>
      <div class="introitemportada">
      <p>
      Lorem ipsum dolor sit amet...
      </p>
      <p>
      Curabitur placerat. Vivamus rhoncus est...
      </p>
      </div>
      <div class="comentariositemportada"><a href="#">3 comentarios</a></div>
   </div>
      
      <div class="itemportada">
         <img src="images/foto-guiarte.jpg" width="256" height="252" alt="foto" class="imagenitemportada" />
         <div class="tituloitemportada"><a href="#">Otro artículo destacado en la portada con titulo mayor</a></div>
         <div class="autoritemportada">DesarrolloWeb.com</div>
         <div class="introitemportada">
         <p>
         Nullam enim nulla...
         </p>
         <p>
         sagittis convallis...
         </p>
         </div>
         <div class="comentariositemportada"><a href="#">8 comentarios</a></div>
      </div>
      
      <div class="tituloitemportada"><a href="#">>> Ver contenidos anteriores</a></div>
   </div>
   
   <div class="grid_4">
      <div class="titlateral">
      <img src="images/tit-usuarios.png" width="91" height="20" alt="Usuarios" />
      </div>
      <div class="cuerpolateral">
         <img src="images/usuarios-grande.png" width="91" height="118" alt="usuarios" class="imagencuerpolateral" />
         <div class="textocuerpolateral">
            <form>
            <span>Nombre:</span>
            <input type="text" name="nombre" size="15" />
            <span>Clave:</span>
            <input type="text" name="clave" size="15" />
            <span><input type="submit" value="Entrar" /></span>
            </form>
         </div>
      </div>
      
      <div class="titlateral">
         <img src="images/tit-rss.png" width="41" height="21" alt="RSS" />
      </div>
      <div class="cuerpolateral">
         <img src="images/RSS-grande.png" width="101" height="101" alt="" class="imagencuerpolateral" />
         <div class="textocuerpolateral">
            <ul>
            <li><a href="#">Todos los contenidos</a></li>
            <li><a href="#">Artículos en RSS</a></li>
            <li><a href="#">Noticias en RSS</a></li>
            </ul>
         </div>
      </div>
      
      <div class="titlateral">
         <img src="images/tit-hablamos.png" width="205" height="26" alt="Hablamos de..." />
      </div>
      <div class="cuerpolateral">
         <div class="nube">
            <span class="etiqueta6"><a href="#">html</a></span>
            <span class="etiqueta8"><a href="#">desarrollo</a></span>
            <span class="etiqueta5"><a href="#">javascript</a></span>
            <span class="etiqueta3"><a href="#">asp</a></span>
            <span class="etiqueta10"><a href="#">php</a></span>
            <span class="etiqueta5"><a href="#">diseño web</a></span>
            <span class="etiqueta4"><a href="#">servidores</a></span>
            <span class="etiqueta1"><a href="#">java</a></span>
            <span class="etiqueta3"><a href="#">apache</a></span>
            <span class="etiqueta6"><a href="#">promoción web</a></span>
            <span class="etiqueta9"><a href="#">ajax</a></span>
            <span class="etiqueta4"><a href="#">recursos</a></span>
            <span class="etiqueta5"><a href="#">dhtml</a></span>
         </div>
      </div>
      
   </div>
   
   <div class="clear"></div>
</div>

</body>
</html>

Podemos ver este código en marcha en una página aparte , para apreciar el resultado de la maquetación CSS creada hasta el momento.

Vídeo de la creación de este ejemplo con CSS y 960 Grid

Ahora os ofrecemos el vídeo que hemos grabado mientras realizábamos esta maquetación CSS. Como veréis, está repleto de explicaciones y detalles que resultarán interesantes para aquellos que quieran saber cómo, partiendo de una imagen de Photoshop, crear una página web, maquetada con CSS. Por supuesto, aprenderás también a usar el framework 960 Grid System, que es de lo que se trata en este manual.

Para continuar este videotutorial, puedes aceder a la tercera parte del proceso de maquetación HTML/CSS.