Material facilitado por Ing. Gerardo Josué Portillo ([email protected]) Los Frames en el HTML ¿Qué son los Frames? La llegada del HTML 4 trajo consigo una gran cantidad de nuevos elementos muy importantes que vinieron a revolucionar la forma en que diseñamos páginas WEB, uno de ellos fueron los FRAMES. La palabra inglesa Frame en lenguaje español significa Marco, y se le denomó de esta forma ya que su lógica es la de separar un sitio WEB en varias subpáginas. Los Frames son una manera de partir la página en distintos espacios independientes los unos de los otros, de modo que en cada espacio se coloca una página distinta que se codifica en un archivo HTML distinto. En el pasado muchos navegadores de Internet no era compatibles con ellos, pero en la actualidad la gran mayoría debe soportarlos (excepto por algunos dispositivos móviles que aún poseen navegadores fuera de estándar). En la página de la imagen (www.mancomunidadguisayote.hn )se han utilizado frames, para que cuando se haga clic en alguno de los links del menú solo será cargado lo que aparecen en el panel del centro, así se evita volver a cargar todo el menú y el título de la página.
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Material facilitado por Ing. Gerardo Josué Portillo ([email protected])
La Lógica de los Frames
Cada una de las áreas en las que se parte la página con Frames son independientes y han de
ser codificadas con archivos HTML también independientes. Como resultado, cada frame o
marco contiene las propiedades específicas que le indiquemos en el código HTML a
presentar en ese espacio. Así mismo, y dado que cada marco es independiente, tendrán sus
propias barras de desplazamiento, horizontales y verticales, por separado.
Una de las principales ventajas de la programación con frames viene
derivada de la independencia de los distintos frames, pues podemos
navegar por los contenidos de nuestro web con la barra de navegación
siempre visible, y sin que se tenga que recargar en cada una de las
páginas que vamos visitando.
Existen en la web muchas páginas que contienen frames y seguro que todos hemos tenido
la ocasión de conocer algunas. Se suelen utilizar para colocar en una parte de la ventana
una barra de navegación, que generalmente se encuentra fija y permite el acceso a
cualquier zona de la página web.
Un ejemplo de las áreas que se pueden construir en una construcción de frames se puede
ver en las imágenes:
Explicación Básica de los Frames
Las páginas web que están hechas con frames se componen de una declaración de los
marcos y tantas páginas en formato HTML corriente como distintas divisiones hemos
definido. La declaración o definición de frames es la única página que realmente debemos
aprender, puesto que las páginas que se van a visualizar en cada uno de los cuadros son
archivos HTML de los que hemos venido aprendiendo anteriormente en este manual.
Dicha definición está compuesta por etiquetas <FRAMESET> y <FRAME>, con las que se
indicamos la disposición de todos los cuadros. La etiqueta <FRAMESET> indica lasparticiones de la ventana del navegador y la etiqueta <FRAME> indica cada uno de los
cuadros donde colocaremos una página independiente.
Material facilitado por Ing. Gerardo Josué Portillo ([email protected])
Ejemplo de un Frame Simple
Vamos a detallar un ejemplo sobre cómo se crearía la definición de frames de la imagen
que podemos ver a continuación:
El código de dicho Frame es el siguiente:
index.html
<html>
<head>
<title>Definición de Frames</title>
</head>
<frameset rows="15%,*,75">
<frame src="pagina1.html">
<frame src="pagina2.html">
<frame src="pagina3.html">
</frameset>
</html>
Para terminar de comprender este ejemplo:
1. El título de la definición de frames es el que hereda toda la página web, por ello, noes buena idea titular como "definición de frames" por ejemplo, ya que entonces toda
nuestra página se titularía así y seguramente no sea muy descriptivo. Si estuviésemos
haciendo una página para la Proyectos UTH sería mejor titular a la definición de
frames algo como "Proyectos de la UTH".
2. La página que define los frames no tiene BODY. HTML puede arrojarnos un error si lo
incluimos.
3. Las páginas "pagina1.html", "pagina2.html"y "pagina3.html" han de escribirse en
archivos independientes con el nombre indicado. En este ejemplo, dichas páginas
deberían encontrarse en el mismo directorio que la declaración de frames. Si
Material facilitado por Ing. Gerardo Josué Portillo ([email protected])
</body>
</html>
pagina3.html
En esta página se mostrará la barra de navegación por los contenidos del sitio. Contieneenlaces que deberían actualizar el contenido del área principal de la declaración de frames,
para mostrar los distintos contenidos del sitio, por ejemplo, la portada, los productos, la
Material facilitado por Ing. Gerardo Josué Portillo ([email protected])
Atributos Avanzados del Tag FRAME
Aparte de la creación de los marcos propiamente dicha, existen muchos
atributos con los que configurar su apariencia. Para ello, tanto la etiqueta
<frameset> como <frame> admiten diversos atributos que permiten especificarla forma de elementos como los bordes de los frames, el margen, la existencia o
no de barras de desplazamiento, etc.
Atributos para la etiqueta FRAMESET
Ya hemos conocido el atributo cols y rows, que sirven para indicar si la distribución en
marcos se hará horizontalmente o verticalmente. Sólo se puede utilizar uno de ellos y se
iguala a las dimensiones de cada uno de las divisiones, separadas por comas:
1. border="número de pixels"
Permite especificar de manera global para todo el frameset el número de pixels
que ha de tener el borde de los frames.
2. bordercolor="#rrggbb"
Con este atributo podemos modificar el color del borde de los frames, también demanera global a todo el frameset. El color puede definirse en valor hexadecimal
(#FF00FF) o en valor de constante (Maroon por ejemplo.).
3. frameborder="valor"
Sirve para mostrar o no el borde del frame. Sus posibles valores son:
"yes" (para que se vean los bordes)
"no" (para que no se vean los bordes, en la práctica elimina el borde, pero
permanece una línea de separación de los frames.)
4. framespacing="número de pixels"
Para determinar la anchura de la línea de separación de los frames. Se puede
utilizar en Internet Explorer y junto con el atributo frameborder="0" sirve para
Material facilitado por Ing. Gerardo Josué Portillo ([email protected])
declaración de frames demasiado rígida, que puede verse mal en
algún tipo de pantalla.
6. noresize
Este atributo no tiene valores, simplemente se pone o no se pone. En caso de
que esté presente indica que el Frame no se puede redimensionar. Como hemospodido ver, al colocar el ratón sobre el borde de los marcos sale un cursor que
nos señala que podemos mover dicho borde y redimensionar así los frames. Por
defecto, si no colocamos nada, los marcos si se pueden redimensionar.
7. frameborder="valor"
Este atributo permite controlar la aparición de los bordes de los frames. Los