Procedimientos

Es posible que cada diseador tenga una forma diferente de llevar adelante cada tarea,
pero creo que la forma ms sencilla de comprender la forma de realizar una estructura de
pgina web es hacerla de la forma en que la mostramos en este artculo. En primer lugar
determinaremos los parmetros bsicos que regirn todos los elementos de la pgina,
para luego hacer la divisin de la pgina en grandes segmentos tradicionales (header,
cuerpo, pie de pgina, etc.), antes de comenzar a darle forma a cada una de ellas.
Advertencia: Todos los cdigos que presentaremos, CSS y XHTML, sern
perfectamentevlidos para la W3C. Seguramente algunos elementos no se presenten en
forma adecuada en navegadores como Internet Explorer 6 y 7, para lo que se debern
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 utilizarn imgenes png con transparencias, que no son
bien visualizadas por IE6. En un artculo posterior, realizaremos todas estas correcciones.
Estructura general
En primer lugar, crearemos el encabezado del cdigo HTML, que siempre debe ser bien
construido y contar con toda la informacin necesaria. Para este ejemplo, utilizaremos las
versiones ms avanzadas de los lenguajes web: XHTML 1.1 y CSS 2.1.
<!--?xml version="1.0"?-->

Ejemplo de estructura de una pgina 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 pgina 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 mdulos, la parte central o cuerpo, otra franja con mdulos, y
finalmente el pie de pgina.
Definimos estas divisiones en la estructura HTML formando las capas:
La cabecera o header
A pesar de que muchos diseadores optan por incorporar cabeceras sencillas, que
constan simplemente de una franja de color o con fondo de imagen donde colocan el
logo, ttulo,buscador, enlaces de acceso, etc., en algunos diseos es necesario realizar
algunas estructuras ms complejas para que el diseo tenga el aspecto visual pretendido.
En la imagen que hemos presentado, vern que se trata de algo ms 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 imgenes en JavaScript, lo que no interfiere en modo alguno en
lo que vamos a desarrollar.
Definimos la estructura bsica 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 pgina 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 cdigo 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;
}

Explicacin
Primero, explicaremos la estructura general, que aparece diferenciado por un comentario
en el cdigo 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 funcin es la de limitar el ancho que
utilizaremos en el diseo (980px), centrarlo (mrgenes derecho e izquierdo automtico) y
darle un color de fondo diferente del que se utiliza en el espacio exterior (definido en body).
Luego se reitera la operacin con cada capa que se desea establecer como contenedora
de cada seccin de la pgina: cabecera, cuerpo y pie de pgina. Pero adems, 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 creacin de diseos a varias
columnas. Esta capa tiene la propiedad clear con el valor both. El artculo donde se
explica ms detalladamente esta funcin 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, dndole el valor relative
para que su posicin se encuentre en el 0 de la horizontal y 0 de la vertical (o sea, que el
vrtice superior izquierdo de la imagen coincida con el vrtice superior izquierdo de la capa
contenedora).
Si quitramos la propiedad position, esta capa se vera perfectamente bien, pero no
lograramos ubicar los otros elementos. El cdigo HTML quedara 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 lneas.
#imagen {
width: 960px;
margin: 0 auto;
position: relative;
}

Colocando el logo
La capa que contiene el logo y el ttulo de la pgina deberemos posicionarla en forma
absoluta, de forma tal que quede por fuera del flujo del documento y no influya en la
ubicacin 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 posicin respecto del lateral izquierdo, para que aparezca levemente
retirado del borde izquierdo de la capa contenedora; como la posicin respecto del borde
superior de la capa contenedora queremos que sea cero, simplemente omitimos la lnea.
#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. Tambin es posible
incluir la imagen en el HTML, pero debe tenerse en cuenta que la posicin del ttulo (h1)
que insertaremos despus, tendr variaciones y ser necesario hacer varios ajustes.
Colocando el ttulo (h1)
Para que el ttulo se ubique en la posicin que muestra la imagen, podemos utilizar dos
mtodos sencillos y vlidos. 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.
/* Posicin y dimensiones */
#logo h1 {
width: 150px;
margin: 150px 0 0 10px;
text-align: center;
}

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

El men
En este ejemplo hemos optado por un men horizontal simple, aunque es posible
desarrollar unmen desplegable utilizando HTML y CSS o alguno de los muchos
existentes con JavaScript o alguna de sus libreras. Tambin es posible insertar elementos
en Flash, ya que el posicionamiento es igual para todo tipo de elementos.
En primer lugar, observemos que el men contiene una faja oscura con sombra que se
superpone a la imagen principal y al logotipo. Luego de esta faja, se desprende el men
propiamente dicho. Todos los elementos estn contenidos dentro de una capa, la que para
que se consiga la superposicin sobre el resto de los elementos, tiene posicionamiento
absoluto. Debemos recordar que cuando le damos posicionamiento absoluto a un
elemento contenido dentro de una capa que tiene posicionamiento relativo (tal es el caso
del ejemplo, ya que la capa men se encuentra dentro de la capa imagen, que tienen
valores absolute y relative en su atributo position), se posiciona con los valores que
le otorguemos a los atributos top, left, right y bottom respecto de la capa que le
contiene.




<div id="imagen"><!-- contenedor del slide-->
<div id="menu"><!-- contenedor del menu-->
</div>
</div>













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

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

Como podemos ver en el cdigo CSS que mostramos arriba, ya se ha determinado el
fondo de lacapa men, que compone la faja con sombra que ocupa todo el ancho. A
continuacin, compondremos el men propiamente dicho, para lo que emplearemos listas.
Pero el men tiene dos imgenes en cada punta del mismo que le dan el aspecto
redondeado. Para generar este efecto, hemos ubicado dos capas, una antes y otra
despus de la lista, por lo que la base del cdigo html del men ser el siguiente:
<div id="menu-izq"></div><!--Punta redondeada izquierda del menu-->
<ul><!-- menu -->
<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>
<div id="menu-der"></div><!--Punta redondeada derecha del
menu-->

Ahora debemos hacer que estos tres elementos se ubiquen en forma horizontal y contigua,
adems de ubicarse ms abajo que la parte superior de la capa men para que tenga la
apariencia que es un saliente de la misma. Para ello, simplemente daremos un margen
superior de 30px al elemento ul, y para que aparezca retirado del margen izquierdo, le
daremos un margen izquierdo de 350px:
#menu ul {
padding: 0;
margin: 30px 0 0 350px;
list-style: none;
}
Las capas que contienen las imgenes de las puntas del men, ambas son flotantes a la
izquierda, y le damos ancho y altura definidos para que sean visibles. Al igual que la lista,
se le debe determinar un margen superior de 30px para que queden a la misma altura que
los tems. A la capa de la izquierda le damos un margen izquierdo de 330px, de modo que
cuando le sumemos el ancho de la misma, nos coincida con el margen que le hemos dado
a la lista y aparezcan contiguas. A la capa de la derecha no es necesario darle margen
izquierdo, ya que se ubicar al final de todos los elementos flotantes, es decir, a
continuacin del ltimo tem del men.
#menu-izq, #menu-der {
float: left;
height: 50px;
width: 20px;
background: url(../imagenes/fondo-menu-izq.png);
}

#menu-izq {
margin-left: 330px;
margin-top: 30px;
}

#menu-der {
background: url(../imagenes/fondo-menu-der.png);
}
Ahora determinaremos las propiedades de los tems de la lista, que simplemente consisten
en determinar que se trata de un elemento flotante y el fondo que llevar. Tambin hemos
colocado la altura, algo que ms adelante mostraremos su utilidad en este caso.
#menu li {
float: left;
height: 50px;
background: url(../imagenes/fondo-menu-a.png) repeat-x right 0px;
}

#menu ul li:hover {
background: url(../imagenes/fondo-menu-a.png) repeat-x right -50px;
}
Como sabemos, los elementos que componen un men son enlaces, los que tienen
caractersticas propias que deben ser determinadas. Adems de los atributos que
determinan lafuente y su color, encontramos que hemos decidido que se comporte como
bloque. Esto se hace para que cuando el puntero pase por cualquier punto que se
encuentre dentro del relleno o la altura (line-height), el enlace aparecer activo.
Pero lo usual es que la altura del elementos li (Ver cdigo anterior) y el elemento de la
lnea de texto (line-height) no coinciden. Esto se debe a que, como se trata de una
imagen con transparencia en su parte inferior, si diramos un line-height de la misma
dimensin que la altura del tem de lista, el texto aparecera muy cerca de donde comienza
la parte transparente de la imagen, y quedara como si se hubiera ubicado el texto en la
parte inferior de la imagen.
#menu ul li a {
line-height: 30px;
color: #ccc;
padding: 0 20px;
margin: 0;
display: block;
font-family: verdana;
text-decoration: none;
}
#menu ul li a:hover {
color: #fff;
}
#menu ul li a:visited {
color: #ccc;
}
Con esto hemos finalizado la parte superior de la pgina web, que era lo que resultaba
interesante del ejemplo presentado, ya que contiene varios elementos superpuestos,
incluyendo un men simple.

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
1" />
<title>Layout fijo</title>
<link href="css/estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>

<!-- Contenedor para toda la pgina -->
<div id="contenedor">

<!-- Capa destinada al header -->
<div id="cabecera">

</div>

<!-- Capa de contenidos, columnas, etc. -->
<div id="principal">

</div>

<!-- Capa para el pie de pgina -->
<div id="pie">

</div>

<!-- Cierre del contenedor de toda la pgina -->
</div>
</body>
</html>

Dado que se trata de una pgina de ancho fijo, debemos en primer lugar, establecer el
ancho de toda la pgina, adems de los mrgenes automticos para que la misma quede
centrada. Es por ello que hemos establecido una capa contenedora (div id=contenedor).
Tambin es posible hacerlo en cada una de las capas hijas (header, principal y pie),
pero resulta ms sencillo y lleva menos lneas de cdigo de esta forma.
body {
margin: 0;
padding: 0;
background: #777;
font-family: arial, helvetica, sans-serif;
}

#contenedor {
width: 900px;
margin: 0 auto;
}

#cabecera {
background: #f60;
}

#principal {
background: #fff;
display: table;
}

#pie {
background: #f60;
}

Para que las capas sean visibles, ser necesario que tengan algo de contenido, por lo que
de momento no podrn visualizar nada en el navegador, a pesar de que hemos dado el
color de fondo a todas las capas para que posteriormente sean claramente diferenciables.
Ahora agregaremos el ttulo de la pgina dentro de las etiquetas <h1> y </h1> dentro de la
capa header, y algo de contenido en el pie de pgina, que es todo lo que llevarn en este
ejemplo. Para darle algo de formato a estos elementos, agregaremos las siguientes lneas
al archivo CSS:
#cabecera h1 {
margin: 0;
line-height: 90px;
text-align: center;
}

#pie p {
margin: 0;
text-align: center;
line-height: 40px;
}

Estructura a dos columnas
Hay muchas formas de conseguir la misma distribucin, pero para este ejemplo hemos
elegido la siguiente forma de hacerlo. Primero determinamos las capas, empleando dos
divs con identificador izquierda y central y le agregamos algo de contenido de ejemplo
para que adquieran algo de volumen para ver el ejemplo. Luego le agregamos las
siguientes lneas al archivo CSS:
#izquierda {
width: 200px;
padding: 10px;
display: table-cell;
background: #fff;
}

#central {
padding: 10px;
background: #0f6;
display: table-cell;
width: 660px;
}
Determinamos el ancho de las capas de forma tal que sumadas ocupen todo el ancho de
la capa contenedora, teniendo en cuenta que los mrgenes y rellenos (padding) que les
demos a cada una de ellas tambin deben ser sumados. En el caso del presente ejemplo,
el ancho de la capa contenedora es 900px, y las dimensiones de las capas izquierda y
central son:
Capa izquierda: 200px (width) + 10px (padding-left) + 10px (padding-right) = 220px
Capa central: 660px (width) + 20px (padding derecho e izquierdo) = 680px
220px + 680px = 900px
Importante: Esta forma de tomar las dimensiones es vlida para los navegadores
modernos. Para Internet Explorer 6 o anterior, los rellenos no deben ser sumados, por lo
que las capas debern ser de 220px y 680px de ancho respectivamente. Para ello,
debern crear otro archivo CSS para este navegador y crear el link condicional al mismo
en forma de comentario.
Para que ambas capas se coloquen una al lado de la otra, hemos optado por darle el valor
table-cell a la propiedad display, aunque pueden hacerse con ambas capas flotantes, o
con una capa flotante dentro de la otra. Como dijimos antes, hay varias formas de hacerlo,
pero hemos optado por este ejemplo por resultar ms sencillo.
Luego, simplemente agregamos algo de contenido a ambas capas, como en el ejemplo, y
tendremos el layout de ancho fijo a dos columnas. Pasar a un diseo a tres columnas es
muy sencillo y se puede ver en el siguiente artculo:
Maquetar una web a 3 columnas con CSS