Marcos o frames

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 podemos olvidar que la pantalla del monitor está físicamente limitada (no digamos de un móvil).

Para este elemento considera la página dividida en una cuadrícula, como las celdas de una tabla, cada cuadro de esta cuadrícula será un marco. Cada marco poseerá su propio contenido (una página web), sus propios bordes y sus 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 complejo 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 siguiente código y ve los resultados en este ejemplo.

Fíjate las diferencias y coincidencias con una página html habitual: en lugar de body ahora tenemos una etiqueta frameset.

El frameset (conjunto de marcos) engloba varias páginas independientes dentro de la página contenedora. Las zonas ocupadas por estas ventanas se delimitan con los atributos cols y 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>).

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, 80 pixels. El tercero necesita 300, en total tenemos 380 ocupados luego quedan 800-380, 420 pixels libres. Los otros se repartirán este espacio en función de los asteriscos: 420/4 = 105 pixels para el de un asterisco y 315 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 asteriscos.

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í:

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

El elmento 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

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

Parámetro	Uso
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.

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:

Parámetro	Uso
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.

Un iframe se incorpora a la página web de manera similar a cualquier otro elemento, por lo que son mucho más sencillos de utilizar:

<iframe src="/ayuda.html" width="400" height="50"></iframe>

Aquí tienes el marco funcionando

Si leíste 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:

_top

Elimina todos los marcos existente y muestra la nueva página en la ventana original, sin marcos.

_blank

Muestra la nueva página en una ventana nueva y sin nombre del navegador.

_self

Muestra la nueva página en el marco donde está declarado el enlace.

_parent

Muestra la nueva página en el <frameset> que contiene al marco donde se declara el enlace.

En el ejemplo que pusimos de <frameset> anidados, una enlace situado en el marco ejemplo cuyo parámetro TARGET fuese igual a _parent eliminaría la separación entre los marcos ejemplo y principal y mostraría en ese nuevo marco la nueva página.