División en columnas

Para crear una página Web formada por varios frames que dividen la ventana del navegador en columnas usamos el atributoCOLS de la etiqueta FRAMESET. Este atributo toma como valores separados por comas la anchura de los diferentes frames:

Existen diversas formas de indicar el ancho de las columnas, una de ellas es usando porcentajes. Con este método podríamos dividir la ventana en dos columnas usando el siguiente código:

En la que estamos diciendo que la primera columna (la de la izquierda) ocupará el 20% del ancho de la ventana del navegador y la segunda ocupará el 80% (ver figura 8.9).

Figura 8.9. Como vemos la ventana del navegador ha quedado dividida en dos columnas con un ancho del 20% y del 80% del ancho total de la ventana.

Si el lector decide probar el ejemplo anterior probablemente no obtenga el resultado deseado en su navegador. Esto es así porque por ahora sólo hemos dicho que queremos que la ventana del navegador se divida en dos columnas pero para indicar que serán frames (lo cual es necesario para obtener el resultado de la figura 8.9) será necesario añadir algo más de código que veremos un poco más adelante.

Si quisiéramos dividir la ventana en 5 columnas simplemente deberíamos especificar cinco valores separados por comas, por ejemplo:

Por supuesto la suma de todos los porcentajes debe ser igual a 100.

El lenguaje HTML no fija ningún límite en el número de filas, columnas o frames en general en que puede dividirse una página. Sin embargo no es recomendable crear más de 4 frames en total, porque si no el espacio dedicado a cada uno de ellos será muy pequeño. Debemos recordar que muchos de los navegantes verán nuestras páginas con un monitor de 14 pulgadas y una resolución de 640×480.

El método de especificar los tamaños de las columnas en porcentajes es sencillo de entender, sin embargo no siempre es útil. Por ello existen otros métodos que es importante comentar.

Uno de ellos consiste en especificar el ancho de las columnas en su tamaño absoluto en pixeles directamente. Sin embargo existe un problema: existen varias resoluciones de pantalla distintas y sería muy extraño que todos los navegantes que visiten nuestras páginas tengan una misma anchura de pantalla. Por esta razón no podemos saber cuál será el ancho total de la ventana del navegador y esto sería imprescindible para poder indicar el ancho de las columnas en pixeles. Para solucionar este problemaNetscape invento el asterisco (*). Cuando se pone un asterisco como ancho de una columna estamos indicando al navegador que use todo el espacio sobrante para ese frame. Por ejemplo si escribimos:

se crearán tres columnas, la primera de 100 pixeles, la segunda de 300 y la tercera ocupará todo el espacio que reste y que dependerá del tamaño de la ventana del navegador con el que se visualicen las páginas. Si el navegante usa una configuración de 640×480 es de esperar que la ventana de su navegador tenga un ancho entre 600 y 640 pixeles y la tercera columna tendría una anchura de 200-240 pixeles. Si tiene una configuración de 800×600 el ancho será 760-800 pixeles y por tanto la tercera columna ocuparía en este caso 360-400 pixeles de ancho. Esta es la resolución que hemos usado para obtener la figura 8.8.

Figura 8.10. Las dos primeras columnas ocupan un ancho absoluto de 100 y 300 pixeles. La tercera al haber usado el asterisco ocupará el resto, que en este ejemplo son 372 pixeles.

Estas son las dos configuraciones más extendidas y las que por tanto debemos tener en cuenta. Si queremos cuidar mucho estos detalles debemos tener en cuenta las configuraciones de 1024×800 o mayores y el hecho de que los usuarios pueden cambiar el tamaño de la ventana del navegador a su antojo. Sin embargo, por lo general, no es en absoluto necesario llegar hasta esos extremos de cuidado.

El siguiente método para especificar el ancho de las columnas consiste en combinar todos los anteriores. La mejor forma de repasarlos es estudiando unos cuantos ejemplos. Para ellos vamos a suponer un navegador de 800 pixeles de ancho:

1. <FRAMESET COLS=»*,*»> : Al usar dos veces el asterisco se divide el resto entre las dos columnas a partes iguales. Es decir, cada una ocupará la mitad de la ventana del navegador (unos 400 pixeles cada una). Este ejemplo es idéntico a usar < FRAMESET COLS=»50%,50%»>.
2. <FRAMESET COLS=»100,*,*»> : Divide la ventana en tres columnas. La primera de 100 pixeles y entre las otras dos divide a partes iguales el espacio sobrante (700 pixeles) con lo que (suponiendo el ancho total de 800 pixeles) cada una tendrá un ancho de 350 pixeles.
   

   Algunos de estos ejemplos requieren algún tiempo de práctica. En caso de tener alguna dificultad entendiendo alguno de ellos es mejor seguir practicando con frames usando los métodos algo menos complejos. Una vez hayamos adquirido más práctica trabajando con frames podremos volver sobre estos ejemplos y para practicar con ellos.

3. <FRAMESET COLS=»200,2*,*»>: La primera columna ocupará un tamaño absoluto de 200 pixeles. El resto (600 pixeles) es divido entre las dos siguientes columnas, pero ahora no será a partes iguales, sino que la columna central debe ser el doble que la columna izquierda (este detalle se indica anteponiendo un 2 al asterisco). Por tanto del espacio sobrante, dos tercios (que equivalen a 400 pixeles en este caso), serán para la columna central y un tercio (200 pixeles) será para la tercera.Si hubiésemos querido que una columna fuese el triple de la otra deberíamos haber usado el código COLS=»200,3*, *». Y si quisiéramos una relación 4:5 no tendríamos más que escribir COLS=»200,4*,5*».
4. <FRAMESET COLS=»100,50%,*»>: La primera columna ocupa 100 pixeles, la segunda la mitad del ancho de la pantalla (400 pixeles) y la tercera el resto, que en este caso será 300 pixeles. En la figura 8.11 podemos ver un ejemplo en el que se realiza esta división de columnas en un ordenador con configuración 800×600:

Figura 8.11. En esta ocasión vemos un ejemplo del uso de FRAMESET combinando los distintos modos de indicar el tamaño y el ancho resultante de cada uno para una ventana con 800 pixeles de ancho.

Los tamaños absolutos deben usarse sólo en ocasiones que realmente lo requieran y siempre que los utilicemos debe haber al menos una de las otras columnas con un tamaño definido usando un asterisco (*).

Fuente: Copyright Jorge Ferrer, Rodrigo Garcia y Victor García, licencia Documentación Libre GNU, Versión 1.1