Maquetar_con_CSS

MAQUETACIÓN CON CSS
Elementos principales
Para maquetar una página web y crear su estructura visual (layout) hay que dividir la página en
bloques. La estructura de una página web tendrá una serie de áreas que se utilizarán para
mostrar el contenido de las distintas secciones.
body
contenedor
cabecera

columna
izquierda

contenido principal

columna
derecha

pie

Figura 1. Estructura típica de unapágina web

Diseño fijo, líquido, elástico
En algunas páginas web las medidas de los bloques permanecen inalterables aunque
disminuya el ancho del navegador. En otras, el ancho de los elementos se adapta a la anchura
de la ventana del navegador. En el primer caso estaríamos ante un diseño fijo. Para maquetar
una página con un diseño fijo se utilizan unidades de medida fijas, normalmente enpíxeles.
Esta forma de diseño tiene la ventaja de que se controla totalmente el tamaño y la estructura
de la página independientemente del dispositivo. Además el diseño suele ser más fácil. Por el
contrario no admite bien el redimensionado del tipo de letra y se puede leer con dificultad si el
tamaño o la resolución de la pantalla muy grande o muy pequeña.
Para hacer un diseño líquido, se utilizanunidades de medida relativas, generalmente
porcentajes. Con esto se consigue que el diseño de la página se adapte a los distintos anchos o
resoluciones de pantalla y se evita tener que utilizar la barra de desplazamiento horizontal si el
ancho de la ventana es pequeño. En general, es preferible este tipo de diseño al fijo ya que
aumenta la usabilidad y accesibilidad de la página. La principal desventajareside en que si el
ancho de la ventana es muy grande, las líneas de texto son excesivamente largas
Luis Rodríguez Baena (UPSAM), 2013

1

disminuyendo la legibilidad. Lo mismo puede ocurrir si el ancho es muy pequeño ya que el
tamaño de la línea de texto disminuye aumentando el número de saltos de línea. Para
solucionar este problema se pueden utilizar los atributos max-width y min-width.
Enlugar de porcentajes, se puede establecer como unidad de medida el tamaño de la letra. Se
trata del diseño elástico en el que las medidas de los bloques se realizan con unidades em. De
esta forma, al redimensionar el texto se redimensiona también el bloque.

Elementos de la estructura de la página
La figura 1 muestra un ejemplo de maquetación típico de una página web con sus elementos
habituales.Cada uno de esos elementos podría dividirse en distintas secciones, por ejemplo,
un menú de navegación principal, enlaces destacados, distintas noticias, enlaces a las distintas
utilidades (mapa web, registro, carro de la compra, etc.), etc.

Elemento body
El elemento body será el que definirá todos los aspectos de presentación generales, como la
familia de la fuente, color de fondo y primer plano,etc.
Normalmente, además en él se establece un valor de margin y padding a 0, para que el
resto de los elementos se ajusten a los límites de la ventana del navegador.

Elemento contenedor
Los distintos elementos de la estructura, generalmente se incluirán dentro de un elemento
div de nombre contenedor. El contenedor nos servirá para delimitar los límites de la página.
Para los agentes basados enMozilla, es interesante volver a marcar el margen y el relleno a 0
para que los elementos se ajusten a los límites del contenedor. Los márgenes y rellenos reales
se marcarán en cada elemento.
Un ancho marcado en porcentajes, dará un aspecto flexible (líquido) al contenido. Un ancho
marcado en unidades de medida absolutas (preferentemente pixel) daría un ancho fijo.

Elemento cabecera
Se utilizapara meter los elementos que se repiten en cada página (logo con el sitio, menú de
navegación principal, barra de utilidades, etc.).

Elemento pie
Contiene los elementos del pie de página. Para no montar con los elementos superiores suele
tener un atributo clear:both.

Áreas de estructura visual de la página (columna izquierda, contenido, columna
derecha, etc.).
Según el esquema de la página...