Listado completo de tutoriales

Temario del Tutorial->51 - Frames - Anidamiento de frameset


Los Frames están discontinuados para las versiones actuales de HTML. Solamente téngalo en cuenta si tiene que hacer el mantenimiento de sitios que utilizan este elemento HTML. Evite desarrollar nuevos sitios utilizando Frames.

El lenguaje HTML nos permite definir un frameset en la ubicación de un frame, esto se logra anidando frameset.

Vamos a crear una página que contenga dos columnas. La segunda columna la dividimos en dos filas:

-------------------------------------------
|      |                                   |
|      |                                   |
|      |-----------------------------------|
|      |                                   |
|      |                                   |
|      |                                   |
|      |                                   |
|      |                                   |
|      |                                   |
-------------------------------------------

Para resolver este formato de página tenemos que plantear los frameset de la siguiente manera:

pagina1.html
<html>
<head>
<title>prueba de frames</title>
</head>
<frameset cols="200,*">
  <frame src="pagina2.html" noresize>
  <frameset rows="70,*">
    <frame src="pagina3.html" noresize>
    <frame src="pagina4.html" noresize>
  </frameset>
<noframes>
<p>El navegador no soporta frames</p>
</noframes>
</frameset>
</html>

Veamos más detenidamente como hemos creado los frameset, primero el framset externo define en la propiedad cols dos valores

<frameset cols="200,*">

Con esto sabemos que estamos indicando que tendrá dos columnas, la primera de 200 píxeles y la segunda del resto de píxeles.

Luego debemos definir los frames de las dos columnas. Acá esta la diferencia con los otros frames vistos:

  <frame src="pagina2.html" noresize>
  <frameset rows="70,*">

El primer frame lo ocupa el archivo pagina2.html, pero el segundo frame no existe, en su lugar se define otro frameset que inicializa la propiedad rows con los valores 70 y *. Con esto estamos indicando que la segunda columna se divide en dos filas, una de 70 píxeles y la otra del resto de píxeles de la ventana.

Las otras tres páginas no tienen nada nuevo:

pagina2.html
<html>
<head>
<title>prueba de frames</title>
</head>
<body>
<h1>Página A</h1>
</body>
</html>
pagina3.html
<html>
<head>
<title>prueba de frames</title>
</head>
<body>
<h1>Página B</h1>
</body>
</html>
pagina4.html
<html>
<head>
<title>prueba de frames</title>
</head>
<body>
<h1>Página C</h1>
<h1>Página C</h1>
<h1>Página C</h1>
<h1>Página C</h1>
<h1>Página C</h1>
<h1>Página C</h1>
<h1>Página C</h1>
<h1>Página C</h1>
<h1>Página C</h1>
<h1>Página C</h1>
<h1>Página C</h1>
<h1>Página C</h1>
<h1>Página C</h1>
<h1>Página C</h1>
<h1>Página C</h1>
<h1>Página C</h1>
<h1>Página C</h1>
<h1>Página C</h1>
<h1>Página C</h1>
<h1>Página C</h1>
<h1>Página C</h1>
<h1>Página C</h1>
<h1>Página C</h1>
<h1>Página C</h1>
<h1>Página C</h1>
<h1>Página C</h1>
<h1>Página C</h1>
<h1>Página C</h1>
<h1>Página C</h1>
<h1>Página C</h1>
<h1>Página C</h1>
</body>
</html>

Retornar