Conjunto de marcos <frameset> |
Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar. Además de mejorar la funcionalidad, pueden mejorar también la apariencia.
Cada uno de los marcos de una página, contiene un documento HTML individual. Por ejemplo, en la imagen de la derecha puedes ver una página con dos marcos. El marco izquierdo contiene el documento menu.htm y el derecho el documento perros.htm. Para poder visualizar la página de este modo, hemos tenido que abrir en el navegador el documento marcos.htm, que es el que en este caso contiene el grupo de marcos.
|  |
El trabajar con marcos puede resultar una tarea algo complicada, sobretodo al principio, por lo que vemos solamente algunos conteptos básicos y ejemplos sencillos.
Como hemos visto si queremos utilizar marcos debemos crear una página con la definición del conjunto de marcos (en el ejemplo anterior la página marcos.htm).
Los conjuntos de marcos se definen a través de las etiquetas <frameset> y </frameset>, que van después de la etiqueta <head>. A través de estas etiquetas se indica el número de marcos en que se dividirá la ventana, cada uno de los cuales será una especie de subventana.
Cuando se insertan las etiquetas <frameset> y </frameset> no hay que insertar las etiquetas <body> y </body>, ya que el cuerpo del documento será el cuerpo de las páginas que se carguen en cada uno de los marcos del conjunto de marcos.
Los atributos que pueden especificarse
sobre la etiqueta <frameset> son los siguientes:
También es posible incluir asteriscos como valores para los atributos cols y rows. Este valor indica que dicha fila o columna ocupará todo lo que quede de ventana o subventana. Cuando existan varias columnas o filas con este valor, se repartirán de forma equitativa lo que quede de ventana.
Por ejemplo, si insertáramos la siguiente línea de código:
Como el atributo rows tiene el valor asterisco, solo habría una fila, que ocuparía todo el alto de la ventana. En este caso concreto no haría falta poner el atributo rows.
Como el atributo cols tiene tres valores, estaríamos dividiendo el documento en tres columnas. La primera columna sería de 142 píxeles de ancho, la tercerá del 25% de la ventana, y la segunda columna ocuparía lo que quedará de ventana (el 75% de la ventana menos 142 píxeles).
También es posible anidar marcos. Es decir, es posible dividir marcos en otros marcos.
Por ejemplo, si insertáramos el siguiente código:
Estaríamos dividiendo el documento en dos columnas. La primera sería de 142 píxeles, y la otra abarcaría el resto de la ventana.
Al mismo tiempo, la primera columna o subventana estaría dividida en dos filas o subventanas horizontales, la primera de ellas de 80 píxeles.
La segunda columna o subventana de la ventana principal se dividiría a su vez en tres columnas, la primera de ellas del 25% de la subventana, y las otras dos se repartirían el resto a partes iguales (se repartirían el 75% de la subventana).
Por último debemos saber que entre las etiquetas <frameset> y </frameset> sólo se pueden encontrar la etiquetas <head> <noframe> <frameset> <frame> y sus correspondientes etiquetas de cierre.
|
Es posible modificar los siguientes atributos de un marco:
Atributo
|
Significado
|
Posibles valores
|
frameborder
|
aparece o no el borde del marco
|
yes o 1
no o 0 |
name
|
nombre del marco
|
cualquier valor
|
noresize
|
si aparece, el usuario no podrá redimensionar el tamaño de este marco
|
no puede tomar valores
|
marginwidth
|
anchura del margen con respecto a los bordes del marco
|
un número, acompañado de % cuando se desee que sea en porcentaje
|
marginheight
|
altura del margen con respecto a los bordes del marco
|
un número, acompañado de % cuando se desee que sea en porcentaje
|
scrolling
|
se mostrará o no la barra de desplazamiento cuando la página del marco no se pueda visualizar completamente en él
|
yes
no auto |
src
|
documento que se cargará en el marco
|
ruta y nombre del documento
|
Por ejemplo, para crear el conjunto de marcos de la página que aparece así:
escribir:
<frameset cols="150,*" frameborder="yes" framespacing="3" border="3" bordercolor="#FF9900">
<frame src="izquierdo.htm" name="marcoizquierdo" frameborder="no" scrolling="no" noresize>
<frame src="derecho.htm" name="marcoderecho" frameborder="no" scrolling="auto">
</frameset>
Escribir
<frameset rows="90,*" framespacing="3" frameborder="yes" border="3" bordercolor="#FF9900">
<frame src="superior.htm" name="marcosuperior" frameborder="yes" scrolling="NO" noresize>
<frameset cols="150,*" framespac
<frame src="superior.htm" name="marcosuperior" frameborder="yes" scrolling="NO" noresize>
<frameset cols="150,*" framespac
ing=
"3" frameborder="yes" border="3" bordercolor="#FF9900"><frame src="izquierdo.htm" name="marcoizquierdo" scrolling="NO" noresize>
<frame src="derecho.htm" name="marcoderecho">
</frameset>
</frameset>
Esta última página está dividida en dos marcos horizontales (rows="90,*"), estando el inferior de ellos dividido en dos marcos verticales (cols="150,*").
Siempre que creamos una página queremos que pueda ser visitada por el mayor número de usuarios, por lo que el hecho de que hayan usuarios cuyos navegadores no soportan los marcos puede resultar un problema.
Las etiquetas <noframes> y </noframes> se utilizan para que su contenido sea visualizado en aquellos navegadores que no soportan los marcos.
Si un navegador no soporta los marcos, no cargará ningún documento en ningún marco, por lo que tendremos que mostrar el cuerpo del documento actual de algún modo. Por ello, han de introducirse las etiquetas <body> y </body> entre las etiquetas <noframes> y </noframes>.
Por ejemplo, si escribiéramos el siguiente código:
Obtendríamos una página con dos marcos, que en el caso de intentar ser visualizada en un navegador que no soportase marcos, mostraría una página con el texto Este documento tiene marcos y tu navegador no los soporta.
Una buena solución para que el mayor número de usuarios pueda visitar nuestra página, es crear nuevas páginas con el contenido de los documentos que deberían mostrarse en los marcos, pero que permitan pasar de unos a otros dentro de la misma ventana.
De este modo, en el caso de que el navegador no soporte los marcos, podemos incluir un enlace a una de estas páginas. Por ejemplo, si escribiéramos el siguiente código:
Cuando la página intentara ser visualizada en un navegador que no soportase los marcos, aparecería el enlace Pulsa aqui para visualizar la página sin marcos. a una ventana sin marcos.
|
Como recordarás, en el tema de hipervínculos vimos los posibles destinos de los enlaces. Estos destinos podían ser _blank, _parent, _self, y _top. Vamos a recordar para qué servía cada uno de ellos, ya que ahora que sabes trabajar con marcos te serán más fáciles de entender.
_blank:
Abre el documento vinculado en una ventana nueva del navegador.
_parent:
Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre.
_self:
Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo.
_top:
Abre el documento vinculado en la ventana completa del navegador, lo cual quiere decir que los marcos de la ventana desaparecerán al abrir el vínculo en ella.
Además de estos destinos para los enlaces, también podrás utilizar los nombres de los distintos marcos de la página. Por ejemplo, si tuvieramos un marco con el nombre marcoderecho, podríamos insertar el enlace:
|
Este enlace cargaría la página de aulaclic en el marco llamado marcoderecho.
Podemos añadir todos estos nuevos destinos a cualquier elemento de la página que contenga algún enlace, ya sea texto, una imágen, un mapa de imagen, un elemento Flash, etc.
Gracias a todo esto podremos hacer que las barras de navegación y el resto de enlaces funcionen a nuestro antojo, cargando unas u otras páginas en alguno de los marcos, en una ventana nueva, en toda la ventana, etc.
Esta tarea puede resultar algo pesada, y al principio complicada, pero da muy buenos resultados finales
|
