Variar el diseño y maquetación con la hoja de estilos

  • Por
  • CSS
Continuamos el taller de maquetación con CSS. Creamos un diseño distinto, que aplicamos al ejemplo realizado anteriormente, cambiando solamente la hoja de estilos.

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

David Aguirre

23/3/2005
La maquetación con hojas de estilo CSS me parece excelente.

Solo una pregunta... No les parece excesivo el margen que se deja a la izquierda y derecha de la pagina?.

RESPUESTA

Esto es porque el diseño que hemos hecho tiene un ancho que hemos fijado. Hay otro tipo de diseños que son fluidos y que se ajustan al ancho que tenga la ventana del navegador. Todo depende de cómo desees que sea tu página y el tipo de contenido que desees mostrar.

Puedes saber más sobre páginas fluidas.

Carlos Andres Cañaveral

17/4/2005
Excelente tutorial de css, siempre quise conseguir un diseño como los presentados sin necesidad de tablas, pues hasta ahora habia tratado de hacerlo pero siempre terminaba recurriendo al uso de tablas.

Lastima que todavia los esfuerzos de la W3C todavia no hayan conseguido estandarizar los navegadores para facilitarnos el trabajo a los desarrolladores, pues siempre tenemos que cambiar nuestros codigos para que puedan funcionar en diferentes navegadores.

Pau

24/4/2005
Queria comentar el recurso utilizado para tener mayor versatilidad a la hora de modificar la maquetación de la cabecera. ¿No sera posible que al ocultar un texto incluido en una etiqueta

la pagina sea penalizada por google por actuar ilicitamente?
En mi opinión si, porque no creo yo que se pongan a contrastar que el texto incluido en

se corresponda con el texto de la imagen...
Sugeriria pues no incluir ningún texto dentro de

que vaya a ser ocultado u optar por utilizar la función include de php. ¿que opinan?

Cesar

09/12/2005
Excelente muy agradecido a uds por ayudarnos en este tema tan interesante. Yo aprendi con uds y con este taller me hicieron pensar para hacer las partes que faltaron.

Joan Riba

01/3/2007
Felicidades por el tutorial !!!!
Es la primera vez que me meto en todo esto y me ha salido todo correctamente. Es genial.
Hoy he aprendido mucho. Mil gracias al creador del tutorial, que le dén un premio! xd.

Saludos.

Cristian

27/2/2008
En 1º lugar los felicito por el tutorial.
Mi pregunta es en relación a la img top, no sería mucho más fácil simplemente no poner los atributos alto y ancho en el codigo html de la img?? entonces cualquier img que pongamos tomará sus valor reales...

CRISTIAN

20/3/2008
HOLA EL CSS ME PARECE MUY INSTERESANTE, TODO ES MAS LIMPIO EN LOS CODIGOS, PERO SEPAN ALGO, QUE TAMBIEN SE PUEDEN USAR TABLE CON CSS, ASI QUE QUIERO SUS OPINIONES, ¿SERIA BUENO USAR TABLE CON CSS?

turco

22/10/2010
descargas
Hola!!

Podrian poner un descarga con un ejemplo completo del uso de CSS?

Muchas Gracias y mas gracias por su voluntad de transmitir conocimiento, desmitificando q inet es solo pornografia y redes sociales truchas.

Cybertyger

28/8/2014
Codigo completo html
Miguel he seguido tu curso, pero la página no me queda igual a la tuya, seguramente he obviado algo en el código html que puse, el código del archivo CSS le he chequeado con el que vos pusiste y está igual. Serías tan amable de pasarme el código completo en html para corroborar en que me equivoqué?.
Si me indicás cómo te paso adjunto mi código para que vos lo veas.
Desde ya muchas gracias.
Saludos.