Ejemplo de página con frames (practica 28)
Ejemplo de página con frames
Vamos a hacer un ejemplo clásico de página con cabecera, pie de página y diseño central a tres columnas (menú izquierdo, contenido, y lateral derecho). En principio partiremos la página en horizontal en tres partes (la cabecera, el cuerpo principal, y el pie de página).
El código HTML de la página principal será el siguiente:
Pract28XXXX.html
Pract28XXXX.html
<html> <head> <title>Diseño con frames 1</title> </head> <frameset rows="100,*,100"> <frame src="pagina1-28a.html" /> <frame src="pagina2-28b.html" /> <frame src="pagina3-28c.html" /> </frameset> </html>
Observa como en esta página no está la etiqueta
body la cual ha sido sustituida por la etiqueta frameset. El número de etiquetas frame dentro de la etiqueta frameset debe ser igual al número de filas especificadas en el atributo rows
Cada etiqueta
frame apunta hacia un archivo html mediante el atributo src este archivo es el que se verá en el espacio que ocupa cada fila.
Ahora tenemos que crear los archivos "pagina1.html", "pagina2.html" y "pagina3.html", y colocarlos en la misma carpeta que el archivo principal. estos son sus códigos HTML:
página 1: Cabecera (Pagina1-28a.html)
<html> <head> <title>pagina1</title> </head> <body bgcolor="aqua"> Página 1: esta va a ser la cabecera. </body> </html>
página 2: Principal (Pagina2-28b.html)
<html> <head> <title>pagina2</title> </head> <body bgcolor="silver"> Página 2: esta va a ser el contenido. </body> </html>
página 3: Pie (Pagina3-28c.html)
<html> <head> <title>pagina3</title> </head> <body bgcolor="yellow"> Página 3: esta va a ser el pie de página. </body> </html>
Dentro de cada frame hemos dado un color de fondo diferente y hemos insertado un poco de texto para distinguirlos. El título que demos a cada frame es indiferente, ya que en el navegador sólo se verá el título de la página principal.
El resultado de la página será el siguiente:
Para hacer un diseño a tres columnas debemos partir el segundo frame en tres columnas, para ello, sustituiremos la etiqueta del segundo frame por una etiqueta
frameset con un atributo cols que indique tres columnas, y dentro de esta etiqueta colocaremos las tres etiquetas frame de cada una de las columnas.
el código HTML de la página principal quedará así:
Pract28XXXX-2.html
Pract28XXXX-2.html
<html>
<head>
<title>Diseño con frames 2</title>
</head>
<frameset rows="100,*,100">
<frame src="pagina1.html" />
<frameset cols="15%,*,15%">
<frame src="pagina4.html" />
<frame src="pagina2.html" />
<frame src="pagina5.html" />
</frameset>
<frame src="pagina3.html" />
</frameset>
</html>
Hemos añadido una etiqueta
frameset anidada. Ésta es la segunda fila de la primera etiqueta. dentro de esta etiqueta, conservamos la página 2 como contenido principal, y hemos añadido las páginas 4 y 5 que hacen de columnas laterales.
Observa que el orden en que aparecen las disintas etiquetas
frame en el código es el mismo en el que aparecen en la página (viendo esta de izquierda a derecha y de arriba a abajo); debemos tener en cuenta el orden en que ponemos las páginas para que en cada una de ellas aparezca su archivo. Para completar la página debemos crear los archivos "pagina4.html" y "pagina5.html", los cuales tendrán el siguiente código:
página 4: menú lateral (Pagina4-28d.html)
<html> <head> <title>pagina4</title> </head> <body bgcolor="lime"> Página 4: esta va a ser el menú lateral izquierdo. </body> </html>
página 5: columna lateral derecha (Pagina5-28e.html)
<html> <head> <title>pagina5</title> </head> <body bgcolor="fuchsia"> Página 5: esta va a ser la columna lateral derecha. </body> </html>
Completamos así el diseño de la página mediante frames. ahora la pagina tiene el siguiente aspecto:
Comentarios
Publicar un comentario