Los marcos o frames se utilizan para mostrar más de un documentos HTML en una sola ventana. Eso significa que tendrá una pagina sin contenido, que tendrá la función de decir al navegador que paginas tiene que mostrar. Con el uso masivo de PHP y CSS, esta técnica se esta utilizado cada vez menos.
Generalmente, los marcos son utilizados para visualizar un menú en una parte y el contenido en otra parte. Cuando alguien hace click desde el menú, otra página se abrirá en la parte del contenido, sin cargar de nuevo toda la pagina.
Vamos a ejemplificar esto usando el siguiente código:
html<html>
<head></head>
<frameset cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html>html<html>
<head></head>
<frameset rows="20%,*">
<frame src="title.html">
<frameset cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</frameset>
</html>frameset rows="#%, *" - "rows" determina la altura de cada marco que será visualizado. En el ejemplo anterior escogimos que el primer marco sería del 20%, y el espacio sobrante será dividido entre menu.html y content.html
Debes haber notado que entre los marcos hay algunas lineas grises que la mayoría de las veces no son deseadas. Borrarlas es posible usando las etiquetas de frameborder y framespacing. Estos atributos serán introducidos bajo la etiqueta frameset.
**Nota: Frameset y frameborder son el mismo atributo. Hay algunos buscadores que no los reconocen a ambos, tan sólo a uno. Con esto queremos decir, que lo mejor sería utilizarlos ambos para mayor seguridad.
Aquí hay un ejemplo prático:
html<html>
<head></head>
<frameset border="0" frameborder="0" framespacing="0" rows="20%,*">
<frame src="title.html">
<frameset border="0" frameborder="0" framespacing="0" cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</frameset>
</html>Para mantener el menú en su posición actual y cuando demos click en la página de contacto, por ejemplo, abrirla en el lugar del contenido de la página, nombraremos cada marco y especificaremos el lugar donde se abrirá utilizando la etiqueta base target.
Aquí está nuestro código para la página:
html<html>
<head>
<base target="content">
</head>
<frameset rows="20%,*">
<frame name="title" src="title.html">
<frameset cols="30%,*">
<frame name="menu" src="menu.html">
<name="content" src="content.html">
</frameset>
</frameset>
</html>Puedes continuar personalizando los marcos usando el noresize y el scrolling
html<html>
<head></head>
<frameset border="2" frameborder="1" framespacing="2" rows="20%,*">
<frame src="title.html" noresize scrolling="no">
<frameset border="4" frameborder="1" framespacing="4" cols="30%,*">
<frame src="menu.html" scrolling="auto" noresize>
<frame src="content.html" scrolling="yes" noresize>
</frameset>
</frameset>
</html>