Una técnica ampliamente usada en los servicios multimediales existentes antes y después de la aparición del Web y del lenguaje HTML, era la de disponer de un documento con dos o más zonas, de manera que una de ellas mostrara información cambiante, y la otra información estática que servía de índice a la anterior.

Esta técnica permite una fácil navegación, ya que el usuario puede acceder de manera aleatoria y no lineal a la información de una manera bastante fácil.

1. Bases de la técnica
Antes de empezar a implementar una página Web que haga uso de FRAMES, se deben considerar dos aspectos.

1.1. Sectorización
Definir la manera de dividir la página, que sector(es) contendrá(n) el(los) índice(s) fijo(s) y que sector(es) mostrará(n) la información variable.

Lo más común es utilizar aproximadamente el tercio izquierdo de la página para el índice fijo y los dos tercios restantes para la información.

Otra distribución usual es aproximadamente el quinto superior de la página para los temas, de lo que resta, el tercio izquierdo es para los índices fijos y el tercio derecho para la información.

1.2. Incidencia
Definir la incidencia de los hyperlinks, es decir, cuál será el sector (frame) que será afectado por la activación de cada hyperlink.

Usualmente, los hyperlinks del índice muestran su resultado en el frame de la información, los del frame de los temas en el de los subtemas, y así sucesivamente.

Los hyperlinks del frame de la información, usualmente se expresan dentro del mismo frame.

También es posible que un hyperlink haga desaparecer la distribución de los frames y se exprese en la página completa, o que cree un nueva ventana al ser activado.

2. Implementación en HTML
2.1. Sectorización
La sectorización de la página se realiza con los comandos FRAMESET y FRAME.

2.1.1. FRAMESET
Un FRAMESET define:
1. Un conjunto de FRAMEs dispuestos uno sobre otro (rows), o bien...
2. Un conjunto de FRAMEs dispuestos uno al lado de otro (cols).

Además, puede contener a otros FRAMESET, lo que posibilita un sinnumero de sectorizaciones distintas.

El ancho y la altura de cada FRAME se definen en el FRAMESET.

2.1.2. FRAME
Cada FRAME tiene asociado como mínimo:
I. Un nombre (atributo NAME), que sirve para distinguir su zona de las otras.
II. Una fuente (atributo SRC), que consiste en un URL apuntando hacia un documento HTML que será cargado en el FRAME al inicio.
Adicionalmente, se puede especificar el ancho y la altura del margen, la presencia o ausencia de barras de desplazamiento, etc.

2.1.3. Una división típica

2.1.4. División en dos mitades horizontales

2.1.5. División mixta

Nótese que en este caso, el FRAME superior carece de barras de desplazamiento.

2.1.6. Notas adicionales
El comando FRAMESET acepta varias formas de definir la disposición de los FRAMES en su interior:
• FRAMESET rows="20%,80%" - Porcentaje
• FRAMESET rows="20%,*" - Equivalente al anterior. "*" se usa para indicar todo el resto.
• FRAMESET rows="30,*" - Pixeles
• FRAMESET rows="30,*,30" - No tienen por que ser dos frames solamente

2.2. Incidencia
El FRAME que será afectado por la activación de un hyperlink (elemento A), se define mediante su atributo TARGET, con valor igual al NAME del FRAME que recibirá la página cargada.

El TARGET también puede ser:
• _self - Valor por omisión, carga la página en el mismo FRAME del hyperlink.
• _parent - Carga la página en el FRAME del cual este FRAME es parte.
• _top - Carga la página a ventana completa.
• _blank - Inicia otra ventana.
Obviamente, estos valores están reservados y ningún FRAME los puede llevar por nombre.

3. El elemento NOFRAMES
Actualmente, sólo Netscape 2.0 reconoce la construcción de FRAMES. Para evitar problemas con los clientes que no reconocen FRAMES se debería incluir en el archivo código suficiente para generar una página sin FRAMES.

Para que este texto sea ignorado por el cliente que sí define FRAMES, se debe delimitar mediante: <NOFRAMES> ... </NOFRAMES>.

La declaración de FRAMES se debe hacer antes de la aparición del comando BODY en el documento para que sea válida.

Un ejemplo completo

Archivo index.html:

Archivo indice.f.html:

Archivo tema1.f.html:

Archivo tema2.f.html:

Archivo tema3.f.html: