|
|||||
|
|
|
|
|
|
|
|
||||
|
|
||||
|
|||||
Uso de los Frames (I)
La técnica de los frames ha sido una de las mas empleadas a la hora de construir páginas web, debido a la facilidad que tiene para crear ventanas independientes en las que cargar páginas a partir de menús. Hasta la introducción de HTML dinamico fué la única herramienta de que disponíamos para estos fines.
Sin duda su uso nos facilita mucho la navegación y la presentación en un sitio web, aunque también origina muchos problemas secundarios.
Entre los principales usos que podemos dar a los frames en nuestras páginas se encuentran:
* Menús de navegación.
Podemos crear con frames un sistema de navegación por nuestras páginas mediante un marco lateral en el que situamos enlaces y un marco principal en el que se iran cargando las páginas llamadas.
El esquema de construcción puede ser crear tres marcos: uno superior fijo, en el que podemos situar nuestro logo y/o un bannner o mensaje, otro lateral con el menu y otro central para cargar las páginas.
Para conseguir esto debemos crear 4 páginas web:
1) página index.html con la definición de los frames.
2) página top.html con el logo, banner , etc.
3) página menu.html con los enlaces
4) página de principal.html de entrada incial en el frame central.
Mas las diferentes páginas de nuestro sitio web, que iremos llamando desde el menú
lateral y cargando en el frame central.
El código a crear sería del tipo:
página index.html
<html>
<head>
</head>
<frameset rows="18%,*">
<frame name="superior" src="arriba.html" marginwidth="10" marginheight="10" scrolling="no" frameborder="1">
<frameset cols="19%,*">
<frame name="menu" src="menu2.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
<frame name="ventana" src="central_1.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
<frameset>
<frameset>
</html>
página menu.html
<html>
<head>
</head>
<body>
<a href="central_1.html" target="ventana">página 1ª</a>
<a href="central_2.html" target="ventana">página 2ª</a>
</body>
</html>
y luego creamos arriba.html, que es una página simple con una imagen como logo y un
texto aclarativo, y central_1.html y central_2.html que son dos páginas que contendran aquellos
elementos web que deseemos.
ver resultado.
Como podemos ver, al pinchar sobre el enlace "página 1ª" lo que hacemos es cargar en el frame central dicha página, y lo mismo ocurre al pinchar el enlace "página 2ª", con lo que sustituimos el contenido de diho frame. Y esto podemos hacerlo con todos los enlaces y páginas que deseemos.
Si hablamos de proporciones de frames y ventana, lo mas común es utilizar aproximadamente el cuarto izquierdo de la página para el índice fijo y los tres cuartos restantes para la información, en el caso de que sólo haya dos frames verticales, y si tenemos tres frames, como en el ejemplo, aproximadamente el quinto/sexto superior de la página para el encabezado con el logo, y de lo que resta, el cuarto izquierdo es para el menú y los tres cuartos derechos para la información.
* a partir de este esquema basico podemos extender las utilidades del menú mediante
frames. Por ejemplo, podemos hacer que al pinchar el enlace del menú se nos cambie a la vez tanto el
contenido de la ventana central como el de el marco superior, para conseguir así mostrar un mensaje o
banner diferente para cada enlace pulsado. Para poder hacer esto necesitamos una función JavaScript actuando
en la página menu.html y varias páginas que se vayan alternando tanto en el frame superior como en
el central.
Ejemplo.- ( menu.html)
<html>
<head>
<SCRIPT language="JavaScript" type="text/javascript">
<!--
function twoinone(nr){
if (nr==1){
parent.superior.location.href="superior1.html"
parent.ventana.location.href="a.html"
}
if (nr==2){
parent.superior.location.href="superior2.html"
parent.superior.location.href="b.html"
}
}
//-->
</SCRIPT>
</head>
<body>
<a HREF="JavaScript:twoinone(1)">Link 1</a>
<a HREF="JavaScript:twoinone(2)">Link 2</a>
</body>
</html>
ver resultado.
* Y siguiendo con esta técnica podemos imaginar cualquier combinación para montar
el sistema de navegación de nuestro sitio web. Podemos montar dos frames laterales, uno con el menú
y otro con información o enlaces relacionados.
Ejemplo.-
<html>
<head>
</head>
<frameset rows="18%,*">
<frame name="superior" src="superior.html" marginwidth="10" marginheight="10" scrolling="no" frameborder="0">
<frameset cols="16%,*">
<frame name="menu" src="menu.html" marginwidth="10" marginheight="10" scrolling="no" frameborder="0">
<frameset cols="85%,*">
<frame name="ventana" src="principal.html" marginwidth="10" marginheight="10" scrolling="no" frameborder="0">
<frame name="lateral" src="enlaces1.html" marginwidth="10" marginheight="10" scrolling="no" frameborder="0">
</frameset>
</frameset>
</frameset>
</html>
ver resultado.
* Podemos también utilizar la técnica de los frames flotantes para situar uno en una zona en concreto de nuestra página y cargar en él, mediante enlaces, diferentes páginas. Pero nos encontramos entonces con la limitación de Nestcape, que no permite que los <ILaYER> tengan barra de scroll, con lo que deberemos entonces fijar un tamaño de marco y tener en cuenta que la página que se carge dentro no exceda este tamaño, porque entonces no se vería completa. Con Explorer no tendremos este problema, ya que si el contenido excede al marco aparecera una barra de deslizamiento que nos permitira ver todo el contenido.
Y así sucesivamente, hasta donde la imaginación nos lo permita.
 |
 |