Quizá contagiados por las series de forenses que pululan por las cadenas televisivas, nos hemos armado de un bisturí y hemos puesto sobre nuestra particular «mesa de autopsias» un diseño web con el fin de examinar sus tripas.
Hemos escogido para nuestro primer experimento The Greg Brady Project, el sitio personal de Barry Williams, uno de los actores de la serie La Tribu de los Brady. Hay que decir que este website deja mucho que desear en cuanto a accesibilidad, pero ésta es otra historia. Lo que hoy nos ocupa es cómo está maquetado, cómo se han ido montando las imágenes y las capas para llegar a esta composición final:
Fondo
El fondo, en un sentido muy amplio, se consigue a través de varias imágenes distribuidas en diferentes capas. La primera imagen de fondo está estilada directamente en la etiqueta. Se trata de un fondo en mosaico con el típico patrón abstracto que se repite. Está alineado al centro y arriba.
La siguiente la encontramos en la etiqueta . Es la imagen que proporciona fondo blanco al contenido principal, creando un pequeño efecto de sombra sobre el patrón anterior. Probablemente debido a los problemas de Explorer con la transparencia en .png y a que la calidad de .gif es insuficiente a la hora de mostrar degradados, el diseñador se ha visto forzado a crear un jpg en el que parte del patrón de fondo se repite. El resultado no es perfecto (en algunos puntos se nota la transición), pero es aceptable.
Entramos ahora en las capas. La primera es #top, que a pesar de su nombre, funciona como un contenedor general. No tiene dimensiones específicas, tan sólo está alineado en el centro superior de la página. Aquí no se han complicado mucho y directamente han colocado como imagen de fondo de la capa un .jpg con el montaje de cabecera, lo que inclue las fotos, la caja de búsqueda y los motivos ornamentales a modo de marca de agua.
La siguiente capa, contenida dentro de #top, es #middle. Es similar a la anterior: se trata de una imagen .jpg que aporta algunos elementos decorativos más. La imagen de fondo aquí está también alineada al centro, pero a 550px del borde superior, es decir, a una distancia suficiente de #top como para no superponerse a esta capa. En el ejemplo podéis ver cómo quedaría si la distancia fuera de sólo 300px.
Y la siguiente capa, a su vez contenida en #middle, es #bottom. El principio es el mismo que en las anteriores, sólo que esta vez se trata de una imagen alineada al borde inferior.
Ya casi lo tenemos, sólo faltan algunos elementos más. Si inspeccionamos #bottom, que era el último gran contenedor, encontramos varios divisores al mismo nivel que se montan uno debajo de otro:#header, #content, #features, #contact y #footer. El primero es una cabecera de toda la vida, el segundo es para el contenido principal, y los tres últimos funcionan como tres footer del blog.
Menú
En el primero de ellos, #header, tenemos el menú (#menu) y la caja de búsqueda (#search). El menú se monta con sólo dos imágenes, una de fondo en la propia capa #menu, y otra que contiene todos los textos. Esta última se estila en los enlaces de la lista del menu, #menu li a, que aprovecha de forma muy inteligente los selectores avanzados (:hover), la identificación de cada enlace (id=), y el posicionamiento absoluto de imágenes de fondo.
De esta forma, y con sólo una imagen para el texto, puede controlarse de forma independiente el comportamiento de cada item del menú. Y por último, no podemos pasar por alto que no se olvidan de la semántica y que los enlaces del menú tienen su texto, eso sí, indentado bien lejos para que quede fuera del área mostrada por el navegador.
Merece la pena que echéis un vistazo al CSS:
#menu li a{
text-decoration:none;
display:block;
float:left;
width:75px;
height:49px;
text-indent:-99999px;
background-image:url(../img/menu_text.gif);
background-image /**/:url(../img/menu_text.png);
background-repeat:no-repeat;
background-position:-13px 0px;
}
#menu li a#b_blog{ width:77px; background-position:-13px 2px; } #menu li a#b_blog:hover, #menu li a#b_blog.selected{ background-position:-13px -46px; }
#menu li a#b_community{ width:83px; background-position:-90px 2px; } #menu li a#b_community:hover, #menu li a#b_community.selected{ background-position:-90px -46px; }
#menu li a#b_media{ width:45px; background-position:-173px 2px; } #menu li a#b_media:hover, #menu li a#b_media.selected{ background-position:-173px -46px; }
#menu li a#b_story{ width:88px; background-position:-218px 2px; } #menu li a#b_story:hover, #menu li a#b_story.selected{ background-position:-218px -46px; }
#menu li a#b_fan{ width:80px; background-position:-306px 2px; } #menu li a#b_fan:hover, #menu li a#b_fan.selected{ background-position:-306px -46px; }
#menu li a#b_shop{ width:49px; background-position:-386px 2px; } #menu li a#b_shop:hover, #menu li a#b_shop.selected{ background-position:-386px -46px; }
#menu li a#b_charity{ width:104px; background-position:-435px 2px; } #menu li a#b_charity:hover, #menu li a#b_charity.selected{ background-position:-435px -46px; }
#menu li a#b_contact{ width:60px; background-position:-539px 2px; } #menu li a#b_contact:hover, #menu li a#b_contact.selected{ background-position:-539px -46px; }
Sobre las imágenes de la caja de búsquedas, #search, no merece la pena detenerse, tan sólo decir que se han estilado como fondos del input de texto y del botón.
Logo
Y en último lugar, pero no por ello el menos importante, tenemos el título del site, que no está en la cabecera sino en la capa del contenido, en #content. El motivo es que está estilado sobre un h1, algo semánticamente muy acertado, sobre el que se ha utilizado una treta muy semejante a la de los enlaces del menú. Aquí h1 tiene su texto, pero está indentado en -99999, con lo que no lo vemos. Esto permite al diseñador colocar como imagen de fondo de h1 un elemento mucho más vistoso.
Y voilá, ya tenemos nuestro diseño en capas. Os dejamos con el enlace a la hoja de estilos principal del site y un esquema de la estructura, para que meditéis sobre ello con la almohada.