Frames en HTML
Aug 29
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.
