HTMLpointHTMLpoint HTMLpoint.com


 Adaptar a la resolución/b>



La elección de una resolución vídeo en la que desarrollar el contenido de un sitio web generalmente se deja en manos de los operadores. Es cierto que crear páginas optimizadas para la resolución que está más de moda (en este momento la 800x600) es una elección condivisible, mientras que las antiguas 640x480 y las más elevadas 1024x768 deben dejarse de lado por ahora. No decimos nada nuevo si consideramos que el non plus ultra es una resolución vídeo adaptable a las distintas impostaciones de cada monitor. Pero un resultado de este tipo no se obtiene fácilmente con imágenes, tablas y menús de grandes dimensiones, que en última instancia podrían afectar al diseño de página.

Existen algunos recursos que tomando pie de las tablas HTML llegan a resolver, al menos en parte, el antedicho problema.

Para simplificar la comprensión del problema y de su correspondiente solución, supongamos que tenemos una página HTML abierta por un encabezamiento que consta de una serie de imágenes cuyo ancho total asciende a unos 750 píxel. Esto quiere decir que un usuario que accede a la página con una resolución vídeo de 800x600 visualizará perfectamente su contenido, mientras que quien accede a 640x480 obtendrá un resultado pésimo.
A fin de comprender mejor lo que queremos decir, hemos preparado una página de prueba a la que puedes llegar haciendo clic en el enlace siguiente:

página de prueba de una página no adaptable a las impostaciones vídeo

El código usado para crear el encabezamiento superior de la página es un simple:

<img src="b01.gif" width=80 height=82 border=0><img src="b02.gif" width=294 height=82 border=0><img src="b03.gif" width=384 height=82 border=0>

lo que significa que cambiando la resolución vídeo y llevándola a 640x480 el resultado que se obtiene es desastroso: las imágenes del menú se insertan automáticamente debajo del logo y de las líneas alterando radicalmente el diseño de la página.
Si quieres comprobar los efectos en esta página, sin modificar las impostaciones vídeo, prueba a redimensionar la ventana arrastrándola con el ratón.

Para salvar este inconveniente, basta utilizar unos instrumentos estándar de HTML: las tablas.
Partiendo de los mismos elementos gráficos vistos anteriormente, impostamos un nuevo código:

<table border=0 width=100% cellpadding=0 cellspacing=0>
<td width=80>
<img src="b01.gif" width=80 height=82 border=0>
</td>

<td background="b02.gif" width="100%">
&nbsp;
</td>

<td width=384>
<img src="b03.gif" width=384 height=82 border=0>
</td>
</table>


  • La tabla queda impostada con una anchura (width) equivalente al 100% del espacio disponible en la página. Esto significa que la dimensión general de la tabla se adapta a las resoluciones vídeo individuales.

  • Por lo que se refiere a la primera y tercera imagen (el logo y el menú respectivamente), hemos previsto un valor TD idéntico a la anchura de las mismas. En otras palabras el tamaño de los dos TD es fijo y no variable en dimensión idéntica a la de las imágenes.

  • Para el segundo TD (las líneas horizontales negras) hemos previsto que la imagen se coloque como fondo (background="b02.gif") y no dentro del TD como las anteriores. Una vez más hemos impostado la anchura del TD en un 100%. Para las propiedades de las tablas esto se traduce en la adaptación del TD al espacio dejado por las imágenes fijas (logo y menú). En otras palabras, el primer y tercer TD permanecen siempre fijos e invariables en lo que a dimensiones se refiere, mientras que el segundo TD se adapta a las diversas resoluciones vídeo.

    página de prueba de una página adaptable a las impostaciones vídeo

    Y para acabar sólo nos queda decir que el ejemplo funciona perfectamente tanto con MsIe como con Netscape.


  •   Torna a inizio pagina