Creo que lo que vamos a hacer ahora es una página con frames desde el principio. Algo como esto.

Antes de empezar, déjame enfatizar... ¡sé simple! Un sitio con un montón de enlaces apuntando aquí y allá es díficil de construir, y más difícil aún de navegar. Dicho esto, ¡a por ellos que son pocos y cobardes!

En lo primero que tenemos que pensar es en cómo queremos que resulte. Un diseño sencillo, con una banda superior, un directorio en la ventana izquierda, y una ventana principal en la derecha serán suficientes. Hagamos en primer lugar la página maestra.

<HTML>
<HEAD>
<TITLE>Página de Práctica</TITLE>
</HEAD>

<FRAMESET>
</FRAMESET>

</HTML>

Procura hacer una nueva carpeta y graba esto como index.html. La imagen que usaremos será para la banda superior o banner será "MY FRAMZ PAGE". Grábala como framz1.gif en la carpeta de trabajo.

My Framz Page


Divide la pantalla horizontalmente.

<HTML>
<HEAD>
<TITLE>Página de práctica</TITLE>
</HEAD>

<FRAMESET ROWS="83,*">
</FRAMESET>

</HTML>

Nota que conseguimos 83 añadiendo 8 a la altura de la imagen (75+8=83). Nota también que como utilizamos una dimensión absoluta, el otro frame lo hacemos elástico.


Ahora especifiquemos banner.html como documento superior (haremos este documento en un par de minutos). Incluye también un par de sentencias <FRAMESET> porque vamos a dividir la parte inferior posteriormente.

<HTML>
<HEAD>
<TITLE>Página de práctica</TITLE>
</HEAD>

<FRAMESET ROWS="83,*">
  <FRAME SRC="banner.html">
  <FRAMESET>
  </FRAMESET>
</FRAMESET>

</HTML>

MÍRALO
Puedes probarlo, pero conseguirás que no vaya muy bien porque aún está incompleto.


Ahora dividiremos la parte inferior en dos secciones. Especificaremos que la ventana izquierda contendrá directorio.html y la derecha casa.html. Como aún no hemos hecho estos documentos tendremos mensajes de error.

<HTML>
<HEAD>
<TITLE>Página de práctica</TITLE>
</HEAD>

<FRAMESET ROWS="83,*">
  <FRAME SRC="banner.html">
  <FRAMESET COLS="20%,80%">
    <FRAME SRC="directorio.html">
    <FRAME SRC="casa.html">
  </FRAMESET>
</FRAMESET>

</HTML>

MÍRALO


Dado que nuestro directorio estará en la página izquierda, y las páginas cargarán en la ventana derecha, le tendremos que dar a esta última un nombre.

<HTML>
<HEAD>
<TITLE>Página de práctica</TITLE>
</HEAD>

<FRAMESET ROWS="83,*">
  <FRAME SRC="banner.html">
  <FRAMESET COLS="20%,80%">
    <FRAME SRC="directorio.html">
    <FRAME SRC="casa.html" NAME="VENTANA-PRINCIPAL">
  </FRAMESET>
</FRAMESET>

</HTML>

MÍRALO

Vale. Ya hemos terminado con esto... por ahora.