Prof.
Rocio Calixtro Salinas
Pginas Web
FRAMES
Los frames o marcos se usan para dividir la
pantalla en varias zonas independientes, cada
una con su propia barra de desplazamiento.
Un uso muy comn es en esos sitios que
tienen un men fijo en la parte izquierda de la
pgina, y los textos aparecen en la parte
derecha.
Vamos a crear una pgina de ese tipo, con un
men que ocupe el 15% de la pantalla.
Primero tenemos que crear la pgina con la
definicin
de
los
frames:
Escribimos el siguiente cdigo y Grabamos
esta pagina como [Link]
<HTML>
<HEAD>
<TITLE>Pagina con frames</TITLE>
</HEAD>
<FRAMESET COLS="15%, 85%">
<FRAME SRC="[Link]" NAME="menu">
<FRAME SRC="[Link]"
NAME="contenido">
<NOFRAMES>
<BODY>
Esta pgina esta pensada para ser vista con
frames.
<P>Pulsa en el enlace para <A
HREF="[Link]"> entrar</A>.
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
Tenemos varios tag nuevos, que admiten
varios parmetros:
<FRAMESET>
Es el tag que define las caractersticas del
conjunto de los frames:
Pag.1
Hay otros atributos, como Frameborder,
border, framespacing, que no veremosen
este curso.
<FRAME>
Define las caractersticas de un frame en
concreto:
SRC: Fichero .htm que debe cargar en el
frame.
name: Nombre del frame. Muy importante
porque se necesita para los enlaces.
Scrolling: Nos permite decidir si queremos
que aparezca la barra deslizadora. Puede
valer: yes, no y auto(por defecto).
Noresize: (Sin valor numrico). Si lo
aadimos, el frame no podr
redimensionarse con el ratn.
<NOFRAMES> Lo que va dentro de este
tag aparecer en los navegadores que no
soporten frames.
[Link]
<HTML>
<HEAD>
<TITLE> Menu </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<P><A HREF="[Link]"
TARGET="contenido"> Portada </A>
<P><A HREF="[Link]"
TARGET="contenido"> Pagina1 </A>
<P> <A HREF="[Link]"
TARGET="contenido"> <input type="submit"
value="ENTER o ENTRAR"> </A>
</HTML>
Cols, Rows: Podemos definir los frames
como columnas o filas, y para indicar su
tamao tenemos varias opciones:
o En pixels: Por ejemplo, <FRAMESET
COLS="100, 500, *">
Le estamos diciendo al navegador que
hay tres frames columna: el primero tiene
un ancho de 100 pixels, el segundo, 500,
y el tercero debe rellenar el resto de la
pgina(*)
o En porcentaje: <FRAMESET
COLS="15%, 85%">
Dos frames, uno que ocupa el 15% de la
pantalla y otro, el 85%.
Es simplemente una pgina con dos
opciones de menu(dos enlaces), y lo nico
que ha cambiado es que el tag <a> del
enlace tiene el atributo <target="contenido">.
La pgina enlazada se abrir en "contenido"
que es el frame derecho que hemos definido
antes.
[Link]
<HTML>
<HEAD>
<TITLE> Contenido </TITLE>
Prof. Rocio Calixtro Salinas
Pginas Web
</HEAD>
<BODY BGCOLOR="# F6BEF5 ">
<h1>Aqu va el contenido</h1>
</BODY>
</HTML>
[Link]
<HTML>
<HEAD>
<TITLE> Portada </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<h1>Esto es la portada</h1>
</BODY>
</HTML>
[Link]
<HTML>
<HEAD>
<TITLE> Pagina1 </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<h1>Esto es la pagina1</h1>
</BODY>
</HTML>
Encerrar dentro de un frame un enlace
externo. Para que un enlace rompa los
frames debemos escribir <target="_top">, o
para que se abra en una nueva ventana,
<target="_new">.
Botn Google
<br /> <b>
<!-- Bsqueda Google --> <center> <FORM
method=GET
action="[Link]
<TABLE bgcolor="#FFFFFF"><tr><td> <A
HREF="[Link]
_fcksavedurl="[Link]
<IMG
SRC="[Link]
[Link]"
_fcksavedurl="[Link]
/Logo_40wht.gif" border="0" ALT="Google"
align="absmiddle"></A> <INPUT TYPE=text
Pag.2
name=q size=31 maxlength=255 value="">
<INPUT TYPE=hidden name=hl value=es>
<INPUT type=submit name=btnG
VALUE="Bsqueda Google">
</td></tr></TABLE> </FORM> </center> <!-Bsqueda Google --></b><br />
Botn Seguir Leyendo...:
<button class="button"
onmouseover="[Link]='green
'"
onmouseout="[Link]='silver'"
onclick="[Link] = 'Tu
PGINA/XXXXXX/'"><span style= "color:
#040404;">Seguir
leyendo...</span></button>
Botn Spoiler para mostrar Enlaces o
Comentarios:
<div><input style="background:#FF9900;"
value="Mostrar"
onclick_fckprotectedatt="%20onclick%3D%2
2if([Link](
'div')%5B0%[Link]%20!%3D%20'')%
[Link]('
div')%5B0%[Link]%20%3D%20''%3
[Link]%20%3D%20'Ocultar'%3B%7Delse
%[Link]
e('div')%5B0%[Link]%20%3D%20'n
one'%3B%[Link]%20%3D%20'Mostrar'
%3B%7D%22" type="button" /><div
style="display: none;">INSERTA AQUI EL
CONTENIDO QUE QUIERES
OCULTAR</div></div>
