Frames

Los frames (en inglés frame = cuadro, bastidor, marco o panel) es un elemento implementado por Netscape, que permite dividir la pantalla en varias áreas independientes unas de otras, y por tanto con contenidos distintos, aunque puedan estar relacionados. Cada una de estas zonas es capaz de mostrar código HTML, como en las celdas de una tabla. Sin embargo, no hay que confundir paneles con tablas ya que existe una gran diferencia; en el caso de una tabla, todas las celdas forman parte del mismo documento HTML, mientras que en el caso de los frames cada zona de la pantalla es un documento HTML propio. Se ve pues, simultáneamente, en la misma ventana de un browser, la página correspondiente a varios ficheros.
El concepto de frame elimina una de las limitaciones del Web ya que hasta ahora, cada nuevo documento destruía el anterior, y obligaba al usuario a usar demasiado el comando Back de los browsers. Ahora es posible dedicar ciertas zonas a tareas bien definidas, como por ejemplo tener en una zona un menú que casi nunca será necesario recargar.
La estructura general de un documento dividido en varios paneles difiere de la de un documento clásico ya que en éstos el cuerpo se inserta en las marcas <BODY> y </BODY>, mientras que en los paneles, el cuerpo del documento se inserta entre las marcas <FRAMESET> y </FRAMESET>;.
El elemento <FRAMESET> permitirá precisar la forma de los diferentes paneles por medio de dos atributos: ROWS y COLS. <FRAME> es la marca de definición de los paneles creados con FRAMESET.
La mayoría de los visualizadores no soportan los frames. Para que nuestra página con frame no resulte opaca a ellos se utilizará el elemento <NOFRAMES> que permite ofrecer un texto alternativo en entorno normal.
Los paneles pueden estar relacionados y tener enlaces de unos a otros para ello se utiliza el atributo TARGET que indica en qué panel debe mostrarse el documento asociado a un enlace de hipertexto.
Al final de esta página se muestran diversos ejemplos de frames.

FRAMESET

Este elemento sustiye al elemento <BODY> y permite dividir una zona en subzonas, bien verticalmente, bien horizontalmente. Si no hay ninguna zona todavía, las divisiones se aplican a la zona inicial formada por el conjunto de la ventana del browser. Esta marca posee dos atributos:
ROWS: Se utiliza para dividir la zona en subzonas horizontales. La sintaxis es:
ROWS="altura_zona_1, altura_zona_2,...,altura_zona_n"
ROWS es una lista de valores enteros separados por comas. El número de elementos de la lista corresponde al número de subzonas horizontales a crear. Cada uno de los valores de la lista puede darse según uno de los tres formatos siguientes, donde n es un entero:

n: indica la altura de la subzona en píxels.

n%: indica la altura de la subzona expresada en porcentajes del tamaño de la zona madre.

n*: n es opcional. El carater * indica al browser que debe dar a la zona todo el espacio aún disponible.

COLS: Se utiliza para dividir la zona en subzonas verticales. La sintaxis es igual que en el atributo ROWS.
ROWS="altura_zona_1, altura_zona_2,...,altura_zona_n"
Ejemplo: A continuación se muestra dos maneras idénticas de dividir una zona en tres. Las dos subzonas superiores son de tamaño idéntico y la última es el doble de las anteriores.

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

<FRAMESET ROWS="*,*,2*">...<FRAMESET>

FRAME

Es la marca utilizada para caracterizar las subzonas definidas mediante la marca <FRAMESET>. Esta caracterización se realiza mediante los siguientes atributos:
SCR: Indica el URL del documento que debe mostrarse en esa zona. Si el atributo no se indica, entonces la zona estará vacía.
SCR="url"
NAME: Se utiliza para nombrar la zona a fin de que pueda convertirse en el destino de cualquier enlace de hipertexto. La sintaxis del atributo es:
NAME="nombre_de_la_zona"
MARGINWIDTH: Se utiliza para precisar el número de píxels entre los bordes izquierdo y derecho de la zona y el documento HTML a visualizar, en definitiva marca el margen izquierdo. La sintaxis es :
MARGINWIDTH="n"
MARGINHEIGHT: Se utiliza para precisar el número de pixels entre los bodes superior e inferior de la zona y el documento HTML a visualizar. La sintaxis es:
MARGINHEIGHT="n"
SCROLLING: Indica si la zona debe poseer una barra de desplazamiento (SCROLLING="yes"), si no debe contar con ella (SCROLLING="no") o si esta elección se deja en manos del browser (SCROLLING="auto"). La sintaxis es:
SCROLLING="yes/no/auto"
NORESIZE: Indica al browser que no debe permitir que el usuario modifique el tamaño de la zona. Cuando este atributo no se precisa es posible deformar una zona desplazando su frontera mediante el ratón.

NOFRAMES

Esta marca indica a todo browser incapaz de gestionar los frames el texto que debe presentar al usuario en lugar de los paneles. Dicho texto irá entre las marcas <NOFRAMES> y </NOFRAMES>. En realidad dichos browsers ignorarán las marcas FRAMESET y NOFRAMES pero casualmente no el texto comprendido entre éstas últimas. Por el contrario un browser capaz de gestionar paneles interpretará las marcas <NOFRAMES> y </NOFRAMES> y sabrá que debe ignorar el texto comprendido entre ellas.

El atributo TARGET

Este nuevo atributo afecta a las marcas que caracterizan los enlaces de hipertexto, en particular a las marcas <A> y <FORM>. TARGET permite precisar el nombre de la zona que debe recibir el documento correspondiente al enlace. Por ejemplo:
<A HREF="/dossier.html" TARGET="zonadossier"> Ver el dossier </A>
El atributo TARGET existe para indicar al browser que, en respuesta a un clic, debe mostrar el documento dossier.html en el panel cuyo nombre es "zonadossier". De igual modo, el formulario definido por:
<FORM  ACTION="cgi_bin/test"  TARGET="zonascript"  METHOD="POST">
  ...
</FORM>
Mostrará sus resultados en el panel cuyo nombre es "zonascript".
El atributo TARGET puede tener tres valores diferentes:
Un valor que corresponde al nombre de un panel existente.El documento asociado al enlace de hipertexto se muestra entonces en el panel en cuestión.
Un valor que no corresponde a ninguno de los paneles existentes. El browser crea entonces una nueva ventana y muestra el documento. Esta nueva ventana se considera como un panel con el atributo TARGET del origen de su creación.
TARGET puede tomar uno de los siguientes cuatro valores:

_blank, indica al browser que debe crear una nueva ventana con el fin de mostrar el documento. La nueva ventana es un panel que no tiene nombre y no puede ser por tanto el destino de otro enlace de hipertexto.

_self, indica que el documento se cargará en la misma zona donde se encuentra el enlace de hipertexto. Se trata del valor predeterminado cuando no se indica el atributo TARGET.

_top, indica al browser que suprima todos los paneles existentes y visualice el documento de modo normal.

_parent, indica al browser que visualice el documento ocupando toda la superficie de la zona en la que se ha visualizado el documento que contiene el enlace. Esta noción solo tiene sentido cuando los diferentes niveles de paneles provienen del anidamiento de documentos y no del anidamiento de marcas <FRAMESET>.

A continuación se expondrán algunos ejemplos para que queden claros todos los conceptos aprendidos.

Ejemplos:

A continuación se detallan un conjunto de ejemplos que crean frames de diversos tipos:

1.
Sintaxis general
2.
Areas verticales. (COLS)
3.
Areas horizontales. (ROWS)
4.
Areas verticales y horizontales combinadas. (COLS y ROWS)
5.
Márgenes forzados. (MARGINWIDTH y MARGINHEIGHT)
6.
Referencias cruzadas

Un frame básico. Sintaxis general
En general, todas las páginas que contengan un frame deberán ser más o menos así:
<HTML>
<HEAD><TITLE> Mi titulo ></TITLE></HEAD>

<FRAMESET COLS=*,*>
     <NOFRAMES>
         <BODY>
             Su visualizador no soporta frames. Pulse 
             <A HREF="indice.htm">aqui</A> para volver.
         </BODY>
    </NOFRAMES>

    <FRAME SRC="doc_a.htm" >
    <FRAME SRC="doc_b.htm" >

</FRAMESET>

</HTML>
Ejemplo real
Un frame de 3 áreas verticales (COLS)
Se vería así:
A B C
Y se escribiría; así:
<FRAMESET COLS=30%,20%,50%>
   <FRAME SRC="doc_a.htm">
   <FRAME SRC="doc_b.htm">
   <FRAME SRC="doc_c.htm">
</FRAMESET>

Ejemplo real
Un frame de 3 áreas horizontales (ROWS)
Se vería así:
A
B
C
Y se escribiría así:
<FRAMESET ROWS=25%,25%,50%>
   <FRAME SRC="doc_a.htm">
   <FRAME SRC="doc_b.htm">
   <FRAME SRC="doc_c.htm">
</FRAMESET>

Ejemplo real
Un frame combinado de un área vertical y dos horizontales.
El frame A, no podrá ser redimensionado (NORESIZE).
Se vería así:
A B
C
Y se escribiría así:
<FRAMESET COLS=20%,*>
   <FRAME SRC="doc_a.htm" NORESIZE>
        <FRAMESET ROWS=40%,*>
           <FRAME SRC="doc_b.htm">
           <FRAME SRC="doc_c.htm">
        </FRAMESET>
</FRAMESET>

Ejemplo real
Un frame con dos áreas verticales. Una normal, la otra con márgenes forzados para el texto (MARGINWIDTH MARGINHEIGHT)
Se vería así:
AAAA AA
AA
Y se escribiría así:
<FRAMESET COLS=50%,50%>
   <FRAME SRC="doc_a.htm">
   <FRAME SRC="doc_a.htm" 
       MARGINWIDTH=50 
       MARGINHEIGHT=50>
</FRAMESET>

Ejemplo real
Un frame con referencias cruzadas (NAME TARGET)
Se vería así:
A B
Y se escribiría así:
<FRAMESET COLS=50%,50%>
   <FRAME SRC="doc_aa.htm">
   <FRAME SRC="doc_bb.htm" NAME="VENTANA">
</FRAMESET>

Ejemplo real
Esto de los cruces es un poco complicado... fíjate en el contenido de cada página que entra en juego. Cuando actives Ejemplo real el fichero llamado es ej_cruz.htm. Pruébalo.

Fichero	Contenido	Acción
doc_aa.htm	<A HREF="doc_cc.htm" TARGET="VENTANA">	Pone DOC_CC en el frame derecho
doc_aa.htm	<A HREF="doc_cc.htm">	Trae DOC_CC
doc_bb.htm	Esto es "VENTANA"	No hace nada
doc_cc.htm	<A HREF="doc_bb.htm" TARGET="VENTANA">	Pone DOC_BB en el frame derecho porque se llama "VENTANA"
doc_cc.htm	<A HREF="doc_aa.htm">	Trae DOC_AA
ej_cruz.htm	<FRAMESET>	-
	<FRAME SRC="doc_aa.htm">	Pone DOC_AA en el frame izquierdo.
	<FRAME SRC="doc_bb.htm" NAME="VENTANA">	Pone DOC_BB en el frame derecho y le da como nombre "VENTANA"
	</FRAMESET>	-

Facultad de Informática de la Universidad de Las Palmas de Gran Canaria