Layout: la estructura de la web en CSS

Layout CSSCuando alguien, sea un particular o un empresario, solicita a un experto o empresa especializada que le haga una página web, una de las primeras cosas que necesita tener claras es cómo va a ser la disposición de los elementos dentro de la página o, dejarse aconsejar por el experto, para que después éste le presente algunos esquemas o bocetos de cómo puede ser esa distribución. Es lo que se denomina layout.

Layout es un término muy utilizado en el diseño de las páginas web pero si buscamos su significado en español, en el traductor de google, nos lo da como “disposición”.

Una vez concretado el layout es cuando se empieza a desarrollar la página web con sus contenidos específicos para cada elemento así como el diseño de cada uno de estos elementos (colores de fondo, formato, etc.)

Antiguamente toda la estructura de la página web y la distribución de los elementos se solucionaba en HTML con tablas pero, desde la estandarización de las hojas de estilos para HTML con CSS, se consiguió mejorar considerablemente algunos aspectos tan importantes para las páginas web como su mantenimiento, accesibilidad, velocidad de carga o la semántica. Por ello CSS ha conseguido hacer desaparecer prácticamente la utilización de tablas en el diseño de las páginas web. (ver post Selectores básicos CSS, modelo de cajas)

Un layout muy genérico en las páginas web es el esquema de tres columnas con un cabezal y un pie. Un cabezal en el que se puede incluir, por ejemplo, una imagen o el logo de la compañía y su nombre. Una columna izquierda en la que puede figurar el menú que llama a las distintas secciones, una columna más ancha en el centro con el contenido principal y una columna más estrecha en el lado derecho con un contenido secundario en el que pueden figurar enlaces, anuncios, redes sociales, etc. Y, abajo, un pie de página que se puede utilizar para incluir datos de la compañía, copyright, datos legales, contacto, etc.

Una sencilla regla en CSS conseguirá que el “wrapper” o “contenedor” que encierra toda nuestra página se adapte a la ventana de nuestro navegador centrando la pagina horizontalmente.

#contenedor { width: 85%; margin: 0 auto;}

div id=”contenedor”>
h1>…………</h1>
</div>
</body>

Layout CSSLa distribución de la cabecera, contenidos y pie se realizará dentro del contenedor. En la distribución de la figura, tanto la cabecera como el pie ocupan toda la anchura pero el menú y los contenidos debemos calcular la anchura que les queremos dar a cada uno teniendo en cuenta la anchura total de la que dispone el contenedor.

La solución que aporta CSS para el posicionamiento de los contenidos dentro del contenedor se basa en las propiedades “float” y “clear”. Con “float:left” CSS hace que el elemento sea flotante y se pegue a la izquierda todo lo posible, la propiedad “clear” la utiliza en el pie de página para evitar solapamientos con el resto de elementos posicionados con “float”

Para dar tamaño a las tres columnas (menú, principal y lateral) es preferible utilizar porcentajes a dar una medida exacta ya que así nos evita problemas de cálculo que pueden hacer que los elementos se presenten de forma distinta a la que deseamos.

Las reglas CSS mínimas para nuestro diseño quedaría:
#contenedor { width: 85%; margin: 0 auto;}
#cabecera { }
#menu {float: left; width: 15%; }
#contenido {float: left; width: 85%;}
#contenido #contenidoprincipal {float: left; width: 80% }
#contenido #lateral {float: left; width: 20% }
#pie {clear: both; }

El código HTML mínimo para nuestro diseño quedaría:

<body>
<div id=”contenedor”>
<div id=”cabecera”>
</div>
<div id=”menu”>
</div>
<div id=”contenido”>
<div id=”contenidoprincipal”>
</div>
<div id=”lateral”>
</div>
</div>
<div id=”pie”>
</div>
</div>
</body>

Solo con esto ya tenemos nuestro layout con la distribución de todos los elementos, ahora solo faltará incluir dentro de cada uno de ellos las características y el contenido que queramos.

Anuncios

Acerca de Ricardo Rubio Simón

Transporte y logística, Marketing, Comunicación 2.0, Gestión flotas, Redes sociales, Marca, Reputación, Comunity, Responsabilidad Social
Esta entrada fue publicada en web y etiquetada , , . Guarda el enlace permanente.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s