Qué son los frames - Tutoriales Diseño Gráfico

Breaking

𝔸𝕡𝕣𝕖𝕟𝕕𝕖 𝕔𝕠𝕟 𝕋𝕦𝕥𝕠𝕣𝕚𝕒𝕝𝕖𝕤

Qué son los frames

 Los frames (en inglés frame = cuadro, bastidor o marco) es un elemento implementado por Netscape, que permite dividir la pantalla en varias áreas independientes unas de otras, y por tanto con contenidos distintos, aunque puedan estar relacionados. No hay límites para el contenido de cada una de estas áreas: tienen las mismas propiedades que la pantalla completa normal, tal y como la conocemos. No hay que confundir los frames con las tablas. Su apariencia, a veces, puede ser similar, pero mientras el contenido de la celda de una tabla es fijo, en un área de pantalla creado por el elemento FRAME se dispone de todos los recursos del HTML. Es una zona viva.

Las páginas que contienen una definición de FRAME no pueden contener el elemento BODY ni ninguno de los elementos que habitualmente aparecen en el BODY antes del elemento FRAMESET que es el que define la creación del FRAME. Si esto no se cumple, el FRAME será ignorado.

La mayoría de visualizadores no soportan los frames. Para que nuestra página con frame no resulte opaca a ellos se utilizará el elemento NOFRAMES que permite ofrecer un texto alternativo en entorno normal.

Los frames permiten una flexibilidad de presentación extraordinaria, y para contenidos muy complejos, de difícil estructura por los medios convencionales del HTML, son casi insustituibles. De nuevo se presenta la duda de para qué visualizador es preferible programar nuestro WWW.

Por supuesto, los frames son parametrizables en cuanto a tamaño y número de áreas, si éstas se pueden redimensionar por el usuario o son fijas, si tienen o no barras de scrolling, se pueden anidar, relacionar sus contenidos, etc. Veamos algunos ejemplos prácticos y su sintaxis:

Un frame básico. Sintaxis general

En general, todas las páginas que contengan un frame deberán ser más o menos así:
<HTML>
<HEAD><TITLE> Mi titulo ></TITLE></HEAD>

<FRAMESET>
     <NOFRAMES>
         <BODY>
             Su visualizador no soporta frames. Pulse 
             <A HREF="indice.htm">aqui </A> para volver.
         </BODY>
    </NOFRAMES>

    <FRAME SRC="pagina1.htm" >
    <FRAME SRC="pagina2.htm" >

</FRAMESET>

</HTML>
Fíjate en que no aparece el elemento <BODY> en su posición habitual, sino dentro de un elemento especial que se activa sólo cuando el visualizador no soporta los frames: NOFRAMES. Si no declaras el área NOFRAMES y el visualizador no soporta este efecto, no se verá nada. Obviamente, los visualizadores que sí soportan frames ignorarán el contenido del área NOFRAMES.

Hasta aquí ya podemos hacernos una idea de cómo funcionan los frames: Lo primero es crear una minipágina con la definición del frame, viene a ser algo así como una "lanzadera". Y por último, crear las páginas que constituirán el contenido de cada una de las áreas definidas. En el ejemplo anterior son pagina1.htm y pagina2.htm. Esta "lanzadera" puede ser invocada con un link desde cualquier página normal.

Un frame de 3 áreas verticales (COLS)

Se vería así:
ABC
Y se escribiría; así:
<FRAMESET COLS=30%,20%,50%>
   <FRAME SRC="a.htm">
   <FRAME SRC="b.htm">
   <FRAME SRC="c.htm">
</FRAMESET>

Ejemplo real

Un frame de 3 áreas horizontales (ROWS)

Se vería así:
A
B
C
Y se escribiría así:
<FRAMESET ROWS=25%,25%,50%>
   <FRAME SRC="a.htm">
   <FRAME SRC="b.htm">
   <FRAME SRC="c.htm">
</FRAMESET>

Ejemplo real

Un frame combinado de un área vertical y dos horizontales

Se vería así:
AB
C
Y se escribiría así:
<FRAMESET COLS=20%,*>
   <FRAME SRC="a.htm">
        <FRAMESET ROWS=40%,*>
           <FRAME SRC="b.htm">
           <FRAME SRC="c.htm">
        </FRAMESETt>
</FRAMESET>

Ejemplo real
Habrás podido comprobar que los parámetros que dimensionan los frames actuan al presentar la página inicialmente. Después, si el usuario lo desea, puede redimensionarlos como quiera. Esta es la opción por defecto. Si no se quiere permitir el redimensionado, se aplica el atributo NORESIZE al elemento FRAME. Así:
    <FRAME NORESIZE SRC.....>
Algo parecido ocurre con las barras de scrolling. Están regidas por el atributo SCROLLING, que puede valer YES NO o AUTO. Por defecto es AUTO. Con esta opción el visualizador decide, en función del contenido, si son necesarias las barras o no. Con YES las pondrá siempre, aunque no sean necesarias, y con NO no las pondrá nunca, aunque sean necesarias.
    <FRAME SCROLLING=YES ....>

Un frame con dos áreas verticales. Una normal, la otra con márgenes forzados para el texto (MARGINWIDTH MARGINHEIGHT)

Se vería así:
AAAAAA
AA
Y se escribiría así:
<FRAMESET COLS=50%,50%>
   <FRAME SRC="a.htm">
   <FRAME SRC="a.htm" 
       MARGINWIDTH=50 
       MARGINHEIGHT=50>
</FRAMESET>

Ejemplo real

Un frame con referencias cruzadas (NAME TARGET)

Se vería así:
AB
Y se escribiría así:
<FRAMESET COLS=50%,50%>
   <FRAME SRC="aa.htm">
   <FRAME SRC="bb.htm" NAME="VENTANA">
</FRAMESET>

Ejemplo real
Esto de los cruces es un poco complicado... fíjate en el contenido de cada página que entra en juego. Cuando actives Ejemplo real el fichero llamado es cruzado.htm. Pruébalo.

FicheroContenidoAcción
aa.htm<A HREF="cc.htm" TARGET="VENTANA">Pone CC en el frame derecho
<A HREF="cc.htm">Trae CC
bb.htmEsto es "VENTANA"No hace nada
cc.htm<A HREF="bb.htm" TARGET="VENTANA">Pone BB en el frame derecho porque se llama "VENTANA"
<A HREF="aa.htm">Trae AA
cruzado.htm<FRAMESET>-
<FRAME SRC="aa.htm">Pone AA en el frame izqdo.
<FRAME SRC="bb.htm" NAME="VENTANA">Pone BB en el frame derecho y le
da como nombre "VENTANA"
</FRAMESET>-
Read more