Taller

>> Taller >> Curso de HTML by BenKo >> Cap. 8, Los útiles frames.

Capítulo 8

Los útiles Frames

Frame es una palabra anglosajona ke significa marco, cuadro o imagen (a kién no le sonará esto, después de las tropecientas millones de veces que la hemos tenido ke eskribir en DIV). En el asunto práctico de Internet significa "sí, mira, son esas zonas de la pantalla ke están divididas por bordes y que a veces tienen una scrollbar y cada una almacena una parte de una web". Esta definición podría ser válida, pero la especificaré un poco más. Seguramente habréis visto muchas páginas con frames (si no, es ke la habéis visto y no sabéis lo ke son XD ), como por ejemplo, DIVnet. Los frames son áreas de la pantalla que cada una contiene un documento html distinto. Los frames pueden interactuar entre ellos (p ej, puedo linkar de un frame a otro).

Ah, vale, mola ¿Y eso kómo se hace?

Antes de empezar kon etiquetas, hay que comprender cómo funciona esto de los frames. Voy a explicarlo más o menos al modo de la guerra de las galaxias (¿¿Yo fanátika de Star Wars?? ¡¡Ké va!!). Lo primero de todo es crear cada una de las pages que van a ir en kada frame. OK. Después, creamos una página a modo de "nave nodriza lanzadera" (podría ser, por ejemplo, un calamari cruiser), que de ella saldrán las distintas webs (x-wings y demás). Vamos, que creamos un web donde definimos los frames que van a haber y los "invocamos" desde allí. No sé si lo habré explicado bien, pero ya lo entenderéis.

Una lanzadera de frames (normalmente es el tan famoso index.html) muy simple sería así:

<HTML>

<HEAD>

<TITLE>Prueba con Frames</TITLE>

</HEAD>

</FRAMESET>

</HTML>

15 % (frame 1)

85 % (frame 2)

¿No echáis en falta al body? En una "lanzadera" de frames, no se pone NUNCA, a no ser que sea entre las etiquetas NOFRAMES. Por ejemplo:

<HTML>

<HEAD>

<TITLE>Prueba con NOFRAMES</TITLE>

</HEAD>

<BODY>

En tu navegador no rulan los FRAMES, cosa necesaria para poder ver esta page correctamente. Por favor, pilla uno que los incorpore y vuelve de nuevo. Gracias

</BODY>

</NOFRAMES>

</FRAMESET>

</HTML>

Entre las etiquetas NOFRAMES ponemos en el BODY un mensaje que se mostrará a los navegadores que no soporten frames. También podemos establecer una página alternativa.

Volviendo al primer ejemplo...Komo veis, la etiqueta + importante es FRAMESET, que luego tiene anidadas otras dos (que se corresponden al nº de frames) que indican el origen de las páginas que llenarán los frames al cargar la página (por si no lo sabíais, SRC viene de source, es decir, origen en inglés).

¿Y ké es el COLS ese tan raro? Venga, pensad un poko, ke de algo os tiene ke sonar ¿No? Y el maldito capítulo de las tablas kon tanto parámetro ke he tenido ke reunir no ha servido para nada, ¿No? :,( Vaya. COLS viene de columna. O sea, que el frame va a estar dividido en dos columnas. ¿Ke kómo indicamos el nº de columnas? Pues con lo que viene a continuación. Ese 15% indica que el primer frame okupará el 15% de la pantalla (también se puede indicar el valor en píxels si kitamos el %). Luego viene una coma (para separar cantidades) y luego un *. Este es el carácter comodín e indica el resto de la pantalla. Entonces, tendremos una web con dos frames en columna. El de la izquierda okupa el 15% de la pantalla y el otro el resto (el 85%).

A grandes rasgos, esto funciona así. Si en vez de columnas, queremos filas, pues sustituimos COLS por ROWS.

</FRAMESET>

20 % (frame 1)

80 % (frame 2)

Hasta akí, todo fácil. Pero si pasamos a palabras mayores (etiquetas frameset anidadas, la kosa se komplika un poko más). Por ejemplo:

</FRAMESET>

F1	Frame 2
	Frame 3

Lo ke hacemos primero es crear dos columnas. La primera la llenamos con un frame normal y en la segunda ponemos una etiqueta FRAMESET con dos filas. Tenéis ke tener en kuenta el orden de los FRAMESET. En el ejemplo anterior, si en el primer FRAMESET colocamos ROWS en vez de COLS y viceversa, obtendríamos una web así:

Frame 1
Frame 2	Frame 3

Una vez ke hemos visto los parámetros funcionales, vamos kon los estéticos. LOS SIGUIENTES PARÁMETROS SE PONEN EN LA ETIQUETA FRAME (no frameset). Por defecto, los frames ponen automáticamente una scrollbar (barra de desplazamiento) cuando es necesario. Es el parámetro...

SCROLLING: Puede tener los siguientes valores:

"YES": Scrollbars siempre
"NO": Scrollbars nunca (tened kuidado kon esto)
"AUTO": Scrollbars sólo kuando son necesarias. Parámetro por defecto.

Hay un atributo de esta etiqueta que sirve para indicar al navegador que los frames no se pueden redimensionar por el usuario (cosa que hace SIEMPRE el navegador por defecto). Si no queremos redimensionar los FRAMES kolokamos en la etiqueta FRAME la palabra NORESIZE. Así de simple.

Los bordes de los FRAMES

Es muy importante los bordes en los Frames, ya que pueden afectar a los demás parámetros y juegan un papel muy importante en el diseño. Por defecto, el navegador nos coloca un borde de 1 unidad de grosor en cada frame y de color grisáceo.

Normalmente, nadie quiere poner bordes a los frames, especialmente en las páginas con un diseño cuidado, ya que son (en mi opinión, al menos) antiestéticos. Para kitar los bordes, ponemos en la etiqueta FRAMESET el parámetro:

FRAMEBORDER="NO"

Con esto eliminamos el borde, pero no el espaciado entre frames. Para arreglar esto, ponemos en la etiqueta FRAME esto:

FRAMESPACING="0"

BORDER="0"

NOTA: El primer parámetro es para el IExplorer y el segundo para el Netscape ¿Veis el por qué de los dos navegadores? Así podréis comprobar si una página en el Navigator se ve igual que en el Explorer.

Y si queremos que el borde del FRAME sea de un color, ponemos el parámetro BORDERCOLOR="color" en la etiqueta FRAME. Ya sabéis ke el kolor se puede poner en hexadecimal o en inglés (aunk mejor hexadecimal, keda, no sé...más culto).

¡¡¡Atención!!!

Kuidado kon los bordes. Si elegís NO poner bordes a los frames, tened cuidado con posibles incongruencias en las etiquetas que pueden llevar a un error en la página. Si no hay bordes, no pueden haber bordes de colores, ni se podrán redimensionar los FRAMES. Avisados/as estáis.

Venga, ke ya kasi acabamos. Lo único que queda es el asunto de los links. Normalmente se suelen usar los frames para facilitar la navegación en la página, por medio de un menú. Si lo que queremos es que al seguir un link en un frame, la página enlazada se muestre en otro frame, usaremos el parámetro TARGET (dentro de la etiqueta <A>). Antes de eso, debemos disponer de al menos del nombre del frame que queremos actualizar. Este nombre se establece en la etiqueta FRAME con el atributo NAME. Un ejemplillo:

</FRAMESET>

Con esto establecemos dos frames en uno en cada columna: el de la izquierda se llama menu y nos va a servir de ayuda para navegar. El de la derecha se llama main (en inglés, principal) y en él visualizaremos las páginas. Ahora sólo nos queda establecer el link. En el la página que está albergada en el frame de nombre menu (indice.html) creamos un link de este modo:

Al pulsar este link, la web de nombre pagina2.html se cargará en el frame con nombre main.

NOTA: No es necesario que pongáis nombres a todos los frames, sólo a los que vayáis a usar en el parámetro TARGET. De todos modos, no está de mal acostumbrarse a nombrar cada frame, más que nada, por si se nos ocurre poner un link extra y así no tenemos que modificar el archivo "lanzadera".

¡¡¡ EEEEHHHHH !!!

Por defecto, las páginas a las que apuntan los links se cargan en el mismo frame. Esto lo cambiamos con el parámetro TARGET. ¿Pero qué es lo ke pasa si lo que tenemos es un link que hace referencia a otra web distinta a la nuestra. Normalmente a la peña se le olvida este detalle y lo que tenemos son páginas anidadas dentro de otras ¡¡¡lo cual molesta muchísimo!!! Para evitarlo, ponemos en el parámetro TARGET el valor "_top" que indica que la página se cargue a ventana completa. Problema solucionado ; )

P' atrás | Principio | P' alante