Ejemplo de maquetación de una página web (primera parte)

Con este artículo pretendemos comenzar una serie de ejemplos de estructuras de páginas web. Estos temas están relacionados con la utilización de las propiedades float y position, sobre los que no ahondaremos en estos ejemplos y sobre los que se puede encontrar abundante información con ejemplos incluidos en esta misma página web.

Comenzaremos por definir la estructura general de la página. Para ello, deberemos contar previamente con un boceto, que puede ser un mockup, una imagen psd o jpg, o simplemente un pequeño dibujo a lápiz de cómo queremos que se vea la web una vez terminada. Lo más práctico es contar con una imagen psd o jpg que podremos realizar con cualquier programa de edición de imágenes, que los hay de pago y gratuitos, ya que nos podrá ser útil para recortar imágenes.

En este dibujo se nos aparecerá la estructura de la página. Lo que resulta más complicado es llevar esta idea dibujada a la lenguaje HTML y que quede tal como se ha diseñado previamente. Esto es sobre lo que trabajaremos en el artículo de hoy. Hemos realizado una imagen de una página web de ejemplo con una estructura un poco compleja. Esta imagen pueden verla o descargarla desde el siguiente enlace:

Ver o descargar imagen

Procedimientos

Es posible que cada diseñador tenga una forma diferente de llevar adelante cada tarea, pero creo que la forma más sencilla de comprender la forma de realizar una estructura de página web es hacerla de la forma en que la mostramos en este artículo. En primer lugar determinaremos los parámetros básicos que regirán todos los elementos de la página, para luego hacer la división de la página en grandes segmentos tradicionales (header, cuerpo, pie de página, etc.), antes de comenzar a darle forma a cada una de ellas.

Advertencia: Todos los códigos que presentaremos, CSS y XHTML, serán perfectamente válidos para la W3C. Seguramente algunos elementos no se presenten en forma adecuada en navegadores como Internet Explorer 6 y 7, para lo que se deberán hacer las correcciones pertinentes. Para ello dejaremos los enlaces necesarios a los archivos CSS que corrigen los problemas con estos navegadores. Otro aspecto que se debe tener en cuenta, es que se utilizarán imágenes png con transparencias, que no son bien visualizadas por IE6. En un artículo posterior, realizaremos todas estas correcciones.

Estructura general

En primer lugar, crearemos el encabezado del código HTML, que siempre debe ser bien construido y contar con toda la información necesaria. Para este ejemplo, utilizaremos las versiones más avanzadas de los lenguajes web: XHTML 1.1 y CSS 2.1.

<!--?xml version="1.0"?-->

  Ejemplo de estructura de una página web

  <!--[if IE 6 ]>
   <link rel="stylesheet" type="text/css" href="archivos/IE6.css" />
  <![endif]-->
  <!--[if IE 7 ]>
   <link rel="stylesheet" type="text/css" href="archivos/IE7.css" />
  <![endif]-->

Como puede verse en la imagen que descargaron, la página se encuentra enmarcada en un contenedor general que tiene 980px de ancho. Luego, podemos advertir que dentro de esta capa contenedora se ubican cinco “franjas” perfectamente definidas: la cabecera, una zona donde se ubican tres módulos, la parte central o cuerpo, otra franja con módulos, y finalmente el pie de página.

Definimos estas divisiones en la estructura HTML formando las capas:

La cabecera o header

A pesar de que muchos diseñadores optan por incorporar cabeceras sencillas, que constan simplemente de una franja de color o con fondo de imagen donde colocan el logo, título, buscador, enlaces de acceso, etc., en algunos diseños es necesario realizar algunas estructuras más complejas para que el diseño tenga el aspecto visual pretendido. En la imagen que hemos presentado, verán que se trata de algo más que una simple franja, y que consta de varias capas, algunas de las cuales se superponen.

El lugar que se encuentra ocupado por la imagen grande, puede perfectamente ser ocupado por un slider de imágenes en JavaScript, lo que no interfiere en modo alguno en lo que vamos a desarrollar.

Definimos la estructura básica del header con la imagen grande:

</pre>
<div id="cabecera">
<!-- contenedor de la parte superior de la pagina-->
<div id="imagen">
<!-- contenedor del slide-->
<div id="logo">
<!-- contenedor del logo, titulo e imagenes accesorias-->
<h1><a href="#">Ejemplo de estructura de una página web</a></h1>
</div>
<div id="menu">
<!-- contenedor del menu-->

<!--Punta redondeada izquierda del menu-->
<ul>
 <li><a href="#">Inicio</a></li>
 <li><a href="#">Nosotros</a></li>
 <li><a href="#">Empresa</a></li>
 <li><a href="#">Ofertas</a></li>
 <li><a href="#">Pedidos</a></li>
 <li><a href="#">Contacto</a></li>
</ul>
<!--Punta redondeada derecha del menu--></div>
 <img src="imagenes/slide.jpg" alt="ejemplo para lawebera.es" /></div>
</div>
<pre>

El código CSS que definen la forma en que se presentan la estructura del header es el siguiente:

/*                   Estructura                       */
#contenedor {
  width: 980px;
  margin: 0 auto;
  background: #f4f4f4;
  }

#cabecera {
  width: 980px;
  margin: 0 auto;
  }

#cuerpo {
  width: 980px;
  margin: 30px auto;
  }

#pie  {
  background: #336;
  height: 50px;
  padding-top: 15px;
  }

.clear  {
  height: 10px;
  clear: both;
  background: #f4f4f4;
  }

/*                   Estructura header               */
#imagen  {
  width: 960px;
  margin: 0 auto;
  position: relative;
  }

#logo {
  width: 184px;
  height: 300px;
  left: 20px;
  position: absolute;
  background: url(../imagenes/logo.png) no-repeat;
  }

#menu {
  position: absolute;
  width: 100%;
  padding: 0;
  background: url(../imagenes/fondo-menu.png) repeat-x;
  }

Explicación

Primero, explicaremos la estructura general, que aparece diferenciado por un comentario en el código CSS. En primer lugar, tenemos la capa contenedora general, que es la que se encuentra con el identificador “contenedor” (#contenedor en el CSS e id=”contenedor” en el XHTML), cuya única función es la de limitar el ancho que utilizaremos en el diseño (980px), centrarlo (márgenes derecho e izquierdo automático) y darle un color de fondo diferente del que se utiliza en el espacio exterior (definido en body).

Luego se reitera la operación con cada capa que se desea establecer como contenedora de cada sección de la página: cabecera, cuerpo y pie de página. Pero además, definimos una capa que se utiliza para que todas las capas contenidas en una anterior terminen donde comienza esta. Suele utilizarse este recurso en la creación de diseños a varias columnas. Esta capa tiene la propiedad “clear” con el valor “both”. El artículo donde se explica más detalladamente esta función es el siguiente: Propiedades float y clear

Ubicando la imagen grande

Los problemas comienzan cuando intentamos colocar los elementos de forma tal que se superpongan en la forma que deseamos. Para este caso, simplemente utilizaremos la propiedad “position” de la capa que contiene la imagen grande, dándole el valor “relative” para que su posición se encuentre en el 0 de la horizontal y 0 de la vertical (o sea, que el vértice superior izquierdo de la imagen coincida con el vértice superior izquierdo de la capa contenedora).

Si quitáramos la propiedad “position”, esta capa se vería perfectamente bien, pero no lograríamos ubicar los otros elementos. El código HTML quedaría de la siguiente forma:

</pre>
<div id="cabecera">
<!-- contenedor de la parte superior de la pagina-->
<div id="imagen"><!-- contenedor del slide-->
 <img src="imagenes/slide.jpg" alt="ejemplo para lawebera.es" /></div>
</div>
<pre>

Y deberemos incorporar al archivo CSS las siguientes líneas.

#imagen  {
  width: 960px;
  margin: 0 auto;
  position: relative;
  }

Colocando el logo

La capa que contiene el logo y el título de la página deberemos posicionarla en forma absoluta, de forma tal que quede por fuera del flujo del documento y no influya en la ubicación de los otros elementos que componen esta cabecera. Al utilizar el valor “absolute” de la propiedad “position”, la capa se ubica en los valores que se determine mediante las propiedades “top”, “bottom”, “right” y “left”. En este caso, simplemente determinaremos la posición respecto del lateral izquierdo, para que aparezca levemente retirado del borde izquierdo de la capa contenedora; como la posición respecto del borde superior de  la capa contenedora queremos que sea cero, simplemente omitimos la línea.

#logo {
  width: 184px;
  height: 300px;
  left: 20px;
  position: absolute;
  background: url(../imagenes/logo.png) no-repeat;
  }

Finalmente colocaremos la imagen logotipo como fondo de la capa. También es posible incluir la imagen en el HTML, pero debe tenerse en cuenta que la posición del título (h1) que insertaremos después, tendrá variaciones y será necesario hacer varios ajustes.

Colocando el título (h1)

Para que el título se ubique en la posición que muestra la imagen, podemos utilizar dos métodos sencillos y válidos. El primero consiste en otorgarle un margen superior de 150px, y el segundo es darle el valor “relative” a la propiedad “position” y el valor 150px a top.

En cualquiera de los dos casos, el resultado es el mismo. En el ejemplo hemos optado por darle un margen superior.

/* Posición y dimensiones */#logo h1 {
  width: 150px;
  margin: 150px 0 0 10px;
  text-align: center;
  }

/* Tipografía */#logo h1 a  {
  font: italic 24px "Times New Roman", Georgia, Serif;
  color: #82a2a2;
  text-decoration: none;
  }

Para terminar de ver el ejemplo, visita la segunda parte de este artículo: ejemplo de maquetación web parte 2.