¿Qué son?
Son una forma de insertar varias páginas en una sola. Mal utilizadas pueden echar a perder la estética de una página, dado que no hay que olvidar que los monitores están físicamente limitados. Cada marco que compone la página funcionará como una ventana independiente, teniendo sus propios bordes, barra de scroll etc. Su ubicación en la página será rígida, por lo tanto no podremos moverlos a nuestro antojo. Si colocamos cuatro, se dividirá en cuatro partes y se colocarán en cada cuadrante de la pantalla, si tenemos dos, ésta se dividirá a la mitad. Ésta es la etiqueta pertinente:
<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>
Hay algunas diferencias notables en el código comparándolo con otro html. Una bastante
llamativa es que carece de la etiqueta body y, en su lugar, aparece frameset. Cada frameset
es una página o ventana dentro de la página contenedora, que estará definida por los
parámetros cols o rows. En este ejemplo, se trata de dos marcos, uno junto al otro,
uno ocuparía el 20% y otro el 80% de la ventana 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>). Aunque, actualmente no hay navegadores que no soporten marcos
ya que están actualizados para ello.
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 presentar los tamaños:
1)Porcentajes: podemos definir el tamaño de un marco por el porcentaje de espacio total disponible (el ancho o alto de la ventana del navegador)
2)Absolutos: podemos especificar su ancho y alto en píxeles.
3)Calculado: Podemos colocar el ancho o alto de un marco y dejar que el tamaño del otro lo calcule el navegador, usando para 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% (espacio sobrante 100-10-30). Si decidimos colocar el asterisco en varios marcos, el espacio se dividirá equitativamente, pero también podemos hacer un marco que sea el doble o triple de otro. Así, un marco con un espacio 3* será tres veces más grande que el que contenga un asterisco. Todo esto se puede combinar, por ejemplo:
<FRAMESET COLS="10%,*,300,3*>
Supongamos que el ancho total de una ventana son 800 pixels. El primer marco ocupará el 10%, es decir, 84 px, el tercero necesita 300, en total tenemos 384 px ocupados, por lo tanto, quedan 416 px libres. Los otros marcos se repartirán el espacio en función de los asteriscos: 416/4 = 104 px para el de un asterisco y 312 para el otro. En total tenemos ocupados los 800 px.
Lo más recomendable es dejar un marco calculado, es decir, con asterisco.
Si queremos que los marcos se distribuyan de una manera más irregular, podemos anidarlos, o lo que es lo mismo, un marco que contenga una página que contenga marcos. Esto se hace poniendo otro <FRAMEST> donde colocaremos la etiqueta <FRAME>. de esta manera:
<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>
Éste frame concretamente se usa para dividir la página en distintas secciones, por lo tanto
no se escribe el body en el html, si no, daría error.
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. |
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. |
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:
_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 ejemplocuyo 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.
.jpg)
.jpg)
