Frames en HTML
Frames.
Con los frames se pueden mostrar más de un archivo HTML en la misma ventana del navegador.
Podemos hacer que los frames interactuen, por ejemplo al presionar un enlace en un frame podemos cargar una página en otro frame.
Ejemplo.
1. Implementar dos frames.
2. <html>
3. <head>
4. <title>prueba de frames</title>
5. </head>
6. <frameset cols="20%,80%">
7. <frame src="pagina2.html">
8. <frame src="pagina3.html">
9. <noframes>
10. <p>El navegador no soporta frames</p>
11. </noframes>
12. </frameset>
13. </html>
Pagina 2.html
<html> <head> <title>prueba de frames</title> </head> <body> <h2>Frame 1</h2> </body> </html> Pagina3,html
<html> <head> <title>prueba de frames</title> </head> <body> <h2>Frame 2</h2> </body> </html> 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 ficheros HTML de los que venimos 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 las particiones de la ventana del navegador y la etiqueta <FRAME> indica cada uno de los cuadros donde colocaremos una página independiente.
Las particiones que se pueden hacer con un <FRAMESET> son en filas o columnas. Por ejemplo, podríamos indicar que deseamos hacer una división de la página en dos filas, o dos columnas, tres filas, etc. Para indicar tanto la forma de partir la ventana -en filas o columnas- como el número de particiones que pretendemos hacer, se ha de utilizar el atributo COLS o ROWS. El primero sirve para indicar una partición en columnas y el segundo para una partición en filas.
En el atributo COLS o ROWS -sólo podemos elegir uno de los dos- colocamos entre comillas el número de particiones que deseamos realizar, indicando de paso el tamaño que va a asignarse a cada una. Un valor típico de estos atributos sería el siguiente:
cols="20%,80%" Indica que se deben colocar dos columnas, la de la izquierda tendría un 20% del espacio total de la ventana y la de la derecha un 80%. rows="15%,60%,25%"
Así indicamos que deseamos tres filas, la de arriba con un 15% del espacio total, la del medio con un espacio correspondiente al 60% del total y la de abajo con un 25%. En total suman el 100% del espacio de la ventana.
Además del porcentaje para indicar el espacio de cada una de las casillas, también podemos indicarlo en pixeles.
De esta manera. cols="200,600" Para indicar que la columna de la izquierda debe tener 200 pixels de ancho y la de la derecha 600. Esto está bien si nuestra ventana tiene 800 pixels de ancho, pero esto no tiene por qué ser así en todos los monitores de los usuarios, por lo que este modo de expresar los marcos es importante que se indique de la siguiente manera.
cols="200,*" Así indicamos que la primera columna ha de medir 200 pixels y que el resto del espacio disponible -que será mayor o menor dependiendo de la definición de la pantalla del usuario- se le asignará a segunda columna.
rows="100,*,12%" Definimos tres filas, la primera con 100 pixels de ancho, la segunda con el espacio que sobre de las otras dos, y la tercera con un 12% del espacio total.
cols="10%,50%,120,*" Estamos indicando cuatro columnas. La primera del 10% del espacio de la ventana, la segunda con la mitad justa de la ventana, la tercera con un espacio de 120 pixels y la última con la cantidad de espacio que sobre al asignar espacio a las demás particiones.
Una vez hemos indicado el número de filas o columnas y el espacio reservado a cada una con la etiqueta <FRAMESET>, debemos especificar con la etiqueta <FRAME> la procedencia de cada uno de los frames en los que hemos partido la ventana.
Para ello, disponemos del atributo SRC, que se ha de definir para cada una de las filas o columnas.
De esta manera. <FRAME src="marco1.html">
Ejemplo. Creación de una estructura simple
<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>
pagina1.html.
Es la página que contiene el titular de la web. Simplemente se trata de una etiqueta <H1> de titular. La página tiene su propio título, con la etiqueta <TITLE>, que no se podrá visualizar por ningún sitio a no ser que se muestre esta página sin los frames, ya que las páginas dentro de los marcos heredan el título de la definición de los frames.
<html>
<head>
<title>Titulo Carnicería Pepe</title>
</head>
<body bgcolor="#DECC09">
<h1 align=center>Carnicería PEPE</h1>
</body>
</html>
pagina2.html.
Es la página que se presentará en el área principal de la definición de frames, es decir, la página que tiene más espacio para visualizarse y donde pondremos los contenidos de la web. En este caso muestra un mensaje de bienvenida a la web, que hará las veces de portada.
<html>
<head>
<title>Portada de Carnicería PEPE</title>
</head>
<body bgcolor="#CF391C" text="#ffffff">
<h1 align="center">Bienvenidos a nuestra web</h1>
<br>
<br>
La carnicería PEPE, con más de 100 años de experiencia, es la mejor fuente de carnes de vacuno y cerdo de la comunidad.
<br>
<br> Tanto en invierno como en verano puede encontrar nuestras ofertas de temporada de primera calidad. </body>
</html>
pagina3.html.
En esta página se mostrará la barra de navegación por los contenidos del sitio. Contiene enlaces 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 página de contacto, etc.
<html>
<head>
<title>Barra de navegación de carnicería PEPE</title>
</head>
<body bgcolor="#AC760E" link="ffffcc" vlink="ffffcc">
<div align="center"> <b>
<a href="pagina2.html">Portada</a> |
<a href="productos.html">Productos</a> |
<a href="contacto.html">Contacto</a>
</b>
</div>
</body>
</html>