Un marco (o frame) es una ventana independiente dentro de la ventana general del navegador. Cada marco tendrá sus bordes y sus propias barras de desplazamiento. Así cada página se dividirá en la práctica en varias páginas independientes.
Para crearlos necesitaremos un documento HTML específico, que llamaremos documento de definición de marcos. En él especificaremos el tamaño y posición de cada marco y el documento HTML que contendrá. Vamos a ver un ejemplo de este tipo de documento:
<HTML> <HEAD> <TITLE>Mi primera página con marcos</TITLE> </HEAD> <FRAMESET COLS="20%,80%"> <FRAME NAME="indice" SRC="indice.html"> <FRAME NAME="principal" SRC="introduccion.html"> <NOFRAMES> <P>Lo siento, pero sólo podrás ver esta página si tu navegador tiene la capacidad de visualizar marcos.</P> </NOFRAMES> </FRAMESET> </HTML>
Vamos a explicar detalladamente este ejemplo antes de investigar algo más a fondo cada una de las etiquetas. Vemos que la cabecera de la página es similar a un documento normal, pero el habitual BODY es sustituido por un FRAMESET. En cada FRAMESET se divide la ventana actual (sea la general o un marco) en varias ventanas definidas o por el parámetro COLS o por ROWS. En éste, separado por comas, se define el número de marcos y el tamaño de cada uno.
Dentro del <FRAMESET> se hacen dos cosas. Primero, definir cada uno de los marcos poniendoles un nombre y especificando qué fichero HTML le corresponde mediante la etiqueta <FRAME>. Por último, especificamos lo que verá el usuario en el supuesto (cada vez más raro) de que su navegador no soporte frames dentro de la etiqueta <NOFRAMES>. Ahora veremos todos estos elementos en mayor detalle.
15.1. Etiqueta <FRAMESET>
Según el estándar, esta etiqueta sólo debería contener el número y tamaño de cada marco, pero las extensiones de Netscape y Explorer al estándar obligan a estudiar un par de parámetros más.
En general, los navegadores dibujan un borde de separación entre los marcos. Si deseas eliminarlo puedes hacerlo de dos maneras: en las etiquetas <FRAME> de cada una de los marcos contiguos al borde a eliminar o incluyendo el parámetro FRAMEBORDER=0 en el <FRAMESET>.
Cuando eliminas ese borde, podrás ver cómo el navegador deja aún un hueco entre marcos. Este se elimina añadiendo los parámetros FRAMESPACING=0 BORDER=0.
Vamos a examinar por último los parámetros COLS y ROWS. Deberemos asignarles una lista de tamaños separada por comas. Se admiten los siguientes formatos de tamaño:
- Con porcentajes: Al igual que con las tablas, podemos definir el tamaño de un marco como un porcentaje del espacio total disponible.
- Absolutos: Si ponemos un número a secas, el marco correspondiente tendrá el tamaño especificado en pixels.
- Sobre el espacio sobrante: Si colocamos un asterisco (*) estaremos indicando que queremos todo el espacio sobrante para ese marco. Podemos poner este símbolo en varios marcos, que se repartirán el espacio equitativamente como buenos hermanos. Si queremos que uno tenga más deberemos ponerle al asterisco un número delante. Así, un marco con un espacio de 3* será tres veces más grande que su compañero, que tiene un asterisco sólo, el pobre.
Por ejemplo, el siguiente código es una muestra de cómo combinar los tres métodos:
<FRAMESET COLS="10%,*,200,2*">
Supongamos que el ancho total de la ventana son 640 pixels. El primer marco ocupará el 10%, es decir, 64 pixels. El tercero necesita 200, luego nos quedan 476 para los otros dos. Como el cuarto debe tener el doble de espacio que el segundo, tenemos aproximadamente 158 pixels para este último y 316 para el cuarto marco.
Hay que tener cuidado cuando usamos valores absolutos en la definición de marcos; debemos asegurarnos de tener al menos un marco con un tamaño relativo si queremos estar seguros del aspecto final de la página.
Por último, indicar que las etiquetas <FRAMESET> se pueden anidar. Esto se hace poniendo otro <FRAMESET> donde normalmente colocamos las etiquetas <FRAME> tal que así:
<FRAMESET COLS="20%,80%"> <FRAME NAME="indice" SRC="indice.html"> <FRAMESET ROWS="*,80"> <FRAME NAME="principal" SRC="introduccion.html"> <FRAME NAME="ejemplos" SRC="ejemplo.html"> </FRAMESET> </FRAMESET>
El resultado del anidamiento lo podréis contemplar aquí.
15.2. Etiqueta <FRAME>
Esta etiqueta define tan sólo las características de un marco determinado, no de un conjunto de ellos. Estos son los parámetros que admite:
| Parámetro | Utilidad |
|---|---|
| NAME | Asigna un nombre a un marco para que después podamos referirnos a él. |
| SRC | Indica la dirección del documento HTML que ocupará el marco. |
| SCROLLING | Decide si se colocan o no barras de desplazamiento al marco para que podamos movernos por su contenido. Su valor es por defecto AUTO, que deja al navegador la decisión. Las otras opciones que tenemos son YES y NO. |
| NORESIZE | Si lo especificamos el usuario no podrá cambiar de tamaño el marco. |
| FRAMEBORDER | Al igual que su homónimo en la etiqueta <FRAMESET>, si lo igualamos a cero se eliminará el borde con todos los marcos contiguos que tengan también este valor a cero. |
| MARGINWIDTH | Permite cambiar los márgenes horizontales dentro de un marco. Se representa en pixels. |
| MARGINHEIGHT | Igual al anterior pero con márgenes verticales. |
15.3. Acceso a otros marcos
Por defecto, cuando pulsamos sobre un enlace situado dentro de un marco, la nueva página a la que queremos acceder la veremos encerrada en ese mismo marco. Es posible que deseemos que esto no ocurra. Por ejemplo, si tenemos un marco que no sirve de índice y otro donde mostramos los contenidos sería deseable que los enlaces del marco índice se abrieran en el otro marco. Esto es posible hacerlo gracias al parámetro TARGET.
Este parámetro se puede colocar en tres etiquetas: <A>, <AREA> y <BASE>. En las dos primeras sirve para indicar el marco en el que abriremos ese enlace en particular y el último modificaremos el marco en el que por defecto se nos muestran todos los enlaces.
Pero para que un parámetro funcione, es habitual que le asignemos un valor, y TARGET no es una excepción. Para indicarle el marco que deseamos le asignaremos el nombre del mismo. Así, en los ejemplos anteriores, si en el marco llamado indice tenemos un enlace que queremos se abra en el marco principal pondremos:
<A HREF="pagina.html" TARGET="principal">
También existen cuatro nombres reservados que podremos utilizar en el parámetro TARGET:
-
_top
Elimina todos los marcos existente y muestra la nueva
página en la ventana original sin marcos.
_blank
Muestra la nueva página en una ventana nueva y sin
nombre del navegador.
_self
Muestra la nueva página en el marco donde está
declarado el enlace.
_parent
Muestra la nueva página en el <FRAMESET>
que contiene al marco donde se declara el enlace. En el ejemplo que
pusimos de <FRAMESET> anidados, una enlace situado en el
marco ejemplo cuyo parámetro TARGET fuese igual
a _parent eliminaría la separación entre los marcos
ejemplo y principal y mostraría en ese nuevo marco
la nueva página.
 |
 Tablas | Hojas de estilo |
