Los frames sirven para subdividir la pantalla del navegador en diferentes ventanas. Cada una de estas ventanas se podrá manipular por separado, permitiendo mostrar en cada una de ellas una página diferente. Esto es muy útil para, por ejemplo, mostrar permanentemente en una ventana los diferentes contenidos de tu página, y en otra ventana mostrar el contenido seleccionado.
7.1 El Tag <frameset>
Para definir las diferentes subventanas o frames se utilizan los tags <frameset>, </frameset> y <frame>. El tag <frameset> indica como se va a dividir la ventana principal. Pueden incluirse varios tags <frameset> juntos con el objeto de subdividir una subdivisión. Los atributos de <frameset> son rows y cols en función de si la división de la pantalla se realiza por filas (rows) o columnas (cols). Los parámetros rows y cols se acompañan de un grupo de números que indican en puntos o en porcentaje el tamaño de cada una de las subventanas. En caso de utilizar rows los tamaños de las subventanas se entienden indicados de arriba a abajo, es decir, el primer valor será el asignado a la ventana superior, el segundo a la ventana inmediatamente inferior, etc. En el caso de cols los tamaños se aplican de izquierda a derecha. A diferencia de los demás tags este debe colocarse entre los tags </head> y <body>.
| Ejemplos |
Resultado |
</head>
<frameset rows ="25%,50%,25%">
</frameset>
<body> |
Crea tres subventanas horizontales, la primera ocupará un 20% de la ventana principal, la segunda un 50% y la tercera un 25%. |
</head>
<frameset cols="220,*,200">
</frameset>
<body> |
Crea tres subventanas verticales, la primera y la tercera tendrán un "ancho" fijo de 220 y 200 puntos respectivamente. La segunda ocupará el resto de la ventana principal (*). |
- </head>
<frameset cols = "30%,*"> - <frameset rows="60%,*">
</frameset>- </frameset>
- <body>
|
En este caso "junta" 2 tags. La primera divide la ventana principal en dos subventanas verticales, la primera ocupa un 30% de la ventana principal y la segunda el resto. El segunda tag vuelve a subdividir la primera subventana vertical creada anteriormente, pero esta vez en dos subventanas horizontales, la superior ocupará un 20% de la subventana, y la inferior el resto. En total habrán 3 subventanas. |
7.2 El Tag <frame>
El tag <frame> indica las propiedades de cada subventana. Es necesario indicar un tag <frame> para cada subventana creada porque además el tag <frame> indica la página que el navegador mostrará en la subventana creada. Para ello se le agrega el atributo src="nombre", donde "nombre" es el nombre de la página a mostrar. Entonces los ejemplos anteriores quedarían:
| Ejemplos |
Resultado |
</head>
<frameset rows="25%,50%,25%">
<frame src="pagina1.html">
<frame src="pagina2.html">
<frame src="pagina3.html">
</frameset>
<body> |
Crea tres subventanas horizontales, la primera mostrará la "pagina1.html", la segunda "pagina2.html" y la tercera la "pagina3.html". Ejemplo |
</head>
<frameset cols="220,*,220">
<frame src="pagina1.html">
<frame src="pagina2.html">
<frame src="pagina3.html">
</frameset>
<body> |
Crea tres subventanas verticales, la primera mostrará la "pagina1.html", la segunda "pagina2.html" y la tercera la "pagina3.html". Ejemplo |
- </head>
<frameset cols="30%,*"> - <frameset rows="60%,*">
<frame src="pagina1.html">
<frame src="pagina2.html">
</frameset> - <frame src="pagina3.html">
- </frameset>
- <body>
|
En este caso "junta" 2 tag. La primera divide la ventana principal en dos subventanas verticales. La primera subventanas vertical está dividida en dos subventanas horizontales. La subventana horizontal superior mostrará la "pagina1.html". La subventana horizontal inferior mostrará la "pagina2.html" La segunda subventana vertical mostrará la "página3.html". Ejemplo |
7.3 Atributos de el Tag <frame>
| Atributo |
Función |
| name = "nombre" |
Indica el nombre al que te refieres a esa subventana. |
| marginwidth = número |
Indica el margen izquierdo y derecho de la subventana en puntos. |
| marginheight = número |
Indica el margen superior e inferior de la subventana en puntos. |
| scrolling = "yes/no/auto" |
Indica si se aplica una barra de desplazamiento a la subventana en el caso de que la página que se cargue en ella no quepa en los límites de la subventana. El valor "yes" muestra siempre la barra de desplazamiento, "no" no la muestra nunca (la zona de la página que no quepa en la subventana no se verá), y "auto" la muestra sólo en caso de que sea necesario para poder ver la página. |
| noresize |
Si se indica este parámetro, el usuario no podrá "redimensionar" las subventanas con el navegador. Un usuario que este viendo una página con frames puede redimensionarlas seleccionando un borde de la subventana con el cursor y desplazándolo. |
| border = número |
Indica el grosor del "borde" que separa un frame con otro. |
Los navegadores que no soportan frames, no mostrarán nada de lo indicado con estos tags. Es por ello que existe un tag llamado <noframes>, </noframes>. Todo los indicado entre este tag será lo que muestren los navegadores sin capacidad para visualizar frames. Los navegadores que soporten frames no tomarán en cuenta los tags incluidos entre <noframes> y </noframes>.
Un ejemplo completo de frames con comentarios es el siguiente:
<html>
<head>
<title>| | *Mundo Paul* | |</title>
</head>
- <frameset cols="125,*">
- <!-- Creo dos subventanas verticales, la de la izquierda tiene un ancho fijo de 125 pixeles, la de la derecha el resto -->
- <frame src="indice.html" name="indice" scrolling="auto" noresize>
<!-- Llamo a la subventana izquierda con el nombre "indice" y muestro la página indice.html -->
- <frame src="home.html" name="contenido" border="0" noresize>
<!-- Llamo a la subventana derecha con el nombre "contenido" y muestro la página home.html -->
- </frameset>
<!-- Cierro la definicion de las subventanas -->
- <noframe>
<!-- Lo que se mostrará si el navegador no soporta Frames -->
<body>
Su navegador no muestra Frames. Pulse <a href="home.html">aqui</a> para ir a la página sin Frames.
</body>
</noframe>
</html> |
7.4 Enlaces con Frames
Una de las tantas funciones de los frames es que puedes hacer que un enlace que está en una subventana se pueda ejecutar en otra subventana. Esto se puede lograr usando el atributo name de el tag <frame>. Dale a cada frame un nombre distinto (como en el código anterior) y cuando hagas un enlace con el tag <a> le pones en el atributo target el nombre del frame donde quieres que se ejecute el enlace. Es decir lo siguiente
target="nombre_ventana"
Donde nombre_ventana es el nombre del frame donde quieras que se ejecute el enlace. Por ejemplo los enlaces del índice de la izquierda les agregé target="home" para que se abran en esta subventana. Si no agregas target, el enlace se ejecutará en la misma subventana en que se encuentra el enlace.
|
