Diseño de Páginas Web

Es la forma en que componemos nuestra página web. La ubicación de cada elemento en su lugar.

Disposición de los elementos de una página

La disposición del contenido de nuestra página es importante para que esta sea más simple de navegar o más atractiva al usuario.

La división de las diferentes secciones de una página(logo, menú, banners, publicidad o el contenido mismo) se puede definir por medio de este sistema.

Muchas veces deseamos que el texto de nuestra página esté dividido en 2 o más columnas.

Otras veces queremos insertar una imagen en algún lugar determinado de la página.

Para ello nos valemos del uso de las tablas, sin bordes y definiendo los diferentes anchos de cada una de las columnas.

Otro sistema más efectivo, es el uso de estilos para la disposición de los diferentes elementos dentro de la página. Pero ese tema lo estudiaremos en el tutorial de CSS.

Usando tablas para diseñar una página Web

El uso más común es el de las tablas para dar forma a la disposición de los textos en la página.

Esta sección de la página está diseñada en dos columnas.

Para lograr este efecto debemos usar la etiqueta <table> y dividir el texto en 2 columnas.

El secreto está en usar la tabla sin bordes y agregarle un pequeño valor a cellpadding.

Se puede diseñar mucho más de dos columnas.

No importa cuanto texto le agregue a la página, siempre estará dentro de los bordes de la columna.

Código del ejemplo

<html>
<head>
<title>Disposición del texto</title>
</head>

<body>
<table width="100%" border="0" cellpadding="5">
   <tr>
      <td>Texto de la primera columna.</td>
      <td>Texto de la segunda columna.</td>
   </tr>
</table>
</body>
</html>

Disposición de una página estándard

Este es un pequeño ejemplo de como diseñar una página estándard.

Por supuesto que a cada sección se le puede agregar un color distinto o gráfica que le de vida a la página.

Acá ubicamos el logo o un banner

Menú

Vínculo 1

Vínculo 2

Vínculo 3

Acá va el contenido

Código del ejemplo

	
<table width="100%" height="250px" cellspacing="1px" border="1px">
   <tr height="50px">
      <td colspan="2px">

         <table title="Banner" border="0">
            <tr>
               <td>Acá ubicamos el logo o un banner</td>
            </tr>
         </table>

      </td>
   </tr>
   <tr height="200px">
      <td>

         <table title="Menu" border="0" width="100px">
            <tr><td>Menú</td></tr>
            <tr><td>Vínculo 1</td></tr>
            <tr><td>Vínculo 2</td></tr>
            <tr><td>Vínculo 3</td></tr>
         </table>

      </td>
      <td>

         <table title="Contenido" border="0" width="400px">
            <tr>
               <td>Acá va el contenido</td>
            </tr>
         </table>

     </td>
  </tr>
</table>

Explicación del ejemplo

La primera etiqueta <table> define el tamaño general de la página.
La segunda etiqueta <table> define la sección superior de la página, donde se coloca generalmente el logo o un banner.
La tercera sección está definida por la etiqueta <table> y en el ejemplo colocamos el menú. La última etiqueta <table> nos define el sector que lleva todo el contenido de la página.

Nota: por supuesto que cada una de las secciones se puede seguir subdividiendo cuantas veces sea necesario.

¿No encuentras lo que buscas?

<<< Tabla para combinar colores Hojas de estilo en cascada dentro de HTML >>>

Búsqueda

Virtualnauta provee del material para uso exclusivo de aprendizaje.
No garantizamos que el contenido sea correcto.
El riezgo por el uso del mismo queda bajo la entera responsabilidad del usuario.
Mientras use este sitio, usted acuerda haber leido y aceptado nuestros términos de uso y privacidad.

webmaster@virtualnauta.com

Mapa del sitio

HTML

Básico

Colores

Avanzado

Ejemplos y Examen

Guías de referencia

Diseño de Páginas Web

Disposición de los elementos de una página

Usando tablas para diseñar una página Web

Código del ejemplo

Disposición de una página estándard

Código del ejemplo

Explicación del ejemplo

¿No encuentras lo que buscas?

Búsqueda

Otros tutoriales

Artículos

Sitios amigos