GuiónIngles PDF

Uso de los Frames (I)
a técnica de los frames ha sido una de las mas empleadas a la hora de construir páginas web,
debido a la facilidad que tiene para crear ventanas independientes en las que cargar páginas a
partir de menús. Hasta la introducción de HTML dinamico fué la única herramienta de que
disponíamos para estos fines. Sin duda su uso nos facilita mucho la navegación y la presentación
en un sitio web, aunque también origina muchos problemas secundarios.
Entre los principales usos que podemos dar a los frames en nuestras páginas se encuentran:
* Menús de navegación.
Podemos crear con frames un sistema de navegación por nuestras páginas mediante un marco
lateral en el que situamos enlaces y un marco principal en el que se iran cargando las páginas
llamadas. El esquema de construcción puede ser crear tres marcos: uno superior fijo, en el que
podemos situar nuestro logo y/o un bannner o mensaje, otro lateral con el menu y otro central
para cargar las páginas.
Para conseguir esto debemos crear 4 páginas web:
1) página index.html con la definición de los frames.
2) página top.html con el logo, banner , etc.
3) página menu.html con los enlaces
4) página de principal.html de entrada incial en el frame central.
Mas las diferentes páginas de nuestro sitio web, que iremos llamando desde el menú lateral y
cargando en el frame central.
El código a crear sería del tipo:
página index.html
<html>
<head>
</head>
<frameset rows="18%,*">
<frame name="superior" src="arriba.html" marginwidth="10" marginheight="10"

scrolling="no" frameborder="1">
<frameset cols="19%,*">
<frame name="menu" src="menu2.html" marginwidth="10" marginheight="10"
scrolling="auto" frameborder="0">
<frame name="ventana" src="central_1.html" marginwidth="10" marginheight="10"

<frameset>
<frameset>
</html>
página menu.html
<html>
<head>
</head>
<body>
<a href="central_1.html" target="ventana">página 1ª</a>
<a href="central_2.html" target="ventana">página 2ª</a>
</body> </html>
y luego creamos arriba.html, que es una página simple con una imagen como logo y un texto
aclarativo, y central_1.html y central_2.html que son dos páginas que contendran aquellos
elementos web que deseemos.
ver resultado. Como podemos ver, al pinchar sobre el enlace "página 1ª" lo que hacemos es
cargar en el frame central dicha página, y lo mismo ocurre al pinchar el enlace "página 2ª", con
lo que sustituimos el contenido de diho frame. Y esto podemos hacerlo con todos los enlaces y
páginas que deseemos. Si hablamos de proporciones de frames y ventana, lo mas común es
utilizar aproximadamente el cuarto izquierdo de la página para el índice fijo y los tres cuartos
restantes para la información, en el caso de que sólo haya dos frames verticales, y si tenemos
tres frames, como en el ejemplo, aproximadamente el quinto/sexto superior de la página para el
encabezado con el logo, y de lo que resta, el cuarto izquierdo es para el menú y los tres cuartos
derechos para la información.
* a partir de este esquema basico podemos extender las utilidades del menú mediante frames.
Por ejemplo, podemos hacer que al pinchar el enlace del menú se nos cambie a la vez tanto el
contenido de la ventana central como el de el marco superior, para conseguir así mostrar un
mensaje o banner diferente para cada enlace pulsado. Para poder hacer esto necesitamos una
función JavaScript actuando en la página menu.html y varias páginas que se vayan alternando
tanto en el frame superior como en el central.
Ejemplo.- ( menu.html)
<html>
<head>
<SCRIPT language="JavaScript" type="text/javascript">

</SCRIPT>
</head>
<body>
<a HREF="JavaScript:twoinone(1)">Link 1</a>
<a HREF="JavaScript:twoinone(2)">Link 2</a>
</body>
</html>
ver resultado.
* Y siguiendo con esta técnica podemos imaginar cualquier combinación para montar el sistema
de navegación de nuestro sitio web. Podemos montar dos frames laterales, uno con el menú y
otro con información o enlaces relacionados.
Ejemplo.-
<html>
<head>
</head>
<frame name="superior" src="superior.html" marginwidth="10" marginheight="10"

<frame name="menu" src="menu.html" marginwidth="10" marginheight="10" scrolling="no"

frameborder="0">
<frame name="ventana" src="principal.html" marginwidth="10" marginheight="10"

<frame name="lateral" src="enlaces1.html" marginwidth="10" marginheight="10"

</frameset>
</frameset>
</frameset>
</html>
ver resultado.
* Podemos también utilizar la técnica de los frames flotantes para situar uno en una zona en
concreto de nuestra página y cargar en él, mediante enlaces, diferentes páginas. Pero nos
encontramos entonces con la limitación de Nestcape, que no permite que los <ILaYER> tengan
barra de scroll, con lo que deberemos entonces fijar un tamaño de marco y tener en cuenta que
la página que se carge dentro no exceda este tamaño, porque entonces no se vería completa.
Con Explorer no tendremos este problema, ya que si el contenido excede al marco aparecera una
barra de deslizamiento que nos permitira ver todo el contenido.
Y así sucesivamente, hasta donde la imaginación nos lo permita.
Uso de los Frames (II)
* adaptar nuestra pagina a la resolución del navegador.
Imaginemos que hemos creado una pagina web para una resolución de 800x600 píxeles. Cuando
la visualice un visitante con una resolución de 640x480 no pasara nada, sólo que necesitara usar
las barras de desplazamiento para poder visualizarla entera. Pero si nuestro visitante esta
utilizando una resolución de 1024x768 o superior nuestra pagina, si la hemos definido con
unidades absolutas, le quedara situada en la parte superior derecha de la ventana del
navegador, quedando una gran parte de la pantalla vacía.
Este efecto es indeseable, y podemos corregirlo usando una función de JavaScript que detecte la
resolución que usa el visitante. Si esta es de 640x860 ó de 800x600 le redireccionara a nuestra
pagina original, pero si la resolución es de 1024x768 por ejemplo, le enviara a una pagina con
frames en la que en la ventana central estara cargada nuestra pagina original. Con esto la pagina
quedara centrada en la pantalla. Hay otras formas de conseguir esto, pero esta con frames es
totalmente viable.
Primero necesitamos una pagina index.html, que es la que se va a encragar de detectar la

resolución y de redireccionar adecuadamente:
<html>
<SCRIPT language="JavaScript" type="text/javascript">

</SCRIPT>
</head>
<body>
</body>
</html>
y ahora creamos tres paginas: 800.html, que va a ser nuestra pagina normal, 1024.html, que va a
ser una pagina con frames:
<html>
<head>
</head>
<frameset cols="300,*">
<frame name="lateral" src="nada.html" marginwidth="10" marginheight="10" scrolling="no"

frameborder="0">
<frameset rows="75,*">
<frame name="superior" src="nada.html" marginwidth="10" marginheight="10"

<frame name="ventana" src="800.html" marginwidth="10" marginheight="10"

</frameset>
</frameset>
</html>
y nada.html, que va a ser una pagina vacia. La única condición es que tenga el mismo color de
fondo que nuestra pagina principal 800.html.
podemos comprobar una aproximación visual del efecto conseguido con esto:
ver resultado a 800x600.
ver resultado a 1024x768.
Es decir, hemos creado una especie de "contenedor" para nuestra pagina principal a base de
frames, que sólo se activara en el caso de que la resolución del navegador sea de 1024 o
superior, en cuyo caso nos la situara en medio de la pantalla. Este efecto de puede conseguir de
una forma mejor con Javascript puro, posicionando la pagina en la ventana según la resolución,
pero también es viable hacerlo con frames, como se ha explicado.
* Frames ocultos.
Una de las posibilidades que tenemos a la hora de usar trabajar con frames es el uso de frames
ocultos, es decir frames que no se van a ver en pantalla. Esto es facil de conseguir, ya que basta
definir un frame horizontal o vertical que quede fuera de los límites de la pantalla.
así por ejemplo podemos crear un frame horizontal oculto mediante:
<html>
<head>
</head>
<frame name="principal" src="a.html" marginwidth="10" marginheight="10"

frameborder="0">
<frame frame name="oculto" src="b.html" scrolling="no" frameborder="0">
<frameset>
</html>
y queda oculto porque por propia definición del FRaMESET el primer frame ocupara el 100% del
tamaño de la ventana.
Lo mismo podíamos heber hecho con un frame vertical, e incluso podemos definir varios
frames ocultos.
Una vez construido este frame escondido, lo podemos usar para diferentes fines:
1) Ocultar una clave de acceso: si queremos disponer en nuestra pagina de un control de acceso
mediante claves y no queremos procesar estas en un programa en el servidor (que es lo
aconsejable, por seguridad), podemos esconder las claves correctas de acceso en el frame
oculto, y cuando el visitante introduzca las claves en los campos correspondientes de la pagina
principal, hacer una comprobación mediante JavaScript con las claves que tenemos escondidas.
2) Ocultar objetos o funciones de JavaScript: un ejemplo típico de este método es la creación de

menús de arbol, incluyendo en el frame aculto la función de JavaScript que "dibujara" el menú
en un frame lateral visto, de tal forma que si el visitante observa el código fuente de este, sólo
vera código HTML puro, pero no el de la función que lo crea.
3) almacenamiento de variables de sesión: a veces puede interesarnos ir almacenando algunas

variables y valores a lo largo de la visita de una persona a nuestras paginas. Por ejeplo, podemos
ir creando un perfil de usuario en unas pocas paginas iniciales, para luego dirigir a nuestro
visitante a una zona en concreto de nustro sitio web. Para ello, podemos crear un frame oculto e
ir " escribiendo " en él mediante JavaScript las variables que nos interesen, pudiendo recuperar
su valor cuando lo necesitemos. Esto lo hacen muchas aplicaciones de todo tipo, si bien para
programación web se suelen utilizar otras técnicas basadas en el almacenamiento de las
variables en el servidor o en el equipo cliente mediante cookies, ya que si lo hacemos por el
método explicado en este apartado en cuanto el cliente refresque la pagina perderemos el valor
de las variables, a no ser que le indiquemos medianto código de Script qué frames debera
recargar en esos casos, aunque de todas formas esta solución es complicada.
*Ocultar el código fuente de la pagina.
Si queremos ocultar el código de nuestra pagina (por favor, deja el código a la vista y claro, para
que otras personas puedan aprender de tí), siempre podemos crear un frame u´nico que ocupe
el 100% de la pantalla, y cargar en él la pagina a la que queremos ocultarle el código. El visitante,
al ir al menú VER > CÓDIGO FUENTE sólo visualizara el código de creación del frame, no el de la
pagina que contiene. Pero ¿y si el visitante selecciona la opción ver código fuente mediante el
botón derecho del ratón?. Rn ese caso todo nuestro esfurzo habra sido en vano. aunque
podemos entonces crear una función JavaScript que desactive el botón derecho, con lo que la
protección de nuestro código sera total. ¿O no es así?...¡¡NO!!, ya que siempre que cargamos
una pagina de Internet, para poder nuestro navegador visualizarla lo primero que hace es
cargarla en la caché del navegador. Por lo tanto, si queremos ver el código fuente o salvar una
imagen o cualquier elemento de la pagina que ya haya sido visualizado en el navegador, lo único
que tenemos que hacer es irnos al directorio WIDOWS o WINNT de nuestro odenador y buscar
en la carpeta archivos temporales de Internet, y allí estaran guardados todos los elementos de
las paginas que hayamos visualizado, incluyendo las propias paginas con su código fuente.
Etiqueta <FRAMESET>
Las etiquetas <FRAMESET>…</FRAMESET> son las que van a decirle al navegador dónde
empiezan y dónde acaban los marcos, y el tipo y forma de estos. Entre una y otra irán las
definiciones de los diferentes frames.
Estas etiquetas se deben situar entre <HTML> y </HTML>, pero podemos hacerlo también entre
</HEAD> y <BODY>, en incluso podemos no utilizar <BODY>…</BODY>.
Sus principales atributos o parametros son:
* COLS= " x,y,z,…", para definir el nº de columnas o marcos verticales que va a tener la ventana, y
donde las variables x,y,z… van a definir el tamaño de cada marco vertical, pudiendo definirse en
píxeles o en porcentaje. También podemos fijar el tamaño de una columna o columnas como * ,
y en este caso el tamaño de esta sera todo aquel que quede después de definir mediante puntos
o porcentajes las demas columnas.
Si definimos tamaños en píxeles, estos seran absolutos, En este caso si todas las frames se
indican de este modo, los valores se ajustaran para que las frames ocupen la totalidad del
espacio de la ventana del navegador, no guardando siempre la proporción con la que se definen
las frames.
Por el contrario, si empleamos medidas en porcentaje, en este caso si los porcentajes suman un
valor distinto del 100%, se ajustaran para que coincidan con el tamaño de la ventana. Se podra
combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y
otras en porcentaje.
Posibles combinaciones serían:
1) COLS="100,700"…que nos dividiría la ventana en dos columnas, una de 100 puntos y la otra
de 700.
2) COLS="10%,*"…que nos daría una columna con el 10% de la ventana y otra con el resto.
3) COLS="20%,*,*"…obteniendo con ello una columna del 20% de la ventana y otras dos que se
repartirian por igual el tamaño restante.
4) COLS="*,2*"…que nos creara dos columnas, teniendo la segunda el doble de ancho que la
primera, es decir, la primera ocuparía el 33% de la ventana y la segunda el 66% restante.
* ROWS=" x,y,z,…", para definir el nº de filas o marcos horizontales que va a tener la ventana, y
donde las variables x,y,z… van a definir el tamaño de cada marco horizontal, pudiendo definirse
en píxeles o en porcentaje. También podemos fijar el tamaño de una fila o filas como * , y en
este caso el tamaño de esta sera todo aquel que quede después de definir mediante píxeles o
porcentajes las demas filas. Las combinaciones posibles son muchas, siendo su estructura
analoga a las vistas para COLS.
Si definimos tamaños en píxeles, estos seran absolutos, En este caso si todas las frames se
indican de este modo, los valores se ajustaran para que las frames ocupen la totalidad del
espacio de la ventana del navegador, no guardando siempre la proporción con la que se definen
las frames. Por el contrario, si empleamos medidas en porcentaje, en este caso si los porcentajes
suman un valor distinto del 100%, se ajustaran para que coincidan con el tamaño de la ventana.
Se podra combinar con el apartado anterior de forma que algunas frames se definan en valor
absoluto y otras en porcentaje.
* FRAMEBORDER= " 0 / 1 / no / yes ", que nos permite definir si los marcos creados van a tener
borde o no. Los valores 0 y no son equivalentes, eliminando los bordes, así como 1 y yes, que los
muestran. Su valor por defecto es yes / 1 , por lo que si no especificamos nada se veran los
bordes de todos los marcos.
Si ademas queremos que no se vean los huecos que originan los bordes invisibles hay que añadir
el atributo FRAMESPACING=0 para Internet Explorer y BORDER=0 para Nestcape.
Ejemplo.-
<html>
<head>
<title>Mi pagina</title>
</head>
<frameset rows="20%,*" >
<frame name="" src="a.html" marginwidth="10" marginheight="10" scrolling="auto" >
<frame name="" src="b.html" marginwidth="10" marginheight="10" scrolling="auto" >
</frameset>
</html>
ver resultado.
O bien sin bordes:
<html>
<head>
</head>
<frameset rows="20%,*" frameborder="0" framespacing="0" border="0">
</frameset>
</html>
ver resultado.
* BORDER= " n ", con n = nº entero = nº de píxeles. En el caso de que se haya establecido
FRAMEBORDER=" 1 " o no se haya especificado, este atributo nos permite definir el grosor del
borde. Sólo funciona con Nestcape.
* FRAMESPACING= " n ", con n = nº entero = nº de píxeles. Nos permite definir el espacio entre
los marcos, y en el caso de que se haya establecido FRAMEBORDER=" 1 " o no se haya
especificado, este atributo nos permite definir el grosor del borde. Sólo funciona con Explorer.
* BORDERCOLOR= " color ", donde color puede venir especificado mediante su nombre web en
inglés o mediante su código hexadecimal. Nos permite establecer el color de los bordes de los
marcos.
Ejemplo.-
<html>
<head>
</head>
<frameset rows="20%,*" bordercolor="red">
</frameset>
</html>
ver resultado.
Etiqueta <FRAME>
La etiqueta <FRAME> define cada uno de los marcos que va a haber en la ventana. Debe ir
colocada siempre entre <FRAMESET> y </FRAMESET>, y debe haber tantas etiquetas como
marcos hayamos definido con COLS y ROWS. Sus atributos son:
Estas etiquetas se deben situar entre <HTML> y </HTML>, pero podemos hacerlo también entre
</HEAD> y <BODY>, en incluso podemos no utilizar <BODY>…</BODY>.
Sus principales atributos o parametros son:
* SRC=" ruta pagina html", que especifica qué pagina se va a cargar en el frame. La ruta de la
pagina debe especificar su localización en el sistema de archivos local del servidor web o una
URL completa.
Ejemplos.-
<frame src="principal.html">
<frame src="http://www.yahoo.es">
* NAME=" nombre ", que especifica qué pagina se va a cargar en el frame. La ruta de la pagina
debe especificar su localización en el sistema de archivos local del servidor web o una URL
completa.
Sirve para asignar un nombre al marco. Es un atributo muy importante, ya que cuando queramos
luego cargar una pagina en un marco mediante un enlace, deberemos decir en qué marco
queremos hacerlo, y esto se consigue haciendo referencia al nombre del marco en el atributo
TARGET de la etiqueta <A> del enlace.
Este parametro TARGET esta relacionado con pulsar un enlace en un marco y cargar la pagina
enlazada en otro. Su sintaxis general dentro de la etiqueta <A> es:
<A HREF=" manual.html " TARGET= " cuerpo ">Manual HTML</a>
donde cuerpo es el nombre asisnado a un frame mediante el atributo NAME. Con esto, al pulsar
el enlace se cargara la pagina manual.html dentro del marco llamado cuerpo.
<A HREF=" manual.html " TARGET= " _blank">Manual HTML</a>
y ahora se cargara la pagina en una ventana nueva del navegador, por lo que tendremos dos
ventanas abiertas.
<A HREF=" manual.html " TARGET= " _self "</a>
En este caso el la pagina llamada se va a cargar en el propio frame que la llama. Es equivalente a
no colocar el parametro TARGET, por lo que casi no se usa. Se puede usar para modificar el valor
dado por BASE.
<A HREF=" manual.html " TARGET= " _parent</a>
y la pagina se mostrara en el marco o <FRaMESET> que llamó al documento actual. Si no hay

ningún <FRAMESET> anterior, la pagina llamada se mostrara a pantalla completa, suprimiendo
todos los marcos de la pantalla. Indica que se muestre en la ventana completa, eliminando la
estructura de frames que tenga la ventana.
<BASE TARGET= " nombre" </a>
que especifica el frame en el que se mostrara por defecto todos los hiperenlaces del documento
actual. Se debe especificar en la cabecera del documento (HEAD).
<AREA SHAPE=RECT COORDS="x,y,..." HREF="url" TARGET="frame" </a>
que en la definición de imagenes sensibles en el cliente, indica el frame donde se vera el

documento que se activa en la zona correspondiente de la imagen.
<FORM ACTION="url" TARGET="nombre"</a>

que indica al formulario al que se mandan los datos el frame de destino del resultado de los
mismos.
* MARGINWIDTH=" x ", con x = nº píxeles o porcentaje. Sirve para definir el margen horizontal
que queremos que haya dentro del frame, entre l os límites de este y su contenido.
que indica al formulario al que se mandan los datos el frame de destino del resultado de los
mismos.
* MARGINHEIGHT=" x ", con x = nº píxeles o porcentaje. Nos define el margen vertical que
queremos que haya dentro del frame, entre los límites de este y su contenido.
Ejemplo.-
<html>
<head>
</head>
<frame src="a.html" marginwidth="50" marginheight="30">
<frame src="b.html" marginwidth="10" marginheight="0">
</frameset>
</html>
ver resultado.
* SCROLLING= " yes / no / auto ", que nos va a permitir establecer si el marco tendra o no barra
deslizadora cuando el contenido del marco exceda al tamaño de este.
Sus posibles valores son:
- yes…siempre aparecera la barra deslizadora.
- no…nunca aparecera. Por lo tanto, si el contenido es mayor que el texto sólo podremos ver lo
que quepa en el marco.
- auto…sólo aparecera el scroll si es necesario para poder visualizar el contenido completo del
marco. Este es el valor por defecto
* NORESIZE. Este atributo impide que el marco pueda ser redimensionado por el visitante
arrastrando su borde. Si no se indica este atributo el marco podra ser redimensionado.
* BORDECOLOR= " color ", con color = nombre color web en inglés o en hexadecimal. Sirve para
definir el color del borde del marco concreto al que se aplica.
* FRAMEBORDER= " 1 / 0 ". Si se ha establecido BORDECOLOR, si su valor es 0 se mostrara el

borde sin efecto 3D en el marco (se percibe mejor en Explorer), y si es 1 sí se mostrara este
efecto. ademas, si lo igualamos a cero se eliminara el borde con todos los marcos contiguos que
tengan también este valor a cero.
Ejemplos.-
<html>
<head>
</head>
<frame src="a.html" marginwidth="50" marginheight="30" frameborder="0" >
<frame src="b.html" marginwidth="10" marginheight="0" frameborder="0">
</frameset>
</html>
ver resultado.
<html>
<head>
</head>
<frame src="b.html" marginwidth="10" marginheight="0" >
</frameset>
</html>
ver resultado.
<html>
<head>
</head>
<frame src="b.html" marginwidth="10" marginheight="0" frameborder="1">
</frameset>
</html>
ver resultado.
Etiquetas <NOFRAMES>…</NOFRAMES>
Este par de etiquetas no son atributos de <FRAME>. Se utiliza para prevenir el caso de que el
navegador del visitante no soporte frames. Deben situarse antes de </FRAMESET>, y dentro de
ellas se incluyen <BODY> texto de aviso </BODY>. Si el navegador no reconoce los frames los
ignorara, mostrando el mensaje de aviso. Este atributo esta actualmente en dehuso, ya que
todos los modernos navegadores soportan frames.
Un ejemplo completo de una pagina simple con frames sería:
<html>
<head>
<title>Pagina con frames</title>
</head>
<frameset rows="20%,*" frameborder="yes" bordercolor="yellow" >
<frame name="uno" src="a.html" marginwidth="50" marginheight="30" >
<frame name="dos" src="b.html" marginwidth="30" marginheight="40" >
<noframes>
<body>
Lo siento. Su navegador no soporta frames. Pulse <a href="noframes.html">AQUÍ</a> para

acceder a una pagina sin frames.
</body>
</noframes>
</frameset>
</html>
ver resultado.
Frames anidados
Hasta ahora hemos definido frames simples, es decir, la forma de dividir una pagina en una serie
de filas o de columnas que nos posibilitan cargar una pagina html independiente dentro de cada
marco.
Pero este diseño de pagina, aunque util, es muy simple. Podemos ir mas alla anidando frames, es
decir introduciendoo frames dentro de otros previamente definidos. así, podemos dividir una fila
en columnas, una columna en filas, etc.
Pero este procedimiento es bastante complejo en su código, por lo que es conveniente ayudarse
de alguno de los muchos programas de creación web que existen.
Como ejemplo de esta técnica veamos el siguiente código:
<html>
<head>
</head>
<frameset rows="10%,*" frameborder="1" bordercolor="Green">
<frame name="top" src="top.html" marginwidth="10" marginheight="10" scrolling="no"

"noresize frameborder="0">
<frameset cols="20%,*" >
<frame name="a" src="a.html" marginwidth="10" marginheight="10" scrolling="no" noresize

frameborder="0">
<frame name="b" src="b.html" marginwidth="10" marginheight="10" scrolling="auto"

noresize frameborder="0">
</frameset >
</frameset>
</html>
ver resultado.
en la que hemos creado primero dos filas, una con el 10% del alto de ventana y otra con el resto,
y luego hemos sustituido esta última fila por dos columnas.
Otro ejemplo sería:
<html>
<head>
</head>
<frameset cols="19%,*" frameborder="1" bordercolor="Green">
<frame name="a" src="a.html" marginwidth="10" marginheight="10" scrolling="no"

frameborder="1">
<frame name="top" src="top.html" marginwidth="10" marginheight="10" scrolling="auto"

frameborder="0">
<frame name="b" src="b.html" marginwidth="10" marginheight="10" scrolling="auto"

frameborder="1">
<frame name="c" src="c.html" marginwidth="10" marginheight="10" scrolling="auto"

frameborder="1">
</frameset>
</frameset >
</frameset>
</html>
ver resultado.
Frames flotantes (I)

Es posible situar en nuestras paginas web una especie de frames o marcos "flotantes",
queriendo decir con esto que son como frames pero que podemos situarlos en la posición que
queramos dentro de nuestra pagina, situando mediante coordenadas su vértice superior
izquierdo. Estas ventanas son configurables, pudiendo definir ademas de su posición su tamaño
y otra serie de propiedades.
El mayor inconveniente que encontramos con estas ventanas flotantes es que su

implementación es diferente en Internet Explorer y en Nestcape. Cada navegador posse una
etiqueta y atributos diferentes para crear este tipo de marcos, no reconociendo uno las marcas
del otro. Esta es otra de las consecuencias de la lucha entre ambas compañías, que como
siempre hemos de pagar los creadores web.
Internet Explorer 3.0 y superiores implementa las etiquetas <IFRAME>...</IFRAME>, que van a
definir el principio y fin del marco flotante. Estas etiquetas deben situarse dentro del cuerpo de
la pagina que contiene al marco, es decir, entre <BODY> y </BODY>.
Los principales atributos de la etiqueta <IFRAME> son:
* NAME=" nombre ", analogo al atributo de <FRAME>, sirve para identificar unívocamente al
marco flotante, con vistas a referenciar su contenido mediante un enlace por medio del
parametro TARGET.
* WIDTH= " x ", donde x = nº píxeles. Con este atributo definimos la anchura que va a tener el
marco flotante.
* HEIGHT= " x ", donde x = nº píxeles. Con este atributo definimos la altura que va a tener el
marco flotante.
* ALIGN= " left / center / right ", Va a definir si el marco va a estar alineado a la izquieda en la
ventana del navegador, centrado o a la derecha.
Ejemplo.- (Sólo para I.Explorer)
<html>
<head>
</head>
<body>
<iframe align="left" src="a.html"></iframe>
<iframe align="center" src="b.html"></iframe>
</html>
ver resultado.
* FRAMEBORDER= " 0 / 1 ", Este atributo hace que el marco aparezca sin borde o con borde
(valor por defecto) respectivamente.
<html>
<head>
</head>
<body>
<iframe src="a.html" frameborder="0" align="center" ></iframe>
</html>
ver resultado.
* VSPACE= " x ", donde x = nº píxeles. Nos sirve para posicionar el marco, y define la distancia
entre el borde superior del marco y el límite superior de la ventana del navegador.
* HSPACE= " x ", donde x = nº píxeles. Nos sirve para posicionar el marco, y define la distancia
entre el borde izquierdo del marco y el límite izquierdo de la ventana del navegador.
<html>
<head>
</head>
<body>
<iframe src="a.html" hspace="100" vspace="20"></iframe>
</html>
ver resultado.
* MARGINHEIGHT= " x ", donde x = nº píxeles. Nos define el espacio en píxeles que va a haber
entre el borde superior del marco y su contenido.
* MARGINWIDTH= " x ", donde x = nº píxeles. Nos define el espacio en píxeles que va a haber
entre el borde izquierdo del marco y su contenido.
<html>
<head>
</head>
<body>
<iframe src="a.html" frameborder="1" marginwidth="60" marginheight="30"></iframe>
</html>
ver resultado.
* SCROLLING= " yes / no / auto ", que nos va a definir si el marco va a tener barra deslizadora
siempre, nunca o sólo cuando sea necesario por exceder el contenido al tamaño del mismo. Su
valor por defecto es auto.
* SRC= " ruta pagina html ", que nos va a definir la pagina web que se va a cargar dentro del
marco flotante. Podemos especificar bien la ruta completa de la pagina en el directorio de
nuestro servidor web o bien una URL completa de Internet.
* STYLE= " parametro-valor / parametro-valor / … ", Este atributo es una aplicación directa de las
Hojas de Estilo en Cascada (CSS), y nos permiten definir la posición y tamaño del marco en la
ventana del navegador. Si el frame flotante no contiene una pagina web referenciada mediante
SRC y contiene texto, también es posible aplicar estilos a este texto, como color, fuente, tamaño,
etc.
<html>
<head>
</head>
<body>
<iframe src="a.html" style="position:absolute; left:100px;top:140px;width:400px;height:150px;"

>
</iframe>
</html>
ver resultado.
* CLASS= " clase ". analogo al anterior, pero ahora refiriendo el estilo del marco flotante
(posición y tamaño) de acuerdo con una clase de estilos definida en la sección de la pagina que
contiene al marco o en un archivo externo de extensión ".css"
* ID= " identificador ". En todo semejante al anterior, pero con la diferencia que ahora el nombre
de identificador asignado debe ser único para cada marco en concreto. También posibilita
cambiar dinamicamente las propiedades del marco usando un lenguaje de script, como
JavaScript.
Si queremos, podemos colocar un texto alternativo entre las etiquetas <IFRAME>> e </IFRAME>,
con el objeto de que aquellas personas cuyo navegador no soporte los marcos flotantes puedan
contemplar un mensaje alternativo.
Nestcape Navigator 3.0 y superiores implementa las etiquetas <ILAYER>...</ILAYER>, que van a
definir el principio y fin del marco flotante. Estas etiquetas deben situarse dentro del cuerpo de
la pagina que contiene al marco, es decir, entre <BODY> y </BODY>.
Los principales atributos de la etiqueta <IFRAME> son:
* SRC= " ruta pagina html ", que nos va a definir la pagina web que se va a cargar dentro del
marco flotante. Podemos especificar bien la ruta completa de la pagina en el directorio de
nuestro servidor web o bien una URL completa de Internet.
* NAME=" nombre ", donde nombre va a ser la referencia que vamos a tener para cargar luego
otras paginas web dentro del marco mediante enlaces con el atributo TARGET.
* PAGEX= " x ", con x = nº de píxeles. Define la posición horizontal de la esquina superior
izquierda del ILAYER respecto a la ventana del navegador.
* PAGEY= " y ", con y = nº de píxeles. Define la posición vertical de la esquina superior izquierda
del ILAYER respecto a la ventana del navegador.
* LEFT= " x ", donde x = nº píxeles. Es analogo a PAGEX en lo que respecta al elemento ILAYER.
* TOP= " x ", donde x = nº píxeles. Es analogo a PAGEY en lo que respecta al elemento ILAYER.
* WIDTH= " x ", donde x = nº píxeles. Con este atributo definimos la anchura que va a tener el
marco flotante.
* HEIGHT= " x ", donde x = nº píxeles. Con este atributo definimos la altura que va a tener el
marco flotante.
* CLIP= " h,v ", Nos va a permitir " recortar " el marco, de tal forma que sólo va a ser visible del
mismo h píxeles de ancho y v píxeles de alto. Esta operación va a ser necesaria hacerla siempre,
ya que si no "recortamos" el marco flotante Nestcape va a mostrar sólo aquella parte del mismo
necesaria para mostrar la pagina, la imagen o el texto que contenga.
Ejemplos.- (Sólo paraNestcape)
<html>
<head>
</head>
<body>
<ilayer src="a.html></ilayer>
</body>
</html>
ver resultado.
<html>
<head>
</head>
<body>
<ilayer src="a.html" clip="300,200"></ilayer>
</body>
</html>
ver resultado.
* BACKGROUND= " ruta imagen ", que nos permite definir una imagen de fondo para el marco
flotante, especificando su ruta completa. La pagina cargada dentro del marco se mostrara
encima de este fondo de imagen.
Ejemplo.- (Sólo para Nestcape)
<html>
<head>
</head>
<body>
<ilayer background="images/fondo.jpg" width="200" height="150" clip="200,150"></ilayer>
</html>
ver resultado.
* BGCOLOR= " color ", donde color viene expresado por su nombre web en inglés o por su
código hexadecimal, y que nos permite definir un color de fondo para el marco flotante. La
pagina cargada dentro del marco se mostrara encima de este color de fondo.
Ejemplo.- (Sólo para Nestcape)
<html>
<head>
</head>
<body>
<ilayer bgcolor="#0099ff" width="200" height="150" clip="200,150"></ilayer>
</html>
ver resultado.
* VISIBILITY= " hide / show / inherit ", que nos va a determinar si el marco flotante sera oculto,
se vera o si heredara esta propiedad del elemento que lo contiene.
* Z-INDEX= " n ", que nos da una coordenada de profundidad del marco, y que sera la que
determine cual marco se va a ver en el caso de que varios se superpongan. Se vera el marco que
tenga mayor valor de Z-INDEX. Esta etiqueta es dificultosa de usar en los marcos flotantes, ya
que Nestcape tiende a situarlos " a su aire" cuando hay varios definidos en la misma pagina. Esto
es debido a que una vez que asigna un espacio de pantalla para el primer ILAYER, se resiste a
situar otro en ese espacio reservado. Este paramero, Z-INDEX, adquiere todo su significado en el
tratamiento de capas generadas con las etiquetas <DIV> y <SPAN>.
* ABOVE. Indica que el ILAYER debe situarse encima de otro especificado.
* BELOW. Indica que el ILAYER debe situarse debajo de otro especificado.
Con todo esto podría parecer que Nestcape posee mas facilidades para crear marcos flotantes,
pero no debemos dejarnos engañar por las apariencias, pués Explorer nos permite definir
muchas propiedades del marco mediante CSS, cosa que no admite Nestcape.
Tanto la etiqueta <FRAME> de Explorer como la <ILAYER> de Nestcape estan en dehuso, ya que
lo correcto es crear código útil para ambos navegadores.
Un truco para conseguir esto sería introducir dentro de un <IFRAME> un <ILAYER>. así, Explorer
entendería la primera etiqueta e ignoraría la segunda, y con Nestcape ocurriría al revés.
Ejemplo.- (ambos navegadores)
<head>
</head>
<body>
<iframe src="a.html" width="300" height="150" vspace="75" hspace="150">
<ilayer src="a.html" width="300" height="150" clip="300,150" top="75" left="150"> </ilayer>
</iframe>
</html>
ver resultado.
El problema vendría a la hora de referenciar una nueva pagina para el conjunto obtenido, y nos
haría falta una función de JavaScript que fuera cargar la pagina en los dos marcos a la vez.
De todas formas, ya hemos dicho que estas etiquetas estan en dehuso, siendo sustituidas por "
capas " definidas mediante CSS-P, es decir, mediante posicionamiento por Hojas de Estilo en
Cascada.

GuiónIngles PDF

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

GuiónIngles PDF

Caricato da

Copyright:

Formati disponibili

Uso de los Frames (I)

Para conseguir esto debemos crear 4 páginas web:

1) página index.html con la definición de los frames.

2) página top.html con el logo, banner , etc.

3) página menu.html con los enlaces

4) página de principal.html de entrada incial en el frame central.

El código a crear sería del tipo:

<frame name="superior" src="arriba.html" marginwidth="10" marginheight="10"

<frame name="ventana" src="central_1.html" marginwidth="10" marginheight="10"

<a href="central_1.html" target="ventana">página 1ª</a>

<a href="central_2.html" target="ventana">página 2ª</a>

<SCRIPT language="JavaScript" type="text/javascript">

<a HREF="JavaScript:twoinone(1)">Link 1</a>

<a HREF="JavaScript:twoinone(2)">Link 2</a>

<frame name="superior" src="superior.html" marginwidth="10" marginheight="10"

<frame name="menu" src="menu.html" marginwidth="10" marginheight="10" scrolling="no"

<frame name="ventana" src="principal.html" marginwidth="10" marginheight="10"

<frame name="lateral" src="enlaces1.html" marginwidth="10" marginheight="10"

Uso de los Frames (II)

* adaptar nuestra pagina a la resolución del navegador.

Primero necesitamos una pagina index.html, que es la que se va a encragar de detectar la

<SCRIPT language="JavaScript" type="text/javascript">

var width = screen.width;

var res =(((!(640-width))*1)+((!(800-width))*2)+((!(1024-width))*3)+

if(!(res)) res = 1;if (res=='1') {window.location='800.html'}

if (res!='1' && res!='2' && res!='3') {window.location='1024.html'}

<frame name="lateral" src="nada.html" marginwidth="10" marginheight="10" scrolling="no"

<frame name="superior" src="nada.html" marginwidth="10" marginheight="10"

<frame name="ventana" src="800.html" marginwidth="10" marginheight="10"

ver resultado a 800x600.

ver resultado a 1024x768.

así por ejemplo podemos crear un frame horizontal oculto mediante:

<frame name="principal" src="a.html" marginwidth="10" marginheight="10"

<frame frame name="oculto" src="b.html" scrolling="no" frameborder="0">

2) Ocultar objetos o funciones de JavaScript: un ejemplo típico de este método es la creación de

3) almacenamiento de variables de sesión: a veces puede interesarnos ir almacenando algunas

*Ocultar el código fuente de la pagina.

Sus principales atributos o parametros son:

Posibles combinaciones serían:

<frameset rows="20%,*" >

<frame name="" src="a.html" marginwidth="10" marginheight="10" scrolling="auto" >

<frame name="" src="b.html" marginwidth="10" marginheight="10" scrolling="auto" >

O bien sin bordes:

<frameset rows="20%,*" frameborder="0" framespacing="0" border="0">

<frame name="" src="a.html" marginwidth="10" marginheight="10" scrolling="auto" >

<frame name="" src="b.html" marginwidth="10" marginheight="10" scrolling="auto" >

<frameset rows="20%,*" bordercolor="red">

<frame name="" src="a.html" marginwidth="10" marginheight="10" scrolling="auto" >

<frame name="" src="b.html" marginwidth="10" marginheight="10" scrolling="auto" >

Sus principales atributos o parametros son:

<A HREF=" manual.html " TARGET= " cuerpo ">Manual HTML</a>

<A HREF=" manual.html " TARGET= " _blank">Manual HTML</a>

<A HREF=" manual.html " TARGET= " _self "</a>

<A HREF=" manual.html " TARGET= " _parent</a>

y la pagina se mostrara en el marco o <FRaMESET> que llamó al documento actual. Si no hay

<BASE TARGET= " nombre" </a>

<AREA SHAPE=RECT COORDS="x,y,..." HREF="url" TARGET="frame" </a>

que en la definición de imagenes sensibles en el cliente, indica el frame donde se vera el

<FORM ACTION="url" TARGET="nombre"</a>

<frameset rows="40%,*" >

<frame src="a.html" marginwidth="50" marginheight="30">

<frame src="b.html" marginwidth="10" marginheight="0">

Sus posibles valores son:

var res =(((!(640-width))1)+((!(800-width))2)+((!(1024-width))*3)+