gestionar marcos (frame)
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 |
|
(en lugar de ) |
| N2.0 |
altura en filas |
|
(píxel ó %) |
| N2.0 |
altura en filas |
|
(* = tamaño relativo) |
| N2.0 |
anchura en columnas |
|
(píxel ó %) |
| N2.0 |
anchura en columnas |
|
(* = tamaño relativo) |
| N3.0b |
anchura del borde |
|
|
| N3.0b |
borde |
|
|
| N3.0b |
color del borde |
|
|
| N2.0 |
Definición del marco |
|
(contenido de cada uno de los recuadros) |
| N2.0 |
documento que se debe mostrar |
|
|
| N2.0 |
denominazione del frame |
|
|
| N2.0 |
anchura de los márgenes |
|
(margen izquierdo y derecho) |
| N2.0 |
altura de los márgenes |
|
(margen superior e inferior) |
| N2.0 |
barra de desplazamiento o no |
|
|
| N2.0 |
no redimensionable |
|
|
| N3.0b |
borde |
|
|
| N3.0b |
color del borde |
|
|
| N2.0 |
contenido en ausencia de marco |
|
(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:
Como podemos ver, el código del marco está encerrado entre las marcas
que se comportan como las marcas
usuales .
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:
Una vez impostados los dos parámetros ,
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:
el navegador invertiría el orden de asignación y cargaría el archivo
"central.htm" en el marco superior, y el archivo "top.htm" en el marco
central.
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):
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:
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.
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.
Para eliminar el borde gris de los marcos, se debe insertar el siguiente código:
>
Para impedir que los marcos sean redimensionados por el visitante:
noresize>
Para eliminar siempre las barras de desplazamiento (scrollbars):
scrolling="no">
Para mostrarlas siempre:
scrolling="yes">
Para mostrarlas sólo cuando son necesarias:
scrolling="auto">
Para regular la distancia del contenido del marco al margen superior
(marginheight) y a los márgenes izquierdo y derecho (marginwidth):
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:
name="alto" src="top.htm">
el nombre asignado es "alto".
Tomemos la siguiente página subdividida en marcos:
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:
Haz clic
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:
Haz clic
Haz clic aquí para probar.
Otro uso fundamental de la marca
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:
Haz clic
Haz clic aquí para probar.
Si insertas el código:
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:
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 :
mientras que la segunda parte deberá quedar comprendida entre , donde se quiere insertar el enlace:
BIBLIOGRAFIA:
http://www.htmlpoint.com/guida/html_13.htm
Lo primero es lo primero. Para este tutorial necesitaremos varios
documentos html. Arranca el Bloc de Notas y copia lo siguiente para
empezar.
Mi página Frame
Le daremos a cada documento un nombre. En el
Tutor de Tablas y en el
Tutor de Formularios hemos usado
nombres de chicos. Creo que es hora de las chicas entren en acción.
Mi página Frame
Magda
Crea una nueva carpeta ( o usa una vacía a ser posible para que
no te líes mucho con los arhcivos) y graba esto como
magda.html.
Ahora hagamos otro documento html.
Mi página Frame
Carmen
Ok, ahora, vamos a lo divertido... vamos a hacer la página
maestra. Empieza con esto.
Mi página Frame - Página maestra
Quita las sentencias
. La página maestra no
las utiliza...
Mi página Frame - Página maestra
...en su lugar utiliza sentencias
.
Mi página Frame - Página maestra
Para clarificar las cosas, quitaré
,
y
</tt>. Mantenlas en tu documento, por supuesto. </p>
<frameset>
</FRAMESET>
<p>
Ahora es un buen momento para grabar. Grábalo en la misma carpeta
donde tienes a las chicas como <tt>index.html</tt>. Si intentas abrirla
con el navegador verás que está todo en blanco. Está bien
porque esta es "La Página Maestra". </p>
<hr align="left" noshade="NOSHADE" size="1" width="90%">
<p>
Ahora empezaremos a definir cómo van a ir apareciendo las páginas.
Dile al navegador que divida la ventana principal en dos columnas, cada
una de ellas ocupando el 50% de la ventana. </p>
<frameset <font color="#FF0000">COLS="50%,50%"</font>>
</FRAMESET>
<p>
Todo está aún en blanco, tranquilo, aún necesitamos
algo más para que todo esto funcione. </p>
<hr align="left" noshade="NOSHADE" size="1" width="90%">
<p>
Le tenemos que decir al navegador qué vamos a poner en cada
frame. </p>
<p>
<frameset COLS="50%,50%">
<font color="#FF0000"> <frame SRC="magda.html">
<frame SRC="carmen.html"></font>
</FRAMESET> </p>
<p>
La sentencia <tt><frameset></tt> es la que hace el trabajo de
división. Y en realidad, eso es todo lo que hace... divide las
ventanas. Especifica algo más diciéndo<i> cómo</i>
dividirlas, pero recuerda, cuando quieras dividir algo, utiliza <tt><frameset></tt>.
</p>
<p>
¿Podemos dividirla en más de 2 piezas? Sí, pero asegúrate
de especificar una página para cada sección de forma que el
navegador no se confunda. </p>
<pre><frameset COLS="<font color="#FF0000">20%,20%,20%,20%,20%</font>">
<frame SRC="magda.html">
<frame SRC="carmen.html">
<font color="#FF0000"> <frame SRC="mar.html">
<frame SRC="gemma.html">
<frame SRC="angustias.html"></font>
</FRAMESET>
</pre>
<p>
<a href="http://ccd.uab.es/%7Esergi/manuals/html/frames/examples/xample02.html"><b>MÍRALO</b></a> </p>
<p>
De camino, si pinchar en el botón Actualiza no carga la página,
prueba a pinchar en Actualizar con MAYÚSCULAS pulsado. </p>
<hr align="left" noshade="NOSHADE" size="1" width="90%">
<p>
Es obvio que podemos hacer los frames con diferentes tamaños.
Asegúrate de que la aritmética es correcta o el navegador
hará su propia interpretación y entonces ¡tararí
que ví!. </p>
<pre><frameset COLS="<font color="#FF0000">10%,20%,30%,15%,25%</font>">
<frame SRC="magda.html">
<frame SRC="carmen.html">
<frame SRC="mar.html">
<frame SRC="gemma.html">
<frame SRC="angustias.html">
</FRAMESET>
</pre>
<p>
<a href="http://ccd.uab.es/%7Esergi/manuals/html/frames/examples/xample03.html"><b>MÍRALO</b></a> </p>
<hr align="left" noshade="NOSHADE" size="1" width="90%">
<p>
Si especificamos que se divida en <tt>ROWS (FILAS) </tt>en lugar de
<tt>COLS (COLUMNAS) </tt>tenemos algo enteramente nuevo. </p>
<pre><frameset <font color="#FF0000">ROWS</font>="10%,20%,30%,15%,25%">
<frame SRC="magda.html">
<frame SRC="carmen.html">
<frame SRC="mar.html">
<frame SRC="gemma.html">
<frame SRC="angustias.html">
</FRAMESET>
</pre>
<p>
<a href="http://ccd.uab.es/%7Esergi/manuals/html/frames/examples/xample04.html"><b>MÍRALO</b></a> </p>
<hr align="left" noshade="NOSHADE" size="1" width="90%">
<p>
Volvamos a nuestros 2 frames, divididos en dos columnas iguales. </p>
<pre><frameset COLS="50%,50%">
<frame SRC="magda.html">
<frame SRC="carmen.html">
</FRAMESET>
</pre>
<p>
<a href="http://ccd.uab.es/%7Esergi/manuals/html/frames/examples/xample01.html"><b>MÍRALO</b></a> </p>
<hr align="left" noshade="NOSHADE" size="1" width="90%">
<p>
Podemos especifiar 50 píxeles en lugar del 50%.Y además,
podemos usar * en lugar de un número. El * indica todo lo que
queda.. </p>
<pre><frameset COLS="<font color="#FF0000">50,*</font>">
<frame SRC="magda.html">
<frame SRC="carmen.html">
</FRAMESET> </pre>
<p>
<b>Ahora veremos un punto importante:</b> Supongamos que haces un frame
de 100 píxeles de ancho a la izquierda de la ventana y otro de 100
píxeles de ancho a la derecha de la ventana. Como estás
utilizando una resolución de 800x600 tienes un hueco en el centro
de 600 píxeles de ancho. Todo va perfectamente... para tí.
Si mi pantalla es de 640x480, esos frames de 100 píxeles que has
puesto en tu página ahora miden 80 píxeles cada uno en la mía
(640x100/800). Si haces uso de dimensiones absolutas en las sentencias
<tt><frameset></tt> utiliza SIEMPRE al menos un * como frame elástico.
Así todo aparecerá correctamente en todas las pantallas y
volverá a haber paz en la tierra y.... </p>
<p>
Esta es la causa de un problema tan común con los frames que
quiero dedicarle un poco de atención. Un diseño muy popular
de frame es una estrecha ventana en la izquierda, que contiene el índice
de la página o los enlaces, y una gran ventana en la derecha, que
contiene las páginas en sí. Es
<a href="http://ccd.uab.es/%7Esergi/manuals/html/frames/examples2/xample01.html"><b>algo así</b></a>. Aquí
está el problema... Si divides las ventanas utilizando porcentajes
(como en <tt><frameset COLS="15%,85%"></tt>) a tí
te parecerá perfecto. Pero para alguien que utilice una resolución
de pantalla diferente a la tuya (y estoy seguro de que hay a millares, o a
millones) el asunto se parecerá <a href="http://ccd.uab.es/%7Esergi/manuals/html/frames/examples2/xample02.html"><b>a
esto</b></a>. </p>
<p>
La razón por la que esto ocurre es porque has especificado que la
ventana izquierda debe ser el 15%. ¿El 15% de <i>qué</i>? El
15% de la resolución horizontal de la pantalla del que visite tu página.
Por lo tanto esa ventana izquierda le parecerá diferente a cada
visitante que use una resolución distinta. <i>¿Cómo
arreglarlo?.</i> Me alegro de que lo preguntes. Utiliza una dimensión
absoluta para la ventana izquierda y haz la ventana derecha elástica
(como en <tt><frameset COLS="120,*"></tt>). Bingo.
Problema resuelto.</p>
<p>
Es buena idea hacer la dimensión absoluta más grande de lo
que necesita ser. Dale un poco de espacio adicional por si acaso. Por
ejemplo, si 100 píxeles son suficientes para que entre lo que
quieres, entonces haz la ventana de 120 o 125 píxeles, no te
arrepentirás.</p>
<p>
Una buena forma para los usuarios de Win95 de comprobar esto es utilizar
un juguetito de MS PowerToy llamado <a href="http://ccd.uab.es/%7Esergi/manuals/html/makapage/quickres.html">Quickres</a>.
</p>
<hr align="left" noshade="NOSHADE" size="1" width="90%">
<p>
Bueno, al trabajo. Podemos hacer más de un frame y especificar la
razón que mantendrán entre ellos.</p>
<p>
</p>
<frameset COLS="<font color="#FF0000">50,*,2*</font>">
<frame SRC="magda.html">
<frame SRC="carmen.html">
<font color="#FF0000"><frame SRC="mar.html"></font>
</FRAMESET>
<p>
<a href="http://ccd.uab.es/%7Esergi/manuals/html/frames/examples/xample06.html"><b>MÍRALO</b></a> </p>
<p>
Traducido esto dice: Haz 3 frames. Haz el primero de 50 píxeles
de anchura. El resto dívidelo entre los frames 2 y 3 pero haz el
frame 3 dos veces más grande que el 2. Coloca a Magda en el primer
frame, a Carmen en el segundo y a Mar en el tercero.</p>
<p>
Es importante hacer notar que todo se hace por orden. El primer <tt><frame></tt>
se muestra de acuerdo con el primer atributo de la sentencia <tt><frameset></tt>
(<tt>50/magda</tt>), el segundo con el segundo atributo (<tt>*/carmen</tt>),
y el tercero con el tercer atributo (<tt>2*/mar</tt>), y precisamente en
este orden. Sé que esto puede parecer una chorrada, pero es muy
importante y quería recalcarlo. </p>
<hr align="left" noshade="NOSHADE" size="1" width="90%">
<p>
¿Qué hacemos si queremos dividir a Mar por la mitad
horizontalmente? Recuerda que dije que si querías dividir algo debías
usar la sentencia <tt><frameset></tt>. Primero reemplaza a Mar con
un par de sentencias <tt><frameset></tt>. </p>
<frameset COLS="50,*,2*">
<frame SRC="magda.html">
<frame SRC="carmen.html">
<font color="#FF0000"> <frameset>
</FRAMESET></font>
</FRAMESET>
<p>
Ahora le hemos dicho al navegador: Haz 3 frames. Haz el primero de 50 píxeles
de ancho. El resto dívidelo entre los frames 2 y 3 pero haz el
frame 3 dos veces más grande que el 2. Coloca a Magda en el primer,
y a Carmen en el segundo, y el tercer frame vamos a dividirlo más
adelante. Ahora tenemos que especificar <i>cómo</i> vamos a
dividir el tercer frame. </p>
<hr align="left" noshade="NOSHADE" size="1" width="90%">
<p>
Vamos a dividirlo horizontalmente y por la mitad. </p>
<frameset COLS="50,*,2*">
<frame SRC="magda.html">
<frame SRC="carmen.html">
<frameset <font color="#FF0000">ROWS="50%,50%"</font>>
</FRAMESET>
</FRAMESET>
<hr align="left" noshade="NOSHADE" size="1" width="90%">
<p>
Creo que podemos colocar a Mar arriba y a Gemma abajo. Y eso es todo.</p>
<p>
<frameset COLS="50,*,2*">
<frame SRC="magda.html">
<frame SRC="carmen.html">
<frameset ROWS="50%,50%">
<font color="#FF0000"> <frame SRC="mar.html">
<frame SRC="gemma.html"></font>
</FRAMESET>
</FRAMESET></p>
<p>
¡Esto ha estado tan divertido que creo que lo vamos a repetir!
Dividamos a Magda horizontalmente en 3 secciones. La de arriba necesitará
tener 50 píxeles de alto. Las otras dos las dividiremos por igual.
Y pondremos a Magda en cada una de ellas. Aquí está todo.
</p>
<pre><frameset COLS="50,*,2*">
<font color="#FF0000"> <frameset ROWS="50,*,*">
<frame SRC="magda.html">
<frame SRC="magda.html">
<frame SRC="magda.html">
</FRAMESET></font>
<frame SRC="carmen.html">
<frameset ROWS="50%,50%">
<frame SRC="mar.html">
<frame SRC="gemma.html">
</FRAMESET>
</FRAMESET>
</pre>
<p>
<a href="http://ccd.uab.es/%7Esergi/manuals/html/frames/examples/xample08.html"><b>MÍRALO</b></a> </p>
<p>
Ya sé que no es muy impresionante. Además la página
está demasiado dividida y no queda muy bien. Una buena regla es no
hacer más de 3 frames por página. Y si puedes evitar que estén
juntos, mejor que mejor.</p>
<p>
También es un buen momento para pensar en los pobres chicos que
tienen navegadores que no pueden cargar los frames. Aunque no sean muchos,
hay navegadores que no pueden ver los frames así que puedes añadir
después de las sentencias <tt><frameset></tt> esto...</p>
<p>
</p>
<pre><frameset COLS="50,*,2*">
<frameset ROWS="50,*,*">
<frame SRC="magda.html">
<frame SRC="magda.html">
<frame SRC="magda.html">
</FRAMESET>
<frame SRC="carmen.html">
<frameset ROWS="50%,50%">
<frame SRC="mar.html">
<frame SRC="gemma.html">
</FRAMESET>
<font color="#FF0000"><noframes>
<body></font><font color="#990000">
Coloca tus páginas sin frames aquí. Si alguien está usando un viejo navegador,
se saltará todo lo superior y vendrá directamente aquí abajo. Los navegadores
capaces de leer los frames ignorarán todo lo que hay entre las sentencias
<noframes>.
Ahora te puedes estar haciendo un par de preguntas.
* ¿Tengo que escribir una página enteramente en blanco? Probablemente.
* ¿Cúanta gente se va a perder mi página si no hago esto? Pocos.
* ¿Crees que debo preocuparme por esto? No.
* ¿Tú te preocupas por esto? Tampoco.
* ¿Entonces por qué lo pones en el tutorial? Porque es una utilidad y quiero
que por lo menos sepas que existe.
* ¿Eres siempre tan quisquilloso, pero al mismo tiempo tan encantador? Por supuesto.</font>
<font color="#FF0000"></BODY>
</NOFRAMES></font>
</FRAMESET> </pre>
<p>
Volvamos a algo mucho más simple.</p>
<frameset COLS="50%,50%">
<frame SRC="magda.html">
<frame SRC="carmen.html">
</FRAMESET>
<p>
<a href="http://ccd.uab.es/%7Esergi/manuals/html/frames/examples/xample09.html"><b>MÍRALO</b></a> </p>
<hr align="left" noshade="NOSHADE" size="1" width="90%">
<p>
<img src="http://ccd.uab.es/%7Esergi/manuals/html/frames/examples/mundo.gif" alt="" align="right" height="162" border="0" width="146">
Podemos colocar imágenes en los frames si queremos. Graba la imagen
de la derecha en tu carpeta de trabajo como <tt>mundo.gif</tt>. (clic con
el botón derecho y Guardar imagen como) </p>
<frameset COLS="50%,50%">
<frame SRC="<font color="#FF0000">mundo.gif" WIDTH=146 HEIGHT=162</font>>
<frame SRC="carmen.html">
</FRAMESET>
<p>
<a href="http://ccd.uab.es/%7Esergi/manuals/html/frames/examples/xample10.html"><b>MÍRALO</b></a> <br>Recuerda que siempre es buena práctica incluir los atributos <tt>HEIGHT</tt>
& <tt>WIDTH (ALTURA Y ANCHURA) </tt>en la sentencia de imagen. </p>
<hr align="left" noshade="NOSHADE" size="1" width="90%">
<p>
Vamos a procurar ajustar el frame a la imagen. Primero reduzcamos la
ventana a 146 píxeles de ancho. Como estamos utilizando una dimensión
absoluta, hagamos la otra elástica. </p>
<frameset COLS="<font color="#FF0000">146,*</font>">
<frame SRC="mundo.gif" WIDTH=146 HEIGHT=162>
<frame SRC="carmen.html">
</FRAMESET>
<p>
<a href="http://ccd.uab.es/%7Esergi/manuals/html/frames/examples/xample11.html"><b>MÍRALO</b></a> </p>
<hr align="left" noshade="NOSHADE" size="1" width="90%">
<p>
Ahora dividamos el frame horizontalmente en 2 secciones. La seccion de
arriba debe tener 162 de alto y la inferior el resto. Pondremos <tt>mundo.gif</tt>
y Magda respectivamente. </p>
<p>
<frameset COLS="146,*">
<font color="#FF0000"> <frameset ROWS="162,*">
<frame SRC="mundo.gif" WIDTH=146 HEIGHT=162>
<frame SRC="magda.html">
</FRAMESET></font>
<frame SRC="carmen.html">
</FRAMESET> </p>
<p>
Las barras de desplazamiento que han aparecido pueden especificarse como
<tt>YES (SÍ)</tt>, <tt>NO (NO) </tt>o <tt>AUTO (AUTOMÁTICO)</tt>.
<tt>YES</tt> significa que la ventana tendrá barras de
desplazmiento, las necesite o no. <tt>NO</tt> significa todo lo
contrario. La ventana no tendrá barras de desplazamiento, y aunque
el contenido del frame sea tan grande como Andalucía, el navegador
mostrará lo que quepa, nada más. <tt>AUTO</tt> es la opción
por defecto. Si las barras de desplazamiento son necesarias, aparecerán.
Si no lo son, quedarán convenientemente eliminadas. Así que
librémonos de las barras dichosas.</p>
<p>
</p>
<pre><frameset COLS="146,*">
<frameset ROWS="162,*">
<frame SRC="mundo.gif" WIDTH=146 HEIGHT=162 <font color="#FF0000">SCROLLING=NO</font>>
<frame SRC="magda.html">
</FRAMESET>
<frame SRC="carmen.html">
</FRAMESET>
</pre>
<p>
<a href="http://ccd.uab.es/%7Esergi/manuals/html/frames/examples/xample13.html"><b>MÍRALO</b></a> </p>
<p>
Ten en cuenta que debes ser muy cuidadoso quitando las barras de
desplazamiento. En muchas páginas en las que se han eliminado, el
autor no se ha percatado de que a otras resoluciones o con otro tipo de
fuente (léase una fuente de mayor tamaño), los bordes
inferiores y derechos del frame se pierden irremisiblemente. <i>Elíminalas
sólo si es absolutamente necesario y sabes qué es lo que va
a suceder a otras resoluciones.</i> </p>
<hr align="left" noshade="NOSHADE" size="1" width="90%">
<p>
Muy bien. Volvamos a nuestro pequeño problema. La imagen aún
no está correctamente enmarcada. Los dos próximos atributos
con los que nos veremos las caras son los <i>márgenes</i>. El
navegador adjudica automáticamente a cada frame un espacio en
blanco alrededor de su contenido. Esto se hace normalmente por obvias
razones estéticas. Pero podemos controlar el tamaño de estos
márgenes usando <tt>MARGINWIDTH (ANCHURA DE MARGEN)</tt>y <tt>MARGINHEIGHT
(ALTURA DE MARGEN)</tt>. Estos atributos controlan los márgenes
derecho & izquerdo y superior & inferior respectivamente. Los
fijaremos en 1, que es el mínimo.</p>
<pre><frameset COLS="146,*">
<frameset ROWS="162,*">
<frame SRC="mundo.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO <font color="#FF0000">MARGINWIDTH=1 MARGINHEIGHT=1</font>>
<frame SRC="magda.html">
</FRAMESET>
<frame SRC="carmen.html">
</FRAMESET>
</pre>
<p>
<a href="http://ccd.uab.es/%7Esergi/manuals/html/frames/examples/xample14.html"><b>MÍRALO</b></a> </p>
<hr align="left" noshade="NOSHADE" size="1" width="90%">
<p>
Desafortunadamente esto no esto todo. Las dimensiones del frame son (muy
a menudo) medidas desde centro del borde hasta el centro del borde, según
se ve en la figura inferior:</p>
<p>
<img src="http://ccd.uab.es/%7Esergi/manuals/html/frames/oc.gif" alt="" height="48" hspace="10" width="134"> </p>
<p>
Y está también el borde mínimo de 1 que hay que
tener en cuenta. Así que contando con que el borde normal es de 6 píxeles,
tenemos que añadir 8 píxeles a la dimensión
horizontal de la imagen y otros 8 a la dimensión vertical (la mitad
de 6, más 1, por 2). Si te parece un poco confuso, sencillamente añade
a 8 píxeles a cada dimensión de la imagen para conseguir el
tamaño mínimo necesario de la ventana, y así no te
calientas la cabeza.</p>
<pre><frameset COLS="<font color="#FF0000">154</font>,*">
<frameset ROWS="<font color="#FF0000">170</font>,*">
<frame SRC="mundo.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1>
<frame SRC="magda.html">
</FRAMESET>
<frame SRC="carmen.html">
</FRAMESET> </pre>
<p>
Ahora trataremos un par de efectos menores. No todos funcionan en todos
los navegadores, de todas formas. Aún así no hay mucho
problema, porque si el navegador no entiende el atributo, sencillamente lo
ignora.</p>
<p>
En primer lugar cambiaremos el espesor de los bordes.</p>
<frameset COLS="154,*" <font color="#FF0000">BORDER=20</font>>
<frameset ROWS="170,*">
<frame SRC="mundo.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1>
<frame SRC="magda.html">
</FRAMESET>
<frame SRC="carmen.html">
</FRAMESET>
<p>
<a href="http://ccd.uab.es/%7Esergi/manuals/html/frames/examples/xample16.html"><b>MÍRALO</b></a> </p>
<hr align="left" noshade="NOSHADE" size="1" width="90%">
<p>
Ahora cambiaremos el <i>color</i> de los bordes. </p>
<frameset COLS="154,*" BORDER=20 <font color="#FF0000">BORDERCOLOR="#FFOOOO"</font>>
<frameset ROWS="170,*">
<frame SRC="mundo.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1>
<frame SRC="magda.html">
</FRAMESET>
<frame SRC="carmen.html">
</FRAMESET>
<p>
<a href="http://ccd.uab.es/%7Esergi/manuals/html/frames/examples/xample17.html"><b>MÍRALO</b></a> </p>
<hr align="left" noshade="NOSHADE" size="1" width="90%">
<p>
Podemos eliminar el borde de un <tt><frameset></tt> individual
con <tt>FRAMEBORDER</tt>.</p>
<p>
</p>
<frameset COLS="154,*" BORDER=20 BORDERCOLOR="#FFOOOO">
<frameset ROWS="170,*" <font color="#FF0000">FRAMEBORDER=NO</font>>
<frame SRC="mundo.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1>
<frame SRC="magda.html">
</FRAMESET>
<frame SRC="carmen.html">
</FRAMESET>
<p>
<a href="http://ccd.uab.es/%7Esergi/manuals/html/frames/examples/xample18.html"><b>MÍRALO</b></a>
</p>
<p>
<a name="noline_frames"> </a> </p>
<center>
<table bgcolor="#DDDDDD" border="0" cellpadding="16" cellspacing="0" width="90%">
<tbody>
<tr>
<td><b>PREGUNTA: </b><i>Procuro hacer mis frames sin bordes, pero en
el Navegador A aparece una delgada línea entre los frames. ¿Cómo
puedo eliminarla?</i> <br>
<b>A: </b>En <i>casi</i> todas las circunstancias esas líneas
pueden ser eliminadas. Mira <a href="http://ccd.uab.es/%7Esergi/manuals/html/frames/nolines/index.html"><b>aquí</b></a>
para una solución sencilla.</td>
</tr>
</tbody></table>
</center>
<hr align="left" noshade="NOSHADE" size="1" width="90%">
<p>
Podemos también prevenir que se redimensione, pero a menos que
no estemos en una circunstancia muy inusual, no hay razón para
utilizar este atributo. </p>
<p>
</p>
<p>
<frameset COLS="154,*" BORDER=20 BORDERCOLOR="#FFOOOO">
<frameset ROWS="170,*" FRAMEBORDER=NO >
<frame SRC="mundo.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1>
<frame SRC="magda.html">
</FRAMESET>
<frame SRC="carmen.html" <font color="#FF0000">NORESIZE</font>>
</FRAMESET> </p>
<p>
Bueno, ahora que hemos aprendido algo de cómo se hacen los frames
<img src="http://ccd.uab.es/%7Esergi/manuals/html/frames/hammer.gif" align="bottom" height="32" hspace="10" width="42">
volvamos a algo simple y empecemos a hacer <i>enlaces</i> entre los frames.
</p>
<pre><frameset COLS="33%,67%">
<frame SRC="maria.html">
<frame SRC="carmen.html">
</FRAMESET>
</pre>
<p>
<a href="http://ccd.uab.es/%7Esergi/manuals/html/frames/examples/xample20.html"><b>MÍRALO</b></a> </p>
<hr align="left" noshade="NOSHADE" size="1" width="90%">
<p>
Lo que vamos a hacer es que desde <tt>maria.html</tt> podamos enlazar
con <tt>angustias.html</tt>. Así que abre <tt>maria.html</tt> con el
Bloc de Notas y añade lo siguiente:</p>
<p>
</p>
<pre><html>
<head>
<title>Mi página Frame
María
Tienes que visitar a mi amiga Angustias.
Ahora añade el enlace y graba el documento.
Mi página Frame
María
Tienes que visitar a mi amiga Angustias
.
Vamos a probarlo.
MÍRALO
Si haces clic en el enlace, la página de Angustias se carga en la
ventana de María. Ya sé, ya sé... no estás
impresionado. Lo que quieres es que cuando pinches en un enlace de la
ventana de María cargues la página solicitada en la ventana de
Carmen.
Eso sólo supone un poco más de trabajo.
Lo que tienes que hacer es darle un
NAME (NOMBRE) al
en tu página maestra. Así que adjudiquémosle un
nombre al segundo frame
>
Nota - Los nombres de los
deben
empezar
con un carácter alfanumérico (abc123 etc.). Cualquier otro
nombre será ignorado. (Una excepción la constituyen los
nombres que empiezan con el carácter de subrayado: _ su uso se
explicará más tarde).
Ahora tenemos que hacer un pequeño añadido en el enlace de
la página de María, así que abre
maria.html de nuevo
y añade un
TARGET (OBJETIVO).
Mi página Frame
María
Tienes que visitar a mi amiga TARGET="VENTANA-1"
>Angustias
Esta clase de enlace va muy bien cuando quieres cargar una página
sin salir de tu sitio web. Pero, ¿qué sucede con las páginas
que no son de tu sitio web? Añadamos otro enlace a la página
de María.
Mi página Frame
María
Tienes que visitar a mi amiga
Angustias
Y por supuesto tienes que visitar a Jose Angel en
Diseño Web Profesional
MÍRALO
Como ves, esto hace que una página exterior se cargue en tu
ventana.
¿Cómo podemos hacer que un enlace exterior cargue en la
ventana completa? Fácil, cambia
TARGET a
_top.
(Nota: siempre en minúsculas... es muy importante.)
Mi página Frame
María
Tienes que visitar a mi amiga
Angustias
Y por supuesto tienes que visitar a Jose Angel en
TARGET="_top">Diseño Web Profesional
MÍRALO
Procura utilizar este método siempre que enlaces con una página
exterior. Créeme, tu visitantes lo apreciarán.
_top es uno de los 4 atributos llamados 'objetivos mágicos'.
Están
_top,
_blank,
_self
y
_parent. Son los únicos que pueden tener un carácter
que no sea alfanumérico al principìo. Cualquier objetivo que
empiece con _ y
no sea uno de éstos cuatro puede tener un
comportamiento impredecible.
¿Qué hacen exactamente cada uno de ellos?
_top abre un enlace a ventana completa.
_blank abre un enlace en una
nueva ventana del navegador.
_self abre un enlace en la misma ventana o frame
(igual que si no existiera)
_parent abre un enlace en el frame inmediato anterior.
Se cree que
_new abrirá también un
enlace en una nueva ventana. Muchos navegadores lo hacen. Otros no. Es
igual que si les dijeras
_segismundo,
_allavoy
o
_tequiero. También puedes probar con
bonnie
&
clyde. Cualquier
TARGET que no se haya
definido como los previos resultará en una nueva ventana
(habitualmente). En fin, si quieres correr riesgos...
Creo que lo que vamos a hacer ahora es una página con frames
desde el principio. Algo como
esto.
Antes de empezar, déjame enfatizar... ¡sé simple! Un
sitio con un montón de enlaces apuntando aquí y allá
es díficil de construir, y más difícil aún de
navegar. Dicho esto, ¡a por ellos que son pocos y cobardes!
En lo primero que tenemos que pensar es en cómo queremos que
resulte. Un diseño sencillo, con una banda superior, un directorio
en la ventana izquierda, y una ventana principal en la derecha serán
suficientes. Hagamos en primer lugar la página maestra.
Página de Práctica
Procura hacer una nueva carpeta y graba esto como
index.html.
La imagen que usaremos será para la banda superior o banner será
"MY FRAMZ PAGE". Grábala como
framz1.gif en la
carpeta de trabajo.
Divide la pantalla horizontalmente.
Página de práctica
>
Nota que conseguimos 83 añadiendo 8 a la altura de la imagen
(75+8=83). Nota también que como utilizamos una dimensión
absoluta, el otro frame lo hacemos elástico.
Ahora especifiquemos
banner.html como documento superior
(haremos este documento en un par de minutos). Incluye también un
par de sentencias
porque vamos a dividir la
parte inferior posteriormente.
Página de práctica
MÍRALO Puedes probarlo, pero conseguirás que no vaya muy bien porque aún
está incompleto.
Ahora dividiremos la parte inferior en dos secciones. Especificaremos
que la ventana izquierda contendrá
directorio.html y la
derecha
casa.html. Como aún no hemos hecho estos
documentos tendremos mensajes de error.
Página de práctica
>
MÍRALO
Dado que nuestro directorio estará en la página izquierda,
y las páginas cargarán en la ventana derecha, le tendremos
que dar a esta última un nombre.
Página de práctica
>
Ahora hagamos los documentos. Empezaremos con
banner.html.
Copia lo siguiente y grábalo:
Página de práctica - Banner
Verás que hemos especificado como color de fondo el azul.
VER banner.html
VER Página Maestra
Introduce la imagen y céntrala.
Página de práctica - Banner
VER banner.html
VER Página Maestra
Y ahora que lo pienso, tengo que decirte que si estás mirando el
código fuente de
mis documentos como guía en la
creación de los
tuyos puedes encontrarte con cosas
contradictorias o sin sentido. Esto se produce porque yo tengo que hacer
que mis páginas den unos cuantos saltos para que las lecciones
funcionen correctamente. ¿Entendido?. Si no lo entiendes, no
mires el código de las lecciones a menos que te quieras confundir aún más.
Bueno... como puedes ver, se nos ha presentado otro problema. Tenemos
una barra de desplazamiento y la imagen no está todo lo bien que
debería estar en la ventana. Abre tu página maestra, elimina
la barra de desplazamiento y libráte de los márgenes
Página de práctica
>
Ahora hagamos nuestra página de Directorio. Empieza con esto y grábalo
como
directorio.html.
Página de práctica - Directorio
VER directorio.html
VER Página maestra
Ponle un encabezamiento y escribe el texto de los enlaces. Añadiremos
éstos en un minuto.
Página de práctica - Directorio
Directorio
Inicial
Ir aquí
o allá
o visitar
Yahoo
Netscape
VER directorio.html
VER Página maestra
Añadamos la información del enlace.
Página de práctica - Directorio
Directorio
Inicial
Ir aquí
o
o allá
o visitar
Yahoo
Netscape
Bueno, ahora tendremos que hacer
casa.html,
aqui.html
y
alli.html. Ya sé que has estado trabajando duro (yo
también estoy harto de teclear), pero ya nos queda poco. Así
que copia lo siguiente y grábalo como
casa.html
Página de Práctica - Principal
Estás en casa.
Bienvenido a mi página principal. Esta página debería ser atractiva
y de fácil navegación porque mi profesor, Jose Angel, me ha enseñado
ha hacer los frames muy bien.
Diviértete.
VER casa.html
Ahora graba esto como
aqui.html
Página de práctica - Aquí
Aquí
Bienvenido. Aquí es donde todo sucede.
VER aqui.html
Y por supuesto tenemos que grabar
alli.html.
Página de práctica - Allí
Esto es allí
Me gustaría hacer una proposición. Todos hemos visto esa flecha o signo que dice "Estás
aquí". ¿No sería mejor que hubiera otra flecha que dijera "Deberías estar allí?". Haría las
cosas mucho más fáciles.
VER alli.html
Ahora mira la
Página
Maestra.
Oops, hemos olvidado algo. Tenemos que añadir nuestros objetivos,
así que abre
directorio.html y añade las
sentencias
TARGET necesarias.
Página de práctica - Directorio
Directorio
TARGET="VENTANA-PRINCIPAL"
>Inicial
TARGET="VENTANA-PRINCIPAL"
>Ir allí
TARGET="VENTANA-PRINCIPAL">o allá
o visitar
TARGET="_top"
>Yahoo
TARGET="_top">Netscape
Funciona bien ¿no? Ahora añadamos un enlace con mi página
principal. Abre
casa.html, y añade una sentencia
TARGET,
pero hagámoslo bien, porque aunque me caes fenomenal, no quiero
cargar mi página en
tu ventana.
Página de práctica - Inicial
Estás en casa.
Bienvenido a mi página principal. Esta página debería ser atractiva y de fácil
navegación porque mi profesor, Jose Angel, me ha enseñado ha hacer los frames muy bien.
Diviértete.
Visita a Jose Angel en
Diseño Web Profesional.
BIBLIOGRAFIA:
http://ccd.uab.es/~sergi/manuals/html/frames/lesson02.html
