Tutorial completo para aprender a maquetar una página web utilizando CSS, con las técnicas disponibles en CSS tradicional (CSS2), con floats y sin usar 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.
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
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.
Continuamos el ejercicio práctico para realizar la maquetación de una página paso a paso con capas y hojas de estilo en cascada. Se puede ver el artículo anterior de esta serie en Maquetar una página con CSS.
Maquetar la cabecera de la página
La imagen de la parte de arriba de la página la vamos a colocar en un único archivo gráfico. Es lo más cómodo para este diseño, pues la cabecera no tiene otro motivo que decoración.
<div id="cabecera"><img src="images/cabecera.jpg" width="700" height="106" alt="La Web del Invierno" border="0"></div>
Vemos que es una simple imagen, pero atención, que tenemos que colocar el </div> a continuación de <img> sin ningún espacio ni salto de línea, porque si no, Internet Explorer, nos introducirá un pequeño márgen debajo de la imagen, que queremos evitar.
Los atributos de estilo definidos para la cabecera son las dimensiones de la capa, que queremos que sean las mismas que las de la imagen. Aunque en este caso podríamos habernos ahorrado definir esos valores porque son los que se tomarían por defecto.
#cabecera{
height : 106px;
width: 700px;
}La barra de navegación
Vamos con la capa utilizada para definir la barra de navegación horizontal que hay debajo de la cabecera.
<div id="navegador">
<a href="#" class="enlacenav">Portada</a> |
<a href="#" class="enlacenav">Invierno</a> |
<a href="#" class="enlacenav">Diciembre a marzo</a> |
<a href="#" class="enlacenav">La chimenea</a> |
<a href="#" class="enlacenav">Deportes de invierno</a> |
<a href="#" class="enlacenav">Contacto</a>
</div>Como se puede ver, simplemente hemos definido una serie de enlaces dentro de una capa. Hay que fijarse que además los enlaces tienen una clase, llamada "enlacenav", que utilizaremos para darle un estilo específico a a estos enlaces, independiente del definido por defecto en la página.
Por lo que respecta a la capa, se define un color y una imagen de fondo, unos márgenes internos (atributo padding) y un borde, tanto para la parte de arriba de la capa como para la de abajo.
#navegador{
background : #F5F4C3 url(images/fondonav.gif);
padding : 3px 10px 5px 10px;
border-top : 1px solid #cccccc;
border-bottom : 1px solid #cccccc;
}Para los estilos de los enlaces utilizamos una clase. Para definir los estilos de cada uno de los estados de los enlaces (visitados, activos, no visitados, etc), se utilizan las pseudo-clases VISITED, ACTIVE, FOCUS, LINK Y HOVER. Simplemente definimos el color de los enlaces, el mismo para todas las pseudo-clases, menos para HOVER, que tiene un color distinto. HOVER es el estado del enlace cuando el puntero ratón está situado encima. En este caso, cuando el ratón esté encima, cambiará de color.
A.enlacenav, A.enlacenav:VISITED, A.enlacenav:ACTIVE, A.enlacenav:FOCUS, A.enlacenav:LINK{
color: #494E6B;
}
A.enlacenav:HOVER{
color: #3F7DE3;
}El cuerpo de la página
Como cuerpo nos referimos a la parte de la página donde colocamos la información principal. Crearemos una capa independiente para el cuerpo y colocaremos dentro el título, el texto y otros elementos que queramos situar. Los elementos los introducimos con las etiquetas HTML que deberían tener en una página básica. Luego, con CSS definiremos el estilo para el cuerpo y cada una de las etiquetas que colocamos dentro.
<div id="cuerpo">
<h1>Título de la página</h1>
<p>
En este artículo vamos a conocer la maquetación de paginas utilizando Hojas de estilos en cascada (CSS). Veremos cómo realizar este tipo de maquetación, junto con algunas ventajas e inconvenientes. Para muchos será todavía un campo por explorar. Aunque no vamos a entrar en grandes detalles, vamos a intentar dar a conocer la maquetación con CSS para que cubrir la posible laguna por parte del lector. En capítulos sucesivos ampliaremos la información y ofreceremos tutoriales más prácticos.
</p>
<p>
Como se ha podido aprender en el Manual de CSS, las hojas de estilo en cascada ayudan a separar el contenido de la forma, es decir...
</p>
<div id="navabajo">
<a href="#">Volver</a> |
<a href="#">Portada</a> |
<a href="#">Mapa del sitio</a>
</div>
</div>Vemos que el cuerpo tiene un título, varios párrafos y un div, incluido dentro del propio cuerpo, con una segunda barra de enlaces que faciliten la navegación para las personas que lleguen al final del scroll vertical de la página.
Los estilos del cuerpo definen la anchura, margen, margen interno, y un color de fondo. Además, se define el atributo "float:left" para hacer que el cuerpo "flote" a la izquierda. El resultado es que la capa del cuerpo se coloque a la izquierda y el contenido escrito a continuación se sitúe, rodeando a esta capa, a la derecha. (El efecto es el mismo que si asignamos en HTML el atributo align=left en una imagen)
Para posibilitar la disposición en dos columnas que hemos definido en el diseño original, vamos a hacer que la capa de la izquerda -el cuerpo- "flote" a la izquierda. Posteriormente, la capa de la derecha que aun no hemos colocado-el lateral-, haremos que "flote" a la derecha.
#cuerpo{
width:480px;
margin-left: 8px;
padding: 12px 0px 10px 0px;
background-color : #ffffff;
float:left;
}También se define un estilo para cada algunas de las etiquetas que hemos situado dentro del cuerpo:
h1 {
font-size: 12pt;
}Los encabezados de nivel 1, que tengan tamaño de letra 12pt.
#navabajo {
font-weight : bold;
}Para asignar una negrita en el div de la parte inferior del cuerpo, que tiene enlaces para facilitar la navegación.
Para continuar vamos a crear el lateral derecho de la página, donde se muestran varios recuadros con un buscador y acceso a otras informaciones.
La capa lateral
En el lateral derecho situamos una nueva capa, que ofrece acceso a servicios y otras informaciones.
<div id="lateral">
... contenido lateral...
</div>El contenido que vamos a situar dentro de esta capa lo veremos por partes, pues tiene bastantes detalles que destacar tranquilamente. Los estilos son los siguientes:
#lateral {
width: 200px;
background-color: #EBF2FE;
border-bottom : 1px solid #cccccc;
border-left : 1px solid #cccccc;
float:right;
}Se define una anchura, un color de fondo y bordes de color gris claro en la parte lateral izquierda y abajo, los otros dos lados no tendrán borde por estar en contacto con los bordes de otros elementos.
Además, con el atributo float:right, indicamos que este lateral debe "flotar" hacia la derecha. Así, el cuerpo flota a la izquierda y el lateral a la derecha, con lo que conseguimos una disposición en 2 columnas.
Veremos a continuación los elementos que vamos a colocar dentro de la capa lateral, en una especie de cajas independientes. Aunque, antes de ver esas cajas una a una, merece la pena conocer en líneas generales cómo van a crearse. Cada caja tendrá este código HTML, compuesto por un titulo y un contenido de la caja:
<h2 class="titlat">Titulo de la caja</h2>
<div id="idunico" class="cuerpolateral">
Contenido de la caja
</div>
El título lo incluimos con una etiqueta <h2> y la parte de la caja con el contenido, se define con un div. Cada uno de estos elementos tiene una clase, que se aplicará a los mismos elementos en cada una de las cajas, de modo que todos los elementos del lateral compartan un mismo estilo.
.titlat {
background-color:#68729E;
color:#ffffff;
font-size:8pt;
text-transform : uppercase;
padding: 7px 3px 7px 8px;
font-weight : normal;
letter-spacing : 2px;
margin: 0px 0px 8px 0px;
}
.cuerpolateral {
padding: 5px 4px 13px 10px;
}El encabezado de nivel 2 utiliza la clase "titlat", que define un color de fondo, un color del texto, un tamaño de letra, un cambio a mayúsculas de las letras del título, unos márgenes internos, peso de letra normal (no negrita, como suelen ser los encabezamientos por defecto), un espaciado de letras de 2 pixel y un margen. Los titulares llevan asociado un salto de línea doble arriba y abajo, que deseamos evitar y para ello hemos definido un margen de 0 pixels, menos en la parte de abajo, que tendrá 8 pixel.
Las cajas laterales también tienen un estilo, que se aplica a todos los cuerpos de las cajas que hay en el lateral. Ese estilo simplemente define unos márgenes internos.
Caja de buscar
Uno de los elementos que vamos a colocar dentro del lateral es una caja de búsqueda, con un formulario para realizar búsquedas internas, dentro del sitio, y en todo el web.
Esa caja de búsqueda se coloca en un formulario. Hemos puesto diversos identificadotes a los elementos que hay dentro del fomulario, para poder aplicar estilos a cada componente por separado. Aunque algunos de estos selectores ni siquiera los hemos llegado a utilizar, pueden venir bien si queremos hacer en el futuro modificaciones de la hoja de estilos para actualizar el diseño del web.
<h2 class="titlat">Buscar</h2>
<div id="fbuscar" class="cuerpolateral">
<form>
<div id="campotexto"><input type="text" name="criterio"></div>
<div id="botonbuscar"><input type=image src="images/go.gif" width="25" height="15"></div>
<div class="radio"><input type="radio" name="op" value="1"> En la Web del invierno</div>
<div class="radio"><input type="radio" name="op" value="2"> En toda la Web</div>
</form>
</div>Los elementos que hemos definido en la hoja de estilos para este pequeño formulario son los siguientes:
input {
font-size : 8pt;
}Con ello definimos que los campos de texto tienen un tamaño de letra de 8 puntos.
#fbuscar form{
margin-bottom : 0px;
margin-top : 0px;
}El formulario, que está situado dentro de la capa fbuscar, no debe tener márgenes, ni arriba ni abajo.
#campotexto{
float: left;
}La capa "campotexto", donde está el campo de texto, hemos definido que debe "flotar" a la izquerda.
#campotexto input{
width:100px;
}
El input que hay dentro de la capa campotexto debe tener 100 pixels de ancho.
#botonbuscar {
padding-top : 3px;
padding-left: 106px;
}
La capa donde está el botón de submit, que en este caso es una imagen de submitir (<input type="imagen">), tiene un margen interno de 3 pixels por arriba, y de 106 por el lado izquierdo. Los 106 pixels de ancho salen de los 100 que ocupa el campo de texto que hay a la izquierda, más 6 pixeles adicionales, que son el verdadero margen que habrá entre el campo de texto y la imagen de submitir.
#botonbuscar input {
border : 0px none;
}
Con esta última definición estamos indicando que la imagen de submitir (el <input type="image"> que hay dentro de la capa botonbuscar) no tenga borde.
.radio{
clear:both;
}Esta clase, que afecta a las capas donde están los botones de radio, define que no deben haber elementos "flotando" ni a la izquierda ni a la derecha, de los botones de radio.
La caja de registro
En la siguiente caja del lateral aparece un pequeño texto invitando a registrarse al visitante.
<div id="registro" class="cuerpolateral">
<a href="#">Registrese con nosotros</a> y obtenga muchas ventajas.
</div>Esta capa no tiene ningún estilo específico, simplemente se comporta heredando los estilos de otras capas y con los que se han definido en las clases que se utilizan.
La caja de otras informaciones
Situaremos una última caja dentro del lateral, que contiene enlaces a otras informaciones. Dentro de la caja colocaremos varios enlaces dentro de una lista.
<h2 class="titlat">Otras informaciones</h2>
<div id="otras" class="cuerpolateral">
<ul>
<li><a href="#">Quienes somos</a>
<li><a href="#">Nuestra misión</a>
<li><a href="#">Agenda de eventos</a>
</ul>
</div>Para personalizar el estilo de la lista de enlaces se utilizan los siguientes estilos.
#otras ul {
margin : 5px 10px 0px 0px;
padding: 0px 0px 0px 4px;
list-style: none;
}
Por un lado tenemos el estilo definido para toda la lista de elementos. En este caso se eliminan los márgenes que este tipo de listas tienen implícitos. Se coloca también un margen interno 4 pixel a la izquierda y cero en el resto de las posiciones. Con "list-style:none" se indica que no se desea ninguna bolita a la izquierda de los elementos, puesto que la vamos a colocar a continuación nosotros manualmente como fondo de los <li>.
#otras li {
padding-left: 14px;
background: transparent url("images/bullet.gif") 0 2px no-repeat;
margin-bottom: 10px;
}
Por otra parte, para cada uno de los elementos de la lista, de define un espacio de 14 pixel a la izquierda. Esos 14 pixel sirven para hacer espacio, para que quepan unas pequeñas imágenes que vamos a poner de fondo en las listas, que van a hacer las veces de bolita. También se define un fondo de los <li> que es la imagen con la bolita personalizada, a juego con nuestro diseño. También se define un margen en la parte inferior.
Para acabar, vamos a crear un pie de página y un borde enmarque la página. Ofreceremos también unas conclusiones del ejercicio.
Pie de la página
Este elemento no lo habíamos previsto en la imagen original, creada previamente, pero lo hemos decidido colocar porque lo necesitamos, para que en la parte donde está el cuerpo y el lateral, aparezca el fondo de color blanco. En Explorer aparece el fondo blanco sin ningún problema, pero en Mozilla y otros navegadores, al estar las dos capas de cuerpo y lateral "flotando" a izquierda y derecha, no entiende que deba mantener el fondo blanco definido en el container.
No se si se entiende esto bien, pero lo mejor es hacer una prueba y ver lo que hemos definido hasta el momento en la plantilla en Firefox o Mozilla. Veremos que el fondo blanco no está continuado hacia abajo.
<div id="pie">
Pruebas de maquetación CSS © 2005 DesarrolloWeb.com
</div>Esta capa tiene el siguiente estilo definido:
#pie{
clear : both;
color : #cccccc;
text-align : right;
margin : 10px 10px 0px 10px;
padding-bottom:10px;
}Con "clear:both" indicamos que la capa debe mostrarse sin elementos flotando a izquierda y derecha, de modo que la posición de la capa será inmediatamente por debajo de la capa cuerpo y lateral.
Luego se define un color para el texto una alineación de texto, unos márgenes y un margen interno por la parte de debajo de 10 pixel.
El borde externo
El diseño original incluía un borde de 2 pixel rodeando a toda la capa principal. Podemos hacer la prueba de incluir un borde en la capa contenedor. Para ello hay que añadir en el estilo para la capa contenedor el atributo border, de la siguiente manera.
#contenedor{
text-align: left;
border: 2px solid #cccccc;
width: 700px;
margin: auto;
background-color : #ffffff;
}En Mozilla y navegadores similares, todo es correcto. Pero en Internet Explorer la cosa tiene su problema. Esto es debido a que el espacio de los bordes, en Explorer, se toma del que se haya asignado a la propia capa y en Mozilla y otros navegadores, se toma como espacio adicional, aparte del que se haya asignado a la capa en si.
Lo mejor es probarlo y verlo por uno mismo, o bien encontrarse con el problema y encontrarle solución sin tener que romperse la cabeza.
Nosotros lo hemos arreglado quitando el borde en la capa contenedor y creando una nueva capa, en la que situaremos el contenedor. Esa nueva capa la hemos llamado borde y es la que va a tener el estilo de borde definido.
<div id="borde">
<div id="contenedor">
.... contenido de toda la página
</div>
</div>Para conseguir el borde se han definido el siguiente estilo para la capa borde.
#borde{
border: 2px solid #cccccc;
text-align: left;
width: 700px;
margin: auto;
}Primero hemos definido un borde de 2 pixel. Luego un centrado a la izquierda (para contrarrestar el centrado al centro que tiene el body y que habíamos puesto para que Explorer centrase la capa del contenido. También se incluye una anchura de 700 pixel y un margen "auto" para que Mozilla y otros navegadores centren la capa.
Por supuesto, conviene ver el resultado final utilizando varios navegadores distintos.
Conclusión
Hemos visto cómo maquetar una página utilizando CSS paso a paso. Esperamos que hayáis podido seguir el ejercicio y que ninguna dificultad os haya frenado. Realmente el trabajo con CSS para la maquetación es una tarea fácil, pero también es muy sencillo encontrarnos con escollos o problemas misteriosos que no parecen tener respuesta.
Sin ser un diseño complicado, realizar esta maquetación nos ha llevado varias horas de trabajo y algún que otro padecimiento, que por suerte no ha llegado a desesperación. Sobretodo existen dificultades a la hora de conseguir el diseño que se vea correctamente en todos los navegadores del mercado. Este diseño lo hemos probado con éxito en Mozilla, Firefox, Netscape, Opera y Explorer.
Para que la compatibilidad entre navegadores no signifique un problema muy pesado, nuestro consejo y el de otros desarrolladores, es diseñar con Mozilla o navegadores similares. Luego se puede ver el resultado en Explorer y adaptar lo que fuera necesario para terminar de cuadrar el diseño. En este caso habrán pocas cosas que cambiar, mientras que si diseñamos para Explorer y luego vemos el resultado en otros navegadores, seguramente nos tiremos de los pelos porque nada esté en su sitio.
La experiencia en el trabajo con CSS, nos dice que a menudo surgen los mismos problemas o similares. Una vez que ya los hemos resuelto unas pocas veces y nos hemos acostumbrado a ello, igual que hicimos con los detalles relativos al HTML y la maquetación con tablas, CSS se torna mucho más sencillo, potente y rápido de desarrollar.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...