Frames

Páginas con marcos (frames)

Los marcos, frames en la nomenclatura inglesa, permiten dividir la ventana de un cliente WWW en diferentes secciones, en las que se pueden mostrar, a su vez, documentos HTML. Cada una de estas secciones se comporta como un browser independiente, con funciones de impresión, barras de desplazamiento (en caso de que estas sean necesarias), opciones de recarga, movimiento por el histórico de lugares visitados, etc.

Sólo se pueden utilizar frames en browsers posteriores a Netscape 2.0 e Internet Explorer versión 3. Las opciones disponibles varían mucho con la versión de browser. En lo que sigue se tratará un conjunto mínimo de atributos compatibles.

Son útiles para incluir, dentro de una misma ventana, una sección fija que contiene los elementos para navegar por una estructura compleja de información. Por ejemplo, se puede dividir un documento en dos marcos; el primero de ellos contiene el índice de un libro, mientras que el otro contiene el libro propiamente dicho. De esta forma, se tiene siempre acceso al índice mientras que los enlaces activados se muestran en la ventana secundaria.

Navegación en documentos con frames

La visualización de un documento que contiene marcos altera determinados aspectos del comportamiento habitual de los clientes Web, por lo que se deben tener en cuenta los siguientes puntos:

Siempre existe un frame denominado ‘activo’ sobre el cual se aplican las operaciones de impresión, recarga, etc. Se conoce cuál es por tener unos bordes ligeramente resaltados. Para seleccionarlo, se pincha sobre él con el ratón.
No se puede imprimir el conjunto completo de secciones, sino cada una de ellas individualmente.
Si en una sesión de navegación por un documento con frames se pulsa el botón BACK del browser se obtiene el documento anteriormente visto en cualquiera de los marcos, y no el documento visitado antes de entrar a la sección con frames. Algunos browsers permiten diferenciar entre un BACK global y un BACK en un solo marco.
Los marcos cambien el conocido sistema de navegación del Web y hacen que no se tenga claro en dónde puede aparecer el resultado de activar un enlace. Por eso, se deberán utilizar solamente en aquellas situaciones en las que la información se adapte claramente a esta estructura, o se desee conseguir un efecto de presentación imposible de otra forma.

Estructura de un documento con frames

Un documento con frames consta de un único fichero que contiene la descripción de las zonas en las que se divide la pantalla, junto con las URLs de los documentos HTML que se presentarán en cada una de las secciones (recordemos que cada sección se comporta como un browser independiente). Cada región se caracteriza porque:

Tiene un nombre, que puede ser utilizado para hacer referencia al mismo desde otros documentos.
Puede cargar una URL propia.
Puede cambiar de tamaño en función de los cambios de tamaño de la ventana del browser o a petición del usuario.

Para crear un documento con frames se genera un documento HTML que contiene exclusivamente la definición de las secciones en que se subdividirá la pantalla. Para ello, se utiliza la nueva etiqueta <FRAMESET>. <HTML>
<HEAD> . . . </HEAD>
<FRAMESET>
DEFINICION DE CADA SECCION
</FRAMESET>
<NOFRAMES>
<BODY>
PARA LOS CLIENTES QUE NO ENTIENDEN FRAMES
</BODY>
</NOFRAMES>
</HTML> Opcionalmente, contendrá un elemento <NOFRAMES> con código HTML que sólo será mostrado en clientes que no entiendan frames.

Un documento con marcos no contiene código HTML (salvo la sección <NOFRAMES>), sino la descripción de cada una de las secciones de la presentación, y la URL del documento que se debe cargar en cada una. Es importante garantizar que el documento de definición de secciones no tenga una etiqueta <BODY>, salvo dentro de <NOFRAMES>.

Cada etiqueta <FRAMESET> define una división de la pantalla, en secciones horizontales o verticales. Dentro de cada <FRAMESET> es posible realizar nuevas particiones, con lo que iterativamente se llegará a la distribución final.

Creación de frames

Todo el control de la definición de secciones se realiza a través de los diferentes atributos de las etiquetas <FRAMESET> y <FRAME>. El proceso es sencillo: partiendo de la pantalla completa, se realiza una división, en filas o columnas, con una etiqueta <FRAMESET>. La división siempre debe ser en dos o más elementos.

Dentro de la etiqueta pareada <FRAMESET> se incluye un elemento <FRAME> o <FRAMESET> por cada una de las divisiones realizadas, de forma iterativa, hasta que todas las secciones definidas en un <FRAMESET> tengan su correspondiente <FRAME>:

Con un <FRAMESET> se realiza una nueva división de la sección correspondiente, que de nuevo puede ser por filas o por columnas.

Con un <FRAME> se configura la sección, la URL a cargar y su apariencia.

<FRAMESET>… </FRAMESET>		Define una división de una ventana de un browser (o de una parte de ella) en diferentes secciones.
	ROWS=" "		Especifica que la división del documento se realizará por filas. Se debe proporcionar una lista de valores, uno por cada sección, que especifique la forma en que se realiza la división.
	COLS=" "		Especifica que la división del documento se realizará por columnas. Se debe proporcionar una lista de valores, uno por sección, que especifiquen la forma en que se realiza la división.
	BORDER=		Permite controlar el grosor de los bordes de todas las secciones dentro de este conjunto. Se expresa en pixels. Es específico de Netscape (en su versión 3).
	FRAMEBORDER=		Permite eliminar el borde que separa cada uno de los marcos. Puede tomar los valores *yes*, no. Es específico del Internet Explorer de Microsoft.
	FRAMESPACING=		Permite modificar el espaciado, en pixels, entre las diferentes secciones. Es específico del Internet Explorer de Microsoft.

División en secciones

El primer paso es definir la distribución en filas o columnas que compondrá cada sección. Para ello, se utilizan los atributos ROWS o COLS de <FRAMESET>, a los que se pasa una lista de valores, separados por comas, de los puntos de separación de cada sección. Cada uno de los valores define una división independiente.

La anchura de cada sección se puede especificar de las siguientes formas:

Coordenadas absolutas, en pixels. Para ello, se utilizará un valor numérico. Es el más delicado de utilizar, ya que depende del tamaño de la ventana del cliente que lo presenta.
Fracciones en porcentaje, relativas al tamaño de la ventana del cliente, o del marco en que se insertan. Se utiliza el formato habitual, poniendo un % al final.
Valores relativos, con el formato valor*. Si se emplea un único *, significa que esta sección se queda con todo el tamaño que dejen libre el resto de las secciones. En caso de que se utilice un número, se indica qué fracción del total de espacio libre se asigna a esta sección.

Por ejemplo:

División de la pantalla en tres zonas verticales, de tamaño relativo al tamaño total de la ventana:

Tres zonas horizontales de tamaño fijo, con una de tamaño relativo.

Una combinación de las anteriores:

Una zona de tamaño fijo, con tres que se reparten proporcionalmente el espacio dejado libre por ella.; la primera ¾, la segunda ½ y la tercera ¼:

Configuración de cada sección

Finalizado el proceso de división, cada una de las particiones creadas debe tener asociada una etiqueta <FRAME>, en la que se fija su configuración. Se tiene control sobre:

El nombre de la sección (NAME). Servirá para que, desde un enlace <A> se especifique el marco en que se debe mostrar la información.

La URL por defecto (SRC) que se cargará en el primer acceso al documento de definición de frames.

La forma en que se mostrará en pantalla: presencia de barras de desplazamiento, bloqueo del tamaño de las secciones, …

<FRAME>… </FRAME>		Define los parámetros de una sección individual, dentro de un conjunto <FRAMESET>.
	NAME=" "		Nombre asociado a esta sección, que servirá para hacer referencia a la misma desde un enlace <A>. Utilizando el nuevo atributo TARGET="nombre_de_frame" de <A>, se puede mostrar un enlace en la sección deseada. Por defecto, las ventanas no tienen nombre, y no es necesario asignárselo, a no ser que se desee acceder a ella desde un enlace.
	SRC=" "		Nombre de la URL que se cargará inicialmente en esta sección.
	SCROLLING=" "		Indica si la ventana tendrá barras de desplazamiento, en caso de que la información insertada en el marco ocupe más de su tamaño. Puede valer *yes, no, auto. Con el valor auto*, estas sólo aparecerán si son necesarias.
	NORESIZE		Impide que el usuario pueda cambiar el tamaño de esta sección.
	MARGINHEIGHT=" "		Control de la altura del margen (superior e inferior) en pixels.
	MARGINWIDTH=" "		Controla la anchura del margen (derecho e izquierdo) en pixels.
	FRAMEBORDER=" "		Permite eliminar el borde que separa cada uno de los marcos. Es específico del Internet Explorer de Microsoft.

Ejemplos

El caso más sencillo es la división de la pantalla en dos secciones, que en este caso son proporcionales al tamaño total de la pantalla.

<HTML>
<HEAD><TITLE>División en dos secciones</TITLE>
</HEAD>
<FRAMESET cols="30%,70%">
<FRAME NAME="indice" SRC="index.html">
<FRAME NAME="contenidos" SRC="contenido.html">
</FRAMESET>
<NOFRAMES>
<BODY>Este documento sólo puede ser visto desde un cliente preparado para frames</BODY>
</NOFRAMES>
</HTML>

En este ejemplo, se realiza una división de la primera fila, en dos nuevas columnas. Para ello, dentro del segundo <FRAMESET> se incluye una nueva división. Además, se bloquean todas las secciones a su tamaño predeterminado. <FRAMESET rows="20%,80%">
<FRAME NAME="navegador" SRC="navega_f.html" NORESIZE>
<FRAMESET COLS="20%,*">
<FRAME NAME="indice" SRC="indice_f.html" NORESIZE>
<FRAME NAME="content" SRC="conten.html" NORESIZE>
</FRAMESET>
</FRAMESET>

Enlaces y frames

Cuando se activa un enlace situado dentro de una sección de un marco, la URL correspondiente se muestra en la misma sección en que estaba ese enlace. Este es el comportamiento normal del sistema de navegación del Web cuando no se utilizan marcos. Es decir, si dentro de una sección de un marco aparece un enlace como:

<A HREF="http://www.sys.com"> Al ser activado, el contenido de la URL http://www.sys.com se mostrará en la misma sección del marco que contenía el enlace. Sin embargo, al trabajar con marcos se dispone de la capacidad de especificar en qué sección se debe cargar una nueva página. Por ejemplo, si una sección de la pantalla actúa de índice, al activar un enlace la información resultante puede aparecer en una sección dedicada a contenidos.

Para conseguir este efecto, la etiqueta <A> ha sido ampliada con un atributo TARGET="", que especifica el nombre de la sección en que se debe cargar el enlace. Por ejemplo, para el caso habitual de un frame que actúa de índice:

<FRAMESET COLS="100,*">
<FRAME NAME="indice" SRC="index.html" SCROLLING="AUTO">
<FRAME NAME="contenido" SRC="intro.html" SCROLLING="AUTO">
</FRAMESET> Dentro del índice index.html, se utilizarían enlaces de la forma: <A HREF="capitulo1.html" TARGET="contenido">Capítulo 1</A><BR>
<A HREF="capitulo2.html" TARGET="contenido">Capítulo 2</A> Además, existen unos nombres especiales de ventana, que pueden ser utilizados en un <A HREF="" TARGET="nombre_especial">. Con ellos se puede alterar aún más la forma en que se presentará un enlace tras ser activado. _blankà Carga la URL en un nuevo documento en blanco. Equivale a abrir una nueva ventana del browser, en la que se cargará el enlace correspondiente. Se puede utilizar aunque no existan marcos.

_self àCarga la URL en la misma sección en la que está el enlace. Es equivalente a no utilizar TARGET.

_top àCarga la URL en esta misma ventana, pero eliminando las frames existentes. Se debe utilizar siempre que se quiera eliminar la estructura de marcos, por ejemplo, al activar un enlace que esta fuera de este servicio de información.

_parent àCarga la URL en el frame del cual forma parte el frame en que está el enlace.