Maquetación CSS, fin del ejemplo

El objetivo de este artículo es terminar con las explicaciones y demostración de uso del framework CSS 960 Grid System. En pasados artículos ya explicamos qué es 960 Grid System y comenzamos a crear un diseño de muestra que hemos maquetado paso a paso, en varios artículos del Manual de maquetación web con CSS y 960 Grid.

El diseño de la web que estamos maquetando se puede ver aquí. En artículos anteriores hemos podido llegar hasta este punto. Ahora nos queda maquetar la parte final del cuerpo de la página y además, vamos a crear un pie de página para completar nuestro ejercicio de diseño web. Si lo deseas, puedes ver el aspecto final que tendrá el ejemplo que estamos construyendo.

Además, para ilustrar de una manera gráfica y visual a los lectores de DesarrolloWeb.com, hemos publicado todo el proceso de maquetación en vídeo, lo que esperamos sirva para que esta práctica de diseño web se pueda entender por cualquier persona. Al final de este artículo veréis el vídeo de esta última etapa, que también contiene muchas explicaciones que serán sin duda útiles para entender cómo se ha realizado este ejemplo de maquetación web.

Parte final del cuerpo de la página

La parte final del cuerpo la vamos a colocar en el contenedor general del cuerpo (que habíamos colocado antes con un DIV con la clase CSS container_12. Ver el anterior artículo). En ella debemos colocar un titular, y más abajo 3 contenedores para 3 recuadros distintos. El titular lo colocamos ocupando todo el ancho disponible, pues es el único integrante de una fila, en una caja grid_12. Crearemos luego las divisiones para colocar los 3 recuadros de abajo, en DIV con clases CSS grid_3, grid_3 y grid_6. Y recordemos que después de cada fila hay que colocar un DIV con class="clear".

El esquema principal sería el siguiente:

<div class="grid_12">
   Titular que ocupa todo el ancho disponible.
</div>
<div class="clear"></div>

<div class="grid_3">
   Primera caja del fin del cuerpo, anchura de 3 columnas.
</div>
<div class="grid_3">
   Segunda caja del fin de cuerpo, con anchura de 3 columnas.
</div>
<div class="grid_6">
   Tercera caja, con anchura de 6 columnas.
</div>
<div class="clear"></div>

Con esta estructura conseguimos que el framework 960 Grid System cree unos espacios como los que necesitábamos. Ahora se trata de introducir contenidos en esos espacios para conseguir el diseño de cajas que habíamos planeado en Photoshop.

Dentro de las divisiones creadas con 960 grid colocamos a su vez otras divisiones para albergar los distintos recuadros. Esas partes me las voy a saltar en este texto, pero podéis ver cómo se crean en el vídeo que acompaña al artículo. Pero lo que sí quiero decir es que todos los estilos para formatear estas cajas se deben colocar, no en las capas que tienen class grid_x, sino en los DIV que metemos dentro de estas.

Maquetamos el pie de página

Al final de este diseño debemos colocar un pie. En el diseño que habíamos hecho con Photoshop no llegamos a definir el aspecto y los contenidos del pie, pero nosotros vamos a crear uno sobre la marcha para que nuestra página quede completa.

Para empezar, hemos decidido colocar el pie en un nuevo contenedor con class="container_12", pues le queremos asignar estilos distintos de los que tiene el cuerpo de la página.

Luego, vamos a crear dos divisiones en el pie, una con 8 columnas de anchura y otra con 4 columnas. Y para acabar esta fila el ya típico DIV con class="clear". La estructura será la siguiente:

<div class="container_12" id="pie">
   <div class="grid_8">
      Enlaces del pie
   </div>
   <div class="grid_4">
      Logotipo del pie
   </div>
   
   <div class="clear"></div>
</div>

En la división de 8 columnas colocaremos los enlaces del pie de página y en la parte con 4 columnas de anchura colocaremos un logotipo del sitio web. Para ver cómo asignar estilos a estos dos elementos, os referimos al vídeo, donde lo podréis ver todo con detalle.

CSS y XHTML completos de esta última parte del diseño

Ahora voy a colocar el código HTML de esta última parte del diseño, para que se vea no sólo la estructura de cajas conseguida con 960 Grid System, sino también las etiquetas que utilizamos para maquetar nuestro ejemplo.

La última parte del cuerpo:

<div class="container_12" id="cuerpo">
   
   Este primer DIV abre el cuerpo. Pero aquí falta todo el código de la primera parte del cuerpo que vimos en el artículo anterior.

   <div class="grid_12">
      <div class="titlateral">
      <img src="images/tit-secciones-detalle.png" width="266" height="25" alt="Secciones al detalle" />
      </div>
   </div>
   
   <div class="clear"></div>
   
   <div class="grid_3">
      <div class="titcaja2"><img src="images/tit-noticias.png" width="96" height="15" alt="Noticias" /></div>
      <div class="cuerpocaja2">
      <div class="cuerponoticias">
      + <a href="#">Título de una noticia</a>
      <br />
      + <a href="#">Otro título de prueba</a>
      <br />
      + <a href="#">Más cosas de interés...</a>
      <br />
      + <a href="#">La última noticia</a>
      <br />
      [<a href="#">...</a>]
      </div>
      </div>
   </div>
   <div class="grid_3">
      <div class="titcaja2"><img src="images/tit-otrasecc.png" width="148" height="15" alt="Otra sección" /></div>
      <div class="cuerpocaja2">
         <div class="otrasecciontit"><a href="#">Título de una noticia</a></div>
         <div class="otraseccioncuerpo">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam enim nulla, condimentum ut, adipiscing in, rutrum ut, neque.
         <br />
         <a href="#">Ver más</a>.</div>
      </div>
   </div>
   <div class="grid_6">
      <div class="titcaja2"><img src="images/tit-comunidad.png" width="133" height="15" alt="Comunidad" /></div>
      <div class="cuerpocaja2 cajacomunidad">
      <img src="images/comunidad.jpg" width="452" height="138" alt="" />
      </div>
   </div>
   
   <div class="clear"></div>
</div>

Y ahora muestro el código completo del pie de página.

<div class="container_12" id="pie">
   <div class="grid_8">
      <div id="enlacespie">
      <a href="#">Portada</a> | <a href="#">Acerca de</a> | <a href="#">Contacto</a> | <a href="#">Copyright</a>
      </div>
   </div>
   <div class="grid_4">
      <div id="logopie">
         <img src="images/logopie.png" width="286" height="20" alt="Diseño desde cero" />
      </div>
   </div>
   
   <div class="clear"></div>
</div>

Los estilos CSS que hemos definido para conseguir que estos contenidos se muestren como queríamos son los siguientes:

.titcaja2{
   margin: 10px 0 0 3px;
}

.cuerponoticias{
   line-height: 20pt;
}
.otrasecciontit{
   margin-bottom: 3px;
   font-weight: bold;
}
.cuerpocaja2{
   border: 2px solid #929191;
   padding: 10px;
}
.cajacomunidad{
   background-color: #333333;
   padding-right: 0px;
   padding-left: 2px;
}
#enlacespie{
   font-size: 8pt;
   margin: 6px 0 10px 0;
}
#enlacespie a{
   color: #fff;
}
#logopie{
   margin: 8px 0 10px 10px;
}
#pie{
   background-color: #260505;
}

El resultado final de este diseño lo podemos ver en una página aparte.

Vídeo del final de la maquetación CSS

Y ahora os dejamos con el vídeo explicado paso a paso para terminar esta práctica de diseño web. Son casi 50 minutos intensivos de maquetación y aplicación de estilos CSS. Esperamos que os guste y que os conteste todas las dudas que puedan haber quedado al leer las anteriores líneas.