Frames

Las frames es una técnica para subdividir la pantalla del navegador en diferentes ventanas.

Cada una de estas ventanas se podrá manipular por separado, permitiéndonos mostrar en cada una de ellas una página Web diferente.

Esto es muy util para, por ejemplo, mostrar permanentemente en una ventana los diferentes contenidos de nuestra página, y en otra ventana mostrar el contenido seleccionado.

Para definir las diferentes subventanas o frames se utilizan las etiquetas <frameset> </frameset> y <frame> .

 La etiqueta <frameset> indica como se va a dividir la ventana principal. Pueden incluirse varias etiquetas <frameset> anidadas con el objeto de subdividir una subdivisión. Los parámetros de <frameset> son rows y cols en función de si la división de la pantalla se realiza por filas (rows) o columnas (cols).

Los parámetros rows y cols se acompañan de un grupo de números que indican en puntos o en porcentaje el tamaño de cada una de las subventanas. En caso de utilizar rows los tamaños de las subventanas se entienden indicados de arriba a abajo, es decir, el primer valor será el asignado a la ventana superior, el segundo a la ventana inmediatamente inferior, etc… En el caso de cols los tamaños se aplican de izquierda a derecha.

<framseset rows="25%,50%,25%"> Crea tres subventanas horizontales, la primera ocupará un 20% de la ventana principal, la segunda un 50% y la tercera un 25%.
<frameset cols="120,*,100"> Crea tres subventanas verticales, la primera y la tercera tendrán un "ancho" fijo de 120 y 100 puntos respectivamente. La segunda ocupará el resto de la ventana principal (*).
<frameset cols="15%,*"> <frameset rows="20%,*"> En este caso "anidamos" dos directivas. La primera divide la ventana principal en dos subventanas verticales, la primera ocupa un 15% de la ventana principal y la segunda el resto. La segunda directiva vuelve a subdividir la primera subventana creada anteriormente, pero esta vez en dos subventanas horizontales, la superior ocupará un 20% de la subventana, y la inferior el resto.

La etiqueta <frame> indica las propiedades de cada subventana. Es necesario indicar una etiqueta <frame> para cada subventana creada. Los parámetros de <frame> son :

name="nombre" Indica el nombre por el que nos referiremos a esa subventana.

src="URL" La ventana mostrará en principio el contenido del documento HTML que se indique.

marginwidth="num". Indica el margen izquierdo y derecho de la subventana en puntos.

marginheight="num" Indica el margen superior e inferior de la subventana en puntos.

scrolling = "yes / no / auto" Indica si se aplica una barra de desplazamiento a la subventana en el caso de que la página que se cargue en ella no quepa en los límites de la subventana. El valor " yes " muestra siempre la barra de desplazamiento, " no " no la muestra nunca (la zona de la página que no quepa en la subventana no la veremos), y " auto " la muestra solo en caso de que sea necesario para poder ver la página.

noresize Si se indica este parámetro, el usuario no podrá "redimensionar" las subventanas con el navegador. Un usuario que este viendo una pagina con frames puede redimensionarlas seleccionando un borde de la subventana con el cursor y desplazándolo.

border="num". Indica el "borde" que separara esta frame de la siguiente. Si se indica cero (0) no se mostrara borde entre las frames, consiguiendo un efecto muy elegante, siempre y cuando el "fondo" de todas las frames sea el mismo, o sean colores solidos.

Los navegadores que no soportan la característica de subventanas, no mostrarán nada de lo indicado con estas etiquetas. Es por ello que existe una etiqueta llamada <noframes> </norames> . Todo los indicado entre esta etiqueta será lo que muestren los navegadores sin capacidad para visualizar Frames. Los navegadores que soporten Frames obviaran las etiquetas incluidas entre <noframes> </noframes> .

Si su navegador puede visualizar Frames tendrá en estos momentos la pantalla dividida en dos zonas independientes, en la izquierda verá el índice de materias de este manual, y en la derecha estará viendo la sección del manual que haya selecionado. En otro caso simplemente verá la sección del manual.

La definición de las Frames debe ir antes de la definición del cuerpo de documento ( <body> ).

Veamos un ejemplo completo de Frames con comentarios :

<html>
<head>
<title> Pagina con Frames </title>
</head>

<frameset cols="15%,*" >
<!– Creo dos subventanas verticales, la de la izquierad ocupa un 15% de la pantalla, la de la derecha el resto. –>

<frameset rows = "35%,*" >
<!– Creo dos subventanas horizontales dentro de la subventana izquierda. –>
<frame name="upd" src="update.htm" scrolling="auto" > <!– Llamo a la subventana horizontal superior izquierda con el nombre "upd" y muestro el documento update.htm –>

<frame name="menu" src="menu1.htm" scrolling="auto" > <!– Llamo a la subventana horizontal inferior izquierda con el nombre "menu" y muestro el documento menu1.htm –>

</frameset> <!– Cierro la definicion de las subventanas horizontales de la ventana de la izquierda –>

<frame name = "home" src = "home.htm" scrolling = "auto" > <!– Llamo a la subventana vertical derecha con el nombre "home" y muestro el documento home.htm –>

<noframes>
<!– Indico las órdenes para aquellos navegadores que no soporten Frames –>
<body>
SU navegador NO MUESTRA FRAMES. Pulse <a href="home.htm"> AQUI </a> para ir a la página sin Frames. </body>
</noframes>

</frameset>
<!– Cierro la definición de las subventanas verticales –>

</html>
 
Al usar Frames, nos encontramos con un problema. Cuando queramos mostrar una página Web debemos indicarle al navegador en que subventana queremos que se muestre. Por defecto se mostrará en la ventana donde se encuentre el enlace. Para poder escoger la subventana de destino del Hiperenlace se añade un nuevo parámetro a la etiqueta <a href="enlace.html"> </a> . Este parámetro se llama target y puede tener los siguientes valores :

target ="nombre_ventana" Muestra el Hiperenlace en la ventana cuyo nombre se indica.

target="_blank" Abre una nueva copia del navegador y muestra el Hiperenlace en ella. (Si usamos Netscape esto provoca que tengamos funcionando dos copias del programa).

target="_self" Se muestra el Hiperenlace en la subventana activa.

target="_parent" El Hyperenlace se muestra en el <frameset> definido anteriormente al actual. Si no hay ningún <frameset> anterior se muestra a pantalla completa suprimiendo todas las subventanas de la pantalla.
target="_top" Suprime todas las subventanas de la pantalla y muestra el Hiperenlace a pantalla completa.

<a href= "http://www.microsoft.com/" target="_blank"> Muestra la pagina de Microsoft en una nueva copia del visor
<a href="http://www.ibm.com/" target="home"> Muestra la pagina de Ibm en la subventanna llamada "home"
<a href="http://www.yahoo.com/" target="_top"> Muestra la pagina del buscador Yahoo a pantalla completa
Capítulo anterior:
Sonidos

Capítulo siguiente:
Scripts

Leave A Comment?