Hemos visto en una serie de artículos anteriores un ejemplo de cómo maquetar una página utilizando únicamente CSS para posicionar sus distintos elementos. Una de las principales ventajas de CSS es que se puede cambiar el aspecto de una página radicalmente, sin necesidad de cambiar su código HTML. Por ello, nos ha parecido interesante seguir profundizando en la maquetación de páginas web con CSS, ofreciendo una nueva propuesta de diseño para el mismo archivo HTML que habíamos utilizado anteriormente.

Para empezar, podemos echar un vistazo al diseño que hemos creado, utilizando un programa de edición gráfica tipo Photoshop o Fireworks. Vamos a trabajar sobre esta imagen, para que el diseño resultante sea lo más parecido posible.

También ofrecemos para descarga un archivo comprimido con todas las imágenes que vamos a utilizar en este diseño. Será interesante tenerlo a mano para tratar de hacer por nosotros mismos el ejemplo.

El mismo código HTML

Insistimos en la idea de que vamos a utilizar el mismo código HTML que hemos construido al hacer el ejemplo del artículo de maquetación CSS, dado que las hojas de estilo en cascada nos proporcionan herramientas para alterar el aspecto de la página sin editar siquiera el archivo HTML.

La anterior maquetación ya se hizo pensando en que se iba a utilizar para proponer más de un diseño, por lo que se añadió alguna etiqueta, clase o identificador adicional para facilitar este paso.

Aunque durante la creación de este segundo ejemplo hemos estado tentados de editar el código HTML, sólo hemos cambiado un aspecto que vamos a señalar a continuación.

Se trata de la imagen de la cabecera. Si nos fijamos en el archivo HTML anterior, comprobaremos que la imagen está incluida por medio de una etiqueta <img>. Al definirse la ruta de la imagen y sus valores de ancho y alto por medio de los atributos de <img>, no podemos cambiar esos datos con la hoja de estilos. Como deseamos cambiar la imagen en distintos diseños, en lugar de colocar la imagen con la etiqueta directamente en el código HTML, vamos a utilizar un truco que hemos aprendido en CSSZenGarden, que se basa en incluir un titular de texto, que luego vamos a sustituirlo por la imagen que deseemos. A su vez, hay que decir que este truco es original de Douglas Bowman http://www.stopdesign.com/articles/css/replace-text/.

Antes, habíamos definido el siguiente pedazo de código para situar la imagen de cabecera:

<div id="cabecera"><img src="images/cabecera.jpg" width="700" height="106" alt="La Web del Invierno" border="0"></div>

Ahora, el código de la cabecera será el siguiente:

<div id="cabecera"> 
   <h1><span>La Primavera</span></h1> 
</div>

Simplemente hemos definido un titular, que luego no aparecerá en la página, porque lo ocultaremos por medio de el atributo visibility de CSS. En su lugar, definiremos un fondo para la capa "cabecera" y asignaremos sus atributos por medio de hojas de estilo.

Así quedarán los estilos para el elemento cabecera y el encabezamiento <h1>:

#cabecera{ 
   	background: transparent url(images/cabecera.jpg) no-repeat; 
   	height: 288px; 
   	width: 549px; 
} 

#cabecera h1 { 
   	margin: 0px 0px 0px 0px; 
} 
#cabecera h1 span { 
   	display:none; 
}

El nuevo código CSS

Aparte de lo comentado para la cabecera, el código CSS creado para aplicar los estilos no aporta mucha novedad a lo que hemos visto hasta el momento.

Básicamente se ha utilizado nuevas imágenes para los fondos y hemos variado los tamaños y márgenes de las capas. Aparte, en la parte central o cuerpo de la página, se ha alineado de manera distinta los elementos, quedando los cuadrados del buscador y enlaces a otras secciones a la izquierda y el texto de la página a la derecha.

También se puede apreciar como se han utilizado unas imágenes para decorar el fondo de los titulares de los recuadros de la izquierda. También se ha colocado una imagen en el fondo donde está el texto de la página. Esta imagen está muy difuminada para permitir leer el texto con comodidad.

Vamos a dejar de lado, tal vez para próximos artículos, la explicación detallada de la declaración de estilos utilizada. En lugar de eso ponemos los enlaces hacia el archivo HTML y el CSS.

Página con el resultado final del ejercicio.

Declaración de hojas de estilo utilizada.