Tres Frames

24/Mar/2007 HTML 10 Comentarios

La idea de este ejemplo es ver cómo montar una página que contenga tres frames.

La disposición de la página será la siguiente: en el lado izquierdo tendremos un frame de ancho 20% del total, en el lado derecho tendremos dos frames en disposición horizontal. El superior ocupará el 90% del espacio, mientras que el inferior ocupará el 10% restante.

Quedándonos la siguiente disposición:

Frame
de la Izquierda

Frame Superior

Frame
Inferior

Lo primero que tenemos que hacer es definir la página que va a contener la división de los frames y posteriormente cada una de las tres páginas que son el contenido de los respectivos frames.

La página que define el frame utilizará la etiqueta FRAMESET para definir la división. Para definir las divisiones hay que ir de la más general a la más concreta. A si que en nuestro caso la primera división es en columnas y la segunda es en filas, para la columna de la derecha.

A si que la primera división se definiría con el atributo cols de la siguiente forma

Como puedes ver, cuando queremos indicar que el tamaño de un frame es el resto, utilizamos el comodín *.

Una vez definida la división hay que indicarle el contenido de los dos primeros frames. Para el primero, como ya es un contenido fijo utilizaremos la etiqueta FRAME, la cual, mediante el parámetro src indica el contenido de la misma de la siguiente forma:

Es bueno que utilicemos el atributo name para luego poder redirecionar los enlaces a uno u otro frame.

En el caso del segundo frame, como no es un contenido fijo, sino que es otra división, tendremos que utilizar nuevamente la etiqueta FRAMESET. Pero en este caso, con una división en filas:

Como nota final cabe indicar que todavía nos podemos encontrar navegadores que no entiendan de frames (ya es raro, antes era algo más habitual). A si que, para estos casos, es bueno utilizar la etiqueta NOFRAMES con un contenido de texto avisando de que su navegador no soporta frames.


 <body>
  Su navegador no soporta frames <script>window.w3tc_lazyload=1,window.lazyLoadOptions={elements_selector:".lazy",callback_loaded:function(t){var e;try{e=new CustomEvent("w3tc_lazyload_loaded",{detail:{e:t}})}catch(a){(e=document.createEvent("CustomEvent")).initCustomEvent("w3tc_lazyload_loaded",!1,!1,{e:t})}window.dispatchEvent(e)}}</script><script async src=https://lineadecodigo.com/wp-content/plugins/w3-total-cache/pub/js/lazyload.min.js></script></body>