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 ):
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:
Esto lo guardamos con el nombre index.html porque va a ser lo que se abra al principio. (Podemos prescindir de <head> y <title>)
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 (OJO, POR PRIMERA VEZ NO PONEMOS BODY EN EL DOCUMENTO). 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 o central, hay otro atributo que es el nombre que le vamos a dar ( name ). 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 .
Ahora tendremos que crear los dos archivos que se tienen que cargar en cada uno de los dos marcos.
Creo el archivo indice.html que se cargará en el marco de la izquierda:
Y lo guardo como indice.html (Podemos prescindir de <head> y <title>)
Creo el archivo saludo.html que se cargará en el marco de la derecha:
Lo guardamos con el nombre saludo.html (Podemos prescindir de <head> y <title>)
Veamos ahora el resultado al clicar dos veces sobre el archivo index.html:
Nos queda por crear un cuarto documento, un cuarto archivo .html para que los enlaces se carguen en el frame principal o central.
Para ello, primero tendremos que crear el documento. Será algo así:
Lo guardamos con el nombre enlace.html (Podemos prescindir de <head> y <title>)
Por otro lado, tendremos que modificar el documento indice.html para poner el vínculo:
El atributo target , me indica que el archivo enlace.html se va a cargar en el frame principal o central, al que le pusimos el otro atributo para identificarlo, name=”principal”.
Lo guardamos con el mismo nombre que tenía: indice.html
Veamos ahora el resultado:
Y al pulsar el enlace:
Ejercicio 13.1 (Marcos I)
Realiza el ejemplo anterior cambiando el color de fondo de los distitntos frames. Recuerda que tendrás que programar 4 archivos .html: index.html (o en su lugar ejercicio13_1.html) , indice.html, saludo.html y enlace.html
Ejercicio 13.2 (Marcos II)
En este ejercicio quiero que programéis dos filas que irán cambiando de color según cliquemos en un enlace. Os dejo un vídeo explicativo:
- Video explicativo:
Podemos diseñar unos marcos dentro de otros; es lo que se llama marcos anidados . Un ejemplo sería construir un marco de tres columnas y que una de ellas se divida en dos filas. Sería algo así:
Siendo el código:
A continuación, habría que escribir el código de cada uno de los marcos.html y filas.html.
Veamos más ejemplos:
Ejemplo 1:
Ejemplo 2:
Ejemplo 3:
Ejemplo 4:
Ejercicio 13_3 (Marcos III)
En este ejercicio quiero que hagáis una página web con marcos y enlaces. El resultado debe ser algo parecido a esto:
Desde cada uno de los marcos, se debe realizar un enlace que me redirija al marco central (usando el atributo target ), dando la información de que se ha clicado dicho enlace. Por ejemplo, si hago click sobre el enlace de la fila superior, llamado Fila superior, aparecerá en el marco central la frase Has pulsado el enlace correctamente desde la fila superior y se cambiará el color del fondo del marco central, por el que tenga dicho marco del enlace, en este caso, se pondrá de color verde. Así con todos los enlaces de los diferentes marcos.
- Video explicativo:
Para ver la solución del ejercicio 13_3, escribe el código que te facilitará el profesor:
Contraseña: