Warning: include(/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 2

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 2

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 4

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 4

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/administrator/manifests/packages/include.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 14

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/administrator/manifests/packages/include.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 14

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/templates/virtualnautaejemplo/classes/header.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 16

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/templates/virtualnautaejemplo/classes/header.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 16

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 18

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 18

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/components/com_search/views/object.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 6

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/components/com_search/views/object.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 6

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/administrator/language/en-GB/footer.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 8

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/administrator/language/en-GB/footer.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 8

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 10

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 10

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 12

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 12

Warning: session_start() [function.session-start]: Cannot send session cookie - headers already sent by (output started at /home/content/20/9214920/html/joomla/includes/framework.php:2) in /home/content/20/9214920/html/joomla/libraries/joomla/session/session.php on line 532

Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at /home/content/20/9214920/html/joomla/includes/framework.php:2) in /home/content/20/9214920/html/joomla/libraries/joomla/session/session.php on line 532
Diseño de la página Web - Virtualnauta.com - Tutorial HTML

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



<<< Las imágenes en HTML Hojas de estilo en cascada dentro de HTML >>>

En la Web