Los marcos en las páginas web

Denodados por unos y adorados por otros los marcos o frames son una forma de insertar varias páginas web en una sola. Mal utilizados pueden arruinar la mejor página web, pues no hemos de olvidar que la pantalla del monitor está físicamente limitada. Cada marco que compone la página poseerá sus propios bordes y barras de scroll, comportándose como ventanas independientes. Su situación en la página es rígida, no podemos colocarlos en las posiciones que deseemos, si tenemos cuatro marcos se situarán en cada uno de los cuatro cuadrantes de la pantalla. Si tenemos dos la pantalla se dividiré en dos filas o en dos columnas para alojarlos. Pueden ser útiles para compartir un cierto contenido por todo el sitio web, por ejemplo para una barra de navegación.

Su uso puede parecer algo compeljo pero es muy simple. Básicamente se trata de definir una página contenedora de los marcos y de colocar en cada uno de ellos la página cuyo contenido mostrarán. Por supuesto también concretaremos el tamaño y posición y otros atributos de cada marco. Pueden existir navegadores que no puedan manejar los marcos, por ello colocamos un texto alternativoa explicando la situación. Mira el siguietne código y ve los resultados en este ejemplo.

<HTML>
<HEAD>
  <TITLE>Los frames: páginas multiventana</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
  <FRAME NAME="indice" SRC="indice.htm">
  <FRAME NAME="principal" SRC="principal.htm">
  <NOFRAMES>
    <P align="center">Al parecer tu navegador 
    no soporta marcos, actualízate.</P>
  </NOFRAMES>
</FRAMESET>
</HTML>

Fíjate las diferencias y coincidencias con una página HTML habitual: en lugar de BODY ahora tenemos una etiqueta FRAMESET. Cada una de estas FRAMESET son una página o ventana dentro de la página contenedora que estará compuesta por varias zonas definidas con los parámetro COLS o ROWS. En el ejemplo se trata de dos marcos uno junto al otro: uno ocupa el 20% de la ventana del explorador y el otro el 80% restante.

Dentro del <FRAMESET> definimos los marcos que componen el conjunto y la acción alternativa para navegadores que no soporten marcos. A cada uno de los marcos le ponemos un nombre y especificamos qué página HTML se mostrará en él (etiqueta <FRAME>). Sólo queda definir lo que verá el usuario en el supuesto de que su navegador no soporte frames (etiqueta <NOFRAMES>).

arriba

Etiqueta FRAMESET

Los parámetros COLS y ROWS nos permiten controlar el tamaño de los marcos presentados en la ventana del navegador. Existen tres formas de establecer estos tamaños:

Porcentajes: podemos definir el tamaño de un marco como un porcentaje del espacio total disponible (el ancho o alto de la ventana del navegador)
Absolutos: Podemos especificar el ancho o alto del marco en pixels.
Calculado: Podemos colocar el ancho o alto de un marco y dejar que el tamaño del otro lo calcule el navegador, usando apra ello un asterisco en lugar de un valor o porcentaje. Por ejemplo si tenemos tres marcos y colocamos cols=" 10%, 30%, *", el último ocupará el 60% (el espacio sobrante 100 - 10 -30). Si colcoamos el * varios marcos se repartirán el espacio equitativamente, pero podemos también hacer que un marco sea doble o triple de otro. Así, un marco con un espacio de 3* será tres veces más grande que el que contenga un asterisco.

Se pueden combinar los tres métodos. Por ejemplo:

<FRAMESET COLS="10%,*,300,3*">

Supongamos que el ancho total de la ventana son 800 pixels. El primer marco ocupará el 10%, es decir, 84 pixels. El tercero necesita 300, en total tenemos 384 ocupados luego quedan 800-384, 416 pixels libres. Los otros se repartirán este espacio en función de los asteriscos: 416/4 = 104 pixels para el de un asterisco y 312 para el otro. En total tenemos ocupados los 800 pixels. Lo más recomendable es dejar un marco con tamaño calculado, o sea, con el asterisco para.

Y bueno si queremos que los marcos se distribuyan de una forma algo más irregular podemos aprovechar la posibilidad de anidarlos, en otras paralbras: un marco puede contener una página que a su vez ontenga otros marcos. Esto se hace poniendo otro <FRAMESET> donde normalmente colocamos las etiquetas <FRAME> tal que así:

<FRAMESET COLS="20%,80%">
  <FRAME NAME="indice" SRC="indice.htm">
  <FRAMESET ROWS="*,80">
    <FRAME NAME="principal" SRC="superior.htm">
    <FRAME NAME="ejemplos" SRC="principal.htm">
  </FRAMESET>
</FRAMESET>

El resultado del anidamiento lo podréis contemplar aquí.

Frameset tiene aún dos parámetros extras: frameborder y framespacing, el primero permite eliminar los bordes que separan a todos los marcos, mientras que el segundo permite controlar el ancho del espacio que separa los marcos

arriba

Etiqueta FRAME

Esta es la etiqueta que nos permite describir como debe ser cada marco Los parámetros que soporta son:

`NAME`	Asigna un nombre a un marco, de esta manera luego podemos usarlo como destino de un enlace.
`SRC`	Indica la URL del documento HTML que ocupará el marco.
`NORESIZE`	Evita que el usuario pueda cambiar el tamaño del marco.
`FRAMEBORDER`	Ssi lo igualamos a cero el borde de este marco desaparece (pero ojo si los contiguos tienen borde éste se verá).
`SCROLLING`	Coloca o no las barras de scroll. Su valor es por defecto `AUTO`, aparecerán si son necesarias. Las otras opciones que tenemos son `YES` o colocarlas y `NO`, no ponerlas.
`MARGINWIDTH`	Permite cambiar los márgenes horizontales dentro de un marco. Se representa en pixels.
`MARGINHEIGHT`	Igual al anterior pero con márgenes verticales.

arriba

Marcos flotantes <IFRAME>

Una excelente alternativa a los marcos fijos son los marcos flotantes, actualmente soportados por todos los navegadores. La idea de este elemento ideado por Explorer, sigue siendo la misma: incluir una página externa dentro de otra, pero en este caso el marco puede quedar totalmente integrado en la página contenedora. Es como un include. La descripción de este elemento es muy parecida a los frames: es necesario decir de donde viene la página y como se ha de ver el marco (bordes, márgenes scroil...) Esto se hace mediante los parámetros ya vistos:

`NAME`	Asigna un nombre a un marco, de esta manera luego podemos usarlo como destino de un enlace.
`ALIGN`	Alineación del marco respecto al texto que lo rodea (botton, right, left, middle)
`SRC`	Indica la URL del documento HTML que ocupará el marco.
`HEIGHT`	Altura del marco
`WIDTH`	Anchura del marco
`FRAMEBORDER`	Ssi lo igualamos a cero el borde de este marco desaparece
`SCROLLING`	Coloca o no las barras de scroll. Su valor es por defecto `AUTO`, aparecerán si son necesarias. Las otras opciones que tenemos son `YES` o colocarlas y `NO`, no ponerlas.
`MARGINWIDTH`	Permite cambiar los márgenes horizontales dentro de un marco. Se representa en pixels.
`MARGINHEIGHT`	Igual al anterior pero con márgenes verticales.
`allowtransparency`	Si es true La página origen puede tener como color de fondo transparent.

arriba

Acceso a otros marcos

Si leístes la sección dedicada a los enlaces recordarás que cuando pulsas un enlace en la ventanda del navegador aparecerá otra página, pero podíamos colocar el atributo target para hacer que la nueva página se abriera en otra ventana. Pues bien esta otra ventana puede ser otro marco. Así en un marco puedo colocar un enalce que abra la página en otro marco de la misma página.

Este parámetro se puede colocar en tres etiquetas: <A>, <AREA> y <BASE>. En las dos primeras sirve para indicar el marco en el que abriremos ese enlace en particular y el último modificaremos el marco en el que por defecto se nos muestran todos los enlaces.Para indicarle el marco que deseamos le asignaremos el nombre del mismo. Así, en los ejemplos anteriores, si en el marco llamado indice tenemos un enlace que queremos se abra en el marco principal pondremos:

<A HREF="pagina.html" TARGET="principal">

También existen cuatro nombres reservados que podremos utilizar en el parámetro TARGET:

arriba