Unidad 7. Maquetación web (I)


7.1. Maquetar una página web

Ver el videotutorial

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, como encabezados, columnas, menús laterales, etc.

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.

Las capas pueden estar anidadas unas dentro de otra. Básicamente, lo que haremos será definir cómo se posiciona en la página, su colocación y su tamaño.

Nota: Lo aquí explicado funciona para webs con el DTD XHTML Transitional o Strict. Al declarar otro DTD, o no hacerlo, puede que el resultado no sea el esperado.

7.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.

Lados y tamaño

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.

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.

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

Con sólo esto, podríamos maquetar una página web que contenga una columna central, con un ancho fijo o relativo. En el siguiente ejemplo, hemos contenido todo el texto en una capa, a la que le hemos asignado el id="contenido", y en la hoja de estilo le hemos asignado un ancho fijo y la hemos centrado.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <meta content="text/html; charset=ISO-8859-1"

     http-equiv="content-type" />

  <title>Una columna</title>

  <style type="text/css">

  body {

 	background-color:#C2C5E7;

     margin: 0;

		}

  div#contenido { 

     width: 800px; 

     margin: auto; 

     border-left: #6699FF 2px solid;

     border-right: #6699FF 2px solid;

     background-color: #EDEEF8;

     padding: 5px;

     }

  </style>

  </head>

  <body>

  <div id="contenido"> 

   <h1>P&aacute;gina con una columna</h1> 

   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis  nulla et risus. In eleifend sapien a neque. Etiam fermentum. Sed  dapibus suscipit diam. Praesent non nisi ac leo congue vestibulum.  Mauris ac orci eu nisl dictum ultrices. Morbi blandit dolor vitae  sapien. Vivamus in neque. Integer sit amet mi. Curabitur ipsum lectus,  ultricies sit amet, bibendum a, sodales vitae, massa. Quisque metus.  Sed blandit hendrerit urna. Aenean eu nulla. Praesent vulputate dui id  lacus. Nunc vel odio. Nulla eleifend rutrum nulla. </p>

   <p>Praesent ut ipsum. Nullam vitae nunc. Nam sit amet libero id mauris  consectetur pulvinar. Suspendisse vulputate lorem quis lectus. Quisque  commodo purus et nibh. Nunc quis mi quis risus hendrerit ultricies. Cum  sociis natoque penatibus et magnis dis parturient montes, nascetur  ridiculus mus. Aliquam ac dui. Mauris vulputate fermentum tellus. Morbi  rhoncus lorem id nibh. </p>

   <p>Etiam cursus nulla ac purus. Pellentesque massa elit, dignissim et,  volutpat eu, sagittis tristique, sem. Quisque nec leo. Etiam fringilla  pellentesque turpis. Vestibulum at est. Sed sapien nunc, faucibus ac,  suscipit sit amet, lacinia porttitor, mauris. Curabitur congue justo  sed nunc. Pellentesque habitant morbi tristique senectus et netus et  malesuada fames ac turpis egestas. Integer tristique diam vitae ligula.  Nulla tincidunt, metus sit amet congue porttitor, purus pede commodo  odio, vel varius mauris nulla id augue. Mauris pellentesque volutpat  lacus. Maecenas erat. </p>

   <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices  posuere cubilia Curae; Vestibulum volutpat, lacus non mattis vulputate,  lorem nunc varius odio, in venenatis ante augue quis nisl. Praesent ut  mi interdum lorem consequat vulputate. Vivamus ac urna non elit  pellentesque sollicitudin. Nunc pharetra nibh in quam. Proin eu magna  ut ligula volutpat mollis. Quisque mollis, nulla a porttitor commodo,  orci diam commodo pede, ac congue neque libero quis justo. Donec sit  amet ligula. In vehicula, elit ut pellentesque viverra, arcu nisl  tincidunt ipsum, in viverra dui orci vel massa. Nunc tincidunt congue  risus. Donec nec sem id elit egestas porttitor. Fusce ultrices nulla. </p>

  </div> 

</body>

 </html>

   

Puedes copiar el código y pegarlo en la caja de texto que encontrarás en esta página Probar código .



Enero-2010
Pág. 7.1

Atrás  Inicio  Adelante





.