| 2002 a 2006 |
Ángel
R. Puente Pérez |
 |
 |
 |
La estructura de los marcos o frames es un poco compleja.
Empezamos definiendo una estructura de marcos: Consiste en una división de la pantalla en varias zonas de tal forma que, en una de las partes, puede haber un menú de vínculos, por ejemplo, que permanecerá constante y, en la otra, parte principal o main frame, se cargarán las páginas pinchadas desde el frame de vínculos.
Puede haber más partes, por ejemplo, una parte superior con el título del sitio que permanecerá constante según vayamos navegando.
Vamos a empezar definiendo una estructura de dos frames: Una columna izquierda, más estrecha, y una columna derecha, más ancha, como frame principal o main frame.
Para empezar hay que saber que, de entrada, tenemos que generar tres documentos (tres archivos .html):
-
El primero, el más extraño, que definirá la estructura de los marcos.
-
El segundo, que se cargará en el marco izquierdo.
-
El tercero que se cargará en el marco derecho.
Por otro lado, tenemos que decidir, cuánto espacio vamos a asignar a cada marco: Decidimos que el marco izquierdo ocupará el 15% del espacio y el marco derecho, el resto (o el 85%).
Veamos la sintaxis del primer archivo, la estructura de los marcos:
<html> <head> <title> Estructura de marcos </title> </head> <frameset cols="15%,*"> <frame src="indice.html"> <frame src="saludo.html" name="principal"> </frameset> </html> |
Esto lo guardamos con el nombre index.html porque va a ser lo que se abra al principio.
Vamos a comentar un poco la sintaxis empleada:
-
Lo primero que observamos es que, en vez de la etiqueta <body> hemos empleado la etiqueta <frameset> en inglés algo así como estructura de marcos.
-
El atributo cols está definiendo las columnas y el espacio reservado a cada una. Si, en vez de columnas hubiéramos querido establecer dos filas, hubiéramos empleado el atributo rows.
-
A continuación decimos que la primera columna va a ocupar el 15% del espacio. Y, la segunda, el resto. Esto indica el asterisco *. Hubiéramos podido, perfectamente, escribir el tanto por ciento que queda, es decir, el 85%: <frameset cols="15% , 85%>.
-
A continuación viene la etiqueta <frame> (del primer frame, el de la izquierda) con el atributo src para indicar qué archivo se va a cargar en ese espacio. En nuestro caso, el archivo se llama indice.html .
-
Después viene la etiqueta del segundo marco. En él se cargará el archivo que he llamado saludo.html .
-
En este marco principal hay otro atributo que es el nombre que le vamos a dar. Esto es necesario porque, en este espacio, se van a cargar otros documentos cuando pulsemos los enlaces y hay que ponerle un nombre para decírselo a los enlaces. El nombre que yo le he puesto es principal.
Si abrimos, en estos momentos nuestro index.html nos va a salir: resultado
Esto ocurre porque no hemos creado los dos archivos que se tienen que cargar en cada uno de los dos marcos. Pero ya vemos que el espacio sí que se ha diferenciado.
Creo el archivo indice.html que se cargará en el marco de la izquierda:
<html> <head> <title> Marco de la izquierda </title> </head> <body bgcolor="#dfdfdf"> Esto se cargará en la izquierda </body> </html> |
Y lo guardo como indice.html
Creo el archivo saludo.html que se cargará en el marco de la derecha:
<html> <head> <title> Marco de la derecha </title> </head> <body bgcolor="#ff9999"> <center> <h1> Bienvenido a mi página web </h1> </center> </body> </html> |
Lo guardamos con el nombre saludo.html
Veamos ahora el resultado
Nos queda por crear un cuarto documento, un cuarto archivo .html para que sirva de ejemplo en la sintaxis a emplear para que los enlaces se carguen en el frame principal.
Para ello, primero tendremos que crear el documento. Sea algo así:
<html> <head> <title> Documento a cargar en marco principal </title> </head> <body bgcolor="#ffcccc"> <center> <h2> Has pulsado el enlace correctamente </h2> </center> </body> </html> |
Lo guardamos con el nombre enlace.html
Por otro lado, tendremos que modificar el documento indice para poner el vínculo:
<html> <head> <title> Marco de la izquierda con enlace </title> </head> <body bgcolor="#dfdfdf"> <a href="enlace.html" target="principal"> enlace </body> </html> |
Lo guardamos con el mismo nombre que tenía: indice.html
Veamos el resultado
| Si deseas profundizar en este tema, pulsa el botón... |  |
|
|
|
| 2002 a 2006 |
Ángel
R. Puente Pérez |
