WebMaestro - 14. Frames

14. Frames

Frames (en inglés, marcos o cuadros) es un procedimiento del lenguaje HTML para dividir la pantalla en diferentes zonas, o ventanas, que pueden actuar independientemente unas de otras, como si se trataran de páginas diferentes, pues incluso cada una de ellas pueden tener sus propias barras deslizadoras. Los navegadores que lo implementan son el Netscape 2.0, y el Explorer 2.0 en adelante. Aunque no está incluido en el actual estándar HTML 3.2, está previsto que lo esté en el próximo (Cougar).

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 izquierda va a servir de índice de lo que veamos en el de la derecha, y en éste veremos inicialmente una página de presentación. Se podrá acceder también aquí a la página personal creada en los capítulos anteriores (mipag13.html), si se pulsa un enlace en el frame de la izquierda.

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 mipagind.html), y el de la derecha otro documento HTML que va a servir de página de presentación (al que llamaremos mipagpre.html).

Todo lo anterior se refleja en el siguiente documento HTML:

<HTML>
<HEAD>
<TITLE>Mi pagina con frames</TITLE>
</HEAD>
<FRAMESET COLS="20%, 80%">
<FRAME SRC="mipagind.html">
<FRAME SRC="mipagpre.html" NAME="principal">
</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 espacio en anchura que van 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:
```
<FRAME SRC="mipagind.html">
<FRAME SRC="mipagpre.html" NAME="principal">
```
Con esto se define que el contenido del primer frame (el de la izquierda) sea el documento HTML mipagind.html y el del segundo (el de la derecha) sea el documento HTML mipagpre.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 primer 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 mipagina.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 independientes, que pueden tener cada una su propio fondo, etc., y todo lo que queramos añadir en ellos y que hemos aprendido hasta ahora.

Documento del frame de la izquierda

Va a tener un fondo amarillo, y va a contener dos enlaces dirigidos al frame de la derecha. Además, como muestra de que se puede añadir cualquier cosa en un frame, vamos a incluir este logo animado (glogoan2.gif):

<HTML>
<HEAD>
<TITLE> Indice </TITLE>
</HEAD>
<BODY BGCOLOR="#FFBB00">
<P><A HREF="mipagpre.html" TARGET="principal"> Presentación </A>
<P><A HREF="mipag13.html" TARGET="principal"> Mi página </A>
<P><IMG SRC="glogoan2.gif">
</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 hayamos 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 cargar los documentos HTML.

Guardamos este documento con el nombre de mipagind.html. Además, capturamos la imagen glogoan2.gif, y la guardamos junto con el documento.

Documento del frame de la derecha

Va a tener un fondo negro, y va a contener sólamente un texto. En capítulos posteriores se irán añadiendo aquí más cosas.

<HTML>
<HEAD>
<TITLE> Presentacion </TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#0000FF">
<CENTER>
<FONT SIZE=+3><STRONG>
<P>ESTA ES LA VERSION
<BR><FONT COLOR="#FF0000">CON FRAMES</FONT>
<BR>DE MI PAGINA
</STRONG>
</FONT>
</CENTER>
</BODY>
</HTML>

Guardamos este documento con el nombre de mipagpre.html

Alternativa para los navegadores que no soportan frames

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

En teoría no necesitamos nada más. Sólo queda un detalle: ¿Qué ocurriría con los navegadores que no soportan los frames? Pues que al desconocer las etiquetas FRAMESET y FRAME del documento de definición, no podría ejecutarlo y no podría cargar la página.

Para estos casos está prevista la etiqueta <NOFRAMES> y </NOFRAMES>. Se colocan a continuación de las distintas etiquetas <FRAME>, quedando la estructura de esta manera:

<HTML>
   <FRAMESET ....>
      <FRAME....>
      <FRAME....>
      <NOFRAMES>
         <BODY>
         [Aquí va lo que queremos que vean los usuarios con navegadores
         que no soportan frames]
         </BODY>
      </NOFRAMES>
   </FRAMESET>
</HTML>

Obsérvese que dentro de la etiqueta <NOFRAMES> se han colocado las etiquetas <BODY> y </BODY>, pero téngase en cuenta que esto es sólo para esa página de advertencia.

En nuestro ejemplo, vamos a poner un mensaje advirtiendo de esta circunstancia, y dirigiendo al usuario, con un enlace normal, hacia la página mipag13.html.
(También podríamos no decir nada sobre frames, y colocar aquí el código de la página de presentación, pero añadiendo un enlace a mipag13.html, para que se pueda pasar de página)

<NOFRAMES>
<BODY>
Estas utilizando un navegador que no soporta frames.
<P>Pulsa para visitar mi <A HREF="mipag13.html"> página</A>.
</BODY>
</NOFRAMES>

Lo incluimos dentro del documento de definición de los frames, que hemos visto antes, y que queda de esta manera:

<HTML>
<HEAD>
<TITLE>Mi pagina con frames</TITLE>
</HEAD>
<FRAMESET COLS="20%, 80%">
<FRAME SRC="mipagind.html">
<FRAME SRC="mipagpre.html" NAME="principal">
<NOFRAMES>
<BODY>
Estas utilizando un navegador que no soporta frames.
<P>Pulsa para visitar mi <A HREF="mipag13.html"> página</A>.
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>

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

Si lo cargamos, este es el resultado con frames (para los navegadores que los soportan).
Se puede comprobar cómo cambiamos de página en el frame de la derecha, según el enlace que pulsemos en el frame de la izquierda.

Los que no los soportan verían esto otro (Está forzado para que lo vean todos los navegadores, incluso los que soportan frames).

Con este ejemplo práctico hemos aprendido la estructura básica de los frames, pero no hemos utilizado todas sus posibilidades. A continuación se detallan los distintos atributos que se pueden añadir a las etiquetas.

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 frames. Tiene dos atributos: COLS (columnas) y ROWS (filas):

<FRAMESET COLS="xx, yy, zz, .."> <FRAMESET ROWS="xx, yy, zz, ..">

Define la distribución de los frames en columnas o en filas, según se use uno u otro atributo.
Define el número de frames que habrá, pues, 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:
  <FRAMESET COLS="%20, %80"> (la columna de la izquierda ocupará el 20% del ancho de la pantalla, y la de la derecha el 80% restante)
  <FRAMESET ROWS="%10, %70, %20"> (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:
  <FRAMESET COLS="40, 600"> (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 algún valor absoluto para un frame, es mejor mezclarlo con alguno relativo, como los que vamos a ver a continuación, para que se ajuste el total a la pantalla del usuario
- Un valor relativo que se consigue poniendo un asterisco (*), en vez de un número. Esto se interpreta como que ese frame debe tener el espacio restante. Por ejemplo:
  <FRAMESET ROWS="100,*,100"> (Habrá tres filas, la superior y la inferior de una altura fija de 100 pixels, y la del medio obtendrá el espacio restante).
  Si hay más de un frame con asterisco, ese espacio restante se dividirá por igual entre ellos.
  Si hay un número antes del asterisco, ese frame obtiene esa cantidad más de espacio relativo. Así "2*,*" daría dos tercios para el primer frame y un tercio 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 dentro 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 completa quedaría:

<FRAMESET FRAMEBORDER=0 FRAMESPACING=0 BORDER=0 COLS="xx, yy">

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 etiqueta <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 recurso del 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á precisamente 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 (una letra o un número, pero no otro tipo de símbolo)
MARGINWIDTH="número". Se utiliza este atributo cuando se quiere controlar la el ancho de los márgenes dentro de un frame. El número que se ponga 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. Se puede comprobar en el ejemplo con frames que si se coloca el cursor del ratón entre los dos frames, al pulsarlo y arrastrarlo en un sentido u otro, varían las dimensiones prefijadas de los frames. Este atributo impide que ocurra esto en un frame. Es un atributo opcional. Por defecto, todos los frames son re-dimensionables.
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, teníamos que poner dentro de cada enlace el 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 este 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 carácter sea alfanumé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 atributo 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 del navegador (Netscape, Explorer, etc.) 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 cargue una nueva copia del navegador. Este es particularmente útil. Un error muy común es olvidarse de poner este atributo en los enlaces que están en un frame, con lo que resulta que al ser activados, la página llamada se carga dentro del propio frame, lo cual es muy molesto si esa página pertenece a otro sitio del Web, y aún más grave si esa página tiene a su vez frames. Este inconveniente se evita poniendo este atributo dentro de 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 bien en filas o bien en columnas, (dependiendo que se utilice el atributo ROWS o COLS en la etiqueta FRAMESET), pero no ambos a la vez.

Se pueden obtener distribuciones más complejas anidando filas dentro de 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 está a su vez 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 ROWS="15%, *">
<FRAME SRC="documento_fila_superior">
<FRAME SRC="documento_fila_inferior">
</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 COLS="20%, *">
<FRAME SRC="documento_columna_izqda">
<FRAME SRC="documento_columna_dcha">
</FRAMESET>

Con lo que queda el documento definitvo así:

<HTML>
<HEAD>
<TITLE>Pagina con fila superior y dos columnas inferiores</TITLE>
</HEAD>
<FRAMESET ROWS="15%, *">
<FRAME SRC="documento_fila_superior">
      <FRAMESET COLS="20%, *">
      <FRAME SRC="documento_columna_izqda">
      <FRAME SRC="documento_columna_dcha">
      </FRAMESET>
</FRAMESET>
</HTML>

La distribución quedaría así
(Se han omitido los distintos documentos de cada frame)