Crea tu web, tutor html, css

Marcos o frames

Marcos

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 pa´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.

<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.

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 frames o marcos fijos son una manera de integrar varias páginas web en una sola.

Complican el diseño pero facilitan compartir recursos entre varias páginas.

Actualmente los frmae fijos están desfasados y han desaparecido en HTML 5

Etiqueta

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

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

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

 

Etiqueta

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

ParámetroUso
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.
 

Marcos flotantes

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ámetroUso
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

Los marcos flotantes o iframes son una alternativa a los marcos fijos.

Funcionan como ventanas en las que mostrar otra página web.

Puede colocarse en cualquier parte de la página.

Se comportan como un elemento tipo bloque  (párrafos, divs, tablas) 

Acceso a los 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:

_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.