12. Frames flotantes
Los frames flotantes son muy parecidos a los que hemos visto hasta ahora, siendo su principal diferencia que pueden ser insertados en cualquier lugar de una página web, y su función ya no será dividir la ventana del navegador en varias partes, sino insertar en medio de un documento HTML el contenido de otro en un área del tamaño que indiquemos.
 | Los frames flotantes fueron originalmente una extensión de Internet Explorer que posteriormente pasó a formar parte de el estándar HTML 4.0. Casi todos los navegadores usados actualmente lo soportan con la excepción de Netscape Navigator 4.x. |
Para crear frames flotantes debemos usar la etiqueta IFRAME que significa Inline Frame por su similitud con las imágenes inline que se insertan en cualquier lugar de la página con la etiqueta IMG. La etiqueta IFRAME es un contenedor, esto es, está formada por una instrucción de inicio, <<IFRAME>>, donde se especifican todos las características del frame por medio de atributos, y una instrucción de fin, </</IFRAME>>. Entre estas dos instrucciones se puede incluir código alternativo para aquellos navegadores que no soporten los frames flotantes. Los que si lo hagan ignorarán dicho código. Dicho esto ya podemos escribir el código (de manera general) necesario para insertar un frame flotante:
<IFRAME ...>
...Código alternativo...
</IFRAME>
|
Este código puede ser insertado en cualquier parte del cuerpo de una página. Esto quiere decir que para insertar un frame flotante no es necesaria ser una página especial para poder insertar frames. También es importante destacar que podemos insertar tantos frames flotantes como queramos.
12.1. Atributos de los frames flotantes
En el código anterior incluimos tres puntos suspensivos en el interior de la instrucción <FRAME>, estos representan los atributos que debemos usar para indicar el documento HTML donde se encuentra el contenido que queremos insertar en el frame flotante, el tamaño de éste, el alineamiento y otras características variadas.
El atributo SRC es de uso obligatorio y toma como valor la dirección URL, absoluta o relativa, del documento HTML que servirá como contenido. Conocido este atributo ya podemos escribir un primer ejemplo de una página web con un frame flotante:
<HTML> <HEAD> <TITLE>Frames flotante</TITLE> </HEAD> <BODY> <H2>A continuación vemos un ejemplo de un frame flotante:</H2> <IFRAME SRC="doc.htm"> Tu navegador no soporta frames flotantes, para ver el contenido ve a <A HREF="doc.htm">doc.htm</A> </IFRAME> </BODY> </HTML> |
A continuación guardamos este archivo con el nombre iframe.htm, por ejemplo, y creamos el archivo doc.htm con un código HTML sencillo (nosotros hemos incluido un poco de texto, una imagen y un fondo azul) y visualizamos iframe.htm con Explorer obtendremos el resultado de la figura 8.31.
Figura 181. Los frames flotantes nos permiten insertar un documento HTML completo en una página Web.
Unas barras de desplazamiento delatan la presencia de un frame. Un aspecto a destacar de esta figura es que Explorer asigna un tamaño por defecto a dicho frame en el que mostrará todo el contenido del documento HTML que le hayamos indicado independientemente de lo largo que este sea.
Si esta misma página es visualizada por un navegador sin soporte para frames flotantes, por ejemplo Netscape Navigator 4.0, se mostraría el código que hemos introducido entre la instrucción de inicio y la de fin, como vemos en la figura 8.32.
Figura 182. Los navegadores que no soporten frames flotantes mostrarán el código alternativo incluido entre las instrucciones <<IFRAME>> y </</IFRAME>>
Además del atributo SRC la etiqueta IFRAME tiene los siguientes:
- NAME
Este atributo nos permitirá asignarle un nombre al frame de manera que podamos referirnos a él por ejemplo para usarle como destino de un enlace usando el atributo TARGET.
- WIDTH y HEIGTH
En la figura 8.30 hemos visto que Internet Explorer asignaba un tamaño por defecto al frame flotante. Usando estos dos atributos podremos indicar la anchura y altura respectivamente que no queramos. El valor dado será interpretado como un número en pixeles. Si en el código usado para obtener dicha figura añadimos un tamaño lo suficientemente grande desaparecerá la barra de desplazamiento.
- FRAMEBORDER
Este atributo funciona de igual manera que en los frames normales: sirve para quitar y poner los bordes. Escribiendo FRAMBORDER="0" en el ejemplo realizado anteriormente obtenemos el resultado de la figura 8.33, en la que vemos que el borde del frame ha desaparecido. Sin embargo no hemos ampliado el tamaño del frame con los atributos WIDTH y HEIGHT con lo que el documento es más grande que el espacio asignado y la barra de desplazamiento sigue ahí.
- SCROLLING
Este atributo nos permitirá quitar o mostrar la barra de desplazamiento. Puede tomar tres valores:
- value
Es el valor por defecto e indica que la barra de desplazamiento sólo será mostrada si es necesario (es decir si el documento HTML completo no cabe en el espacio reservado al frame)
- yes
significa que las barras de desplazamiento deben mostrarse siempre
- no
indica que no se mostrarán nunca.
- HSPACE y MARGINWIDTH
Al igual que ocurría con las imágenes se puede especificar un margen alrededor del frame flotante. Con estos atributos concretos indicaremos la distancia mínima en pixeles que debe haber entre el frame y cualquier otro elemento que esté a su derecha o izquierda (margen horizontal). Es decir, sirve para especificar la anchura del margen. La única diferencia entre ambos atributos es que MARGINWIDTH es el nombre aceptado por el estándar y HSPACE está considerado como una extensión de Explorer.
- VSPACE y MARGINHEIGHT
Con estos atributos indicaremos la altura en pixeles del margen del frame. Al igual que antes MARGINHEIGHT es el nombre aceptado por el estándar y VSPACE está considerado como una extensión de Explorer.
- ALIGN
Permite alinear el frame respecto a la ventana del navegador y respecto al resto de elementos de la página. De nuevo, este atributo funciona exactamente igual que con las imágenes y puede tomar los mismos valores: left, middle, right, top y bottom.
En la figura 8.34 podemos ver un ejemplo con dos frames flotantes uno alineado a la izquierda (ALIGN="left") y el otro a la derecha (ALIGN="right"). En el frame izquierdo hemos incluido un margen de 100 pixeles (MARGINWIDTH=100) y en el derecho hemos quitado la barra de desplazamiento (SCROLLING=no).
- BORDER
Este atributo es una extensión de Explorer y tiene la misma función que el atributo del mismo nombre de la etiqueta FRAME, indicar el grosor en pixeles del borde que delimita el frame.
- BORDERCOLOR
Con este atributo podremos cambiar el color del borde. Es, al igual que el anterior, una extensión de Explorer no aceptada por el estándar HTML 4.0.
Figura 183. Usando FRAMBORDER=0 podemos eliminar el borde del frame. Sin embargo si el contenido no cabe en frame la barra de desplazamiento sí se mostrará.
Figura 184. Con los atributos ALIGN, MARGINWIDTH y SCROLL podremos controlar las diversas características de los frames flotantes.
Con esto terminamos el aprendizaje del uso de frames en páginas web. En el próximo capítulo del curso nos adentraremos en el mundo de los sonidos, vídeos y otros contenidos multimedia en el World Wide Web.