¿QUÉ SON LOS FRAMES? Cómo ya hemos dicho, los frames nos

Anuncio
¿QUÉ SON LOS FRAMES?
Cómo ya hemos dicho, los frames nos permiten dividir la ventana del
navegador en varias zonas o subventanas completamente independientes
entre sí, como si fueran páginas diferentes, incluso cada una de ellas con sus
propias barras de scroll.
Quizá el secreto de su tremendo éxito (hoy en franca decadencia), es que
pulsando un enlace en una de las zonas podemos cargar un documento en otra
de las zonas de la página. Para entender esto, lo mejor es que veáis un
ejemplo, webmaestro. En esta página, el menú se sitúa a la izquierda y si
pulsas en las distintas opciones, el contenido que cambia es el de la zona de la
derecha. Esto permitía a los programadores controlar los menús de un sitio
web grande en un solo documento, lo ahorra mucho trabajo.
Vamos a explicar siguiendo el ejemplo de Francisco arocena en su
"webmaestro". Así crearemos una página con dos frames. El marco de la
izquierda será nuestro índice. Al acceder por primera vez veremos una página
de presentación. Y al ir pulsando en los enlaces de nuestro índice irá
cambiando el contenido de la derecha.
DOCUMENTO DE DEFINICIÓN DE LOS MARCOS
Para crear un documento con 2 marcos necesitamos un mínimo de 3
documentos HTML
1.- El llamado "documento de definición"
2.- El documento que tiene el contenido del marco izquierdo
3.- El documento con el contenido que aparecerá en el marco derecho.
Qué es el documento de definición de marcos
Es el documento en el que le decimos al navegador: "hola navegador, soy un
documento dividido en trozos, reserva un espacio vertical a la izquierda que
ocupe un 20% de la pantalla. En este espacio vertical vas a cargar este
documento. En el espacio restante que queda a la derecha pues me pones
este otro documento"
Es decir, en el documento de definición definimos:
Cuantas zonas a haber en el documento.
Cómo están distribuidas las zonas dentro del documento.
Qué tamaño tiene cada zona
Qué contenido hay en cada zona
En nuestro ejemplo vamos a tener dos marcos distribuidos en columnas, el de
la izquierda ocupará el 20% del ancho de la pantalla y el de la derecha el 80
restante.
En el marco de la izquierda pondremos el documento "menu.html" y en el
marco de la derecha pondremos el documento "presentación.html"
Además, como muchos navegadores no soportan "frames", añadiremos un
contenido específico dirigido a estas personas para que no se encuentren con
una página en blanco al llegar a nuestra página.
RECUERDA: Al utilizar marcos hay que acordarse de cambiar la DTD del
documento, utilizando la específica para marcos tal y como se muestra en el
ejemplo.
CODIGO index.html
<html>
<head>
<title>mi pagina con frames</title>
</head>
<frameset cols="20%, 80%">
<frame src="menu.html" name="menu">
<frame src="presentacion.html" name="principal">
</frameset>
<noframes>
Nuestra página no puede verse con el navegador que usted
está utilizando, póngase en contacto con nuestro servicio
de atención al cliente en [email protected] y le daremos
toda la información que precise.
</noframes>
</html>
NOTA: los documentos de definición de marcos, no utilizan la etiqueta BODY,
se sustituye por FRAMESET.
<frameset> indicamos el tamaño y la colocación de nuestros marcos.
<frame> indicamos el contenido y el nombre de cada marco
<noframes> proporcionamos un contenido alternativo para todos aquellos
navegadores que no soporten frames.
Aquí hemos definido los marcos en columnas pero también podríamos haberlo
hecho en filas:
CODIGO menu.html
html>
<head>
<title>Margenes</title>
<meta http-equiv="Content-Type" content="text/html"
charset=iso-8859-1">
</head>
<body bgcolor="#FFCCcc" text="#CC3300" link="#666633"
vlink="#669999" alink="#FF6600">
<h2>Menu</h2>
<p><a href="http://www.biografiasyvidas.com/biografia/c/cervantes.htm"
target="principal">Cervantes</a></p>
<p><a href="http://www.biografiasyvidas.com/biografia/a/azorin.htm"
target="principal">Azorín</a> </p>
<p><a href="http://www.biografiasyvidas.com/biografia/u/unamuno.htm"
target="principal">Unamuno</a> </p>
<p><a href="http://www.coopvgg.com.ar/selva/espronceda/biografia.htm"
target="principal">Espronceda</a> </p>
<p><a
href="http://www.biografiasyvidas.com/biografia/d/dario_ruben.htm"
target="principal">Rubén Darío</a> </p>
<p><a
href="http://www.biografiasyvidas.com/biografia/c/castro_rosalia.htm"
target="principal">Rosalía de castro</a> </p>
</body>
</html>
CODIGO presentacion.html
<html>
<head>
<title>Margenes</title>
</head>
<body bgcolor="#FFCC99" text="#CC3300" link="#666633"
vlink="#669999" alink="#FF6600">
<h1>Biblioteca Virtual</h1>
<img src="libros.jpg" align="right" height="180" width="156">
<br><br>
<p>Bienvenido a nuestra maravillosa biblioteca
virtual de autores de todos
los tiempos en lengua castellana</P>
<p>Encontrarás textos, enlaces e información sobre los autores
más famosos de la literatura en lengua castellana. </P>
<p>Esperamos que disfrutes con nuestra pequeña selección</P>
<p>Si tienes cualquier problema escribenos a
<a
href="mailto:[email protected]">[email protected]</a>
</P>
</body>
</html>
NOTA: LA PAGINA QUE DEBEN EJECUTAR SE LLAMA INDEX. HTML,
OBVIAMENTE PRIMERO DEBEN CREAR LAS PAGINAS menu.html y
principal.html
Descargar