> Manuales > Frontpage para principiantes

Como ajustar nuestro sitio a las distintas resoluciones o tamaños de monitor.

Un problema fundamental del diseño web es la proyección de nuestras páginas, es decir, cómo pensamos que serán vistas por el usuario. ¿Qué tamaño tiene su pantalla? ¿Es igual que la nuestra, más grande?

Inevitablemente ocurrirá una de las dos cosas, e incluso ambas. Aunque es cierto que los monitores de 800x600 son muy comunes, también lo son los de 17". Por ello, si pensamos en el primero, dejaremos vacío gran parte del espacio del usuario de 17"; y si pensamos en éste, obligaremos al navegante de 15" a utilizar las barras de desplazamiento horizontal para moverse por una página, y eso es muy incómodo.

Referencias: Tenemos algunos artículos que tratan el tema de las resoluciones de pantalla en páginas web con más detenimiento y de manera general a todos los programas:

- Definiciones de pantalla. Cómo tratarlas.
- Páginas fluidas (las que se ajustan al tamaño de la ventana del explorador) Cuando son apropiadas.

La solución predilecta del diseñador suele consistir en crear tablas con un ancho y alto de tamaño definido porcentualmente, es decir, adaptable a cada monitor; el 100% es una buena opción. El procedimiento es simple: Tablas > Insertar: a continuación aparece una ventana, donde introducimos a voluntad ciertos datos, como grosor del borde, número de filas (horizontales) y columnas (verticales), color o imagen de fondo (la imagen de fondo en las tablas ya es reconocida en Netscape 7). En esta primera ventana podemos definir el ancho: 100%, esto es, adaptable al monitor. Una vez que aceptemos, ya disponemos de nuestra tabla en la pantalla.

Ahora, haciendo clic con el botón derecho del ratón sobre la misma tabla, seleccionamos Propiedades de tabla en el menú contextual. Ahora sí, definimos también el alto en 100%. Conviene advertir, en todo caso, que este código es interpretado por Internet Explorer, pero no por Netscape en ninguna de sus versiones. Para hacerlo accesible a todos, podemos cambiar a la vista html y sustituir la tabla (definida por las etiquetas <table> </table>) por este código:

<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%" style="text-align: left;">
<tbody>
<tr>
<td valign="top">
</td>
</tr>
</tbody>
</table>

Este codigo ha sido generado por Netscape Composer y será asimilado por FrontPage, con posibilidad de editarse normalmente sin que se pierda su compatibilidad (conviene que, en FrontPage, sigamos estas instrucciones: abrimos Herramientas> Opciones de página> pestaña Código fuente html y seleccionamos "mantener el código fuente html", de manera que FrontPage no rescriba el código generado por otras aplicaciones). Ahora, todo lo que compongamos dentro de la tabla se adaptará a los diversos monitores, siempre quedando dentro de la pantalla.

Si tan sólo queremos definir el ancho de la tabla, nos limitamos a seguir las primeras instrucciones. En todo caso, ningún usuario se verá obligado a mover el scroll horizontal cuando navegue nuestros sitios. (A excepción de aquellas ocasiones en que incluyamos objetos muy grandes sin posibilidad de reestructuración automática, como por ejemplo las imágenes; si bien sería posible definir su tamaño como porcentaje de la ventana, esta opción tan solo es útil en gráficos sin degradados, ya que las fotografías quedarían deformadas y pixelizadas).

Gck

Escritor y periodista, entusiasta de la tecnología en general y del desarrollo y...

Manual