9.FRAMES

Frames (en inglés, marcos o cuadros) es un procedimiento del lenguaje HTML para dividir la pantalla en diferentes zo- nas, o ventanas, que pueden actuar independientemente unas de otras, como si se tratara de páginas diferentes, pues incluso cada una de ellas puede tener sus propias barras deslizadoras. Los navegadores que lo implementan son el Netscape 2.0, y el Explorer 2.0 en adelante.

Una de sus características más importantes es que pulsando un enlace situado en un frame, se puede cargar en otro frame una página determinada. Esto se utiliza frecuentemente para tener un frame estrecho en la parte lateral (o superior) con un índice del contenido en forma de diferentes enlaces, que, al ser pulsados cargan en la ventana principal las distintas pá- ginas. De esta manera se facilita la navegación entre las páginas, pues aunque se vaya pasando de unas a otras, siempre estará a la vista el índice del conjunto.

Para comprender los distintos conceptos vamos a desarrollar un ejemplo, creando una página con dos Frames. El de la iz- quierda va a servir de índice de lo que veamos en el de la derecha, y en éste veremos inicialmente una página de presenta- ción.

Documento de definición de los frames

Lo primero que tenemos que hacer es crear un documento HTML en el que definiremos cuántas zonas va a haber, qué distribución y tamaño van a tener, y cuál va ser el contenido de cada una de ellas.

En el ejemplo que vamos a desarrollar, la página va a tener dos frames distribuidos en columnas (es decir, uno al lado del otro, en vez de uno encima del otro, lo que sería una distribución en filas).

Con respecto al tamaño, haremos que el primero (el del izquierda) ocupe el 20% del ancho de la pantalla, y el otro, el 80% restante.

Y con respecto al contenido, el frame de la izquierda va a contener un documento HTML que va a servir de índice de lo que veamos en el otro (y que vamos a llamar mi_indice.html), y el de la derecha otro documento HTML que va a servir de página de presentación (al que llamaremos mi_presentacion.html).

Todo lo anterior se refleja en el siguiente documento HTML:

<HTML>

<HEAD>

<TITLE>Mi primera pagina con frames</TITLE>

</HEAD>

</FRAMESET>

</HTML>

Obsérvese lo siguiente:

Es un documento parecido a los que conocíamos hasta ahora. La diferencia está en que en vez de utilizar la etiqueta BODY, que sirve normalmente para delimitar lo que se va a ver en la pantalla, se hace uso de la etiqueta FRAMESET (definir los frames).

En este caso, con la etiqueta <FRAMESET COLS="20%,80%"> se define que va a haber dos frames y que van a ir en columnas. Si hubiéramos querido que fueran en filas, habríamos puesto ROWS (filas, en inglés). También se define el es- pacio en anchura que va a ocupar cada uno de ellos en la pantalla. Se ha puesto como porcentajes del total, pero se podría también haber puesto una cifra absoluta, que representaría el número de pixels a ocupar.

Ya se ha definido el número de frames, su distribución y su tamaño, pero falta por definir el contenido de cada frame. Esto se hace con las etiquetas:

Con esto se define que el contenido del primer frame (izquierda) sea el documento HTML que hemos llamado

mi_indice.html y el del segundo (derecha) sea el documento HTML mipresentacion.html.

Obsérvese que en la etiqueta del segundo se ha incluido el atributo NAME="principal", pero no así en el primero. El motivo es que se necesita dar un nombre al segundo frame, pues, como veremos a continuación, en el documento del pri- mer frame va a haber unos enlaces que van a ir dirigidos hacia él. En este caso sólo tenemos dos frames, pero podría haber más, y es necesario distinguirlos unos de otros. Y el primero no necesita nombre, pues no va a haber enlaces en el segundo dirigidos hacia él.

A este documento le vamos a llamar mi_pagina.html, pero todavía no lo vamos a guardar, pues falta por añadir algo que veremos más adelante.

Documentos HTML de cada frame

Necesitamos ahora confeccionar el documento HTML de cada uno de los frames. Recuérdese que son como páginas in- dependientes, que pueden tener cada una su propio fondo, etc., y todo lo que queramos añadir en ellos.

Documento del frame de la izquierda

Va a tener un fondo amarillo, y va a contener dos enlaces dirigidos al frame de la derecha.

<HTML>

<HEAD>

<TITLE> Indice </TITLE>

</HEAD>

<A HREF="mi_presentacion.html" TARGET="principal">Presentación</A>

<A HREF="otra_pagina.html" TARGET="principal">Esta es otra página</A>

</BODY>

</HTML>

Dentro de las etiquetas de los enlaces podemos observar algo nuevo, y es el atributo TARGET (en inglés: objetivo, blanco), que sirve para hacer que al ser activado el enlace no se cargue en el propio frame, sino en otro, precisamente en el que ha- yamos llamado con ese nombre en el documento de definición de los frames.

En nuestro caso, le hemos dado el nombre de "principal" al frame de la derecha, y es por tanto ahí donde se van a car- gar los documentos HTML.

Guardamos este documento con el nombre de mi_indice.html

Documento del frame de la derecha

Va a tener un fondo negro, y va a contener sólamente un texto.

<HTML>

<HEAD>

<TITLE> Presentación </TITLE>

</HEAD>

Esta es la versión

con frames

de mi página

</CENTER>

</BODY>

</HTML>

Guardamos este documento con el nombre de mi_presentacion.html

Con lo visto anteriormente, ya tenemos las tres piezas que necesitamos: Documento de definición de los frames

Documento del contenido del primer frame

Documento del contenido del segundo frame

Alternativa para los navegadores que no soportan frames

Hay que prever el caso en que los navegadores no soportan o desconocen las etiquetas FRAMESET y FRAME.

Para estos casos está prevista la etiqueta <NOFRAMES> y </NOFRAMES>. Se añaden al final del documento de defini- ción de los frames, y se pone entre ambas lo que veran los que acceden con un navegador que no soporta frames. Puede in- cluso ser el código HTML de una página completa.

En nuestro caso, pudiéramos poner un mensaje advirtiendo de esta circunstancia, y dirigiendo al usuario, con un enlace normal, hacia una página que hayamos definido como principal o de presentacion para estos casos. (También podríamos no decir nada sobre frames, y colocar aquí el código de la página de presentación)

<HTML>

<HEAD>

<TITLE>Mi pagina con frames</TITLE>

</HEAD>

</FRAMESET>

Estas utilizando un navegador que no soporta frames.

Pulsa para visitar mi <A HREF="presentacion.html"> página</A>.

</NOFRAMES>

</HTML>

Ahora sí podemos guardar este documento con el nombre de mi_pagina.html.

Atributos de la etiqueta <FRAMESET>

La etiqueta FRAMESET, como hemos visto en el ejemplo, es la que define la distribución, el número y tamaño de los fra- mes. Tiene dos atributos: COLS (columnas) y ROWS (filas):

Define la distribución de los frames en columnas o en filas, según se use uno u otro atributo. Por ejemplo:

<FRAMESET COLS="XX,YY"> (habrá dos frames en columnas)

<FRAMESET COLS="XX,YY,ZZ"> (habrá tres frames en columnas)

Define el tamaño de los frames, según el valor que demos a XX, YY, ZZ.... Este valor se puede expresar en un porcentaje del ancho del pantalla (para las columnas), o del alto de la pantalla (para las filas). Así, por ejemplo:

(la columna de la izquierda ocupará el 20% del ancho de la pantalla, y la de la derecha el 80% restante)

(la fila superior ocupará el 10% del alto de la pantalla, la del medio el 70%, y la inferior el 20%)

Un número absoluto que representa el número de pixels que ocupará cada frame a lo ancho o a lo alto (según sean filas o columnas). Así, por ejemplo:

(la columna de la izquierda tendrá 40 pixels de ancho y la de la derecha 600).

Pero es peligroso utilizar sólo valores absolutos, pues el tamaño de la pantalla varía de un usuario a otro. Si se va a usar al- gún valor absoluto para un frame, es mejor mezclarlo con alguno relativo, como los que vamos a ver acontinuación, para que se ajuste el total a la pantalla del usuario

Si se pone un valor relativo poniendo un asterisco (*), en vez de un número, se interpreta como que ese frame debe tener el espacio restante. Por ejemplo:

(Habrá tres filas, la superior y la inferior de una altura de 100 pixels, y la del medio el espacio restante).

Si hay más de un frame con *, ese espacio restante se dividirá por igual entre ellos. Si hay un número antes del *, ese frame obtiene esa cantidad más de espacio relativo. Así "2*,*" daría 2/3 para el primer frame y 1/3 para el otro.

Frames sin bordes

Si se desea que no haya un borde de separación entre los frames, se deben incluir el atributo FRAMEBORDER="0" den- tro de la etiqueta FRAMESET. No todas las versiones de los navegadores lo implementan.

Para que también desaparezcan los huecos de separación entre frames hay que añadir otros dos atributos (el primero es para el Explorer y el segundo para el Netscape): FRAMESPACING="0" y BORDER="0", con lo que la etiqueta com- pleta quedaría:

Atributos de la etiqueta <FRAME>

Esta etiqueta define las cararacterísticas de un frame concreto, no del conjunto de los frames, como era el caso con la eti- queta <FRAMESET>. Puede tener los siguientes posibles atributos, que van dentro de la etiqueta <FRAME>:

SRC="dirección"

• Esta dirección puede ser la de un documento HTML (tal como hemos utilizado en el ejemplo), o cualquier otro recur- so Web (o URL). Con este atributo se indica lo que se cargará inicialmente en el frame. Si no se le pone este atributo a la etiqueta <FRAME>, entonces dicho frame aparecerá inicialmente vacío, aunque tendrá las dimensiones asignadas.

NAME="nombre_de_la_ventana"

• Este atributo se usa para asignar un nombre a un frame. De esta manera se podrá "dar en el blanco" (en inglés, target) en esta página, desde un enlace situado en otra página. Es decir, que pulsando en otra página un enlace, se cargará precisa- mente en ésta, tal como hemos visto en el ejemplo. El atributo NAME es opcional. Por defecto, todas las ventanas carecen de nombre. Los nombres que se escojan deben comenzar por un carácter alfanumérico.

MARGINWIDTH="número"

• Se utiliza este atributo cuando se quiere controlar el ancho de los márgenes dentro de un frame. El número que se pon- ga representa los pixels de los márgenes. Este atributo es opcional.

MARGINHEIGHT="número"

• Igual que el anterior, pero referido a los márgenes en altura.

SCROLLING="yes|no|auto"

• Este atributo se utiliza para decidir si el frame tendrá o no una barra deslizadora. Si se escoje "yes" tendrá siempre una barra deslizadora. Si se escoje "no" no la tendrá nunca, y si se escoje "auto", será el navegador quien decida si la tendrá o no. Este atributo es opcional. Su valor por defecto es "auto".

NORESIZE

• A este atributo no se le asigna un valor numérico, como a los demás. Es un indicador para que la ventana no se pueda re- dimensionar (en inglés, resize) por parte del usuario. Es un atributo opcional. Por defecto, todos los frames son redimen- sionables.

FRAMEBORDER="no"

• Este atributo elimina el borde en un frame, pero si se quiere que se elimine completamente, también hay que ponérselo al frame contiguo. Si se quiere eliminar los bordes de todos los frames, se debe colocar en la etiqueta FRAMESET, como hemos visto anteriormente.

El atributo TARGET

En el ejemplo hemos visto que, como queríamos que los enlaces situados en el frame de la izquierda surtieran efecto no en él mismo, sino en otro frame (el situado a la derecha), teníamos que poner dentro de cada enlace el siguiente atributo TARGET="principal", siendo "principal" el nombre que habíamos dado al segundo frame, en el documento de definición de frames. Es decir, hemos utilizado el atributo de esta manera:

TARGET="nombre_dado_a_otro_frame"

Estos nombres, que los escogemos nosotros, pueden ser cualquiera, pero con la condición que el primer caracter sea alfa- numérico (letra o número).

Pero hay unos nombres reservados (es decir, que no se pueden usar para denominar a un frame), que hacen que este atribu- to efectúe unas funciones especiales. Para que cumplan su cometido, es imprescindible escribir estas palabras reservadas (blank, self y top) en minúsculas.

TARGET="_blank". Hace que se abra una nueva copia del navegador, y el enlace activado se carga en ella, a pantalla completa. Es decir, tendríamos dos copias funcionando a la vez.

TARGET="_self". Hace que el enlace se cargue en el propio frame.

TARGET="_top". Hace que el enlace se cargue a pantalla completa, suprimiendo todos los frames, pero sin que se car- gue una nueva copia del navegador. Un error común es olvidar poner este atributo en los enlaces que están en un frame, con lo que al ser activados, la página llamada se carga en el propio frame, lo cual es muy molesto si esa página pertenece a otro sitio web. Esto se evita poniendo este atributo en las etiquetas de los enlaces.

Frames anidados dentro de otros frames

Hasta ahora hemos contemplado sólo la posibilidad de tener una distribución de los frames en filas o en columnas, (de- pendiendo que se utilice el atributo ROWS o COLS en la etiqueta FRAMESET), pero no ambos a la vez. Se puede obtener distribuciones complejas anidando filas en una columna, o a la inversa, columnas dentro de una fila.

Supongamos que queremos la siguiente distribución:

Un frame estrecho en horizontal en la parte superior, de lado a lado de la pantalla (altura, el 15%) Otro frame estrecho en vertical en la parte izquierda, debajo del anterior (anchura, el 20%)

Un tercero ocupando el resto de la pantalla.

Vemos que, en realidad, esto equivale a la siguiente distribución: Dos filas. La superior ocupa el 15% y la inferior el resto.

La fila inferior dividida en dos columnas. La primera (la de la izquierda) ocupa el 20% y la otra, el resto.

El documento de definición de las dos filas (olvidémonos de momento que la de abajo está subdividida), sería:

<HTML>

<HEAD>

<TITLE>Pagina con dos filas</TITLE>

</HEAD>

</FRAMESET>

</HTML>

Como la fila inferior, en realidad, son dos columnas (con una distribución del 20% y resto), sustituimos (anidando) la etiqueta <FRAME SRC="documento_fila_inferior"> por:

</FRAMESET>

Con lo que queda el documento definitivo así:

<HTML>

<HEAD>

<TITLE>Pagina con fila superior y dos columnas inferiores</TITLE>

</HEAD>

</FRAMESET>

</HTML>