Curso completo de HTML
Anterior	Frames, las ventanas llegan al WWW	Siguiente

4. Creación del documento de definición de frames

La estructura del documento de definición de frames es parecida a la estructura de las páginas creadas hasta ahora. La principal diferencia será que este documento no tendrá contenido y por tanto no debe usarse la etiqueta BODY. A cambio ha de usarse una nueva etiqueta: FRAMESET. Esta será la etiqueta clave en la creación de los frames. La estructura básica del documento de definición será por tanto la que observamos en la figura 8.8:

Figura 8.8. La estructura de las páginas con frames es diferente a las que no tienen. La principal diferencia es la sustitución de BODY por FRAMESET.

En ella se observa claramente como la etiqueta FRAMESET sustituye a BODY. Se podría decir que estas dos etiquetas son exclusivas, cuando esté una no puede estar la otra.

El siguiente paso en la creación de nuestra página con frames será decidir cuantos queremos crear como serán. Aunque posteriormente veremos cómo se pueden crear divisiones tan complejas como queramos, por ahora crearemos páginas en las que la ventana del navegador está dividida en filas o en columnas.

4.1. División en columnas

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


		  <FRAMESET COLS="ancho_col1, ancho_col2, ...">

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:


	<HTML>

	<HEAD>
	</HEAD>

	<FRAMESET COLS="20%,80%">
	</FRAMESET>

	</HTML>

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:


		  <FRAMESET COLS="10%,50%,15%,20%,5%">

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 640x480.

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 problema Netscape 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:


	<FRAMESET COLS="100,300,*">

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 640x480 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 800x600 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 1024x800 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:

<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%">.

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

<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*".

<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 800x600:

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 (*).

4.2. División en filas

Hasta ahora hemos aprendido a dividir la ventana en columnas, pero como es de esperar también se puede dividir en filas. En esta ocasión será necesario usar el atributo ROWS (rows significa precisamente filas en inglés). El funcionamiento del atributo ROWS es muy similar al de COLS:


		  <FRAMESET ROWS="alto_fila1, alto_fila2, ...">

Es importante hacer notar que cuando dividimos la ventana en filas y usamos tamaños relativos, estos se refieren al alto de la ventana, y no tienen en cuenta lo larga que puedan ser las páginas o si hay que usar las barras de desplazamiento o no para moverse por ella.

En este caso es más importante, si cabe, tener en cuenta que ni podemos saber el alto de la ventana del navegador de aquellos que visiten nuestras páginas. Por esta razón el uso de tamaños relativos o del asterisco (*) es aún más usual. Veamos algunos ejemplos:

<FRAMESET ROWS="200,*,100">: Divide la ventana en tres filas: una superior de 200 pixeles en la que se podría poner un encabezado; una inferior de 100 pixeles en la que puede ponerse una coletilla o una barra de navegación; y una central que ocupa el espacio sobrante y donde se podría situar el contenido principal.
<FRAMESET ROWS="15%,*,3*">: Se divide la ventana en una primera fila que ocupa el 15% de la altura; la siguiente fila ocupará un cuarto del resto y la tercera tres cuartos.

No son necesarios más ejemplos para comprender el funcionamiento, así que vamos ya a definir el contenido de cada una de las divisiones que hemos aprendido a crear. Cuando insertemos este contenido, la división se convertirá en lo que realmente se llama frame. Mientras tanto ésta estará sujeta a más divisiones como veremos un poco más adelante.

4.3. Combinando COLS y ROWS

Los atributos COLS y ROWS pueden ser usados simultáneamente en una misma etiqueta FRAMESET. Si hacemos esto dividiremos la ventana del navegador en cuadrículas de diferentes tamaños. Podríamos interpretar el resultado de usar ambos atributos simultáneamente como que cada una de las filas definidas por ROWS es subdividida en el número de columnas que indica COLS. La página que mostramos en la figura 8.1 es una muestra del uso de COLS y ROWS simultáneamente. En ese caso el código usado fue:


		  <FRAMESET COLS="*,*" ROWS="*,*">
	
	...
	</FRAMESET>

También se pueden crear combinaciones más complejas como por ejemplo:


		  <FRAMESET COLS="100,50,*,*"
	  ROWS="15%,*,3*">
	
	... Más código ...
	</FRAMESET>

Que da lugar a la página de la figura 8.12:

Figura 8.12. Es posible usar los atributos COLS y ROWS simultáneamente para dividir la ventana en varias filas y columnas.

4.4. La etiqueta FRAME

La etiqueta usada para insertar el contenido en las filas, columnas o divisiones en general, hechas con la etiqueta FRAMESET, es FRAME. Esta etiqueta debe ser usada una vez por cada una de las divisiones que hallamos creado. Cada una de estas veces debemos usar un atributo, SRC, que servirá para indicar el documento HTML donde se encuentre el contenido que queremos insertar en esa división:


	<FRAME SRC="docum.htm">

Esta etiqueta consta de una única instrucción, es decir la instrucción de fin </FRAME> no existe, y debe ser insertada entre la instrucción de inicio y la instrucción de fin de la etiqueta FRAMESET.

Otro de los atributos más importantes de la etiqueta FRAME es NAME. Con este atributo le daremos un nombre al frame para poder referirnos posteriormente a él con el atributo TARGET o con los lenguajes de script. La forma de usar este atributo es:


		  <FRAME SRC="docum.htm"
	  NAME="primer_frame">

Si posteriormente queremos crear un enlace a este frame desde otro de la misma página no tendremos más que escribir:


		  <A HREF="otro.htm"
	  TARGET="primer_frame">

Con los conocimientos adquiridos hasta ahora en este capítulo, junto con lo que ya sabemos, estamos en disposición de crear nuestra primera página completa con frames.

Anterior	Inicio	Siguiente
Creación de páginas con frames	Subir	Página completa con frames