Tres Frames

La idea de este ejemplo es ver cómo montar una página que contenga tres frames. La disposición de la página será la siguiente: en el lado izquierdo tendremos un frame de ancho 20% del total, en el lado derecho tendremos dos frames en disposición horizontal. El superior ocupará el 90% del espacio, mientras que el inferior ocupará el 10% restante.

Disposición de los frames

La estructura quedará así:

+------------------+------------------+
|                  |                  |
|  Frame           |  Frame Superior  |
|  Izquierda (20%) |  (90%)          |
|                  |                  |
|                  +------------------+
|                  |  Frame Inferior  |
|                  |  (10%)          |
+------------------+------------------+

Definir el frameset principal

Lo primero que tenemos que hacer es definir la página que va a contener la división de los frames y posteriormente cada una de las tres páginas que son el contenido de los respectivos frames.

La página que define el frame utilizará la etiqueta FRAMESET para definir la división. Para definir las divisiones hay que ir de la más general a la más concreta. Así que en nuestro caso la primera división es en columnas y la segunda es en filas, para la columna de la derecha.

La primera división se definiría con el atributo cols de la siguiente forma:

<frameset cols="20%,*">
</frameset>

Como puedes ver, cuando queremos indicar que el tamaño de un frame es el resto, utilizamos el comodín *.

Definir el frame izquierdo

Una vez definida la división hay que indicarle el contenido de los dos primeros frames. Para el primero, como ya es un contenido fijo utilizaremos la etiqueta FRAME, la cual, mediante el parámetro src indica el contenido de la misma de la siguiente forma:

<frame src="izquierda.html" name="izquierdo">

Es bueno que utilicemos el atributo name para luego poder redirecionar los enlaces a uno u otro frame.

Definir los frames derechos

En el caso del segundo frame, como no es un contenido fijo, sino que es otra división, tendremos que utilizar nuevamente la etiqueta FRAMESET. Pero en este caso, con una división en filas:

<frameset rows="90%,10%">
  <frame src="superior.html" name="superior">
  <frame src="inferior.html" name="inferior">
</frameset>

Código completo

El código completo quedaría así:

<frameset cols="20%,*">
  <frame src="izquierda.html" name="izquierdo">
  <frameset rows="90%,10%">
    <frame src="superior.html" name="superior">
    <frame src="inferior.html" name="inferior">
  </frameset>
</frameset>

Soporte para navegadores sin frames

Como nota final cabe indicar que todavía nos podemos encontrar navegadores que no entiendan de frames (ya es raro, antes era algo más habitual). Así que, para estos casos, es bueno utilizar la etiqueta NOFRAMES con un contenido de texto avisando de que su navegador no soporta frames.

<noframes>
  <body>
    Su navegador no soporta frames
  </body>
</noframes>

Víctor Cuervo

Programador, Arquitecto IT, álter ego de Línea de Código, amante de las tecnologías, generador de conocimiento y facilitador del aprendizaje.

Descarga el código de Tres Frames

Crea una página con tres frames utilizando HTML y aprende a estructurar contenido de forma efectiva. Descubre cómo optimizar tu diseño web con esta técnica.

Descargar código