Frames.
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 común es en esos sitios
que tienen un menu fijo en la parte izquierda de la página, y los textos aparecen
en la parte derecha.
Vamos a crear una
pagina de ese tipo, con un menu que ocupe el 15% de la pantalla.
Primero tenemos
que crear la página con la definición de los frames:
Escribimos el
siguiente código:
<HTML>
<HEAD>
<TITLE>Pagina con frames</TITLE>
</HEAD>
<FRAMESET COLS="15%, 85%">
<FRAME SRC="menu.htm"
NAME="menu">
<FRAME
SRC="portada.htm" NAME="contenido">
<NOFRAMES>
<BODY>
Esta página esta
pensada para ser vista con frames.
<P>Pulsa en
el enlace para <A HREF="portada.htm"> entrar</A>.
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
Tenemos varios
tag nuevos, que admiten varios parámetros:
<FRAMESET>
Es el tag que
define las características del conjunto de los frames:
Cols, Rows:
Podemos definir los frames como columnas o filas, y para indicar su tamaño
tenemos varias opciones:
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
página(*)
En porcentaje:
<FRAMESET COLS="15%, 85%">
Dos frames, uno
que ocupa el 15% de la pantalla y otro, el 85%.
Hay otros
atributos, como Frameborder, border, framespacing, que no veremosen este curso.
<FRAME>
Define las
características 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 numérico). Si lo añadimos, el frame no podrá redimensionarse con el
ratón.
<NOFRAMES>
Lo que va dentro
de este tag aparecerá en los navegadores que no soporten frames.
Ahora que hemos
creado la pagina con las deficiones de los frames, nos falta crear dos páginas
más, el menu y la portada.
menu.htm
<HTML>
<HEAD>
<TITLE> Menu </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<P><A HREF="portada.htm"
TARGET="contenido"> Portada </A>
<P><A
HREF="pagina1.htm" TARGET="contenido"> Pagina1
</A>
</BODY>
</HTML>
Es simplemente
una página 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 página enlazada se abrirá en
"contenido" que es el frame derecho que hemos definido antes.
Vamos a guardar
esta página con el nombre menu.htm
portada.htm
Vamos a guardar
dos páginas muy sencillas: portada.htm y pagina1.htm:
<HTML>
<HEAD>
<TITLE> Portada </TITLE>
</HEAD>
<BODY
BGCOLOR="#FFFFFF">
<h1>Esto es
la portada</h1>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> pagina 1 </TITLE>
</HEAD>
<BODY
BGCOLOR="#FFFFFF">
<h1>Esto es
la pagina numero 1</h1>
</BODY>
</HTML>
Ya podemos cargar
en el navegador la página en la que definíamos el conjunto de frames, y ver el
resultado.
Los frames tienen
varias ventajas y inconvenientes, pero se ha abusado tanto de ellos que
últimamente están en desuso. En general no se debería:
Usar nunca más de
dos frames en una página.
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">.
Comentarios
Publicar un comentario