5. Página completa con frames

El primer paso será crear el documento de definición de frames. Abrimos nuestro editor y creamos un nuevo archivo. En este caso lo llamaremos index.htm y escribimos en él el siguiente código:

      <HTML>

      <HEAD>
      <TITLE>
      Primera página con frames
      </TITLE>
      </HEAD>

      <FRAMESET COLS="20%,80%">
      <FRAME SRC="izquierd.htm">
      <FRAME SRC="derecha.htm">
      </FRAMESET>

      </HTML>

    

Con esto tendremos una página que dividirá la ventana del navegador en una columna izquierda y otra derecha que ocupan el 20% y el 80% del ancho respectivamente. El contenido de cada una de estas columnas estará en los archivos izquierda.htm y derecha.htm. El siguiente paso será la creación de estos archivos. Volvemos a abrir un archivo nuevo en nuestro editor y le llamamos izquierd.htm. En este archivo podemos escribir todo el código HTML que queramos siempre teniendo en cuenta sus limitadas dimensiones. Para empezar podemos escribir:

      <HTML>

      <HEAD>
      </HEAD>

      <BODY BGCOLOR="#99FF99">
      <H1>
      Frame izquierdo
      </H1>
      Este frame podría servir de índice:
      <UL>
      <LI>Tema 1
      <LI>Tema 2
      <LI>Tema 3
      </UL>
      </BODY>

      </HTML>

    

A continuación abrimos otro archivo nuevo y le llamamos derecha.htm. El código a incluir en este tercer documento HTML será:

      <HTML>

      <HEAD>
      </HEAD>

      <BODY>
      <H1>
      Este es el frame Derecho
      </H1>
      <P>
      En este frame podría ir el contenido principal del Web.
      </P>
      </BODY>

      </HTML>

    

El último paso será visualizar el documento de definición de frames, index.htm, con el navegador que prefiramos. Por supuesto se podría ver cada uno de los documentos HTML por separado, y de hecho suele ser muy útil hacerlo mientras escribamos el código para ir comprobando que lo estamos haciendo bien, sin embargo una vez hemos terminado los documentos derecha.htm y izquierd.htm sólo tienen significado como contenido de frames, y no como páginas Web individuales. Por esta razón el único archivo que debe ser visto desde fuera debe ser el documento de definición de frames (en este caso llamado index.htm). Una vez abierto index.htm con nuestro navegador deberíamos ver una página similar a la que observamos en la figura 8.13.

Figura 8.13. Ejemplo completo de una página con frames formado por un frame izquierdo pequeño que puede servir de índice y otro derecho con el contenido principal.

La creación de páginas con frames es algo más compleja que la creación de las páginas que hemos hecho hasta ahora, y por ello es común cometer errores, sobre todo al principio. Si al intentar ver una página con frames no observamos el resultado obtenido es recomendable comprobar los siguientes detalles:

  1. Al igual que con el resto de páginas debemos asegurarnos de haber encerrado todo el código entre las instrucciones < HTML> y </HTML> y de que hemos guardado todos los archivos con terminación .htm o .html.

  2. Comprobar que los nombres de los archivos coinciden con los nombres indicados como valor del atributo SRC. En algunos casos es necesario que los nombres coincidan en mayúsculas y minúsculas. Este será el caso si vamos a publicar nuestras páginas en un servidor UNIX (la mayoría lo son).

  3. Es importante que nos aseguremos de no haber usado la etiqueta BODY en el archivo index.htm. Si lo hemos hecho debemos quitarla para que funcione nuestro ejemplo.

  4. Si hemos solucionado todos los problemas anteriores y la página sigue sin visualizarse correctamente probablemente estaremos usando un navegador que no soporte frames.