Aprende sobre maquetación web con Dreamweaver

La maquetación es la distribución de los elementos en nuestra página. Piensa en una página web cualquiera. Seguro que distingues algunos elementos claramente diferenciados, como un encabezado, columnas, y un pie de página.

Hace unos años, la maquetación de las páginas web se realizaba utilizando tablas (<table>). Una vez entendido este proceso podía resultar sencillo, aunque si no se dominaban las tablas, podía convertirse en algo tedioso. El problema de las tablas es que generaban un página muy encorsetada, y el código se volvía complejo de entender. Además, algunos buscadores encontraban problemas al analizar la estructura de la página.

Actualmente, la maquetación con tablas ha caído en desuso, y se realiza utilizando capas (<div>), también llamadas divisiones o contenedores. La colocación de las capas en la página se realiza a través de CSS. Esto permite, por ejemplo, que podamos pasar de un diseño con un menú lateral a otro con el menú en la parte superior, sólo cambiando la hoja de estilos.

En esta unidad veremos las técnicas de maquetación más comunes, aunque hay que decir que existen diversas formas de conseguir una misma maquetación.

Como hemos dicho, emplearemos sobre todo etiquetas del tipo (<div>). Para crear un div alrededor de contenido ya existente desde Dreamweaver, seleccionamos la parte de la página y en el menú Insertar, opción Objeto de diseño, elegimos Etiqueta Div.

También veremos que Dreamweaver nos ofrece una serie de plantillas de maquetación, de las que podremos partir, adaptándolas a nuestras necesidades.

18.2. Tamaño

Por lo general, la maquetación se realiza sobre elementos en bloque. Normalmente divisiones, pero también lo podemos hacer con párrafos, listas, o con el propio body. Por defecto los elementos de bloque ocupan todo el ancho del elemento que lo contiene, y su alto se ajusta al contenido.

Cualquier elemento HTML de bloque, tiene dos atributos que pueden definir su tamaño: ancho (width) y alto (height).

Los valores para estas medidas, pueden ser expresados en las medidas habituales:

• Tamaños absolutos, utilizando px, cm, etc...
• Tamaños relativos al elemento que lo contiene, utilizando porcentajes (%).
• Tamaños relativos a la fuente, utilizando em.
• El valor auto es el valor por defecto. Por ejemplo, un párrafo, por defecto, tienen un ancho del 100% y un alto ajustado al contenido.

En algunos elementos, como los Divs PA, nos permiten cambiar su tamaño desde el Inspector de propiedades. Pero en la mayoría, tendremos que hacerlo desde el código o desde las propiedades CSS de Cuadro y Posicionamiento.

Por ejemplo, hemos definido el tamaño para el siguiente párrafo:

<p style="width:200px; height:100px; border: red 2px solid">

Por defecto, al no ocupar todo el ancho, el elemento queda alineado a la izquierda, como en el ejemplo anterior. Una forma sencilla de centrarlo es dándole al margen (margin) derecho e izquierdo el valor auto. Recuerda que las propiedades de margen se encuentran también con las propiedades de Cuadro.

<p style="width:200px; height:100px; border: red 2px solid; margin: auto;">

Nota: En la vista de Diseño de Dreamweaver, esta propiedad no se muestra correctamente.

Con sólo esto, podríamos maquetar una página web que contenga una columna central, con un ancho fijo o relativo, centrada en la ventana del navegador.

Para hacerlo, encerramos todo el contenido del body en una capa, a la que le asignamos, como mínimo, estas reglas CSS:

#container {
 width: 960px;
 margin: 0 auto; 
}

Puedes ver un ejemplo de una página muy simple maquetada de esta forma aquí.