Frames (Marcos)
1. Documento de definición de los frames
Lo primero que tenemos que hacer es crear un documento HTML en el que definiremos cuántas zonas va
a haber, qué distribución y tamaño van a tener, y cuál va ser el contenido de cada una de ellas.
En el ejemplo que vamos a desarrollar, la página va a tener dos frames distribuidos en columnas (es decir,
uno al lado del otro, en vez de uno encima del otro, lo que sería una distribución en filas).
Con respecto al tamaño, haremos que el primero (el del izquierda) ocupe el 20% del ancho de la pantalla,
y el otro, el 80% restante.
Y con respecto al contenido, el frame de la izquierda va a contener un documento HTML que va a servir
de índice de lo que veamos en el otro (y que vamos a llamar mipagind.html), y el de la derecha otro
documento HTML que va a servir de página de presentación (al que llamaremos mipagpre.html).
Todo lo anterior se refleja en el siguiente documento HTML:
<HTML>
<HEAD>
<TITLE>Mi pagina con frames</TITLE>
</HEAD>
<FRAMESET COLS="20%, 80%">
<FRAMESRC="mipagind.html">
<FRAME SRC="mipagpre.html" NAME="principal">
</FRAMESET>
</HTML>
Obsérvese lo siguiente:
Es un documento parecido a los que conocíamos hasta ahora. La diferencia está en que en vez de utilizar
la etiqueta BODY, que sirve normalmente para delimitar lo que se va a ver en la pantalla, se hace uso de
la etiqueta FRAMESET (definir los frames).
En este caso, con la etiqueta <FRAMESET COLS="20%, 80%"> se define que va a haber dos frames y
que van a ir en columnas. Si hubiéramos querido que fueran en filas, habríamos puesto ROWS (filas, en
inglés). También se define el espacio en anchura que van a ocupar cada uno de ellos en la pantalla. Se ha
puesto como porcentajes del total, pero se podría también haber puesto una cifra absoluta, que
representaría el número de pixels a ocupar.
Ya se ha definido el número de frames, su distribución y su tamaño, pero falta por definir el contenido de
cada frame. Esto se hace con las etiquetas:
<FRAME SRC="mipagind.html">
<FRAME SRC="mipagpre.html" NAME="principal">
Con esto se define que el contenido del primer frame (el de la izquierda) sea el documento HTML
mipagind.html y el del segundo (el de la derecha) sea el documento HTML mipagpre.html.
Obsérvese que en la etiqueta del segundo se ha incluido el atributo NAME="principal", pero no así en el
primero. El motivo es que se necesita dar un nombre al segundo frame, pues, como veremos a
continuación, en el documento del primer frame va a haber unos enlaces que van a ir dirigidos hacia él.
En este caso sólo tenemos dos frames, pero podría haber más, y es necesario distinguirlos unos de otros.
Y el primero no necesita nombre, pues no va a haber enlaces en el segundo dirigidos hacia él.
A este documento le vamos a llamar mipagina.html, pero todavía no lo vamos a guardar, pues falta por
añadir algo que veremos más adelante.
3. Atributos de la etiqueta <FRAMESET>
La etiqueta FRAMESET, como hemos visto en el ejemplo, es la que define la distribución, el número y
tamaño de los frames. Tiene dos atributos: COLS (columnas) y ROWS (filas):
<FRAMESET COLS="xx, yy, zz, ..">
<FRAMESET ROWS="xx, yy, zz, ..">
Define la distribución de los frames en columnas o en filas, según se use uno u otro atributo, es decir,
define el número de frames que habrá, por ejemplo:
<FRAMESET COLS="xx, yy"> (habrá dos frames en columnas)
<FRAMESET COLS="xx, yy, zz"> (habrá tres frames en columnas)
Define el tamaño de los frames, según el valor que demos a xx, yy, zz.... Este valor se puede expresar en:
Un porcentaje del ancho del pantalla (para las columnas), o del alto de la pantalla (para las filas). Así, por
ejemplo:
<FRAMESET COLS="20%, 80%"> (la columna de la izquierda ocupará el 20% del ancho de la pantalla,
y la de la derecha el 80% restante)
<FRAMESET ROWS="10%, 70%, 20%"> (la fila superior ocupará el 10% del alto de la pantalla, la del
medio el 70%, y la inferior el 20%)
Un número absoluto que representa el número de pixels que ocupará cada frame a lo ancho o a lo alto
(según sean filas o columnas). Así, por ejemplo:
<FRAMESET COLS="40, 600"> (la columna de la izquierda tendrá 40 pixels de ancho y la de la derecha
600).
Pero es peligroso utilizar sólo valores absolutos, pues el tamaño de la pantalla varía de un usuario a otro.
Si se va a usar algún valor absoluto para un frame, es mejor mezclarlo con alguno relativo, como los que
vamos a ver a continuación, para que se ajuste el total a la pantalla del usuario
Un valor relativo que se consigue poniendo un asterisco (*), en vez de un número. Esto se interpreta como
que ese frame debe tener el espacio restante. Por ejemplo:
<FRAMESET ROWS="100,*,100"> (Habrá tres filas, la superior y la inferior de una altura fija de 100
pixels, y la del medio obtendrá el espacio restante).
Si hay más de un frame con asterisco, ese espacio restante se dividirá por igual entre ellos. Si hay un
número antes del asterisco, ese frame obtiene esa cantidad más de espacio relativo. Así "2*,*" daría dos
tercios para el primer frame y un tercio para el otro.
Frames sin bordes
Si se desea que no haya un borde de separación entre los frames, se deben incluir el
atributo FRAMEBORDER=0 dentro de la etiqueta FRAMESET. No todas las versiones de los
navegadores lo implementan.
Para que también desaparezcan los huecos de separación entre frames hay que añadir otros dos atributos
(el primero es para el Explorer y el segundo para el Netscape): FRAMESPACING=0 y BORDER=0.
con lo que la etiqueta completa quedaría:
<FRAMESET FRAMEBORDER=0 FRAMESPACING=0 BORDER=0 COLS="xx, yy">
4. Atributos de la etiqueta <FRAME>
Esta etiqueta define las cararacterísticas de un frame concreto, no del conjunto de los frames, como era el
caso con la etiqueta <FRAMESET>. Puede tener los siguientes posibles atributos, que van dentro de la
etiqueta <FRAME>:
SRC="dirección". Esta dirección puede ser la de un documento HTML (tal como hemos utilizado en el
ejemplo), o cualquier otro recurso del Web (o URL). Con este atributo se indica lo que se cargará
inicialmente en el frame. Si no se le pone este atributo a la etiqueta <FRAME>, entonces dicho frame
aparecerá inicialmente vacío, aunque tendrá las dimensiones asignadas.
NAME="nombre_de_la_ventana". Este atributo se usa para asignar un nombre a un frame.
De esta manera se podrá "dar en el blanco" (en inglés, target) en esta página, desde un enlace situado en
otra página. Es decir, que pulsando en otra página un enlace, se cargará precisamente en ésta, tal como
hemos visto en el ejemplo.
El atributo NAME es opcional. Por defecto, todas las ventanas carecen de nombre. Los nombres que se
escojan deben comenzar por un carácter alfanumérico (una letra o un número, pero no otro tipo de símbolo)
MARGINWIDTH="número". Se utiliza este atributo cuando se quiere controlar la el ancho de los
márgenes dentro de un frame. El número que se ponga representa los pixels de los márgenes. Este atributo
es opcional.
MARGINHEIGHT="número". Igual que el anterior, pero referido a los márgenes en altura.
SCROLLING="yes|no|auto". Este atributo se utiliza para decidir si el frame tendrá o no una barra
deslizadora. Si se escoje "yes" tendrá siempre una barra deslizadora. Si se escoje "no" no la tendrá nunca,
y si se escoje "auto", será el navegador quien decida si la tendrá o no. Este atributo es opcional. Su valor
por defecto es "auto".
NORESIZE. A este atributo no se le asigna un valor numérico, como a los demás. Es un indicador para
que la ventana no se pueda re-dimensionar (en inglés, resize) por parte del usuario. Se puede comprobar
en el ejemplo con frames que si se coloca el cursor de ratón entre los dos frames, al pulsarlo y arrastrarlo
en un sentido u otro, varían las dimensiones prefijadas de los frames. Este atributo impide que ocurra esto
en un frame. Es un atributo opcional. Por defecto, todos los frames son re-dimensionables.
FRAMEBORDER="no". Este atributo elimina el borde en un frame, pero si se quiere que se elimine
completamente, también hay que ponérselo al frame contiguo. Si se quiere eliminar los bordes de todos
los frames, se debe colocar en la etiqueta FRAMESET, como hemos visto anteriormente.
El atributo TARGET
En el ejemplo hemos visto que, como queríamos que los enlaces situados en el frame de la izquierda
surtieran efecto no en él mismo, sino en otro frame, teníamos que poner dentro de cada enlace el
atributo TARGET="principal", siendo "principal" el nombre que habíamos dado al segundo frame, en el
documento de definición de frames. Es decir, hemos utilizado este atributo de esta manera:
TARGET="nombre_dado_a_otro_frame". Estos nombres, que los escogemos nosotros, pueden ser
cualquiera, pero con la condición que el primer carácter sea alfanumérico (letra o número).
Pero hay unos nombres reservados (es decir, que no se pueden usar para denominar a un frame), que hacen
que este atributo efectúe unas funciones especiales. Para que cumplan su cometido, es imprescindible
escribir estas palabras reservadas (blank, self y top) en minúsculas.
TARGET="_blank". Hace que se abra una nueva copia del navegador, y el enlace activado se carga en
ella, a pantalla completa. Es decir, tendríamos dos copias del navegador (Netscape, Explorer, etc.)
funcionando a la vez.
TARGET="_self". Hace que el enlace se cargue en el propio frame.
TARGET="_top". Hace que el enlace se cargue a pantalla completa, suprimiendo todos los frames, pero
sin que se cargue una nueva copia del navegador. Este es particularmente útil. Un error muy común es
olvidarse de poner este atributo en los enlaces que están en un frame, con lo que resulta que al ser activados,
la página llamada se carga dentro del propio frame, lo cual es muy molesto si esa página pertenece a otro
sitio del Web, y aún más grave si esa página tiene a su vez frames. Este inconveniente se evita poniendo
este atributo dentro de las etiquetas de los enlaces.
