Manual HTML de cx1ddr

LOS FRAMES

Desde que Netscape lo divulgo en la red, se han hecho cada vez mas populares.
Lo que hacen los frames, es dividir la pantalla en dos o mas partes.
En realidad estos no son un estándar de HTML, pero se adaptan bien a las páginas.
Por lo general, los frames constan de una pantalla pequeña, en el cual existe un menú fijo, y una pantalla mas grande donde se carga la página. A pesar que existen diferentes tipos de frames, estos son los mas comunes y se les llaman frames cruzados.
Para realizar un frame, deberemos crear una pantalla de menú, una segunda pantalla que contendrá la información y por ultimo, una tercera pantalla que comandara a las otras dos anteriores.
Excepto la ultima pantalla que es solo de comando, las otras dos pantallas se diseñan igual que como si fueran dos paginas normales, así que podrán tener, enlaces, mapas ( que los veremos mas adelante), imágenes, etc. Un frame se define por la etiqueta <frameset> </frameset>, que a su vez substituye a la etiqueta body, es importante que recuerde que si coloca la etiqueta frameset, no coloque la etiqueta body, salvo que agregue la etiqueta noframe.
Vamos a diseñar una página simple a efectos de prueba.
Un frame consta como mínimo, de tres páginas. Una de las páginas puede tener links o enlaces, la otra página puede tener imágenes o texto y la tercera página es la que unirá a ambas, si a su vez esta ultima página, es la página principal de nuestro sitio WEB, deberá llamarse index.htm o index.html para que el explorador lo reconozca sin problemas.
Los códigos para la página de enlace serán:

<html>
<head>
<title>Mi primer Frame</title>
</head>
<frameset cols="50%,50%" rows="*">
<frame src="pagina2.htm">
<frame src="manual.htm">
</frameset>
</html>

Esta página y a termino de ejemplo, la e guardado con el nombre FRAMA.HTM.
En este frame simple, tenemos dos columnas ( COLS ) que se abrirán cada una al 50% de la pantalla total y ninguna área horizontal ( ROWS ), a la izquierda de la pantalla se abrirá la PAGINA2.HTM y a la derecha de esta el MANUAL.HTM. Pero este frame, al ser un frame simple y contener links, al ser presionados, la ventana que se abra, se abrirá en la propia página. Pulse Aquí para ver este ejemplo de frame y puede presionar en los links que tiene a la izquierda para ver como funciona.

FRAMES CRUZADOS
Los frames cruzados, son aquellos frames que el link esta en una página y al presionarlo se abre la página que esta pegada a ella o en la ventana que quieramos. Recuerde que en un frame común, al presionar el link, la página se carga en si misma.
Supongamos que tenemos un frame cruzado con dos columnas, una pantalla a la derecha que se llamara pagina1.htm, esta tendrá un menú con links a otras páginas que digan: " Bienvenido, Primera parte, Segunda parte " y en la pantalla de la derecha, crearemos las páginas que correspondan a estos enlaces para que se abran al momento de presionar el link.
Por último necesitaremos crear la pantalla de enlace, a la cual llamaremos fram.htm.
Para realizar la página llamada pagina1.htm, con los enlacés correspondientes, deberemos colocar las siguientes etiquetas:

página1.htm

<html>
<head>
<title>Página del menu</title>
</head>
<body bgcolor="ff0000">
<font color="#0000ff">
<a href="manual.htm" target="ventana">Bienvenidos</a><br>
<a href="manual1.htm" target="ventana">Página 1</a> <br>
<a href="manual2.htm" target="ventana">Página</a>
</font>
</body>
</html>

Ahora crearemos la página de enlace de ambas páginas, es decir que tendremos que ejecutar esta para poder ver ambas páginas con frames

fram.htm

<html>
<head>
<title>Mi primer Frame</title>
</head>
<frameset cols="15%,85%" rows="*">
<frame src="pagina1.htm">
<frame src="manual.htm" name="ventana">
</frameset>
</html>

Por ultimo, deberemos crear otra página, que será la que se abra a la derecha de la pantalla, en mi caso tome una página del manual ( MANUAL.HTM )
Pulse Aquí, para ver como queda la página.
Voy a tratar de explicarles, que son los nuevos comandos que aparecen en la pagina fram.htm y pagina1.htm.
Lo que hace el frame cruzado es que al presionar el botón en una de las dos páginas, carga la de la otro, para ello en la página frame.htm se le deberá indicar el nombre de la página que se quiere que se cargue.
En nuestro ejemplo, el nombre es "ventana".
Ahora deberemos indicarle a los links, que carguen esa página, para ello se coloca la etiqueta TARGET seguida del nombre de la ventana a cargar, en nuestro ejemplo TARGET="VENTANA", vea arriba la PAGINA1.HTM
Supongamos que me olvido de poner el nombre o la etiqueta target, en este caso se cargara la página dentro de si mismo.
Recuerde que en ambas ventanas que usted esta visualizando, son dos ventanas con etiquetas html y que la ventana que tiene la etiqueta para que ambas funcionen (frames) permanece oculta, para poder verla tendremos que ir a la barra de herramientas, VER . CÓDIGO DE FUENTE. Para poder ver los códigos de alguna de estas dos ventanas, tendremos que ponernos con el puntero del mouse en la ventana que queremos ver los códigos, presionar el botón derecho del mismo y seleccionar, en el menú que aparece, VER CÓDIGO DE FUENTE.
Acá veremos que la página de la derecha, se cargara al 15% y la de la izquierda al 85%.
Con respecto a los atributos que le podremos poner serán:

COMANDOS PARA LOS FRAMESET:
ROWS="fila1,fila2,fila3...filan". Este atributo sirve para dividir la pantalla en secciones horizontales, Fila1, Fila2, etc. son una lista de valores separados por comas que indican que tamaño tendrá su correspondiente separación horizontal. Estos valores se pueden definir de tres formas, en pixeles, en porcentaje, y con el símbolo *, que significa que es un valor relativo y el frame correspondiente ocupará el espacio que reste en la pantalla. Si hay mas de un frame con asterisco, el espacio sobrante se repartirá en partes iguales entre ellos. Si colocamos un numero delante del asterisco ese frame tendrá n veces mas espacio que los otros con asterisco.
COLS="col1,col2,col3...coln". Este atributo sirve para dividir la pantalla en secciones verticales y se utiliza de igual forma que el anterior pero referido a las columnas.

COMANDOS PARA LOS FRAMES:
FRAMEBORDER="0" (cero). Sirve para definir la barra de separación o bordes entre frames, donde n es un valor en pixeles, si es cero el borde desaparece.
FRAMEBORDER="no". Igual que en la directiva anterior sirve para eliminar el borde, pero aquí de un solo frame.
FRAMESPACING="0" (cero). Sirve para definir la separación entre frames, donde n es un valor en pixeles, si es cero el borde desaparece. Este atributo es valido para el Internet Explorer.
BORDER="0". Igual que el anterior, Solo funciona cuando se ve la página en Netscape.
BORDERCOLOR="color" Nos permite cambiar el color del borde del frame
SRC="url". Donde URL es la dirección de un documento HTML o de cualquier otro recurso de la WEB. Si no se coloca este atributo el frame estará vació.
NAME="nombre del frame". Aquí podemos dar un nombre al frame, lo que nos permitirá referirnos a el y convertirse en el destino de cualquier hiperenlace, como veremos mas adelante.
TARGET="nombre de frame". Este atributo permite definir el nombre del frame que recibirá el documento del hiperenlace.
TARGET="_new". Obliga al navegador a abrir una nueva ventana.
TARGET="_blank". Obliga al navegador a crear una copia a pantalla completa. Tendremos así dos navegadores abiertos, aunque esta ventana no tiene nombre y no se podrá utilizar como destino de otro hiperenlace.
TARGET="_self". Es el defecto si no ponemos target, el documento se carga sobre el mismo frame que contiene el enlace.
TARGET="_top". Hace que el enlace se cargue a pantalla completa, suprimiendo todos los frames, pero sin crear una copia del navegador. Este lo debemos utilizar siempre que la página a la que llamemos pertenezca a otro servidor y sea independiente de nuestra página Web. El comentario anterior es un consejo y no una imposición, es decir no lo exige el atributo en sí, pero si forma parte de las buenas costumbres, pues si no lo hacemos así, parece que queremos anclar a nuestro visitante en nuestra página, aparte de lo molesto que resulta el cargar a lo mejor una página que también utiliza frames.
TARGET="_parent". Cuando se hace un anidamiento de frames se crea una jerarquía, por lo que al hacer uso de este atributo desaparece la jerarquía inferior y el hiperenlace se muestra en el frame jerárquicamente superior.
MARGINWIDTH="0". Donde n es un numero en pixeles que nos sirve para definir el ancho de los márgenes del frame.
MARGINHEIGTH="0". Igual que el anterior pero en altura.
SCROLLING="yes,no,auto". Con este atributo definimos si el frame va a tener o no una barra deslizadora. Si ponemos "yes" el frame siempre tendrá barra deslizadora aunque no la necesite, "no", nunca tendrá barra, y "auto" será el navegador el que decida si la lleva o no. NORESIZE. Este atributo no lleva ningún parámetro e indica al navegador que no debe permitir al usuario cambiar el tamaño del frame.
<noresize>No permite que se cambie el tamaño de la ventana
<noframe> </noframe>Si el visitante, tiene un explorador muy viejo, es conveniente poner esta etiqueta que le avisara al usuario que su explorador no soporta frames. Es una buena idea que en la pantalla que aparezca, tenga un link para descargar la ultima versión de uno de los dos Exploradores.
Para aplicar los códigos antes vistos, procederemos de la siguiente manera.
Primero tengo que hacer un frame que una dos páginas, de la siguiente manera:

<html>
<head>
<title>Mi primer Frame</title>
</head>
<frameset cols="15%,85%" col=*>
<frame src="pagina1.htm" noresize scrolling="no">
<frame src="manual.htm" name="ventana">
</frameset>
<noframe>
</noframe>
</html>

Si esta es su página principal, recuerde de guardarla como index.htm o index.html. En este ejemplo el frame tendrá dos columnas (COL), una ocupara el 15% ( a la izquierda) y la otra el 85% ( a la derecha ) de la pantalla total.
Echo esto deberemos de hacer dos páginas mas, con los nombres PAGINA1.HTM y MANUAL.HTM, para que cuando el frame se abra, vea estas dos páginas. Podré dos páginas simples, como ejemplo:

Página1.htm

manual.htm

<html>
<head>
<title>Mi primer Frame</title>
</head>
<frameset cols="15%,85%" frameborder="0" border="0" FRAMESPACING="0" >
<noframe>
<body>
Su navegador no soporta frames.<a href="http://www.microsoft.com">Pulse Aquí</a>, para ir a la página de Microsoft y descargar un nuevo navegador
</body>
</noframe>
<frame src="pagina2.htm">
<frme src="manual.htm" name="ventana">
</frameset>
</html>

Y ya tenemos el frame echo, puede modificarlo, ponerle imágenes o hacerlo a gusto, vea como queda este frame terminado, Pulse Aquí
Veamos otros ejemplos de frames, recuerde que los ejemplos que van a ver son para unir dos o mas páginas en un frame.

Frame de 3 columnas (COLS) Deberá de crear 3 páginas, una por cada frame.

<FRAMESET COLS="30%,20%,50%" ROWS="*">

Frame de 3 áreas horizontales ( ROWS) Deberá de crear 3 páginas, una por cada frame.

<FRAMESET COLS="*" ROWS="30%,20%,50%" >

Frame combinado, uno vertical(COLS) y dos horizontales(ROWS)

A	B
	C

Frame combinado, dos áreas horizontales(ROWS), y la de abajo dividida en dos verticales(COLS)

A
B	C

Frame combinado, dos áreas horizontales(ROWS), y la de abajo dividida en dos verticales(COLS), pero que no se vean los bordes.

A
B	C

También podremos decirle a una FRAME que ponga bordes de colores. Esto hará que nuestras frames queden mas atractivos.
Para ello vamos a usar el comando <bordercolor="color">.
Por ejemplo. si queremos que el borde de un frame sea de color verde, pondremos los siguientes tag´s:

A
________

B
.

Un Ejemplo simple de IFRAME, donde verán una ventana que contiene otra página.

El código para este IFRAME es el siguiente:

<IFRAME frameBorder="0" height="120" marginHeight="0" marginWidth="0" noResize scrolling="yes" src="manual.htm" width="500">
<script src="manual.htm">
</script>
<NOSCRIPT> Su Explorador no soporta Java</NOSCRIPT>
</iframe>

Donde:
FrameBorder, es si le queremos dar un borde a la pantalla.
Height es el alto y Width es el ancho de la pantalla
noResize, es para que no puedan re dimensionar la pantalla
Scrolling, es por si queremos ponerle una barra desplazadora a la pantalla que aparezca.

Por ultimo, podemos hacer un listado que facilite al inernauta la navegación por nuestras páginas.
Ya hemos visto como se hacen las listas en un capiulo anterior ( vea LISTAS ), pero ahora veremos como se hace una lista para frames cruzados. Para ello haga lo siguiente:

<form name="hsel" >
< select name="Lista" onChange="top.cx1ddr.location.href=this.form.Lista.options[this.form.Lista.selectedIndex].value">
<option value="manual.htm" selected>INICIO</option>
<option value="empezar.htm">PRIMERA PÁGINA</OPTION>
<option value="formato.htm">FORMATO</OPTION>
</select>
</form>

Tenga presente que CX1DDR, es el nombre que tendra la página de enlace; LISTA, puede cambiarlo por el nombre que usted quiera siempre y cuando las tres tengan el mismo nombre y por ultimo puede poner tantas OPTION como link´s tenga su página. La página de union con FRAMESET, se hara igual que como hemos visto pero recuerde de darle el mismo nombre que le pongamos al menu ( en nuestro caso CX1DDR )
Pulse Aquí, para ver como queda la página.

Lo más importante es probar y ver si resulta, si no resulta inténtenlo de nuevo hasta que salga.
Es un poco complicado lo de los frames, pero con todos estos ejemplos, creo que se les va a hacer mas fácil.