Introduccion
Los frames (marcos o cuadros) permiten dividir la ventana en varias más pequeñas, de modo que en cada una de ellas se carga una página HTML distinta. Las versiones más antiguas de los navegadores no tienen implementada esta característica, por lo que no podrán verlos.
Los frames, nos permiten partir la ventana del navegador en diferentes áreas. Cada una de estas áreas son independientes y han de ser codificadas con archivos HTML también independientes. Como resultado, cada frame o marco contiene las propiedades específicas que le indiquemos en el código HTML a presentar en ese espacio. Así mismo, y dado que cada marco es independiente, tendrán sus propias barras de desplazamiento, horizontales y verticales, por separado.
Existen en la Web muchas páginas que contienen frames y seguro que todos hemos tenido la ocasión de conocer algunas. Se suelen utilizar para colocar en una parte de la ventana una barra de navegación, que generalmente se encuentra fija y permite el acceso a cualquier zona de la página web. Una de las principales ventajas de la programación con frames viene derivada de la independencia de los distintos frames, pues podemos navegar por los contenidos de nuestro web con la barra de navegación siempre visible, y sin que se tenga que recargar en cada una de las páginas que vamos visitando.
Objetivos
1. Conocer como insertar frames en nuestras paginas.
2. Conocer como dividir la pantalla en columnas.
3. Conocer como dividir la pantalla en filas.
4. Conocer como dividir la pantalla en filas y columnas a la vez.
Etiquetas
<frameset> </frameset> - agrupa los marcos horizontal o verticalmente.
<frame> - establece los marcos.
Atributos
rows - establece la cantidad de marcos que se mostraran horizontalmente (numero de filas).
cols - establece la cantidad de marcos que mostraran verticalmente (numero de columnas).
frameborder - establece si los marcos muestran borde (yes or no).
src - establece la pagina que se mostrara en el marco (url de la pagina).
scrolling - establece si el marco muestra la barra de desplazamiento (yes or no).
noresize - establece si el marco puede cambiar de tamano.
Insertar marco
Para dividir nuestra pantalla en marcos (cada uno con su respectiva pagina Web), haremos uso de las etiquetas <frameset> y <frame>. La etiqueta <frameset> agrupa los marcos que creemos, y la etiqueta <frame> es el marco donde enlazamos la pagina Web que deseamos mostrar.
Ejemplo:
<html>
<head>
<title> Pagina principal </title>
</head>
<frameset rows="80, *">
<frame src="pagina1.html" scrolling="no" noresize="noresize" />
<frame src="pagina2.html" scrolling="yes" />
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>
Observe que la etiqueta <frameset> de apertura indica con su atributo "rows" cuantos marcos horizontalmente mostrara en la pagina principal.
NOTA: En el atributo "rows" se establece el tamano de los marcos que hay, separados por coma (el simbolo "*" indica todo el espacio disponible).
Insertar marcos horizontalmente
Para insertar marcos horizontalmente se hace uso del atributo "rows". Recuerde que se indica el tamano de los marcos separados por comas.
Ejemplo:
<html>
<head>
<title> Pagina principal </title>
</head>
<frameset rows="80, *" frameborder="no">
<frame src="pagina1.html" scrolling="no" noresize="noresize" />
<frame src="pagina2.html" scrolling="yes" />
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>
Insertar marcos verticalmente
Para insertar marcos horizontalmente se hace uso del atributo "cols". Recuerde que se indica el tamano de los marcos separados por comas.
Ejemplo:
<html>
<head>
<title> Pagina principal </title>
</head>
<frameset cols="80, *">
<frame src="pagina1.html" scrolling="no" noresize="noresize" />
<frame src="pagina2.html" scrolling="yes" />
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>
Insertar marcos horizontal y verticalmente
Para insertar marcos tanto horizontal como verticalemente, se utiliza varias veces la etiqueta <frameset>.
<html>
<head>
<title> Pagina principal </title>
</head>
<frameset rows="50, *" frameborder="yes">
<frame src="pagina3.html" scrolling="no" noresize="noresize" />
<frameset cols="200, *" >
<frame src="pagina1.html" scrolling="no" noresize="noresize" />
<frame src="pagina2.html" scrolling="yes" />
</frameset>
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>
Recuerde que la etiqueta <frameset> agrupa marcos, es decir, agrupe marcos horizontalmente y otros verticalmente, finalmente combine los grupos de marcos para formar lo que este buscando.
Actividad
Escriba el siguiente codigo en un BLOC DE NOTAS, guardelo como pagina Web y verifique que se muestre correctamente la pagina con marcos.
<html>
<head>
<title> Pagina principal </title>
</head>
<frameset cols="200, *" frameborder="yes">
<frame src="titulo.html" scrolling="no" noresize="noresize" />
<frameset rows="80, *" >
<frame src="menu.html" scrolling="no" noresize="noresize" />
<frame src="bienvenido.html" scrolling="yes" />
</frameset>
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>
Recuerde crear primero las paginas titulo.html, menu.html y bienvenido.html para que la pagina principal funcione correctamente.
No hay comentarios:
Publicar un comentario
Comente sus dudas, sugerencias o temas que desee conocer: