Para crear un frame se utiliza la etiqueta <FRAME> y </FRAME>. Un frame es la división de la pantalla en varias zonas o ventanas que pueden actuar de forma independiente las unas de las otras. Los navegadores que reconocen las etiquetas para realizar frames son Netscape y Explorer 2.0 y en adelante. A continuación vamos a ver como definir frames o ventanas y las peculiaridades que hay que tener en cuenta a la hora de cargar nuestras páginas en cada uno de ellos.
< frames cols="30%,70%"> Esta etiqueta divide la pantalla en dos columnas que actuan como ventanas. Una de ellas ocupará el 30% de la pantalla y la otra ocupará el 70% de la pantalla.
< frames rows="30%,70%"> Con esto dividiríamos la pantalla en filas en la misma proporción anterior.
< frames cols="40,600"> La ventana de la izquierda ocupará 40 pixels y la de la derecha 600.
< frameset rows="80,400"> La ventana superior ocupará 80 pixels y la ventana inferior 400.
<frameset rows="20,100,*"> Habrá 3 ventanas. La primera tendrá 20 puntos, las segunda 100 y la tercera el resto de la pantalla.
< frameset cols="2*,*" > Dividiría la pantalla en tres partes y la primera columna ocuparía dos tercios de la pantalla.
< framaset rows="*,3*"> Divide la pantalla verticalmente en 2 partes. La primera fila obtendría un cuarto de espacio de la pantalla mientras que la segunda fila obtendría los otros tres cuartos restantes.
< frame src="documento.htm"> Con esta etiqueta indicamos que documento se va a cargar en cada ventana.
Veamos un ejemplo:
<HTML>
<HEAD>
<TITLE> FRAMES </TITLE>
</HEAD>
<FRAMESET COLS="25%, 75%">
<FRAME SRC="derecha.html">
<FRAME SRC="izquierda.html" NAME="principal">
</FRAMESET>
</HTML>
Como insertar el contenido
Una vez que tenemos el frame principal hecho el sigiente paso seria introducir el contenido en el, lo cual se hace de la siguiente manera:
1. Debemos crear un nuevo archivo en el editor que estemos utilizando y lo guardamos con el nombre de izquierda.html (o el nombre que uno quiera pero siempre y cuando coordine con el que pusimo en el ejemplo anterior <FRAME SRC="derecha.html">, suponiendo que lo se guardo como der.html. Dentro de este marco yo puedo utilizar todos los elementos que hemos vistos anteriormente.
EJEMPLO:
<html>
<head>
<TITLE>Ejemplos Con Frames</TITLE>
</head>
<BODY BGCOLOR="000000">
<h1> <font color=red>Este es el marco que me servira como portada</font> </h1>
</html>
2. Debemos crear otro archivo y colocarle el nombre que uno quiera, para este caso se llamara izquierda.html
EJEMPLO:
<html>
<BODY BGCOLOR="navy">
</html>
Navegadores que no soportan frame
<HTML>
<HEAD>
<TITLE> FRAMES </TITLE>
</HEAD>
<FRAMESET COLS="25%, 75%">
<FRAME SRC="izquierda.html">
<FRAME SRC="derecha1.html">
</FRAMESET>
<NOFRAMES>
Lo siento, tu navegador no soporta frame
debes actualizarte
</NOFRAMES>
</HTML>
El algoritmo elaborado anteriormente funciona tanto para navegadores que soportan FRAMES como para aquellos que no.
<NOFRAMES>...</NOFRAMES>, dentro de estas etiquetas se escribe el mensaje que uno quiere que aparesca al momento de entrar un usuario cuyo navegador no acepta FRAMES. Es como una forma de validacion.
Dentro de las etiquetas <NOFRAMES>...</NOFRAMES> tambien podemos colocar el contenido de los dos frames que definimos, de manera que cuando una persona cuyo navegador no acepte frames entre, le sea totalmente transparente.
ATRIBUTOS
NAME
Indica el nombre de la frame, este nombre es importante ya que se usará en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento. Si no se indica el nombre solo se podrá mostrar el documento actual, sin que sea posible cambiarlo mediante hiperenlaces.
_blank
Siempre carga en una nueva ventana, sin nombre.
_self
Siempre carga esta ventana sobre la del usuario.
_parent
Siempre carga esta ventana sobre su padre o sobre la del usuario si no hay padre definido.
_top
Siempre carga esta ventana en el nivel mas alto o sobre la del usuario si estas en el nivel superior.
ROWS
Este atributo es utilizado cuando queremos hacer un corte horizontal y no uno vertical. En ese caso, lo unico que deberiamos cambiar seria el atributo COLS de la etiqueta <FRAMESET> por dicho atributo. El resto seria igual:
<HTML>
<HEAD>
<TITLE> FRAMES </TITLE>
</HEAD>
<FRAMESET ROWS="30%, 70%">
<FRAME SRC="arriba.html">
<FRAME SRC="abajo.html">
</FRAMESET>
</HTML>
Pulsa para ver un ejemplo
MARGINWIDTH y MARGINHEIGHT
El primer atributo nos permite controlar la cantidad de espacio horizontal entre los contenidos y las paredes del marco. El valor mínimo permitido es 1. El segundo atributo nos permite controlar el espacio vertical entre los contenidos y los márgenes superior e inferior.
EJEMPLO:
<FRAMESET COLS="30%, 70%"*>
<FRAME MARGINHEIGHT="30" SRC="izquierda.html">
<FRAME MARGINHEIGHT="30" MARGINWIDHT="50" SRC="derecha.html">
</FRAMESET>
NORESIZE
El usuario puede tomar el borde del marco con el mouse y moverlo a su gusto. Para que esto no ocurra utiliza este atributo que al ingles traduce NO-RESIZE "sin cambiar el tamaño"). Hay que saber usar este atributo ya que todas las personas que visitan nustra pagina WEB no tienen configurado su monitor a la misma resolucion.
SCROLLING
Este atributo es utilizado para indicar si el frame tendrá o no una barra de scroll, la barra de scroll se muestra en el lateral y permite desplazarse por el documento, pulsando con el ratón en ella. Si toma el valor YES, siempre se mostrará esta barra, para el valor AUTO solo se mostrará si el documento no cabe en la frame, si es necesaria. Y por último NO indica que en ningún caso se muestre la barra de scroll. Si no se indica nada se toma por defecto el valor AUTO.
<FRAMESET COLS="25%, 75%">
<FRAME SCROLLING=YES SRC="izquierda.html">
<FRAME SCROLLING=NO SRC="derecha.html">
</FRAMESET>
TARGET
Este atributo es usado para hacer que el resultado de un enlace se origine en otro frame de la misma ventana, pondriamos TARGET=nombre, siendo "nombre" el nombre de un segundo frame. Pero hay que tener cuidado al utilizarlo ya que no se pueden utilizar nombres reservados
_self
Hace que el enlace se cargue en el propio frame. (default)
blank
Hace que se abra una nueva ventana y el enlace activado se carga en ella, a pantalla completa.
_top
Hace que el enlace se cargue a pantalla completa, suprimiendo todos los frames, pero sin que se cargue una nueva ventana.
Sigue aprendiendo con los siguientes: tutoriales1 , tutoriales2
