Maquetar una página con CSS

  • Por
Tutorial para maquetar una página web utilizando CSS en lugar de tablas.
Vamos a realizar un ejercicio de maquetación de una página web utilizando únicamente hojas de estilo en cascada (CSS), separando completamente el contenido del archivo HTML de las definiciones del aspecto, que se guardarán en un archivo .css. El ejercicio lo realizaremos paso a paso, partiendo de una imagen diseñada previamente con un programa de edición gráfica como Photoshop.

Referencia: Tenemos un manual para aprender CSS en DesarrolloWeb.com, donde además se explican las primeras nociones y conceptos que hay que conocer sobre la maquetación.

Imágenes de partida

Podemos ver la imagen que hemos creado y que vamos a intentar maquetar lo más parecido posible. No es el objetivo de este manual ofrecer las técnicas para realizar esta imagen, aunque en otros manuales de DesarrolloWeb.com podemos ver tutoriales para aprender algunos de los trucos de diseño utilizados.

Se trata de un diseño sencillo, pero en el que se encuentran elementos distintos y variados con los que trabajar.

De esta imagen hemos extraído algunos gráficos, que utilizaremos a la hora de maquetar el diseño. Sería interesante descargarlo para poder realizar el ejercicio por vuestra cuenta.

Para los impacientes, tenemos un enlace a la página resultado que vamos a conseguir realizar al final del artículo. Puede ser bueno verla para hacerse una idea de donde queremos llegar.

Desarrollo de la página y la hoja de estilos

Vamos a generar los archivos HTML y CSS a la vez, pero paso a paso, de modo que podamos explicar las etiquetas y estilos que hemos utilizado para cada parte de la página.

Como primer paso, en la cabecera <head> del documento HTML, enlazaremos con una hoja de estilos externa.

<head>
<title>La web del invierno</title>
<link rel="STYLESHEET" type="text/css" href="estilo.css">
</head>


El cuerpo de la página <body>

En la declaración de estilos CSS, para el cuerpo de la página, hemos definido una imagen de fondo "fondo.gif", que se repetirá por toda la página en un mosaico. También se definen unos márgenes y el alineamiento del texto, en este caso centrado, para que el contenido de la página aparezca en el centro (esto es necesario para Internet Explorer, el centrado en Mozilla y otros navegadores se realiza en la capa principal con el atributo "margin" definido como "auto").

Además se definen otros atributos para el cuerpo de la página, que luego heredarán otros elementos, como el tipo de letra o el color del texto.

BODY {
background : #C0D9D9 url(images/fondo.gif) repeat;
font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #666666;
margin : 20px 0px 20px 0px;
text-align: center;
}

La capa contenedor

Generalmente, se utiliza una capa principal, a la que hemos llamado contenedor. Dentro de esta capa se colocan todos los elementos que va a tener la página.

<div id="contenedor">

</div>

En esta capa definimos el alineamiento del texto a la izquierda (porque en el cuerpo habíamos centrado el texto, para que Internet Explorer centre la capa contenedor y deseamos que la alineación por defecto sea a izquierda). También definimos una anchura de 700px, un color de fondo blanco y el margen, con el atributo "margin", lo definimos como "auto", para que Mozilla y otros navegadores centren la capa.

#contenedor{
text-align: left;
width: 700px;
background-color : #ffffff;
margin: auto;
}

Por cierto, nos hemos dejado deliberadamente el borde de la capa, que habíamos definido en el diseño original. Se podría haber definido el atributo "border", pero eso nos repercute negativamente en la maquetación en Explorer. Veremos más adelante cómo colocarlo para que se vea correctamente en todos los navegadores.

Este ejercicio lo vamos a ver en varios pasos. En el siguiente bloque mostraremos cómo se maqueta la cabecera y la barra de navegación.

Autor

Miguel Angel Álvarez

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

mireia

21/10/2007
mil gracias por poner ejercicios prácticos con css,
de verdad, aquí se aprende mucho
una gran escuela
;)

gracias

¿algun otro sitio con ejercicios prácticos com este?

El Gustavo

11/1/2008
agradezco el empeño por enseñarme a mi y otros como desarrollar una web, las explicaciones son mas que claras pero....tambien debe enseñarse con el ejemplo.
Uso linux y como navegador mozilla-firefox y debo decirles que en gran cantidad de las paginas que vi el google-adsense no me permite ver correctamente las paginas.
Hay que hacer el enfasis en el que se va a dedicar al diseño y programacion web de que sus sitios deben andar en cualquier navegador y una de las formas es con el ejemplo, no??
Espero que se entienda mi inquietud y se arregle eso.

Muchas gracias.

El Gustavo

31468

04/8/2009
AGRADECIMIENTOS
TENGO MUCHO QUE APRENDER Y SE QUE CON SU APOYO PODRE DESARROLLAR MI PROYECTO, GRECIAS POR TAN VALIOSO APORTE

Fernando

04/8/2009
Agradecimiento
Para los jovenes que enpesamos en esto la informacion que presentan en este espacio web es valiosisima e irrenplasable. saludos y gracias

Pedro

15/10/2009
Agradecimiento
Hola. Quiero agradecerles por los aportes de conocimiento. Me son de mucha utilidad al momento de realizar algún desarrollo. Sigan así, los felicito. Salu2

cenrueda

16/12/2009
Gracias por los cursos
Hola, quisiera expresar mis agradecimientos por esa manera como explican con ejemplos y detalladamente los pasos para poder uno ir aprendiendo esta nueva aplicación.

Hector Fabio Florez Lopez

30/1/2010
lo mejor del mundo
yo soy usuario de la pagina muy activo por cierto es lo mejor he aprendido tanto que deberían los instructores de este medio, hacer un diplomado para todos los diseñadores expertos, para convertirlos así como web máster haaa...

mejork1capuleto

11/2/2010
Manuales 10!!
Deciros que vuestros manuales son esplendidos!!!me sirven de gran ayuda, estoy aprendiendo a maquetar con css y con este manual lo estoy haciendo!!!gracias por ayudarnos a los que empezamos en este mundillo!!!!

Pablo

17/2/2010
Mala elaboración del artículo
Disculpadme pero este artículo es un desastre. ¿Qué va en el HTML y el CSS? y sobre todo ¿Cómo, en qué orden? Da la impresión de que vaya todo a capón ahí donde caiga. No se entiende nada. No está a la altura de otras secciones de la web o de los estupendos vídeos.

Bota

18/2/2010
CAPA CONTENEDOR
<div id="contenedor">

</div>


Esta esla capa contenedor va con este DIV, pero donde se deja el siguiente código?

#contenedor{
text-align: left;
width: 700px;
background-color : #ffffff;
margin: auto;
}

Carolina

31/5/2010
gracias!! y ayuda!!
Este tutorial me esta sirviendo de manera fenomenal!! muchisimas gracias!!! ahora estoy teniendo un problema con los caracteres especiales, le cambie el charset de utf-8 a iso-8859-1, que es lo q normalemnte uso en html para que los tome, pero no he tenido suerte, una ayuda por favor??? gracias de nuevo!!! m/

chocomickey

23/7/2010
HAY ALGO QUE NO ENTIENDO
Hola!
Mil Gracias por la dispocision que tienes de hacer publico tus conocimientos, pero tengo una duda, he seguido el tutorial de maquetacion en css y hay un detalle que no entiendo..
Esto que es el primer paso que realizas
------
<head>
<title>La web del invierno</title>
<link rel="STYLESHEET" type="text/css" href="estilo.css">
</head>
------
y este que es el segundo paso
____________

BODY {
background : #C0D9D9 url(images/fondo.gif) repeat;
font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #666666;
margin : 20px 0px 20px 0px;
text-align: center;
}
_____________
Van en el mismo archivo?
o van en archivos separados por favor que alguien me ayude porque esto me esta parando, Mientras yo sigo con mis investigaciones... Espero que alguien me ayude

Angel

09/1/2011
Hay una cosa que no entiendo.
Hola chocomi, la primera parte del codigo que pones es la cabecera del codigo html de la pagina, la segunda es el cuerpo de la hoja de estilo.
Van en archivos separados, uno es .html (seguramente) y el segundo es el .css, al que como veras se llama desde el primero.

carroviejo

29/4/2011
wenas
el segundo codigo va en un archivo .css aparte.

axec

06/12/2011
Una pregunta...
Espero no salirme del tema, o no tocar un teme que este en otro lugar...
mi pregunta es la siguiente:
siempre que uno colo que Backgraund-image:
tiene que colocar las proporciones de las images, es dicir
width:71px; height:35px
y no existe una forma de que CSS lo asigne automaticamente...?

sophir

17/1/2012
:)
este articulo esta muy bueno! me ayudo mucho amoo a lore osuna! :) <3

Osuna

17/1/2012
(:
No entendi nada!:D amo a Sophie & a mi novia Karla66'

gdox

05/9/2012
PREGUNTA:
Y LA HERRAMIENTA ES? DREAMWEAVER? OSEA, PORQUE SI ES PARA PRINCIPIANTES, POR ALLI SE EMPIEZA NO?

Amanda_88

06/2/2013
Gran ayuda!
Llevo poco tiempo aprendiendo a hacer webs y esta página me está ayudando mucho. La única pega que le he encontrado a este manual es la primera etiqueta de div, para los principiantes como yo que todavía vamos un poco perdidos, no se sabe bien bien dónde ponerla, porque al poner #cabecera en css la imagen se va a la izquierda.... después de remirarlo he visto de la primera capa se cierra al final -.-'
Lo comento porque he visto personas con esta duda, aunque la agradezco en parte! al menos he sabido encontrarlo jejejeje
Gracias por tu manual! sigo el CSSII y el III :D

mario_flores-242209

23/5/2014
Soy nuevo en esto
Muchas gracias por brindar sus conocimientos, le entendí a la perfección aunque soy nuevo en esto.

Mil gracias