Formateo avanzado de paginas

Los marcos aumentan aun mas la flexibilidad de las paginas web permitiendo dividir el area visible en mas de una subregion. Cada subregion o marco, puede contener otros marcos anidados o cuadros. Cada cuadro tiene las siguientes propiedades:

  1. Puede tener su propio URL, independiente.
  2. Se le puede asignar un nombre, permitiendo ser destino de un enlase de hypertexto, direccionada con URL.
  3. Pueda cambiarse sus dimenciones de forma dinamica en respuesta a cambios en el tamaño del area visible del cliente.
  4. Se puede habilitar o desabilitar que el cliente manipule su tamaño manualmente.

No soportado en HTM5

Estas propiedades dan paso a una serie de escenarios:

  1. Informacion que el autor puede querer que permanesca todo el tiempo visible y constante, como una barra de herramientas, mensajes confidenciales, titulos, graficos, logos etc. Mientras el usuario se desplaza por el sitio en el Frame "vivo" el otro Frame "estatico" esta siempre visible y no se redibuja nunca.
  2. El contenido es asi mucho mas claro. El cuadro "izquierdo" puede contener un menu, que al ser seleccionados muestan una pagina en el cuadro "derecho".
  3. Un cuadro "query" que contiene un formulario que al ser llenado y procesado por el servidor pone su resultado en el cuadro "resultado"

Los marcos son generados con tres etiquetas: FRAMESET, FRAME y NOFRAMES

.

1. Sintaxis del documento con marco

Un documento con marcos tiene una estructura basica muy parecida al documento HTML normal, excepto porque la etiqueta BODY es reemplazada por <FRAMESET>, que describe un subdocumento o marco y estan diseñadas para ser procesadas muy rapidamente por el navegador del cliente.

<HTML>
<HEAD>
   <TITLE>Titulo del documento</TITLE>
</HEAD>
<FRAMESET>
   ...
</FRAMESET>
</HTML>

2. Etiqueta de marco FRAMESET

Define un marco que puede contener otros marcos o cuadros dentro de si. Reemplaza la etiqueta BODY de una pagina normal.

Un documento de marco no tiene BODY y ningun otro elemento antes de la definicion del primer marco (con etiqueta <FRAMESET>) o este sera ignorado.

Este es el contenedor principal y tiene 2 parametros: ROWS y COLS.

Parametros para FRAMESET
ParametroDescripcion
ROWS=valor1[,valor2,valor3...]El numero de filas esta determinado por el numero de elementos en la lista separados por comas y el alto de cada fila por el valor del mismo. El alto total de todas las filas debe ser igual a la altura total de la ventana.
COLS=valor1[,valor2,valor3...]El numero de columnas esta determinado por el numero de elementos de la lista separados por comas y el ancho de cada columna por el valor mismo. El ancho total de todas las columnas debe ser igual al ancho total de toda la ventana.

Donde valor#, separados por comas, pueden estar en valor absoluto: pixel (px) o valor relativo: porcentajes (%).

Valores de parametros para FRAMESET
ValorDescripcion
AbsolutosPixeles (px). Un simple valor numerico es asumido como el tamaño fijo en pixels. Esta es la forma mas peligrosa de asignar un valor a tu Frame, ya que su tamaño puede varias sustancialmente dependiendo de la resolucion de pantalla (VGA o SVGA) que este usando en ese momento el cliente. Si valores fijos de pixel son usados, es recomendable y necesario que se mezcle ese valor con uno o mas tamaños relativos. De otra manera el visor sobreencribira tu definicion para hacer que el 100% de la ventana disponible del cliente sea usada.
RelativoPorcentaje (%). Un simple "*" se interpreta como un Frame de tamaño relativo que ocupara el resto del espacio disponible. Si hay varios "*" el especio es dividido entre ellos. Un valor como 2*,* le indicaria dividir el estacio en 2/3 y 1/3. Si el total es superior/inferior a 100%, todos los porcentages son proporcionalmente reducidos/aumentados para llegar a este 100%.
<FRAMESET ROWS="20%,60%,20%">
<FRAMESET COLS="100,*,100">
<FRAMESET ROWS="*,30%,80">

3. Etiqueta de cuadro FRAME

Define un cuadro dentro de un marco.

La etiqueta <FRAME> puede tener los siguientes parametros:

Parametros para FRAME
ParametroDescripcion
SRCEs la ruta y nombre del documeto a ser mostrado en un Frame particular. Un FRAME sin atributo SRC es mostrado en blanco.
NAMEUsado para asignar un nombre, de manera que puede ser direccionada desde otra ventana. Es opcional. El nombre debe empezar con un caracter alfabetico.
MARGINWIDTHValor. Usado para controlar un margen en el cuadro. El valor debe ser en pixels y nunca podra ser menos a 1, es decir tocar el marco. Es opcional.
MARGINHEIGHTValor. Funciona igual al anterior solo que es para controlar el margen superior/inferior.
SCROLLINGYes|no|auto. Usado para definir si el cuadro debera tener barra de desplazamiento o no. Yes, resultara en una barra siempre visible, No en una barra nunca visible y Auto deja al navegardor que debe decidir segun el tamaño de la pagina cargada. Por omision es Auto. Es opcional.
NORESIZEEs un parametro que indica si el usuario podra o no cambiar el tamaño del cuadro. Por omision esta en RESIZE y es opcional.
_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.

Siempre hay nombres reservados para el atributo NAME de la etiqueta <FRAME>, solo se podran referir a enlaces de llegada.

4. Etiqueta NOFRAMES

Esta etiqueta es usada por los autores que quieran craer alternativas para los navegadores de clientes (browser) que no puedan visualizar los marcos. Los que ignoraran todas las etiquetas aqui puestas.

4.1 Parametro TARGET

Usado para hacer que el resultado de un enlace se produsca en otro cuadro de la misma ventana, pondriamos TARGET=nombre, siendo "nombre" el nombre de un segundo cuadro.

Pero hay unos nombres reservados (es decir, que no se pueden usar para denominar a un cuadro), que hacen que este parametro efectue unas funciones especiales.
_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.
Un error muy comun es olvidar poner este parametro en los enlaces que estan en un cuadro, con lo que resulta que al ser activados, la pagina llamada se carga dentro del propio cuadro, algo muy molesto si esa pagina pertenece a otro sitio Web y aun mas grave si esa pagina tiene a su vez marcos.

5. Algunos ejemplo:

<FRAMESET ROWS="85,*,65">

Con este etiqueta se divide la pantalla en 3 regiones la superior de 85 px de alto, una inferior de 65 px de alto y la media ocupa el resto de la ventana.

<FRAME SCROLLING="no" NAME="titulo" NORESIZE SRC="titulo.htm">

Con estos parametros se define la ventana superior (la de 85 px), sin barra de desplazamiento, no reajustable por el usuario en su tamaño y con un nombre "titulo".

	
<FRAMESET COLS="40%,60%">

Con este atributo se divide la ventana media en dos regiones de 40% a la izquierda y 60% a la derecha.

<FRAME SCROLLING="yes" NAME="toc" SRC="toc.htm">
<FRAME SCROLLING="yes" NAME="main page" SRC="main.htm">

Con estos dos etiquetas se definen dos ventanas en la parte media, llamadas "toc" y "main", que tiene asociadas una pagina cada una, toc.htm y main.htm respectivamente.

</FRAMESET>

Aqui cerramos el Frame anidado, el de las dos ventanas.

<FRAME SCROLLING=no NAME="HLP buttons" NORESIZE SRC="buttons.htm">

Aqui definimos las propiedades de la ventana inferior, la de 65 pixels de alto, sin barra de desplazamiento, no cambiable su tamaño. Ideal para la barra de herramientas de navegacion.