Autor
1.- ¿Qué es un frameset?
Un frameset, conocido en español como conjunto de marcos, es un archivo que sirve para dividir la página en varias ventanas cuadradas debido a que manda a llamar varios archivos html independientes entre sí nombrados frames (marcos).
La ventaja de los frames es que una sección de la página queda constante y no se tiene que cargar cuando se llama a una liga, por lo tanto es ideal para colocar navegadores.
La desventaja es que ocupa un espacio de la página y no se puede quitar.
2.- El tag <frameset>
Se utiliza para definir como dividir la página en frames.
El frameset se define con una cantidad de filas y/o columnas (rows, columns)
3.- El tag <frame>
Define los documentos html a llamar por cada frame.
Ejemplo:
Código:
<frameset cols="100,*">
<frame src="frame1.htm" name="izquierdo" scrolling="NO" noresize>
<frame src="frame2.htm"name="principal" scrolling="AUTO" noresize>
</frameset>
<frame src="frame1.htm" name="izquierdo" scrolling="NO" noresize>
<frame src="frame2.htm"name="principal" scrolling="AUTO" noresize>
</frameset>
Creamos un frameset horizontal que ocupa 100 pixeles de izquierda a derecha de nuestra pantalla. El otro frame ocupa el % restante. De tal forma que nuestro frame principal estará siempre fijo sin importar la resolución o el tamaño de la ventana del navegador
4.- Propiedades del <frameset>
<frameset cols="100,*" frameborder="YES" border="1" framespacing="0" bordercolor="#000033">
frameborder = Define si queremos un borde en nuestro frame (YES, NO)
border = El ancho del borde, si frameborder es igual a YES
framespacing = El espacio que deja en el borde del frame
bordercolor = El color del borde
5.- Propiedades del <frame>
src= El archivo html, asp, php que vamos a llamar.
name= El nombre de la venta que nos servirá de referencia para enviar parámetros con html o javascript.
scrolling= Si deseamos que salga la barra de scroll (YES, NO, AUTO) *** Auto es igual a automático, lo calcula el navegador por nosotros.
noresize = Si queremos que el frame no pueda cambiar de tamaño al mover con el mouse
6.- Cómo crear una liga
Una pregunta recurrente es:
***Cuándo creo un botón me abre la ventana en la misma ventana que mi botón***
Esto es muy simple sólo se le debe de decir al botón que ventana utilizar cuando se navega, quedando así.
<a href="frame5" target="principal">
Donde principal es la ventana más grande donde desplegamos el contenido.
Si sólo usamos 2 frames se puede utilizar este tag después del body para eliminar el target de nuestro a href.
Código:
<body>
<base target="principal">
</body>
<base target="principal">
</body>
Ejemplo Final:
home.html
Código:
<html>
<head>
<title>Ejemplo</title>
</head>
<frameset cols="100,*" framespacing="1" frameborder="yes" border="1"
bordercolor="#000033">
<frame src="frame1" name="izquierdo" scrolling="NO" noresize>
<frame src="frame2" name="principal">
</frameset>
<noframes><body>
</body></noframes>
</html>
<head>
<title>Ejemplo</title>
</head>
<frameset cols="100,*" framespacing="1" frameborder="yes" border="1"
bordercolor="#000033">
<frame src="frame1" name="izquierdo" scrolling="NO" noresize>
<frame src="frame2" name="principal">
</frameset>
<noframes><body>
</body></noframes>
</html>
izquierdo.html
Código:
<html>
<head>
</head>
<body>
Frame Izquierdo
<a href="http://www.yahoo.com" target="principal">Yahoo</a>
</body>
</html>
<head>
</head>
<body>
Frame Izquierdo
<a href="http://www.yahoo.com" target="principal">Yahoo</a>
</body>
</html>
principal.html
Código:
<html>
<head>
</head>
<body>
Frame Principal
</body>
</html>
<head>
</head>
<body>
Frame Principal
</body>
</html>
7.- Tipos de target
Como hemos visto, se puede utilizar como target un nombre que le hemos dado a un frame, sin embargo, existen otros tipos de target que menciono a continuación.
Código:
target="_top"
target="_blank"
target="_self"
target="_parent"
target="_blank"
target="_self"
target="_parent"
_top = quita los marcos
_blank = abre una nueva ventana
_self = pone el documento en la misma ventana (funciona igual si no pones target)
_parent = abre la liga en el frameset padre (si no se tiene un padre, funciona como _top)
USO:
<a href="liga.htm" target="_blank">Liga</a>
8.- Etiquetas para navegadores que no soportan frames
Para los navegadores que no soportan frames se pueden utilizar las etiquetas <noframes> para poner contenido en dicho caso. (esto no afecta a los navegadores que si soportan frames, que son los más usados)
Código:
<noframes>
<body>
</body>
</noframes>
<body>
</body>
</noframes>
****** FAQ ******
¿Cuantos frames puede contener un frameset?
No importa el número
¿Un frameset puede contener otro frameset?
Los que sean necesarios
¿En que página deben de quedar mis keywords?
En el frameset ya que es el archivo principal
¿Qué página lleva el título?
En el frameset ya que es el archivo principal
¿Puedo mandar a llamar páginas que no están en mi servidor?
Sí. Aquí está el ejemplo
Código:
<html>
<head>
<title>Ejemplo</title>
</head>
<frameset cols="100,*" framespacing="1" frameborder="yes" border="1" bordercolor="#000033">
<frame src="http://www.yahoo.com" name="izquierdo" scrolling="NO" noresize>
<frame src="http://www.altavista.com" name="principal">
</frameset>
<noframes><body>
</body></noframes>
</html>
<head>
<title>Ejemplo</title>
</head>
<frameset cols="100,*" framespacing="1" frameborder="yes" border="1" bordercolor="#000033">
<frame src="http://www.yahoo.com" name="izquierdo" scrolling="NO" noresize>
<frame src="http://www.altavista.com" name="principal">
</frameset>
<noframes><body>
</body></noframes>
</html>
¿Cómo cambiar dos frames con una sola liga?
Código:
<html>
<head>
<script>
function CambiaFrames()
{
parent.izquierdo.location="liga.htm"
parent.principal.location="liga2.htm"
}
</script>
</head>
<body>
<a href="#" onClick="CambiaFrames();"> Liga </a>
</body>
</html>
<head>
<script>
function CambiaFrames()
{
parent.izquierdo.location="liga.htm"
parent.principal.location="liga2.htm"
}
</script>
</head>
<body>
<a href="#" onClick="CambiaFrames();"> Liga </a>
</body>
</html>
Donde izquierdo y principal son los nombres que le pusiste a cada frame.
En línea
