Introducción a la maquetación de un sitio web

 

Cuando empezó el diseño web a mediados de los 90, el único método que se podía emplear para maquetar sitios complejos, como por ejemplo la presentación de información en varias columnas, consistía en emplear la etiqueta <table>. Las tablas en HTML estaban pensadas inicialmente para mostrar datos de manera estructurada, en filas, columnas y celdas. Sin embargo los diseñadores empezaron a utilizar este elemento para maquetar páginas. En aquel momento esa técnica estaba plenamente justificada: las tablas era lo único que tenían para generar el tipo de diseños que se necesitaban y, además, eran un recurso extremadamente flexible.

Actualmente CSS ha sustituido el empleo de tablas para organizar los elementos en las páginas, por lo que las tablas HTML van regresando, poco a poco, a su función original, que es la de mostrar datos tabulados, y abandonar su papel como armazón visual de las páginas.

Antes de maquetar nuestras páginas web tenemos que decidir una cosa. Lo primero es qué ancho va a tener. Hay dos categorías principales de estructuras en base a su ancho: las de ancho fijo y las de ancho variable. En las estructuras de ancho fijo todos los elementos de la página se anidan dentro de un contenedor que tiene un ancho explícito (por ejemplo 960 pixeles). El ancho fijo es una solución muy cómoda para el diseñador ya que permite ubicar con precisión los distintos elementos (cabeceras, barras laterales y pies de página). Además aporta un esqueleto robusto para otros elementos, como el ancho de párrafo o el posicionamiento de imágenes cuando éstas aparecen en gran número (por ejemplo en sitios web de catálogos de producto). Las estructuras flexibles se llaman así porque están pensadas para adaptarse al ancho de la ventana del navegador en cualquier momento. Este tipo de disposiciones es útil cuando los usuarios acceden desde pantallas con resoluciones muy variadas, lo que hace imposible elegir un ancho fijo que ofrezca el mismo aspecto en todas ellas. Una estructura flexible bien diseñada es capaz de ajustarse automáticamente al tamaño de ventana del navegador.

 

Tipos de elementos

 

El estándar HTML clasifica a todos sus elementos en dos grandes grupos: elementos en línea (inline) y elementos en bloque (block). Los elementos inline se posicionan horizontalmente uno a continuación del otro siempre y cuando haya el espacio necesario. Este tipo de elementos no admiten las propiedades width (ancho) y height. (altura). Dentro de este tipos de elementos encontraremos a las etiquetas: a, input, label, select, span, strong, em, br, textarea, img, small.

Los elementos tipo block siempre ocupan una línea completa independientemente de su tamaño, por medio de las propiedades width y height es posible modificar su ancho y su altura. Dentro de este tipos de elementos encontraremos a las etiquetas: div, h1..h6, p, ol, ul, li, hr, form, tbody, td, tfoot, th, tr.

Por medio de CSS podremos alterar el tipo de elemento usando las reglas: display:block y display:inline aplicándolas a cada elemento.

 

Por ejemplo si quisiéramos cambiar el tipo de elemento block a inline sobre la etiqueta li deberíamos escribir lo siguiente:

Este ejemplo puede ser muy útil cuando queramos realizar menúes horizontales.