Antes de usar Ajax era un fan de los frames, más concretamente del iframe. Creo que en algunos casos puede ser muy útil en una página, aunque algunos no los recomiendan y los tachan de herejía.
Etiquetas para trabajar con Frames
- <frameset>
- <frame>
- <noframes>
- <iframe>
Empezando con frames
Los frames son etiquetas html que nos permitirán mostrar más de un documento html en la misma pantalla, cada frame mostrará un documento y será independiente del resto.
Podemos definir tantos frames como queramos, tanto en posición vertical (columnas) como horizontal (filas)
Por ejemplo, si queremos dividir nuestra página en dos bloques verticales (columnas) ambas del mismo tamaño, deberías hacer lo siguiente:
<frameset cols=”50%,50%”>
<frame src=”documento1.htm”>
<frame src=”documento2.htm”>
</frameset>
| documento1.html | documento2.html |
Para el tamaño de las columnas, podemos utilizar % o pixels (si queremos pixels bastaría con no indicar nada) según nos convenga.
También podemos utilizar el * como comodín para referirnos al resto de tamaño de la pantalla, veamos diferentes ejemplos:
/*Usando porcentajes*/
<frameset cols=”50%,50%”>
<frameset cols=”75%,20%”>
/*Usando pixels*/
<frameset cols=”300,200″>
/*Usando el comodín*/
<frameset cols=”50%,*”>
Etiqueta <noframes>
Algunos navegadores, como por ejemplo los de los móviles puede que no tengan soporte para frames, por lo que se debe de utilizar la etiqueta <noframes>, la cual mostrará su contenido en caso de que no se puedan mostrar los frames.
Un ejemplo sencillo de una página con 3 columnas y preparada con noframes sería el siguiente
<frameset cols=”15%,60%,25%”>
<frame src=”frame1.htm”>
<frame src=”frame2.htm”>
<frame src=”frame3.htm”><noframes>
<body>Tu navegador no soporta los frames</body>
</noframes></frameset>
Importante acordarse de poner la etiqueta <body></body> dentro de <noframes> y no fuera.
Si queréis hacer vuestras pruebas con frames, pasar por aquí.
Frames verticales y horizontales juntos (Mixto)
El límite de los frames lo pone nuestra imaginación, no sólo podemos tenerlos verticales y horizontales sino que también podemos mezclarlos a nuestro antojo.
Por ejemplo, supongamos que queremos algo así:
| frame1Cabecera.htm | |
| frame2MenuIzquierda.htm | frame3Central.htm |
Podemos ver cómo en nuestra página habría 3 frames, pues para llevarlo a cabo nuestro código sería de esta forma:
<html>
<frameset rows=”50%,50%”>
<frame src=”frame1Cabecera.htm”>
<frameset cols=”30%,70%”>
<frame src=”frame2MenuIzquierda.htm”>
<frame src=”frame3Central.htm”>
</frameset></frameset>
</html>
Propiedad noresize
Por defecto cuando nosotros establecemos frames en una página el visitante puede modificar su tamaño (resize) pero en el caso de que nosotros no queramos darle esta libertad, podemos hacer uso de la propiedad noresize de la siguiente manera.
<frame noresize=”noresize” src=”frame1.htm”>
Cambiar la página de un frame
Ahora que tenemos nuestra página dividida en frames tenemos que aprender cómo movernos de uno a otro y para ello lo primero que tendremos que hacer será darles nombres para poder distinguirlos.
Para asignarle un nombre a un frame lo haremos con el atributo name.
<frame name=”nombreframe1″ src=”frame1.html”>
Ahora, cuando queramos que un enlace cargue algo en ese frame, bastará que en el link indiquemos, mediante el atributo target el nombre del frame destino, en este caso, nombreframe1.
<a target=”nombreframe1″ href=’pagina1.html’>Enlace a Frame 1</a>
Ahora al pulsar sobre el enlace, la página “pagina1.html” se cargará en el frame “nombrefram1“.
Iframe, frame flotante
Se trata de un frame pero “flotante” es decir, no es necesario establecer un <frameset> sino que podemos integrarlo de manera muy sencilla en cualquier parte de nuestra página.
Normalmente es usado para incluir publicidad en nuestras páginas o para introducir partes de otras páginas en las nuestras, pero desde que comenzó a usarse AJAX, los iframes han caído en desuso por razones tanto de usabilidad cómo de comodidad.
Parámetros del iframe
- name
- src
- frameborder (0 -invisible)
- marginwidth
- marginheight
- scrolling (yes|no|auto)
- align (left|center|right|justify)
- height
- width
Uno de los mayores problemas al usarlo es, cómo definirlo para que pase desapercibido con el resto de la página y para ello necesitamos tener en cuenta los parámetros frameborder y background-color.
Con poner el frameborder a 0 evitaremos que se note como un elemento diferente de la página y con el background-color del mismo color que la página será completamente imposible diferenciarlo a simple vista.
<IFRAME scrolling=no src=”http://adplex.biz/ad/view_ad.php” NAME=”Ad” frameborder=”0″ style=”background-color: #000000″></IFRAME>
Es posible que en algunos casos no cuadre bien el contenido dentro del iframe y aparezcan las barras laterales, pero no hay problema, podemos mostrar y ocultar las barras de desplazamiento a nuestro antojo o bien utilizar el parámetro scrolling=no.
[...] nuestra página, las primeras etiquetas que debemos de usar, a no ser que vayamos a utilizar frames, serán [...]
Hola Emilio, me gustaría si te es posible me indicases el código que puede tener esta página http://cinetube.es/peliculas/online2/babylon.html en el fichero http://www.descargasdirectas.name/player-megavideo.php para mostrar totalmente el cuadro del video tapando hasta la parte de arriba.
Gracias anticipadas,
Jesús
Hola Jesús, supongo que lo quieres saber es cómo poner un vídeo a pantalla completa desde una web ¿me equivoco? si es así te aconsejo que leas este hilo.
Hola mi problema es q tengo un menu echo en flash y cuando quiero abrir una pagina en el marco del medio no puedo nose como hacer para q la pagina se abra enel marco del centro y no en el de la izquierda tengo 3 marcos pero con dreamweber nose como asignarle el nombre a cada es decir name si tienen src ej marco1 marco2 marco3 pero no puedo referenciarlos como hago?
gracias saludos
@fabricio: En el dreamweaver no puedo indicarte, pero para mostrar algo en un frame concreto se utiliza el parámetro target sólo tienes que indicarle el nombre del frame, así target=”nombre_frame”
Gracias emilio por tu comentario pero ya habia probado hacer eso y no funciona lo abre en el mismo marco o en una nueva pagina pero no la puedo abrir en el marco central xq mi menu flash es un menu con nombre menu.sfw y esta inscrustado en el marco izquiero no puedo conseguir q los linsk de mi menu flash abran las paginas en el marco central si alguien sabe x favor ayudeme
saludos
@fabricio: ¿Y has probado a poner parent delante de la instrucción? normalmente cuando estás dentro de un frame, si pones .parent accedes a la raíz de la página y desde ahí ya te mueves al frame correcto.
parent.nombre_frame.location.href =”pagina.html”
Busca más información sobre este parámetro.
Gracias sabes no entendia muchas cosas sobre este tema pero gracias a ti e logrado aprender y a que se me aga mas facil gracias-
De nada
me alegro mucho de que te sirviera…
ayuda urgente tengo la sig. linea de codigo
pero me sigue saliendo barra para subir ybajar lainformacio Y no la puedo quitar
No puedo ver la línea, la ejecuta en vez de mostrarla, quita los <> a ver si así la vemos.
wepa!!!
gracias!!
me sirvio de mucho este tutorial!!
mil besos!!
bye
Me alegro
hola, quisiera que me ayudaran, estoy haciendo una pagina con frames y quiero desde un menu del lado izquierdo que me enlace a otra pagina en el espacio mas amplico de la pagina y no desde el menu