Icono Frames o Cuadros en HTML

Los frames o literalmente traducido cuadros o marcos, son divisiones que se efectúan en la pantalla del navegador, en la que en cada frame independientemente, podremos ejecutar un documento .html independiente o no del resto de frames que hayamos definido.

Las frames es una técnica para subdividir la pantalla del visor en diferentes ventanas. Cada una de estas ventanas se podrá manipular por separado, permitiéndonos mostrar en cada una de ellas una página Web diferente. Esto es muy útil para, por ejemplo, mostrar permanentemente en una ventana los diferentes contenidos de nuestra página, y en otra ventana mostrar el contenido seleccionado.

NOTA: el emplear frames es incompatible con la directiva <BODY>...</BODY>, por lo que como se verá más adelante, esta directiva debe de no considerarse en la página que define las frames, de lo contrario no funcionará.

La forma de establecer frames es muy sencilla. En la sección <HEAD>...</HEAD> del documento se definen las áreas que ocuparán los frames que queremos poner, con ayuda de la directiva cerrada <FRAMESET>...</FRAMESET>.

En esta directiva se especificarán las áreas y sus dimensiones relativas con la ayuda de atributos, como COLS y ROWS propias de <FRAMESET>...</FRAMESET>. En función de si la división de la pantalla se realiza por filas (rows) o columnas (cols), deberemos de considerar cada uno de los atributos juntos o separados (según las combinaciones que deseemos)

Si quisieramos dividir la pantalla en 2 cuadros verticales, usaríamos la siguiente directiva:

<HTML>
<HEAD>
<TITLE> Título de la Página </TITLE>
</HEAD>
<FRAMESET COLS=“50%,50%”>...</FRAMESET>
</HTML>

lo que nos dividirá la ventana del navegador en 2 columnas que cada una de ellas ocupará el 50% del área total de la ventana del visualizador.

<HTML>
<HEAD>
<TITLE> Título de la Página </TITLE>
</HEAD>
<FRAMESET COLS=“50%,*”>...</FRAMESET>
</HTML>

tiene el mismo efecto, ya que el * lo que indica es que, primero tome en la primera columna el 50% del área del visor y el resto (50%), para la segunda columna.

<HTML>
<HEAD>
<TITLE> Título de la Página </TITLE>
</HEAD>
<FRAMESET COLS=“*,10%”>...</FRAMESET>
</HTML>

tomaría el 10% para la segunda columna, y el 90% (el resto del área), para la primera.

La directiva <FRAMESET> indica como se va a dividir la ventana principal. Pueden incluirse varias directivas <FRAMESET> anidadas con el objeto de subdividir una subdivisión.

<FRAMESET>   <FRAMESET>    <FRAMESET>    ...    </FRAMESET>   </FRAMESET> </FRAMESET>

Si quisieramos definir 3 columnas, lo único que deberemos de hacer es poner en el atributo COLS, el porcentage de division de cada una de las columnas, tantos porcentajes como columnas queramos:

<HTML>
<HEAD>
<TITLE> Título de la Página </TITLE>
</HEAD>
<FRAMESET COLS=“40%,10%,*”>...</FRAMESET>
</HTML>

esto dividiría la ventana del navegador en 3 columnas de 40%, 10% y 50% del porcentaje del área de la pantalla (40+10+x=100 de donde x=50%).

Otra forma de hacer las divisiones en lugar de emplear los porcentajes, es especificar en el interior del atributo COLS, el número de pixels que queremos que emplee el navegador, de forma que si diseñamos la página para una determinada resolución de pantalla, tendremos más control sobre la misma. Un consejo, que yo suelo emplear mucho, es definir, por ejemplo, si queremos 2 columnas, especificar el número de pixels en la definición de una de ellas, y para definir la otra restante, emplear el atributo * para que el navegador sepa que debe tomar el resto del espacio disponible para la otra columna.

<HTML>
<HEAD>
<TITLE> Título de la Página </TITLE>
</HEAD>
<FRAMESET COLS=“400,*”>...</FRAMESET>
</HTML>

para una página, con la primera columna a un ancho de 400 pixels, y la segunda con el resto de pixels de ancho que emplee el navegador de nuestro usuario en cuestión (el que nos visita). En el caso del atributo COLS, los tamaños se aplican de izquierda a derecha, de la pantalla del visualizador.

Lo mismo que nos ocurre para definir columnas, nos ocurre para definir filas, o cuadros horizonales en la ventana del navegador. Para ello empleamos el atributo ROWS (columnas), en el que definimos al igual que antes, el alto (en esta caso por ser horizontal), tanto de modo porcentual, como en tamaño de pixels (tal y como vimos anteriormente).

NOTA: Debe de hacerse notar que los atributos COLS y ROWS, no se emplean conjuntamente con la directiva <FRAMESET>...</FRAMESET>, sino que empleamos el uno o el otro en el mismo <FRAMESET>...</FRAMESET>.

<HTML>
<HEAD> <TITLE> Título de la Página </TITLE>
</HEAD>
<FRAMESET ROWS=“10%,*”>...</FRAMESET>
</HTML>

Define una primera ventana horizontal al 10% de la altura del área de la ventana de visualización, y el resto para la otra ventana, por debajo de la definida previamente.

<HTML>
<HEAD>
<TITLE> Título de la Página </TITLE>
</HEAD>
<FRAMESET ROWS=“100,*”>...</FRAMESET>
</HTML>

al igual que el anterior ejemplo define 2 filas áreas horizontales, pero esta vez en una altura fija, que es 100 pixels para la superior, y el resto de la altura de la pantalla para la inferior.


FRAMES COMBINADAS

Ahora que hemos visto como definir frames horizontales y verticales, puedes que te estés preguntando... ¿y cómo defino una combinación de ambas?... Muy sencillo, eso es lo que vamos a ver a continuación.

En este caso de lo que se trata es de hacer frames anidados o lo que es lo mismo, frames en el interior de un frame(s) ya definido con anterioridad, es decir una subdivión en el interior de un frame.

Veamos un ejemplo para comprenderlo mejor antes de la explicación.

<HTML>
<HEAD>
<TITLE> Título de la Página </TITLE>
</HEAD>
<FRAMESET COLS=“100,*”>
  <FRAMESET ROWS=“200,*”>
  ...
  </FRAMESET>
</FRAMESET>
</HTML>

En este ejemplo hemos definido en primer lugar, un <FRAMESET> que nos divide la pantalla del navegador en 2 columnas verticales de 100 pixels la de la izquierda (en la pantalla), y el resto del área para el visualizador. Dentro de la misma, tal y como se vé en el ejemplo, hemos definido una subdivisión de la primera columna (la de la izquierda), en 2 filas (en el interior de la primera columna), que nos da un cuadro superior de 200 pixels fijos y el inferior del resto de la pantalla del visualizador. Vemos de este modo lo que es un FRAME anidado, al mismo tiempo que ya hemos visto como subdividir una columna de las 2 que hemos definido.

Veamos otro ejemplo; supongamos que queremos hacer una subdivisión más o menos simétrica en 4 frames de la pantalla de nuestro visualizador, para lo que primero definimos las 2 columnas verticales:

<HTML>
<HEAD>
<TITLE> Título de la Página </TITLE>
</HEAD>
  <FRAMESET COLS=“50%,*”>
  ....
  </FRAMESET>
</HTML>

Así hemos definido 2 columnas de la primera de ellas del 50% de la pantalla, y el resto que también es 50%, para la otra. Definamos ahora dentro de cada una de las columnas 2 filas que hagan que se nos muestre una pantalla dividida en 4 cuadros simétricos. Para ello pondríamos:

<HTML>
<HEAD>
<TITLE> Título de la Página </TITLE>
</HEAD>
<FRAMESET COLS=“50%,*”>
  <FRAMESET ROWS=“50%,*”>
  ...
  </FRAMESET>
</FRAMESET>
</HTML>

dentro de la primera de las columnas, lo que nos dividiría ésta en 2 subdivisiones verticales. Ahora surge la duda de como dividir la segunda de nuestras columnas en otras 2 filas. pues de la misma forma que la anterior, ya que el navegador es lo suficientemente inteligente para adivinar que la siguiente directiva con COLS en su interior hace referencia a otra de las frames verticales que hemos definidos, de donde nos queda:

<HTML>
<HEAD>
<TITLE> Título de la Página </TITLE>
</HEAD>
<FRAMESET COLS=“50%,*”>
  <FRAMESET ROWS=“50%,*”>
  ...
  </FRAMESET>
  <FRAMESET ROWS=“50%,*”>
  ...
  </FRAMESET>
</FRAMESET>
</HTML>

NOTA: Debemos de considerar, que cada frame debe contener un documento HTML en su interior, con lo que a mayor número de divisiones, mayor número de documentos HTML a cargar, por lo que tendremos que condierar que llevará un mayor tiempo de carga de la “página total”.

NOTA: Otra forma de definir el ancho, alto o espaciado de las frames, es mediante múltiplos, tal y como se ve en “valor*”. El valor de este campo es opcional, un sólo asterisco implica una vista de "tamaño relativo", lo que se interpreta como una petición de darle a la vista todo el espacio que quede libre. Si hay varias vistas de tamaño relativo, el espacio libre se divide entre ellas. Si hay un valor delante del asterisco, la vista que lo tenga toma más espacio relativo, por ejemplo "2*,*" daría 2/3 del espacio a la primera vista y un tercio a la segunda.


PROPIEDADES DEL FRAME

Una vez definidas cada una de las áreas de las ventanas, debemos de definir cada una de las propiedades de cada una de ellas para que el navegador sepa qué es lo que debe de mostrar en cada una. Como ya se ha mencionado, cada frame debe contener un documento HTML, por lo que debemos definir en qué lugar de la ventana (es decir, en qué cuadro), se pondrá el documento que queremos mostrar, para ello tenemos la directiva abierta <FRAME> que posee una serie de atributos que pasamos a ver a continuación:

  • NAME=“nombre”

    Indica el nombre por el que nos referiremos a la subventana en cuestion que quede definida con ese “nombre”.

  • SRC=“URL

    La ventana mostrará en un principio el contenido del documento que se le indique en URL. (URL es Universal Resource Location, que es la dirección en la que el navegador debe de buscar el documneto, con el nombre y la extensión incluida de éste).

  • MARGINWIDTH=“número”

    Indica el margen izquierdo y derecho de la subventana en puntos o pixels.

  • MARGINHEIGHT=“número”

    Indica el margen inferior y superior de la ventana en puntos.

  • SCROLLING=“yes | no | auto”

    Puede poseer los 3 valores indicados. Indica si se aplica una barra de desplazamiento a la subventana en el caso de que la página que se cargue no quepa en los límites de la subventana que hemos definido (esto suele ser recomentable en el caso de que queramos que nuestro visitante, si no emplea la resolución que hemos recomendado, pueda ver los contenidos al completo del cuadro). El valor “yes” muestra siempre la barra de desplazamiento. El valor “no” no la muestra nunca (la zona de la página que no quepa en la subentana no la veremos), y “auto” la muestra sólo en el caso de que sea necesario. El valor por defecto es “auto”.

  • NORESIZE

    Si se indica esta atributo dentro de la directiva <FRAME>, el usuario no puede “redimensionar” las ventanas del visor. Esta opción siempre es posible realizarla por nuestro visintante si no se indica lo contrario, por medio de este atributo.

  • FRAMEBORDER=“yes | no”

    Se utiliza como atributo de FRAMESET y establece si serán visibles los bordes del frame o no. Puede tener dos valores: YES (por defecto) y NO.

  • BORDERCOLOR=“peso o nombre del color”

    Se utiliza como atributo de FRAME y establece el color de los bordes visibles. Evidentemente, para que funcione, se tendrá que haber establecido FRAMEBORDER=“yes”. El peso del color y el nombre, han sido temas ya tratados en anteriores secciones, por lo que te recomiendo que para volver a familiarizarte con el mismo, regreses a la sección de formato de texto, en HTML.

    NOTA: Los visores que no soportan la característica de subventanas, no mostrarán nada de lo indicado con estas directivas. Es por ello que existe una directiva llamada <NOFRAMES>...</NOFRAMES>. Todo los indicado entre esta directiva será lo que muestren los visores sin capacidad para visualizar Frames. Los visores que soporten Frames obviaran las directivas incluidas entre <NOFRAMES>...</NOFRAMES>.

Anteriormente hemos mencionado que la directiva <FRAMESET>...</FRAMESET> era imcompatible con la directiva <BODY>...</BODY>, y como veremos ahora no es del todo cierta. El único requisito que debe de cumplir para queno sea totalmente incompatible, es que la definición de frames deb de ir antes de la definición del cuerpo del documento o <BODY>...</BODY>. Veamos un ejemplo:

<HTML>
<HEAD>
<TITLE> Título de la Página </TITLE>
</HEAD>
<FRAMESET COLS=“50%,*”>
....
<NOFRAMES>
<BODY>
...
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>

Tal y como vemos en este ejemplo, se definen antes los cuadros de las ventanas (o frames) con la directiva <FRAMESET>...</FRAMESET> y entre las directivas de <NOFRAME>...</NOFRAME> para aquellos visores que no soporten frames, va incluida la directiva de <BODY>...</BODY> entre las que indicaremos la página de HTML que queremos mostrar pero sin FRAMES, dado que si el navegador accede a la segunda opción definida en <NOFRAMES>...</NOFRAMES>, indica que no soporta los frames, mientras que si sí los soporta, esta segunda opción de <NOFRAMES>...</NOFRAMES>, será obviada por el mismo.

Por ello podemos y la recomendación es hacer siempre uso de la directiva <NOFRAMES>...</NOFRAMES>, para poder dar la opción al visitante, de que pese a que no tenga el navegador apropiado, poder ver la alternativa a la página con frames que hemos confeccionado.

Vemos por lo tanto, que los elementos definidos para el empleo de frames son:

  • FRAMESET, que define un conjunto de frames,
  • FRAME, que define las características de un frame concreto, y
  • NOFRAMES, que permite incluir información para visores que no disponen de soporte para múltiples frames.

Al usar Frames, nos encontramos con un problema. Cuando queramos mostrar una página Web debemos indicarle al visor en que subventana queremos que se muestre. Por defecto se mostrará en la ventana donde se encuentre el enlace. Para poder escoger la subventana de destino del Hyperenlace se añade un nuevo parámetro a la directiva <A HREF=“...”>... </A>. Este parámetro se llama TARGET y puede tener los siguientes valores:

  • TARGET="nombre de ventana"

    Muestra el Hyperenlace en la ventana cuyo nombre se indica. Previamente, tendremos que hacer definido el nombre de la ventana en cuestión con el atributo NAME=“nombre de ventana” dentro del atributo <FRAMESET>, que indicará el nombre de la ventana propia.

  • TARGET="_blank"

    Abre una nueva copia del visor y muestra el Hyperenlace en ella. (Si usamos Netscape esto provoca que tengamos funcionando dos copias del programa).

  • TARGET="_self"

    Se muestra el Hyperenlace en la subventana activa.

  • TARGET="_parent"

    El Hyperenlace se muestra en el <FRAMESET> definido anteriormente al actual. Si no hay ningún <FRAMESET> anterior se muestra a pantalla completa suprimiendo todas las subventanas de la pantalla.

  • TARGET="_top"

    Suprime todas las subventanas de la pantalla y muestra el Hyperenlace a pantalla completa.

Una última recomendación ante de que te pongas a hacer frames sin ton ni son, es que debes de pensar que suele tardar más el cargar las páginas este tipo de método. Un ejemplo: un frame de 3 cuadros, tendrá qe cargar 3 páginas distintas para poder dar la visualización completa de la página. Debes de plantearte el poner frames muy seriamente, ya que son muchas veces motivo de rechazo por algunos de los internautas, debido a su lentitud al cargar.

Anterior Menu Anterior