220/03/04
Ángel R. Puente Pérez
Ir a la página anterior

Ir al índice de contenidos

Ir a la página siguiente

16.1.- Estructura de marcos con tres frames.

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>
resultado

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>
resultado

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>
resultado

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>
resultado

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)

Ir a la página anterior
Ir al índice de contenidos
Ir a la página siguiente
220/03/04
Ángel R. Puente Pérez
Logo Manual HTML
HTML 4.01
Logo Manual HTML