-FRAMES-


¿Tienes una pagina Web? o ¿la quieres hacer?, pos muy bien, ah! pero... ¿que no sabes hacer FRAMES?... eso no es problema, ahora mismo te cuento como se hacen...

Manos a la obra!!!

Para empezar a utilizar frames es necesario definir un archivo HTML en el que se definan, valga la redundacia, aquellos ficheros HTML que deberán de aparecer en los frames que nosotros creemos. Este fichero suele recibir el nombre del tipo index.htm y lo único que contendrá, como ya he citado, es la información relativa a los frames que vamos a utilizar y cuales van a ser los archivos HTML que carguemos en dichos frames.
Para llevar todo esto a la práctica vamos a necesitar de muy pocas directivas como vamos a ver a continuación.

Con la directiva <FRAMESET> tendremos la oportunidad de dividir la pantalla de nuestro navegador favorito en las zonas que estimemos nos sean necesarias. Lógicamente podremos realizar divisiones tanto verticales como horizontales.
Junto a la directiva <FRAMESET> deberemos de utilizar un par de parámetros más que son ROWS y COLS.

Con el parámetro ROWS podremos dividir la pantalla en zonas horizontales. A su vez, también podremos determinar el tamaño de cada una de ellas medido siempre en tanto porcien (también podremos utilizar valores decimales de tanto por cien para ello bastará con poner la coma ',' separando ambas partes, por ejemplo 22,35%) haciendo incluso más fácil y cómoda su utilización. Un ejemplo de cómo poder dividir la pantalla del navegador a la mitad sería la siguiente:

<FRAMESET ROWS="50%,50%">
.......
</FRAMESET>

Como podéis comprobar es muy fácil realizar una división de pantalla. Además, también tenemos la oportunidad de dejar al navegador que calcule por si mismo las dimensiones de las zonas (en cuanto a porcentaje a cubrir) de las parcelas que creemos. Para ello sólo tendremos que poner un asterísco y el resto se realizará automáticamente. Ahí va un ejemplo y, después, su explicación para ver todo más claro.

<FRAMESET ROWS="20%,40%,*">
.......
</FRAMESET>

Esa sencilla instrucción <FRAMESET> se va a encargar de dividir la pantalla en tres zonas horizontales diferentes. Una de ellas, la primera, ocupará un 20% del total de pantalla, la otra un 40% y, por último, la tercera zona ¿qué ocupará?. Muy sencillo, ocupará simplemente el resto que será de 40%.
En el caso de que queramos dividir la pantalla de forma vertical deberemos de utilizar el parámetro COLS que funciona exactamente igual que lo visto para la ROWS, es decir, el ejemplo siguiente divide la pantalla en dos zonas verticales.

<FRAMESET COLS="50%,50%">
.......
</FRAMESET>

Cómo indicarle al navegador la división

Una vez que hemos aprendido cómo dividir nuestra página para mostrar la información en diferentes zonas, deberemos de saber cómo indicarle al navegador que queremos utilizar la división que tenemos en mente.
Para ello utilizaremos un archivo .HTM que contendrá todas las divisiones que deseamos realizar en nuestra página así como los archivos HTML que se cargarán nada más que sean inicializadas. En dicho archivo meteremos, por tanto, las órdenes relacionadas con la división de la pantalla (descrita anteriormente) junto a las relacionadas con la carga de los archivos .HTM que se llevarán a cabo con la directiva <FRAME> y los parámetros SRC, NAME, SCROLLING y NORESIZE. Todas ellos son opcionales salvo SRC que deberá de estar presente obligatoriamente. Pero vayamos por partes:

Una vez analizadas todas las opciones para poder dividir a nuestras anchas la pantalla os pongo lo que podría ser el archivo destinado a cargarlas el cual, os vuelvo a repetir, deberá de ser el que se llame al entrar a vuestra página. En nuestro caso os diré que el primer archivo que es llamado es uno con el nombre de index.htm que contiene las definiciones necesarias para realizar la división en pantalla de nuestra página.

Os pongo a continuación nuestro archivo index.htm que utiliza todo lo visto hasta ahora.

<HTML>

<HEAD>
<TITLE> Binary Zone e-zine</TITLE>
</HEAD>

<FRAMESET COLS="23%,*">
<FRAME SRC="index0.htm" NAME = "MENU" SCROLLING ="auto" NORESIZE>
<FRAME SRC="hola.htm" NAME = "TEXTO" SCROLLING ="auto" NORESIZE>
</FRAMESET>

<BODY>
</BODY>

</HTML>

Como podéis comprobar no tiene ningún misterio...

La etiqueta <BASE>

Ya para finalizar, vamos a ver cómo poder hacer que desde un frame o plano podamos cargar la información en otro diferente.

Antes de continuar, debemos de tener bien claro que hasta ahora, al realizar el enlace desde una página o frame concreto a un archivo HTML (independientemente de su localización, esto es, de si es de nuestra propia página o de otra distinta), se realizaba "machacando" la información de la parcela o frame en el que estábamos, o lo que es lo mismos, desde el que realizábamos tal petición de carga.
Pues bien, ahora vamos a aprender cómo podemos beneficiarnos de los frames para poder realizar cargas de información en los distintos frames de que dispongamos, es decir, veremos cómo poder construirnos una página que tenga un menú a la izquierda y muestre la información a la derecha.

Si volvéis a repasar los atributos que se pueden poner a un frame que creemos, encontraréis que, de entre ellos, había uno destinado a poner el nombre del mismo. Recordémoslo:

<FRAME SRC="index0.htm" NAME = "MENU" SCROLLING ="auto" NORESIZE>
 

Si os fijáis, en la directiva FRAME, el atributo NAME = "MENU" lo que hacía era dar un nombre al frame que vamos a definir, pues bien, si nosotros al comienzo de dicho frame, el cual cargará en el ejemplo el archivo index0.htm, ponemos <BASE TARGET="MENU">, haremos que la información siempre se cargue en la parcela o frame al que habíamos llamado MENU y que, en este caso, va a ser el mismísimo lugar en dónde se ha cargado el archivo "index0.htm", es decir, no hemos conseguido nada nuevo... Sin embargo, ¿qué pasaría si en lugar de poner el nombre que habíamos dado al frame en el que se carga el archivo index0.htm ponemos el de otro frame?. Pues muy sencillo, que habremos conseguido volcar el "link" o archivo .htm justo en el lugar que a nosotros más nos interesa en estos momentos, en otro frame distinto al actual.

Un ejemplo

Con esto, ya habremos logrado "configurar" una ventana con las mismas "facilidades" que puede ofrecer tanto Binary Zone como cualquier otra página de las que circulan por Internet. Los frames son un estupendo aliado a la hora de separar y ofrecer la información de la forma más ordenada posible, si bien, todo en abuso es malo. Os lo digo ahora, ojo con el uso que dáis a los frames pues pueden mandar "al carajo" vuestra página. Recordad, no es bueno utilizar ni muchos frames ni muchos gif animados, estáis avisados.

Bien, como creo que ya toca ofrecer un ejemplo más claro de todo lo explicado os mostraré un ejemplo con la cabecerá de la definición de frame y, después, el código de los dos archivos que utiliza. Pensad que en el caso de Binary Zone, se utiliza un archivo .htm que crea los frames y, en cada uno de ellos, carga su archivo .htm correspondiente. En fín, que ahi va un frame parecido al que utiliza Binary Zone, un archivo para menú y otro para la información.

Código del fichero index.htm

<HTML>

<HEAD>
<TITLE>Creador de frames. index.htm </TITLE>
</HEAD>

<FRAMESET COLS="25%,75%">
<FRAME SRC="index0.htm" NAME = "MENU" SCROLLING ="auto" NORESIZE>
<FRAME SRC="hola.htm" NAME = "TEXTO" SCROLLING ="auto" NORESIZE>
</FRAMESET>

<BODY>
</BODY>

</HTML>

Código del fichero index0.htm
<HTML>

<HEAD>
<TITLE>Frame lado izquierdo. index0.htm</TITLE>
</HEAD>

<BODY><h2>Texto de la frame izquierda </h2>
</BODY>

</HTML>

Código del fichero index1.htm
<HTML>

<HEAD>
<TITLE>Frame lado derecho. index1.htm</TITLE>
</HEAD>

<BODY><h2>Texto de la frame derecha </h2>
</BODY>

</HTML>

Al interpretarse el archivo index.htm se crearán dos frames en pantalla, uno a la izquierda y otro a la derecha. El del lado izquierdo ocupará sólo un 25% del total de la pantalla mientras que el del lado derecho estará "apoderado" de un 75% utilizable.

Esto es todo lo que tienes que hacer para crearte un frame, nada dificil ¿verdad?... os dejo ya porque teneis que empezar ha crearos vuestra web.
 

RUBEN ALCARAZ