Crear marcos

MUY IMPORTANTE: En el momento de elaborar esta documentación N|VU no está programado para soportar el trabajo con marcos. Aunque puede abrir una página con marcos será incapaz de realizar ninguna modificación en ella. Por tanto, si queremos modificar una página con esta estructura o crear una nueva estructura de marcos deberemos recurrir a un editor externo (En el caso de Windows te recomendamos Notepad ++ que tienes incluido en la carpeta de programas del CD).

La etiqueta <frameset>

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>
Hay navegadores, como por ejemplo Netscape, que son incapaces de presentar la página si olvidamos el cierre </frameset>

Distribución del espacio en columnas o filas

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%,*">

Contenido de los marcos

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 si estamos escribiendo un documento HTML, 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 hay navegadores que no responden 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.

title: la inclusión de la etiqueta title es importante para favorecer la accesibilidad.

Un ejemplo

<frameset cols="195,*" framespacing="10" frameborder="3">

<frame src="indice.htm" name="izquierda" bordercolor="blue" scrolling="no" marginwidth="10" marginheight="10" title="Menú con el índice general del conjunto de marcos">

<frame src="contenido.htm" name="derecha" scrolling="yes" marginwidth="10" marginheight="10" title="Zona principal para la presentación del contenido del conjunto de marcos">

</frameset>

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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<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" title="Menú">

<frame src="contenido.htm" name="derecha" frameborder="0" scrolling="yes" marginwidth="10" marginheight="10" title="Zona de contenidos">

</frameset>

<noframes>

<body>

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 o para garantizar la accesibilidad a los navegantes con discapacidades.

</body>

</noframes>

</html>

Utiliza N|VU para crear dos páginas que mostrarás dentro de 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.html y contenidos.html respectivamente.

Si estás trabajando con Windows abre Notepad++ y selecciona la opción de menú lenguaje html. Si no has instalado Notepad++ podrías utilizar el propio bloc de notas. En caso de trabajar con Linux puedes utilizar cualquiera de los editores de texto que tengas disponible según la distribución que estés utilizando.
Introduce los códigos necesariors para crear la base del documento con marcos. Ten en cuenta que es importante que incluyas como primera sentencia del documento la referencia al DTD que puedes copiar y pegar desde el ejemplo previo(los dos primeros renglones del código)
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).
Guarda esta estructura básica con el nombre actividad71.html y abre la página en el navegador para comprobar si se ven correctamente cada página en la zona de pantalla que le corresponde según la definición de marcos que acabas de hacer. e
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 la dificultad obligándote a escribir rutas relativas más complejas.

De todas maneras recuerda que las carpetas "por debajo" del documento actual habrá que referenciarlas como subcarpeta/subcarpeta/archivo.html con tantos nombres de subcarpeta como sean necesarios para alcanzar el arvchivo destino.

En el caso de los archivos que se encuentren "por encima" del documento actual en el árbol de directorios habrá que llegar a ellos utilizando la notación ../../carpeta/subcarpeta/archivo.html, donde los dos puntos indican que se sube un nivel en el árbol de directorios. En el ejemplo nos habríamos movido dos niveles hacia arriba, hasta una carpeta que contiene la carpeta en la que está nuestro archivo actual, y luego habríamos tenido que ir hacia una carpeta diferente y, dentro de ella, a otra subcarpeta para encontrar el archivo de destino.