Frames - Una página en cada marco

  • Por
Vemos cómo serían las distintas páginas independientes que componen un sitio creado con frames.
Las páginas que mostraremos en cada marco son documentos HTML iguales a los que venimos creando anteriormente. Podemos colocar cualquier elemento HTML de los estudiados en este manual, como etiquetas de párrafo, imágenes, colores de fondo, etc.

Cada documento, como ya hemos indicado, se escribe por separado en su propio archivo HTML. Para el ejemplo del capítulo anterior podemos definir los archivos HTML de la siguiente manera.

pagina1.html
Es la página que contiene el titular de la web. Simplemente se trata de una etiqueta <H1> de titular. La página tiene su propio título, con la etiqueta <TITLE>, que no se podrá visualizar por ningún sitio a no ser que se muestre esta página sin los frames, ya que las páginas dentro de los marcos heredan el título de la definición de los frames.

<html>
<head>
    <title>Titulo Carnicería Pepe</title>
</head>

<body bgcolor="#DECC09">
<h1 align=center>Carnicería PEPE</h1>
</body>
</html>

pagina2.html
Es la página que se presentará en el área principal de la definición de frames, es decir, la página que tiene más espacio para visualizarse y donde pondremos los contenidos de la web. En este caso muestra un mensaje de bienvenida a la web, que hará las veces de portada.

<html>
<head>
    <title>Portada de Carnicería PEPE</title>
</head>

<body bgcolor="#CF391C" text="#ffffff">
<h1 align="center">Bienvenidos a nuestra web</h1>
<br>
<br>
La carnicería PEPE, con más de 100 años de experiencia, es la mejor fuente de carnes de vacuno y cerdo de la comunidad.
<br>
<br>
Tanto en invierno como en verano puede encontrar nuestras ofertas de temporada de primera calidad.
</body>
</html>

pagina3.html
En esta página se mostrará la barra de navegación por los contenidos del sitio. Contiene enlaces que deberían actualizar el contenido del área principal de la declaración de frames, para mostrar los distintos contenidos del sitio, por ejemplo, la portada, los productos, la página de contacto, etc.

<html>
<head>
    <title>Barra de navegación de carnicería PEPE</title>
</head>

<body bgcolor="#AC760E" link="ffffcc" vlink="ffffcc">
<div align="center">
<b>
<a href="pagina2.html">Portada</a> |
<a href="productos.html">Productos</a> |
<a href="contacto.html">Contacto</a>
</b>
</div>
</body>
</html>

Podemos ver cómo queda la página de frames con estos contenidos, que simulan la página de una carnicería.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Naxe

11/5/2007
Hay un fallo en la codificacion de los frames de este ejemplo. Falta poner la etiqueta "principal" en el frame de pagina2.html . No obstante dos temas atras esta el mismo ejemplo correctamente. Un saludo y gracias por el manual.

Leopoldo

11/10/2007
Existe un problema en el ejemplo de la barra de navegación de la carnicería. Al no definir el atributo TARGET los vínculos accedidos están mostrándose dentro del marco de navegación.

Solución: Definir el atributo NAME en los marcos y utilizar este como destino de los vínculos:

· Página de marcos:

<html>
<head>
<title>Definición de Frames</title>
</head>
<frameset rows="15%,*,75">
<frame src="pagina1.html">
<frame src="pagina2.html" name="cuerpo">
<frame src="pagina3.html">
</frameset>
</html>

· Marco de navegación:

<html>
<head>
<title>Barra de navegación de carnicería PEPE</title>
</head>

<body bgcolor="#AC760E" link="ffffcc" vlink="ffffcc">
<div align="center">
<b>
<a href="pagina2.html" target="cuerpo">Portada</a> |
<a href="productos.html" target="cuerpo">Productos</a> |
<a href="contacto.html" target="cuerpo">Contacto</a>
</b>
</div>
</body>
</html>

paris

13/6/2009
macos
¿como se pasa de varios marcos a uno solo?

Rodrigo

16/5/2010
buen tema para estudiar
ME parece muy interesante y bastante util.
gracias por la info.

saritta_33

15/7/2011
No me sale
Hago todo lo que pone y no me queda como en el ejemplo. Simplemente se me ve la estructuras de los marcos, pero no el contenido. He asociado cada marco a una página, pero no se ve el resultado.
En que puedo estar fallando?
Gracias.

uniformeazul

14/6/2012
Por favor...para quienes ya saben un poco
Tengo el mismo problema que Sarita, por favor a ver si nos iluminan un poco, muchas gracias

Saludos a todo el personal que conforma Desarrollo web, ustedes estan realizando una gran labor, poseen una página estupenda! No desmayen...porque en el Camino recibirán su recompensa!!!