Actualizado el 14-01-2007
versión para imprimir
¿que son frames?
Mediante frames (marcos) podemos dividir la ventana del navegador en varias
partes (marcos) y visualizar en cada uno de ellos un documento o página
diferente. Es posible ademas interactuar entre ellos, siendo un ejemplo típico
el establecer una lista de enlaces en un marco, que al pulsar cargan el
documento de destino en un marco distinto.
Los marcos son una herramienta
poderosa, que tiene sus inconvenientes. Al tratarse de varios documentos, la
carga puede demorarse. No todos los navegadores pueden manejarlos, si bien
usualmente no debería haber problemas a partir de la versión 3.0 de los mas
populares. Y su uso está actualmente sujeto a discusión ignorándose si en un
futuro desaparecerán de la recomendación xhtml.
En definitiva, deberás
valorar si los marcos son realmente necesarios para tu página, siendo lo cierto
que están desapareciendo de la mayoría de las grandes páginas comerciales.
Estructura
Para crear los marcos es preciso crear una página htm que describa su número y caracteristicas. Por ejemplo, para una página con dos marcos, izquierdo y derecho, necesitamos TRES documentos html: un documento maestro que defina los marcos, y otros dos documentos que son los que deben cargarse en los marcos izquierdo y derecho.
etiquetas de la pagina con marcos
A diferencia de lo visto hasta ahora, nuestro nuevo documento html no tendrá dos secciones head y body, sino head y frameset. Es dentro de la sección frameset, y solo para el caso que establezcamos una subsección noframes (donde indicaremos un texto alternativo para los navegadores que no soporten frames o tengan la opción deshabilitada) donde colocaremos nuestro body. Veamos como quedaría:
<html> <head> <title>nuestra página con marcos</title> </head> <frameset cols="20%, 80%"> <frame src="documento1.htm" name="marcoizq"></frame> <frame src="documento2.htm" name="marcodch"></frame> <noframes> <body>texto que solo se visualizara si el navegador no admite frames</body> </noframes> </frameset> </html>
Advierte que dentro de frameset hemos incluido un atributo cols="", donde separadas con una coma, hemos especificado la anchura de cada marco, mediante porcentaje. Con sendas etiquetas <frame src=""></frame> especificamos el documento origen (source) que se visualizará en cada frame
la etiqueta frameset
Mediante esta etiqueta, como acabamos de ver, señalamos el numero de frames
de nuestra página. Podemos establecer marcos verticales con el atributo
cols="" o horizontales con el atributo rows="".
El
número de frames vendrá determinado por la especificación de su anchura,
separado por comas, que podemos expresar en pixels (por ejemplo
"360,120"), porcentajes (por ejemplo "30%,70%"), o especificando un solo
frame y el otro en el porcentaje restante mediante el signo * (por
ejemplo, "360,*", o "30%,*").
Otros atributos que admite esta etiqueta son
frameborder="", que admite los valores "0", "1" "yes", "no". Naturalmente los valores "0" o "no"determinan que no se aprecie un borde
separador entre marcos, y "1" y "yes", la existencia de este borde.
Con
framespacing="" y su valor admisible solo en pixels, podemos
especificar un espacio entre frames
Y con bordercolor=""
el color del borde separador
la etiqueta frame
Necesitamos una etiqueta frame para cada uno de los marcos establecidos con
frameset. Sus atributos son:
src="", con el
que indicamos el documento html que debe cargar ese marco. Admite URLS absolutas
o relativas.
name="": este atributo es obligatorio si
queremos posteriormente cargar la página desde otro documento html (con el
atributo target=""). En definitiva, si queremos que al pulsar un
link en un frame, el enlace se cargue en un frame distinto, debemos apuntar el
ancla a dicho frame identificado por el nombre dado en
name="".
marginwidht="", opcional, permite
establecer la separación entre el contenido del frame y su borde. Especificado
en pixels.
marginheight"", opcional, determina el espacio
vertical entre el contenido del frame y su borde. Especificado en pixels.
scrolling="", opcional, determina si queremos o no que
aparezca una barra de desplazamiento vertical en el frame, cuando por su tamaño
no quepa en la ventana del navegador. Sus valores son "yes",
"no", o "auto", siendo este el valor por defecto, que hace
aparecer la barra de scroll solo cuando el contenido del frame excede en
vertical del tamaño de la pantalla.
noresize: por
defecto, el usuario podrá estrechar o ampliar la anchura de los marcos sin mas
que arrastrar el borde a uno u otro lado. Si especificamos noresize eliminamos
esta posibilidad.
la etiqueta noframes
como ya hemos dicho, dentro de frameset podemos incluir una pareja de etiquetas noframe, cuyo contenido será ignorado por aquellos navegadores que soporten marcos; al contrario, los navegadores que no soporten marcos, o tengan esta posibilidad deshabilitada, ignoraran todo lo relativo a los mismos, y si visualizarán el contenido especificado dentro de las etiquetas noframe. Estas admiten la pareja de etiquetas body, y desde luego se recomienda fervientemente esta posibilidad para especificar un contenido alternativo.
anidando frames
Podemos combinar en nuestra página cualquier numero (razonable) de frames verticales y horizontales. La técnica es establecer el numero de frames deseados, verticales o horizontales, en la etiqueta frameset, y luego anidar en el lugar donde iria una de las etiquetas frame una nueva etiqueta frameset.. Lo veremos mejor con ejemplos. Supongamos que deseamos una página con tres frames: uno horizontal, que abarque todo el ancho de la pantalla, y el espacio de debajo resultante, con dos frames verticales. He aqui como hariamos:
<html> <head> <title>pagina con tres frames</title> </head> <frameset rows="20%,80%"> <frame src="framesuperior.htm" name="arriba" /> <frameset cols="25%,75%"> <frame src="izquierda.htm" name="izquierda" /> <frame src="derecha.htm" name="derecha" /> <noframes> <body> aqui contenido para navegadores sin frames </body> </noframes> </frameset> </frameset> </html>
enlaces entre frames
Cuando creamos enlaces entre frames, es decir, cuando queremos que al pulsar
un link el documento se cargue en el marco vecino, necesitamos incluir en el
ancla del enlace un nuevo atributo: target="", que apuntará al
frame deseado, identificandolo mediante el nombre especificado con
name="" en su etiqueta frame.
Recordamos uno de
nuestros ejemplos de marcos:
<html> <head> <title>nuestra página con marcos</title> </head> <frameset cols="20%, 80%"> <frame src="documento1.htm" name="marcoizq"></frame> <frame src="documento2.htm" name="marcodch"></frame> <noframes> <body>texto que solo se visualizara si el navegador no admite frames</body> </noframes> </frameset> </html>
Bien, en el frame de la izquierda se cargará el documento1.htm. Supongamos que ese documento debe tener un enlace, que se cargará en el frame derecho. El enlace quedaría así:
<a href="documento3.htm" target="marcodch">documento tres</a>
el atributo target="" nos permite, ademas de especificar el
marco de destino mediante su nombre, estos otros
valores:
target="_top": carga el documento enlazado
ocupando íntegramente la ventana del navegador. Salimos de los
frames.
target="_blank": abre una nueva ventana del
navegador (sin frames) donde carga el documento. En segundo plano permanece la
ventana anterior, con frames.
target="_self": carga el
documento en el mismo marco donde está el enlace pulsado. Es la opción por
defecto.
target="_parent": carga el documento en el frame
"padre" o anterior al que contiene el enlace. Si no lo hay, carga el documento
en ventana completa.