Supongamos que queremos construir una página con tres marcos diferentes:
- Un marco horizontal superior que ocupe todo el espacio a lo ancho, donde puede ir el título del sitio, un logotipo,...
- El resto del espacio divido en dos espacios verticales:
- El de la izquierda donde habrá un menú de enlaces.
- El más grande de la derecha donde se cargarán los enlaces pulsados en la izquierda.
La sintaxis va a consistir en dos frameset anidados, el primero que definirá las dos filas (la superior y el resto del espacio). El segundo que dividirá ese resto del espacio entre las dos columnas.
Código del primer frameset:
<html> <head> <title>Las dos filas</title> </head> <frameset rows="15%,*"> <frame src="titulo.html"> <frame src="resto_espacio"> </frameset> </html> |
Como el segundo frame en realidad son dos, sustituimos su definición por el código del segundo frameset:
<frameset cols="20%,*"> <frame src="indice.html"> <frame src="saludo.html" name="principal"> </frameset> |
El código quedaría así:
<html>
<head>
<title>Fila superior y dos columnas</title>
</head>
<frameset rows="15%,*">
<frame src="titulo.html">
<frameset cols="20%,*">
<frame src="indice.html">
<frame src="saludo.html" name="principal">
</frameset>
</frameset>
</html>
|
Veamos los códigos de todos los archivos:
Primero el documento titulo que se cargará en el marco superior:
<html> <head> <title>Marco superior</title> </head> <body bgcolor="#0066cc"> <font color="#ffffff"> <center> <h1>mi sitio web</h1> </center> </font> </body> </html> |
Lo guardamos como titulo.html
Veamos el documento indice que se cargará en la columna izquierda:
<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 como indice.html
El documento saludo que se carga inicialmente en el marco principal:
<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 como saludo.html
Falta el documento enlace que se cargará en el marco principal al ser pulsado el enlace:
<html> <head> <title>Documento a cargar en principal</title> </head> <body bgcolor="#ffcccc"> <center> <h2> Has pulsado el enlace correctamente </h2> </center> </body> </html> |
Lo guardamos como enlace.html
El documento de la estructura de marcos es el inicial. Lo guardamos como index.html:
<html>
<head>
<title>Fila superior y dos columnas</title>
</head>
<frameset rows="15%,*">
<frame src="titulo.html">
<frameset cols="20%,*">
<frame src="indice.html">
<frame src="saludo.html" name="principal">
</frameset>
</frameset>
</html>
|
resultado (maximiza la ventana)
No hay comentarios:
Publicar un comentario