Mundo Web
manuales - recursos - gráficos - programación...

Frames anidados

Hasta ahora hemos definido frames simples, es decir, la forma de dividir una pagina en una serie de filas o de columnas que nos posibilitan cargar una pagina html independiente dentro de cada marco.

Pero este diseño de pagina, aunque util, es muy simple. Podemos ir mas alla anidando frames, es decir introduciendoo frames dentro de otros previamente definidos. así, podemos dividir una fila en columnas, una columna en filas, etc.

Pero este procedimiento es bastante complejo en su código, por lo que es conveniente ayudarse de alguno de los muchos programas de creación web que existen.

Como ejemplo de esta técnica veamos el siguiente código:

<html>
  <head>
  <title>Mi pagina</title>
  </head>
  <frameset rows="10%,*" frameborder="1" bordercolor="Green">
    <frame name="top" src="top.html" marginwidth="10" marginheight="10" scrolling="no" "noresize frameborder="0">
    <frameset cols="20%,*" >
      <frame name="a" src="a.html" marginwidth="10" marginheight="10" scrolling="no" noresize frameborder="0">
      <frame name="b" src="b.html" marginwidth="10" marginheight="10" scrolling="auto" noresize frameborder="0">
    </frameset >
  </frameset>
</html>

ver resultado.

en la que hemos creado primero dos filas, una con el 10% del alto de ventana y otra con el resto, y luego hemos sustituido esta última fila por dos columnas.

Otro ejemplo sería:

<html>
  <head>
  <title>Mi pagina</title>
  </head>
  <frameset cols="19%,*" frameborder="1" bordercolor="Green">
    <frame name="a" src="a.html" marginwidth="10" marginheight="10" scrolling="no" frameborder="1">
    <frameset rows="22%,*" >
      <frame name="top" src="top.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
      <frameset cols="50%,*">
      <frame name="b" src="b.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="1">
      <frame name="c" src="c.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="1">
      </frameset>
    </frameset >
  </frameset>
</html>

ver resultado.

anterior
siguiente