Las hojas de estilo en cascada ayudan a separar el contenido de la forma, es decir, los elementos que componen una página de la forma con la que se muestran. Además, CSS ayuda en gran medida a la definición de estilos en la página, ya que permite ajustar de una manera mucho más precisa cualquier aspecto de cualquier elemento de la página.
La maquetación con CSS lleva la utilización de las hojas de estilo a su grado máximo, de manera que cualquier definición del aspecto de la página se realiza en la declaración CSS que enlazamos con el documento HTML. Para definir la situación de los elementos en la página se utilizan las capas, a las que se aplica un posicionamiento a través también de las hojas de estilo.
Para crear las capas se utilizan etiquetas <DIV>, en las que se introducen los elementos que queramos que aparezcan en la página. Los elementos dentro de los <DIV> también se pueden anidar, para heredar las propiedades y posicionamiento de las capas padre.
En la maquetación por capas se definen únicamente etiquetas <DIV> y las tablas sólo se utilizan para mostrar información tabulada, es decir, mostrada en filas y columnas. Cabe señalar que en la maquetación tradicional se utilizan las tablas para ajustar la posición de los elementos en la página. Seguro que muchos de los lectores están muy familiarizados con el uso de tablas para maquetar una web, pues se trata de una técnica bastante sencilla, aunque bastante poco práctica y que complica un tanto el código de las páginas web resultantes.
Ventajas e inconvenientes de la maquetación CSS
La maquetación por capas, también llamada maquetación CSS, es una forma de crear webs más evolucionada y que mejora en mucho a la maquetación tradicional (que antes se hacía por tablas), aunque también tiene sus inconvenientes.
Ventajas:
- La separación del contenido de la página y del estilo o aspecto con el que se deben mostrar. Tener en cuenta que, cuanto más separemos estos dos elementos, más sencillo será el mantenimiento de las páginas y el procesamiento de la información. Con ello también podremos obtener páginas más limpias y claras.
- Ahorro en la transferencia. Si todos los estilos y posiciones de los elementos se introducen en un documento externo, liberaremos el código de la página y ocupará mucho menos. Como la declaración de estilos se almacena en la caché del navegador, sólo se transfiere en la primera página que se visita del sitio, con lo que la segunda y posteriores páginas que se soliciten se cargarán mucho más rápido.
- Facilidad para alterar el aspecto de la página sin tocar el código HTML. Como toda la información de los estilos y el posicionamiento de las capas se encuentra en un mismo archivo, si deseamos cambiar cualquier elemento de la página -ya sea su posición o su aspecto-, sólo tenemos que actualizar la hoja de estilos y los cambios se verán automáticamente en todo el web.
Desventajas:
- Actualizado: La verdad es que en la actualidad casi no podemos decir que existan desventajas en la maquetación CSS, salvo la difcultad que puedan encontrar los desarrolladores para para aprender una cosa nueva. Actualmente todos los navegadores la soportan y la interpretan de una manera muy parecida, lo que facilita bastante la labor de desarrollo.
- Compatibilidad con navegadores antiguos. Se necesita que el visitante disponga de un navegador actual. La mayoría de los visitantes disponen de navegadores que soportan características avanzadas de las CSS, pero todavía hay mucha gente que no ha actualizado sus equipos o que navega en sistemas de sólo texto. Los navegadores que no soportan hojas de estilos, por lo menos leerán el código de la página y lo mostrarán sin ningún posicionamiento. Ello puede resultar fastidioso, pero por lo menos visualizarán todos los datos de la página, aunque descolocados y sin estilo.
- Diferencias entre navegadores. Dependiendo del navegador también cambian las etiquetas de estilos soportadas, por lo que las páginas puede que no se vean exactamente igual en unos clientes que en otros. También, al igual que ocurre con HTML, hay atributos no estándar o que tienen valores por defecto diferentes. Cuando se empieza con la maquetación en CSS, puede resultar un tema bastante complicado y crearnos bastantes dolores de cabeza, no obstante, se trata de, poco a poco, ir aprendiendo todos los atributos y los navegadores donde se visualizan o no.
Actualizado: Las diferencias entre navegadores en la actualidad se han minimizado bastante y lo cierto es que con unas pocas técnicas podremos diseñar páginas que se vean exactamente igual en cualquier navegador. - Dificultad. Sin duda, si estamos acostumbrados al HTML, pasar a CSS resulta más complicado y requiere un estudio más profundo. Sin embargo, este paso nos brindará un mayor control de los elementos de la página y ampliará nuestras fronteras a la hora de maquetar.
Maquetar una página web con tablas
Las tablas en realidad están pensadas para presentar información tabulada, es decir, usando filas y columnas. Sin embargo, este uso lo podemos extender a toda la página web y crear una macrotabla que englobe todos los contenidos que se van a mostrar en la página entera. Como las tablas tienen filas y columnas, nos servirán para crear varias áreas donde se mostrarán los contenidos maquetados como si fuera una revista o un portal.
Para crear la cabecera y el cuerpo utilizaremos tablas independientes. Esto lo hacemos porque con dos tablas separadas para simplificar el ejemplo, es decir, por comodidad y porque se hace más fácil de diseñar. Cuando la distribución de columnas y filas en la cabecera y cuerpo es distinta, necesitamos utilizar tablas independientes. Pero la razón más importante de poner cabecera y cuerpo en tablas distintas es que en algunos navegadores, cuando hay diseño con tablas, hasta que no se carga el código de la tabla entera no se muestra nada. Si tuviéramos toda la página metida en la misma tabla, el usuario no vería nada hasta que no se terminase de cargar toda la página en su navegador. Si separamos las tablas de cabecera y cuerpo conseguimos que la cabecera de la página se cargue y se muestre rápidamente y luego, aunque tarde bastante en cargarse el resto de la página con todo el cuerpo, por lo menos el usuario ve la cabecera y puede saber que la página está por cargar del todo.
En este caso la cabecera es bastante típica, con el logotipo, un banner y una barra de navegación horizontal. El código puede ser como el siguiente.
<table width="778" cellspacing="1" cellpadding="3" border="0" bgcolor="#000000" align="center">
<tr>
<td width=180 align=center bgcolor="#ffffff"><img src="logo.gif" width="154" height="72" alt="Todo Clásico" border="0"></td>
<td bgcolor="#ffffff" align=center><img src="banner.gif" width="468" height="60" border="0"></td>
</tr>
<tr>
<td colspan=2 bgcolor="#ffffff" background="fondohorizontal.gif">
<font face="Garamond">Portada | Noticias | Agenda | Artistas | Buscador | Comunidad | Tienda</font>
</td>
</tr>
</table>
<tr>
<td width=180 align=center bgcolor="#ffffff"><img src="logo.gif" width="154" height="72" alt="Todo Clásico" border="0"></td>
<td bgcolor="#ffffff" align=center><img src="banner.gif" width="468" height="60" border="0"></td>
</tr>
<tr>
<td colspan=2 bgcolor="#ffffff" background="fondohorizontal.gif">
<font face="Garamond">Portada | Noticias | Agenda | Artistas | Buscador | Comunidad | Tienda</font>
</td>
</tr>
</table>
Si nos fijamos, la cabecera tenía un contorno negro. Esto lo conseguimos: Recuadro elegante y sencillo con HTML. Simplemente ponemos un color de fondo negro a la tabla, luego hacemos que las casillas estén separadas (cellspacing) de un píxel y definimos en blanco el color de todas las casillas. Así, la separación entre casillas aparecerá en negro y las casillas en blanco. En este caso hemos definido un margen entre el borde de la casilla y el contenido (cellpadding) de tres pixels, para que el contenido de las casillas no se pegue con el borde.
La barra de navegación horizontal ocupa todo el ancho de la cabecera, por eso tiene un colspan=2. Le hemos puesto un fondo degradado para mejorar el diseño un poco.
Otra cosa destacable es el ancho de la tabla, que lo hemos hecho de 778 píxeles. Podríamos haber hecho un diseño que ocupase todo el ancho de la página, pero he creado un diseño no fluido con ancho fijo. Este tipo de diseños, en mi opinión, son más sencillos de que queden bien. El tamaño de 778 píxeles es porque es lo máximo que se puede poner que quepa en definiciones de pantalla de 800 x 600. Por su parte, el cuerpo tiene una distribución de tres columnas. El código de la tabla que englobaría todo el cuerpo es el siguiente:
<table width="778" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td width=150 valign="top">
<!--NAVEGADOR LATERAL IZQUIERDO-->
</td>
<td width=10></td>
<td width=484 valign="top">
<!--CUERPO PRINCIPAL-->
</td>
<td width=10></td>
<td width=124 align=center valign="top">
<!--LATERAL DERECHO-->
</td>
</tr>
</table>
<tr>
<td width=150 valign="top">
<!--NAVEGADOR LATERAL IZQUIERDO-->
</td>
<td width=10></td>
<td width=484 valign="top">
<!--CUERPO PRINCIPAL-->
</td>
<td width=10></td>
<td width=124 align=center valign="top">
<!--LATERAL DERECHO-->
</td>
</tr>
</table>
La técnica para hacer esta tabla es distinta que la tabla de la cabecera. Esta tabla no tiene reborde negro, para no recargar demasiado el diseño de la página. Pero lo más importante es que los márgenes y espacio entre celdas (cellspacing y cellpadding) los hemos eliminado o puesto a cero. Entonces, los espacios que tiene que haber entre celdas los hemos puesto con celdas vacías de 10 pixel. Esto lo hago así porque de este modo me resulta más sencillo calcular los espacios de la tabla y porque así podemos definir márgenes que no afectan a todas las celdas de la tabla, sino sólo a las que los necesitan.
La tabla tiene tres celdas donde se meterán contenidos y dos celdas con espacio o márgenes para separar las tres casillas donde están los contenidos. Dentro de cada celda colocamos los contenidos necesarios. En la primera irá la barra de navegación de la izquierda, en la celda del centro el cuerpo principal y en la tercera casilla irá el lateral derecho, que hemos utilizado para colocar publicidad.
Los anchos de cada celda, definidos por el atributo width, son bastante típicos en este tipo de estructuras de tres columnas. Además, podemos ver que todas las celdas tienen el atributo valign="top" para que los contenidos se sitúen en la parte de arriba de la tabla.
El contenido de cada una de las celdas del cuerpo incluye más código HTML, incluso otras tablas anidadas. En general, podemos poner en cada columna el código HTML que necesitemos, con cualquier etiqueta, teniendo en cuenta que el ancho disponible está limitado al ancho de la celda.
