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> 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> 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> 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> 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> 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> 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> 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> 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> 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> 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> 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:
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> 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:
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:
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. |
![]() |
![]() |
![]() |