Los Frames son útiles si queremos dividir nuestra página principal en varios marcos y que cada uno contenga una página Web independiente. Esto puede resultar útil si queremos hacer, por ejemplo, una ventana con un menú para navegar en las secciones y otra en la que se irian mostrando las secciones navegadas.
La etiqueta que define la estructura de Frames es "<frameset>...</frameset>", la cual se escribe en lugar del "<body>...</body>" de la página Web, y tiene los siguientes parámetros:
* COLS="100,10%,..." : permite definir el número de columnas en las que se dividirá la página y cada una con su ancho, ya sea en pixeles como en porcentajes. Si en alguno de los campos de ancho de columna escribimos "*", el navegador ajustará el ancho de dicha celda al sitio disponible.
* ROWS="100,10%,*,..." : igual que COLS, solo que define las líneas horizontales
* frameborder="1" : define el ancho del borde del frame en pixeles
* framespacing="0" : define la separación entre frames en pixeles
* bordercolor="blue" : define el color del borde (nombres de colores elementales en inglés)
La etiqueta FRAMESET solo define la estructura, y ahora para definir cada uno de los marcos, se usa la etiqueta "<frame> (sin etiqueta de cierre)" dentro de la FRAMESET. Tiene los siguientes atributos:
* src="a.html" : es la página web que mostrará el marco en su interior
* name="izquierda" : es el nombre del marco. Esto es útil porque si usamos el atributo target="izquierda" de la etiqueta "<a>", podemos hacer que esa página se muestre en dicho marco, sea cual sea el marco que contenía el enlace
* scrolling="auto/yes/no" : permite poner las barras de desplazamiento vertical/horizontal en dicho marco
Os dejo aquí un ejemplo entero del uso de frames:
Código: Seleccionar todo
<html>
<head>
<title>Mi página</title>
</head>
<frameset rows="20%,*" >
<frame name="izquierda" src="a.html" scrolling="auto" >
<frame name="derecha" src="b.html" scrolling="auto" >
</frameset>
</html>
* src="a.html" : la dirección de la página web que mostrará en su interior.
* width=500 : ancho de la página incrustada.
* height=400 : alto de la página incrustada
* AllowTransparency : permite hacer que el fondo de la página incrustada se pueda hacer invisible.
* frameborder="0" : define el ancho en pixeles del borde de la página incrustada.