Crear marcos

Lo primero que hay que hacer para iniciar una página de marcos es crear la definición de los mismos. Por lo que hemos visto hasta ahora la organización de páginas puede resultarnos un tanto sorprendente. Hay que tener en cuenta que una definición de marcos no es más que una instrucción para que el navegador sepa cómo tiene que dividir la ventana; en ella no existen contenidos para mostrar. Los contenidos que se mostrarán en cada zona de la pantalla son los que componen cada una de las páginas que se muestran simultáneamente.

Teniendo en cuenta lo anterior empezaremos por decir que no necesitamos las etiquetas de definición habituales: HTML, HEAD y BODY, aunque deberías revisar la anotación de estilo que figura al final de este apartado.

Las etiquetas que nos sirven para contener la definición del marco son <frameset> </frameset>

Internet Explorer presenta la página aunque olvidemos el cierre </frameset>, pero Netscape no

Lógicamente la mera indicación de que queremos crear una estructura de frames no es suficiente: habrá que indicar si la distribución se hará en vertical o en horizontal y cuantas zonas queremos crear.

La definición de los espacios se puede hacer en términos absolutos (píxeles) o relativos (% de ventana). El signo * representa el resto de la ventana.

A continuación se muestran algunos ejemplos de posibles divisiones de la pantalla.
Dos columnas con una medida absoluta para la primera:
<frameset cols="130,*">
Dos columnas con medidas relativas
<frameset cols="25%,75%*">
Tres filas con medidas absolutas para la superior y la inferior
<frameset rows="25,*,50">
Dos filas con definición relativa
<frameset rows="10%,*">

Una vez establecida la distribución general habrá que indicar al navegador cuál es el contenido que tendrá que mostrar en cada marco la primera vez que se cargue la página.

Para indicar el contenido de cada marco se utiliza la etiqueta <frame>, que no necesita cierre con los siguientes atributos:

name: Servirá para identificar el marco cuando se realicen enlaces a una página con este tipo de estructura.

src: Indicará cuál es el contenido inicial del marco cuando se cargue por primera vez la página.

frameborder: Indicará si el marco lleva o no lleva borde. Sus valores pueden ser 0 y 1 (Netscape interpreta también como válidos yes y no)

framespacing: Indicará la separación en píxeles entre los marcos

Si queremos garantizar la compatibilidad cuando no deseamos que aparezcan bordes habría que incluir la etiqueta border=0 en la etiqueta frameset, acompañada de frameborder=0 y framespacing=0, ya que Netscape parece no responder correctamente si sólo se utilizan estas dos últimas.

marginwidth y marginheight: Sirven para especificar los márgenes del marco expresados en píxeles.

scrolling: Admite los valores auto, yes y no para indicar si el marco dispondrá de barras de desplazamiento o no.

bordercolor: Permite especificar el color del borde que delimitará el marco (Si se pone color al borde de dos marcos adyacentes tiene prioridad el primero en presentarse, esto es, el de la izquierda en el caso de columnas y el superior en el caso de filas). Cuando hay más de dos marcos Netscape admite diferentes colores de borde, siguiendo la prioridad en la presentación, pero Explorer sólo presenta el primer color definido.

noresize: Hace que el tamaño del marco no pueda ser modificado por el usuario.

Lo que se acaba de comentar podría ser suficiente para crear una página basada en marcos, pero lo ideal es crear una página siguiendo el esquema siguiente, en el que se indica la estructura de los marcos pero se ofrece, a través de la etiqueta noframes, una alternativa para el caso de navegadores que no puedan mostrarlos y, además, se incluye un título en la cabecera.

<html>
<head>
<title>Título que se verá de forma constante aunque cambien los marcos</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset cols="80,*" frameborder="no" border="0" framespacing="0">
<frame src="indice.htm" name="izquierda" bordercolor="blue" scrolling="no" noresize marginwidth="10" marginheight="10">
<frame src="contenido.htm" name="derecha" frameborder="0" scrolling="yes" marginwidth="10" marginheight="10">
</frameset>
<noframes>
<body bgcolor="#FFFFFF">
Aquí iría un mensaje indicando que la página está creada con marcos y el navegador no los soporta o, incluso el contenido de una página alternativa para el caso de los navegadores incapaces de mostrar los marcos.
</body>
</noframes>
</html>

Crea dos páginas para mostrar en una estructura de marcos. Una de ellas deberá contener un posible índice con los títulos de diferentes epígrafes que se irán mostrando en la zona principal. La otra puede ser una página que incluya alguna ilustración y un texto explicativo de los contenidos que se irán abordando. Guárdalas con los nombres indice.htm y contenidos.htm respectivamente.

Continúa trabajando con el editor y crea una nueva página parra definir los marcos.
Si usas Composer guarda la página nada más crearla, dándole el nombre practica45.htm. A continuación acude al menú Edición / Origen HTML para que se active el bloc de notas y puedas introducir los códigos necesarios.
Si usas Front Page Express crea la página nueva y utiliza el menú Ver / HTML para escribir el código de la definición de marcos. Cuando tengas la página creada dale el nombre practica45.htm
Dependiendo de cómo hayas creado la página con el índice crea la estructura de marcos en columnas y llama a los marcos izquierda y derecha (si tus contenidos se presentan en forma de lista o, sencillamente uno bajo otro) o en filas y llámalos arriba y abajo (si has puesto los títulos de forma que aparezcan en un renglón o en celdas de una tabla de una sola fila)
Ajusta la medida de la columna o fila del índice de forma que no aparezcan barras de desplazamiento. Utiliza para ello una medida absoluta en píxeles. La zona de contenidos la puedes dejar en tamaño libre mediante el signo *
Salva la página y comprueba el resultado.
Si, por despiste, has guardado las páginas con el índice y el contenido en una carpeta diferente de la que has utilizado para guardar la definición de los marcos el navegador no será capaz de mostrarlas. Aunque no hay inconveniente en que guardes las páginas en carpetas diferentes es preferible que no aumentes las compliaciones obligándote a escribir rutas relativas.

Hay ocasiones, cuando la estructura de la WEB sigue una secuencia lógica y de exposición lineal, en las que la trayectoria que va a seguir la navegación es muy previsible.

En otras ocasiones, hay partes de la WEB que tienen una alta probabilidad de ser visitadas en uno u otro momento, pero presentan la dificultad de incluir imágenes u otros recursos que incrementan su tamaño y hacen que su descarga sea trabajosa.

En ambos casos, la descarga será mucho más rápida la segunda vez que visítemos la página, puesto que en esa ocasión los componentes de la misma no se descargarán directamente de Internet sino que se extraerán de la memoria caché del navegador.

Una buena ayuda, para facilitar la navegación, sería disponer de un recurso que permitiera que esas páginas que se van a visitar estuvieran ya cargadas en la memoria caché del navegador y así se pudiera agilizar la descarga para que el visitante tuviera una sensación de que todo va mucho más rápido.

¿Qué te parece crear una estructura de marcos en uno de los cuales se presentara la página que estamos visitando y en el otro la que vamos a visitar? Seguro que has pensado que no es una idea con mucho sentido, porque ¿qué ocurre si ambas páginas no tienen nada que ver entre sí?.

Vamos verlo de otra manera. Seguro que recuerdas que los marcos se pueden definir a través de porcentajes de la pantalla y que puedes utilizar el signo * para indicar el espacio restante. ¿Qué te parece entonces esta definición: <frameset cols="100%,*">?

Probablemente pensarás que es absurdo adjudicar a una columna el 100% de la ventana y a la otra el resto, puesto que no le hemos dejado nada, pero precisamente ahí está el truco. Si en el marco que ocupa el 100% ponemos la página que el visitante está viendo en este momento y en el otro la que pretendemos precargar, quien está viendo la WEB no verá esta segunda página, pero cuando vaya a visitarla ya la tendrá en la memoria caché de su navegador y se cargará muy rápidamente.

Sólo hay un pequeño detalle más: aunque al crear una página pongamos unas dimensiones para los marcos, quien la visita puede cambiar las dimensiones si pincha y arrastra la división entre los mismos. Si pretendemos evitar que el visitante "descorra la cortina" y vea el marco fantasma tendremos que utilizar el atributo noresize. El código quedaría como sigue.

<frameset cols="100%,*" framespacing="0" frameborder="0">
<frame src="paginavisible.htm" name="izquierda" noresize>
<frame src="paginafantasma.htm" name="derecha">
</frameset>

El mismo efecto se habría conseguido creando una estructura en filas en lugar de columnas. En el marco de la izquierda podríamos añadir los atributos que fueran necesarios.

Ten en cuenta que el ancho de banda es un bien limitado. Cada vez que empleamos la técnica comentada estamos incrementando el uso de la red, ya que el visitante descarga una página que no había solicitado en ese momento.

Procura utilizar este recurso de forma racional y sólo en aquellos casos en los que pienses que va a ser realmente útil.