Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
en HTML
Etiqueta <FRAMESET>
Las etiquetas <FRAMESET></FRAMESET> son las que van a decirle al
navegador dnde empiezan y dnde acaban los marcos, y el tipo y forma de estos.
Entre una y otra irn las definiciones de los diferentes frames.
Estas etiquetas se deben situar entre <HTML> y </HTML>, pero podemos hacerlo
tambin 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 tamao de cada
marco vertical, pudiendo definirse en pxeles o en porcentaje. Tambin podemos
Si ademas queremos que no se vean los huecos que originan los bordes invisibles
hay que aadir el atributo FRAMESPACING=0 para Internet Explorer y BORDER=0
para Nestcape.
Ejemplo.- Recuerda que para la prueba de los ejemplos siguientes debes crear a parte de la pgina
principal donde definimos el frame (pgina que crearas con los cdigos siguientes llmale index.html)
una pgina a.html y una pgina b.html independientes que se cargarn en cada frame, puedes
colocarle un color de fondo diferente a cada una de estas dos pginas para que aprecies mejor los
resultados.
<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>
O bien sin bordes:
<html>
<head>
<title>Mi pagina</title>
</head>
<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>
</html>
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
tambin 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 localizacin 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 localizacin 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>
* 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 tamao de
este.
<html>
<head>
<title>Mi pagina</title>
</head>
<frameset rows="40%,*" bordercolor="red">
<frame src="a.html" marginwidth="50" marginheight="30" frameborder="0" >
<frame src="b.html" marginwidth="10" marginheight="0" >
</frameset>
</html>
<html>
<head>
<title>Mi pagina</title>
</head>
<frameset rows="40%,*" bordercolor="red">
<frame src="a.html" marginwidth="50" marginheight="30" frameborder="1" >
<frame src="b.html" marginwidth="10" marginheight="0" frameborder="1">
</frameset>
</html>
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 sera:
<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>
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 diseo 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 cdigo, por lo que es
conveniente ayudarse de alguno de los muchos programas de creacin web que
existen.
Como ejemplo de esta tcnica veamos el siguiente cdigo:
<html>
<head>
<title>Mi pagina</title>
</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>
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.
Frames flotantes
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 posicin que queramos dentro de nuestra pagina, situando mediante
coordenadas su vrtice superior izquierdo. Estas ventanas son configurables,
pudiendo definir ademas de su posicin su tamao y otra serie de propiedades.
El mayor inconveniente que encontramos con estas ventanas flotantes es que su
implementacin no es posible con Nestcape.
HTML 4.0 y superior 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
unvocamente al marco flotante, con vistas a referenciar su contenido mediante un
enlace por medio del parametro TARGET.
* WIDTH= " x ", donde x = n pxeles. Con este atributo definimos la anchura
que va a tener el marco flotante.
* HEIGHT= " x ", donde x = n pxeles. 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.<html>
<head>
</head>
<body>
<iframe align="left" src="a.html"></iframe>
<iframe align="center" src="b.html"></iframe>
</html>
* FRAMEBORDER= " 0 / 1 ", Este atributo hace que el marco aparezca sin borde
o con borde (valor por defecto) respectivamente.
Ejemplo.<html>
<head>
</head>
<body>
<iframe src="a.html" frameborder="0" align="center" ></iframe>
</html>
* VSPACE= " x ", donde x = n pxeles. Nos sirve para posicionar el marco, y
define la distancia entre el borde superior del marco y el lmite superior de la
ventana del navegador.
* HSPACE= " x ", donde x = n pxeles. Nos sirve para posicionar el marco, y
define la distancia entre el borde izquierdo del marco y el lmite izquierdo de la
ventana del navegador.
Ejemplo.<html>
<head>
</head>
<body>
<iframe src="a.html" hspace="100" vspace="20"></iframe>
</html>
* SCROLLING= " yes / no / auto ", que nos va a definir si el marco va a tener
barra deslizadora siempre, nunca o slo cuando sea necesario por exceder el
contenido al tamao 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.
* CLASS= " clase ". analogo al anterior, pero ahora refiriendo el estilo del marco
flotante (posicin y tamao) de acuerdo con una clase de estilos definida en la
seccin de la pagina que contiene al marco o en un archivo externo de extensin
".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. Tambin 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.
El esquema de construccin 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 pginas.
Para conseguir esto debemos crear 4 pginas web:
1)
2)
3)
4)
pgina
pgina
pgina
pgina
Mas las diferentes pginas de nuestro sitio web, que iremos llamando desde el
men lateral y cargando en el frame central.
El cdigo a crear sera del tipo:
pgina 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" scrolling="auto" frameborder="0">
<frameset>
<frameset>
</html>
pgina menu.html
<html>
<head>
</head>
<body>
<a href="central_1.html" target="ventana">pgina 1</a>
<a href="central_2.html" target="ventana">pgina 2</a>
</body> </html>
y luego creamos arriba.html, que es una pgina simple con una imagen como logo
y un texto aclarativo, y central_1.html y central_2.html que son dos pginas que
contendran aquellos elementos web que deseemos.
Como podemos ver, al pinchar sobre el enlace "pgina 1" lo que hacemos es
cargar en el frame central dicha pgina, y lo mismo ocurre al pinchar el enlace
"pgina 2", con lo que sustituimos el contenido de dicho frame. Y esto podemos
hacerlo con todos los enlaces y pginas que deseemos.
Si hablamos de proporciones de frames y ventana, lo mas comn es utilizar
aproximadamente el cuarto izquierdo de la pgina para el ndice fijo y los tres
cuartos restantes para la informacin, en el caso de que slo haya dos frames
verticales, y si tenemos tres frames, como en el ejemplo, aproximadamente el
quinto/sexto superior de la pgina 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
informacin.
* 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 funcin JavaScript
actuando en la pgina menu.html y varias pginas que se vayan alternando tanto
en el frame superior como en el central.
Ejemplo.- ( menu.html)
<html>
<head>
<SCRIPT language="JavaScript" type="text/javascript">
<!-function twoinone(nr){
if (nr==1){
parent.superior.location.href="superior1.html"
parent.ventana.location.href="a.html"
}
if (nr==2){
parent.superior.location.href="superior2.html"
parent.superior.location.href="b.html"
}
}
//-->
</SCRIPT>
</head>
<body>
<a HREF="JavaScript:twoinone(1)">Link 1</a>
<a HREF="JavaScript:twoinone(2)">Link 2</a>
</body>
</html>