TEMA 12: Marcos (frames)

INTRODUCCIÓN

Los marcos permiten dividir la ventana del navegador en varias “subventanas” en cada una de las cuales se carga un documento html. El diseño con frames a primera vista puede parecer muy útil pues por ejemplo nos permite poner un menú en la parte superior que esté siempre visible mientras los usuarios navegan por la página. Que quede claro: “Los frames se usan principalmente por comodidad del PROGRAMADOR y no por beneficio del usuario”.

El diseño con marcos o frames, presenta más inconvenientes que ventajas, especialmente en cuanto a la “usabilidad”, “accesibilidad” y navegabilidad de las páginas.

Antes de lanzaros a diseñar con frames, recomendamos leer los siguientes artículos:

¿QUÉ SON LOS FRAMES?

Cómo ya hemos dicho, los frames nos permiten dividir la ventana del navegador en varias zonas o subventanas completamente independientes entre sí, como si fueran páginas diferentes, incluso cada una de ellas con sus propias barras de scroll.

Quizá el secreto de su tremendo éxito (hoy en franca decadencia), es que pulsando un enlace en una de las zonas podemos cargar un documento en otra de las zonas de la página. Para entender esto, lo mejor es que veáis un ejemplo, webmaestro. En esta página, el menú se sitúa a la izquierda y si pulsas en las distintas opciones, el contenido que cambia es el de la zona de la derecha. Esto permitía a los programadores controlar los menús de un sitio web grande en un solo documento, lo ahorra mucho trabajo.

Vamos a explicar siguiendo el ejemplo de Francisco arocena en su “webmaestro”. Así crearemos una página con dos frames. El marco de la izquierda será nuestro índice. Al acceder por primera vez veremos una página de presentación. Y al ir pulsando en los enlaces de nuestro índice irá cambiando el contenido de la derecha.

DOCUMENTO DE DEFINICIÓN DE LOS MARCOS

Para crear un documento con 2 marcos necesitamos un mínimo de 3 documentos HTML

    1.- El llamado “documento de definición”
    2.- El documento que tiene el contenido del marco izquierdo
    3.- El documento con el contenido que aparecerá en el marco derecho.

Qué es el documento de definición de marcos

Es el documento en el que le decimos al navegador: “hola navegador, soy un documento dividido en trozos, reserva un espacio vertical a la izquierda que ocupe un 20% de la pantalla. En este espacio vertical vas a cargar este documento. En el espacio restante que queda a la derecha pues me pones este otro documento”

Es decir, en el documento de definición definimos:

  • Cuantas zonas a haber en el documento.
  • Cómo están distribuidas las zonas dentro del documento.
  • Qué tamaño tiene cada zona
  • Qué contenido hay en cada zona

En nuestro ejemplo vamos a tener dos marcos distribuidos en columnas, el de la izquiera ocupará el 20% del ancho de la pantalla y el de la derecha el 80 restante.

En el marco de la izquierda pondremos el documento “menu.html” y en el marco de la derecha pondremos el documento “presentación.html”

Además, como muchos navegadores no soportan “frames”, añadiremos un contenido específico dirigido a estas personas para que no se encuentren con una página en blanco al llegar a nuestra página.

RECUERDA: Al utilizar marcos hay que acordarse de cambiar la DTD del documento, utilizando la específica para marcos tal y como se muestra en el ejemplo.

Todas estas especificaciones, en html:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title>mi pagina con frames</title>
</head>
<frameset cols="20%, 80%">
<frame src="menu.html" name="menu">
<frame src="presentacion.html" name="principal">
</frameset>
<noframes>
Nuestra página no puede verse con el navegador que usted
está utilizando, póngase en contacto con nuestro servicio
de atención al cliente en clientes@empresa.com y le daremos
toda la información que precise.
</noframes>
</html>

NOTA: los documentos de definición de marcos, no utilizan la etiqueta BODY, se sustituye por FRAMESET.

<frameset> indicamos el tamaño y la colocación de nuestros marcos.
<frame> indicamos el contenido y el nombre de cada marco
<noframes> proporcionamos un contenido alternativo para todos aquellos navegadores que no soporten frames.

Aquí hemos definido los marcos en columnas pero también podríamos haberlo hecho en filas:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title>mi pagina con frames</title>
</head>
<frameset rows="20%, 80%">
<frame src="menu.html" name="menu">
<frame src="presentacion.html" name="principal">
</frameset>
<noframes>
Nuestra página no puede verse con el navegador que usted está utilizando,
póngase en contacto con nuestro servicio de atención al cliente en
clientes@empresa.com y le daremos toda la información que precise.
</noframes>
</html>

Nuestra página ahora sería así:

Image

Cuando vamos a definir las zonas, nunca podemos mezclar en un FRAMESET columnas y filas a la vez. Tenemos que elegir entre filas y columnas. Más adelante veremos cómo podemos anidar los marcos para conseguir estructuras de este tipo:

Image

Podemos definir las zonas en tantos por ciento, cómo hemos hecho en el ejemplo, o en píxeles, o con una combinación de ambos. Podemos definir en un frameset cuantas columnas o filas deseemos (pero no las dos a la vez.).

Veamos algunos ejemplos:

cols=”20%,80%” Es el que hemos utilizado que nos divide la página en dos columnas, la de la izquierda ocupa un 20% del ancho de la pantalla y la de la derecha el 80% restante.

rows=”20%,70%,10%” Estamos dividiendo la pantalla en 3 filas, la superior ocupa un 20% de la pantalla, la parte central un 70% y la de abajo un 10%.

cols=”250,550″ Estaría bien si la ventana midiese exactamente 800 píxeles pero…. ¿Quién sabe cuanto mide exactamente una pantalla, las hay de todos los tipos. Por lo tanto lo haremos siempre con tamaños relativos. cols=”250,*” El marco de la izquierda ocuparía 250 píxeles, y el de la derecha todo el espacio restante.

rows=”200,*,15%” Es un ejemplo de la mezcla de los 3 métodos. El marco superior mediría exactamente 200 píxeles, la parte inferior un 15% de la pantalla y la parte central ocuparía todo el espacio restante.

IMPORTANTE: El título que le pongamos a este documento es el título que se verá en toda la página por lo que hay que ponerle un título adecuado, si lo dejas como “documento de definición de frames”, eso es lo que verán tus usuarios, por muchos títulos que le pongas a los documentos que se vayan a mostrar en cada marco.

DOCUMENTOS DE CADA MARCO

De poco nos va a servir nuestro documento de definición de marcos si no tenemos preparados los documentos que se van a ver en cada marco.

Menu.html (marco izquierdo):

<html>
<head>
<title>Margenes</title>
<meta http-equiv="Content-Type" content="text/html" charset=iso-8859-1">
</head>
<body bgcolor="#FFCCcc" text="#CC3300"
link="#666633" vlink="#669999" alink="#FF6600">
<h2>Menu</h2>
<p>Cervantes</p>
<p>Azorín</p>
<p>Unamuno</p>
<p>Espronceda</p>
<p>Rubén Darío</p>
<p>Rosalía de castro</p>
</body>
</html>

presentación.html (marco derecho):


<html>
<head>
<title>Margenes</title>
<meta http-equiv="Content-Type"
content="text/html" charset=iso-8859-1">
</head>
<body bgcolor="#FFCC99" text="#CC3300" link="#666633"
vlink="#669999" alink="#FF6600">
<h1>Biblioteca Virtual</h1>

<img src=”img/libross.gif” align=”right” height=”180″ width=”156″>
<br /><br />
<p>Bienvenido a nuestra maravillosa biblioteca
virtual de autores de todos
los tiempos en lengua castellana</P>

<p>Encontrarás textos, enlaces e información sobre los autores
más famosos de la literatura en lengua castellana. </P>

<p>Esperamos que disfrutes con nuestra pequeña selección</P>
<p>Si tienes cualquier problema escribenos a
<a href=”mailto:webmaster@tomatoma.ws”>webmaster@tomatoma.ws</a>
</P>
</body>
</html>

Para realizar este ejercicio vamos a crear una carpeta llamada marcos: Dentro de la carpeta marcos crearemos 2 sucarpetas: img y autores.

Dentro de la carpeta marcos colocaremos los siguientes archivos:

  • frameset.html
  • menu.html
  • presentacion.html

Dentro de la carpeta img colocaremos:

  • Libross.gif

En la carpeta autores, pondremos una página para cada autor, para ahorraros trabajo ya las he creado yo, pero si queréis una página más realista, podéis editarlas y poner algo más de información. En este zip están todas las páginas de los autores.

Y ahora que hemos hecho todo esto, veamos el el resultado

LOS ENLACES

Ahora tenemos que añadir los enlaces a nuestro menú para poder ir viendo las páginas de los distintos autores.

Así abrimos nuestra página menu.html y ponemos los enlaces a los documentos de los autores.

<html>
<head>
<title>Margenes</title>
<meta http-equiv="Content-Type" content="text/html"
charset=iso-8859-1">
</head>
<body bgcolor="#FFCCcc" text="#CC3300" link="#666633"
vlink="#669999" alink="#FF6600">
<h2>Menu</h2>
<p><a href="autores/cervantes.html">Cervantes</a></p>
<p><a href="autores/azorin.html">Azorín</a> </p>
<p><a href="autores/unamuno.html">Unamuno</a> </p>
<p><a href="autores/espronceda.html">Espronceda</a> </p>
<p><a href="autores/rubendario.html">Rubén Darío</a> </p>
<p><a href="autores/rosalia.html">Rosalía de castro</a> </p>
</body>
</html>

Si vamos al resultado y pulsamos sobre el enlace a cervantes, vemos como el nuevo documento se nos abre en la misma zona en la que estaba el menú. Hemos perdido el menú y ahora tenemos en su lugar la página de cervantes. Pero no es esto lo que queríamos, nuestra intención era que la página de cervantes sustituyera al documento de presentación y que nuestro menú permaneciera a la izquierda. ¿Qué hemos hecho mál?

Nos hemos olvidado de decirle al navegador en qué zona queremos que coloque el nuevo documento. Y como no le hemos dicho nada, el navegador ha abierto el documento en la misma zona en la que estaba en enlace.

Para decirle al navegador dónde tiene que abrir los documentos tenemos que utilizar el atributo TARGET=”nombre_de_la_zona_donde_se_va_a_abrir_el_documento”.

Si recordamos bien, al hacer el documento de definición de marcos le dimos un nombre a cada zona, si consultamos nuestro documento de definición veremos que a la zona de la derecha la habíamos llamado “Principal”.

Así que cambiamos de nuevo nuestro menú y le decimos dónde queremos que se abra el documento enlazado.

<html>
<head>
<title>Margenes</title>
<meta http-equiv="Content-Type" content="text/html"
charset=iso-8859-1">
</head>
<body bgcolor="#FFCCcc" text="#CC3300" link="#666633"
vlink="#669999" alink="#FF6600">
<h2>Menu</h2>
<p><a href="autores/cervantes.html" target="principal">Cervantes</a></p>
<p><a href="autores/azorin.html" target="principal">>Azorín</a> </p>
<p><a href="autores/unamuno.html" target="principal">>Unamuno</a> </p>
<p><a href="autores/espronceda.html" target="principal">>Espronceda</a> </p>
<p><a href="autores/rubendario.html" target="principal">>Rubén Darío</a> </p>
<p><a href="autores/rosalia.html" target="principal">>Rosalía de castro</a> </p>
</body>
</html>

Comprobar ahora el resultado

Los posibles valores del atributo target

Ya hemos visto como al atributo target le podemos asignar el nombre de la zona concreta dónde queremos que se abra el documento enlazado. Pero además tiene otros 4 valores más genéricos que vamos a ver ahora:

_blank: Con target=”blank” se abrirá una nueva ventana del navegador.

_self: El contenido enlazado se abre en la misma ventana en que estaba en enlace, es el valor por defecto si no especificamos otra cosa.

_parent: El enlace se actualiza en el frameset padre del documento que contenga en enlace.

_top: Se eliminan los marcos, y el contenido enlazado sustituye el documento de marcos que estábamos viendo. Es fundamental a la hora de hacer enlaces a páginas externas a nuestro site, con este atributo evitaremos que se abran dentro de nuestra estructura de marcos. Cuando una página externa se abre dentro de una estructura de marcos causa muy mala imagen y resulta irritante para el navegante:

– Da la impresión de que nos quieren “encarcelar” en la página de partida.
– Impide al navegante conocer (y guardar en favoritos) la dirección de la página enlazada.

<a href="http://www.tomatoma.ws" target="_blank">Blank</a>
<a href="http://www.tomatoma.ws" target="_top">_top</a>
<a href="http://www.tomatoma.ws" target="_self">_self</a>

Ver un ejemplo

FRAMES ANIDADOS

Hasta ahora, teníamos que elegir una distribución de las zonas bien en filas, bien en columnas, ya que al definir el frameset veíamos que hay que utilizar bien el atributo cols bien el atributo rows, pero no los dos a la vez.

Para conseguir distribución más complejas tenemos que anidar los frameset. Podemos anidar columnas en una fila o viceversa.

Supongamos que queremos esta distribución:

Image

Primero hemos divido el documento en dos filas: la de arriba ocupa un 20% y la de abajo el 80% restante.

La parte de abajo la hemos divido a su vez en dos columnas, la de la izquierda ocupa un 15% de la pantalla y la de la derecha el resto del espacio.

Si quisiéramos dividir nuestro documento en dos filas, lo haríamos así:

<html>
<head>
<title>pagina con dos filas</title>
</head>
<frameset rows="20%, *">
<frame src="superior.html" name="superior">
<frame src="inferior.html" name="inferior">
</frameset>
</html>

Pero en la zona inferior no queremos un documento, sino otras dos zonas divididas verticalmente, veamos como definiríamos estas zonas.

<frameset cols="15%, *">
<frame src="izqda.html" name="izqda">
<frame src="dcha.html" name="dcha">
</frameset>

¿Cómo incluimos las zonas verticales dentro de nuestro documento de definición? Simplemente sustuimos el frame que no queremos <frame src=”inferior.html” name=”inferior”> por la definición de las zonas que acabamos de ver, con lo que ahora tenemos un frameset dentro de otro frame set.

<html>
<head>
<title>pagina con dos filas</title>
</head>
<frameset rows="20%, *">
<frame src="superior.html" name="superior">
<frameset cols="15%, *">
<frame src="izqda.html" name="izqda">
<frame src="dcha.html" name="dcha">
</frameset>
</frameset>
<noframes>
</html>

Comprobar ahora el resultado

Este es un buen truco para no hacernos lios con los frames. Hacemos una primera división. Cuando ya la tenemos, aparte definimos una nueva zona y sustituimos la zona que queremos dividir. Podríamos seguir anidando eternamente, simplemente sustituyendo el documento que queremos sudividir en zonas por una nueva declaración de zonas.

Para practicar intentaréis conseguir el efecto de este ejemplo (y no vale mirar directamente el código fuente. Y este otro ejemplo a ver qué tal os sale.

11 Formularios (II) –  Indice –  13 Marcos (atributos)

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s