Amados u odiados, útiles o inútiles, excelentes o pésimos, los marcos son instrumentos que forman ya parte habitual del web y que los navegadores gestionan hoy día a la perfección. Los detractores de los marcos afirman la inutilidad de subdividir ulteriormente las páginas web, las cuales, en última instancia, pueden resultar poco legibles. Otros, como yo, consideran que los marcos pueden llegar a ser muy útiles ya que se evita cargar las mismas imágenes y se mantienen ordenados el contenido y la estructura del sitio. Naturalmente, abusar de los marcos puede producir como resultado pésimas impostaciones gráficas, obteniendo un efecto contrario al previsto.
Un punto en contra de los marcos es, ciertamente, su incompatibilidad con los programas de navegación gráfica destinados a invidentes, los cuales se bloquean impidiendo la lectura de las páginas.
Una buena solución es crear una versión con marco y una versión sin marco (como esta misma guía ha hecho).
¿Cómo se crean los marcos?
Antes de nada, repasemos rápidamente las marcas HTML de gestión de marcos.
| N2.0 | Documento Marco | <FRAMESET></FRAMESET> | (en lugar de <BODY>) |
| N2.0 | altura en filas | <FRAMESET ROWS=,,,></FRAMESET> | (píxel ó %) |
| N2.0 | altura en filas | <FRAMESET ROWS=*></FRAMESET> | (* = tamaño relativo) |
| N2.0 | anchura en columnas | <FRAMESET COLS=,,,></FRAMESET> | (píxel ó %) |
| N2.0 | anchura en columnas | <FRAMESET COLS=*></FRAMESET> | (* = tamaño relativo) |
| N3.0b | anchura del borde | <FRAMESET BORDER=?> | |
| N3.0b | borde | <FRAMESET FRAMEBORDER="yes|no"> | |
| N3.0b | color del borde | <FRAMESET BORDERCOLOR="#$$$$$$"> | |
| N2.0 | Definición del marco | <FRAME> | (contenido de cada uno de los recuadros) |
| N2.0 | documento que se debe mostrar | <FRAME SRC="URL"> | |
| N2.0 | denominazione del frame | <FRAME NAME="***"|_blank|_self| _parent|_top> | |
| N2.0 | anchura de los márgenes | <FRAME MARGINWIDTH=?> | (margen izquierdo y derecho) |
| N2.0 | altura de los márgenes | <FRAME MARGINHEIGHT=?> | (margen superior e inferior) |
| N2.0 | barra de desplazamiento o no | <FRAME SCROLLING="YES|NO|AUTO"> | |
| N2.0 | no redimensionable | <FRAME NORESIZE> | |
| N3.0b | borde | <FRAME FRAMEBORDER="yes|no"> | |
| N3.0b | color del borde | <FRAME BORDERCOLOR="#$$$$$$"> | |
| N2.0 | contenido en ausencia de marco | <NOFRAMES></NOFRAMES> | (para navegadores antiguos) |
Para crear una página dividida en marcos, es necesario crear varios archivos HTML referidos a un archivo principal, que es el que permite su gestión. Así pues, antes de nada hace falta impostar este archivo "fuente", y, posteriormente, los demás archivos que componen el marco.
Imaginemos
que debemos crear una ventana dividida en marcos como la de la figura,
con un marco en la parte superior fijo (en el cual cargaremos el archivo
"top.htm", que deberemos crear aparte) y un marco central (en el cual
cargaremos el archivo "central.htm", que deberemos, asimismo, crear
aparte) que cambiará según cual sea la página que deba mostrar. Como
hemos señalado antes, la gestión de estos dos marcos correrá a cargo de
un tercer archivo, el cual deberá invocarlos asignándoles una parte de
la página. He aquí el código de esta página:<FRAMESET rows="80,*">
<frame name="alto" src="top.htm">
</FRAMESET>
<frame name="central" src="central.htm">
Como podemos ver, el código del marco está encerrado entre las marcas <FRAMESET></FRAMESET> que se comportan como las marcas usuales <HTML></HTML>.
El tamaño de los marcos, o mejor dicho, el espacio que cada uno de ellos debe ocupar en la página, queda establecido mediante la marca rows="80,*, que significa que el marco alto (que en este caso es una fila, "row") debe tener 80 píxel, mientras que "*" significa que todo el resto debe asignarse al marco central. Asimismo, habríamos podido expresar el tamaño de los marcos en tantos por ciento de esta manera:
<FRAMESET rows="20%,*">
Una vez impostados los dos parámetros <FRAMESET></FRAMESET>, dentro de ellos se definen los nombres y los archivos que deberán invocarse en los dos marcos creados. Es necesario dar un nombre al marco (name="alto") e indicar el archivo HTML que deberá cargarse dentro del marco (SRC="top.htm"). Deben, por tanto, crearse previamente dos archivos de nombre "top.htm" y "central.htm".
Fíjate bien en lo importante que es la colocación dentro del código para una correcta interpretación por parte del navegador. Así, si se invirtiera el orden de esta manera:
<FRAMESET rows="80,*">
<frame name="central" src="central.htm">
</FRAMESET>
<frame name="alto" src="top.htm">
Haz clic aquí para ver el resultado de este marco.
Para crear dos marcos verticales basta sustituir el término "rows" (filas) con el término "cols" (columnas):
- <FRAMESET cols="100,*">
<frame name="sx" src="sx.htm">
<frame name="central" src="central.htm">
</FRAMESET>
Haz clic aquí para ver el resultado de este marco.
Los antiguos navegadores no soportaban los marcos por lo cual, dada la posibilidad de que se use uno de estos viejos programas para visualizar las páginas, es útil insertar un código que advierta de la presencia de marcos y de la imposibilidad de que el navegador los muestre. Éste es el código que debes incluir:
<noframe>
<HTML>
<body>
Atención. Tu navegador no soporta la opción de los marcos. Para ver estas páginas es necesario descargar un navegador que soporte dicha opción. Te aconsejo Netscape 3.0 o superior.
</body>
</html>
</noframe>
Es posible adoptar simultáneamente una división tanto en columnas como en filas, de manera que se cree una ventana dividida en varios marcos. Veamos cómo debemos intervenir en el código HTML del documento según el número y la posición de los marcos que queremos crear.
 Haz clic aquí para ver el resultado de este marco. |
<frameset rows="100,*">
<frame name="central" src="central.htm"> </frameset> |
 Haz clic aquí para ver el resultado de este marco. |
<frameset cols="120,*">
<frame name="central" src="central.htm"> </frameset> |
 Haz clic aquí para ver el resultado de este marco. |
<frameset cols="120,*">
<frame name="central" src="central.htm"> <frame name="bajo" src="basso.htm"> </frameset> |
 Haz clic aquí para ver el resultado de este marco. |
<frameset cols="75%,25%">
<frameset rows="20%,80%*">
<frame name="central" src="central.htm">
|
 Haz clic aquí para ver el resultado de este marco. |
<frameset cols="75%,25%">
<frameset rows="20%,80%*">
<frame name="central" src="central.htm">
|
 Haz clic aquí para ver el resultado de este marco. |
<frameset cols="75%,25%">
<frameset rows="20%,80%*">
<frame name="central" src="central.htm">
|
 Haz clic aquí para ver el resultado de este marco. |
<frameset cols="25%,75%">
<frameset rows="80%,20%">
<frame name="bajo" src="basso.htm">
|
|
 Haz clic aquí para ver el resultado de este marco. |
<frameset cols="20%,60%,20%">
<frame name="central" src="central.htm"> <frame name="dx" src="dx.htm"> |
Para eliminar el borde gris de los marcos, se debe insertar el siguiente código: <frameset cols="20%,60%,20%" border=0>
Para impedir que los marcos sean redimensionados por el visitante:
<frame name="alto" src="top.htm" noresize>
Para eliminar siempre las barras de desplazamiento (scrollbars):
<frame name="alto" src="top.htm" scrolling="no">
Para mostrarlas siempre:
<frame name="alto" src="top.htm" scrolling="yes">
Para mostrarlas sólo cuando son necesarias:
<frame name="alto" src="top.htm" scrolling="auto">
Para regular la distancia del contenido del marco al margen superior (marginheight) y a los márgenes izquierdo y derecho (marginwidth):
<frame name="alto" src="top.htm" marginheight=2 marginwidth=5>
Por lo que se refiere a los enlaces dentro de los marcos (es decir, cómo cargar una página en un marco diverso de aquél en que se encuentra el enlace) hay que hacer referencia al nombre que hemos asignado a los diferentes marcos en la fase de realización. Este nombre no se refiere al archivo sino a lo que aparece escrito después de "name=". Por ejemplo, en este caso:
<frame name="alto" src="top.htm">
el nombre asignado es "alto".
Tomemos la siguiente página subdividida en marcos:
|
<frameset cols="20%,60%,20%">
<frame name="central" src="central.htm"> |
Pongamos que de un enlace presente en "SX" tengamos que cargar otra página en el marco "central".
Si el enlace presente en el marco "SX", fuera simplemente:
<A HREF="nuova.htm">Haz clic</A>
la página se cargaría dentro del mismo marco (es decir, "SX") porque sin adecuadas marcas específicas el navegador interpreta que debe cargar la nueva página en el mismo marco en que está presente el enlace.
El código exacto sería:
<A HREF="nuova.htm" TARGET="central">Haz clic</A>
Haz clic aquí para probar.
Otro uso fundamental de la marca <TARGET> es el de llamar un enlace a otra página, la cual se visualizará ocupando la pantalla completa y eliminando todos los marcos preexistentes.
Aquí está el código:
<A HREF="nuova.htm" TARGET="_parent">Haz clic</A>
Haz clic aquí para probar.
Si insertas el código:
<base target="_top">
a la cabeza del documento HTML todos los enlaces presentes en las páginas eliminarán los marcos existentes, sin necesidad de ir enlace por enlace.
Es posible también que queramos cargar, con un solo clic, dos o más marcos (naturalmente, la ventana tiene que estar dividida por lo menos en tres marcos).
Tomemos una página subdividida como en la figura:
|
<frameset cols="120,*">
<frame name="centrale3" src="central.htm"> </frameset> |
Lo que queremos es insertar un solo enlace en el marco de "SX" que cargue simultáneamente dos páginas diversas en los dos marcos de la derecha: "alto" y "central". Para ello, es necesario insertar algunas líneas con código JavaScript. La primera parte del código va insertada entre <HEAD></HEAD>:
<HEAD>
<script language="JavaScript">
<!-- Hiding
function loadtwo(page2, page3) {
- parent.alto2.location.href=page2;
parent.centrale3.location.href=page3;
// -->
</script>
</HEAD>
mientras que la segunda parte deberá quedar comprendida entre <BODY></BODY>, donde se quiere insertar el enlace:
<BODY>
<FORM NAME="buttons">
- <INPUT TYPE="button" VALUE="Haz clic"
onClick="loadtwo('nuovo1.htm','nuovo2.htm')">
</BODY>
Haz clic aquí para probar.
Comenta: