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í:
<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
<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
<html> <head> <title>pagina5</title> </head> <body bgcolor="fuchsia"> Página 5: esta va a ser la columna lateral derecha. </body> </html>
página 1: Cabecera
<html> <head> <title>pagina1</title> </head> <body bgcolor="aqua"> Página 1: esta va a ser la cabecera. </body> </html>
página 2: Principal
<html> <head> <title>pagina2</title> </head> <body bgcolor="silver"> Página 2: esta va a ser el contenido. </body> </html>
página 3: Pie
<html> <head> <title>pagina3</title> </head> <body bgcolor="yellow"> Página 3: esta va a ser el pie de página. </body> </html>
Completamos así el diseño de la página mediante frames. ahora la pagina tiene el siguiente aspecto:
No hay comentarios:
Publicar un comentario