Marcos
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.
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í.
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:
| 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. |
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.