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
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.
|
|
|
|
|
|
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.
0 comentarios:
Publicar un comentario
Nota: sólo los miembros de este blog pueden publicar comentarios.