Frame Set

FRAMESET
Este elemento sustiye al elemento <BODY> y permite dividir una zona en subzonas, bien verticalmente, bien horizontalmente. Si no hay ninguna zona todava, las divisiones se aplican a la zona inicial formada por el conjunto de la ventana del browser. Esta marca posee dos atributos: ROWS: Se utiliza para dividir la zona en subzonas horizontales. La sintaxis es:
ROWS="altura_zona_1, altura_zona_2,...,altura_zona_n"
ROWS es una lista de valores enteros separados por comas. El nmero de elementos de la lista corresponde al nmero de subzonas horizontales a crear. Cada uno de los valores de la lista puede darse segn uno de los tres formatos siguientes, donde n es un entero:

n: indica la altura de la subzona en pxels. n%: indica la altura de la subzona expresada en porcentajes del tamao de la zona madre. n*: n es opcional. El carater * indica al browser que debe dar a la zona todo el espacio an disponible.
COLS: Se utiliza para dividir la zona en subzonas verticales. La sintaxis es igual que en el atributo ROWS.
ROWS="altura_zona_1, altura_zona_2,...,altura_zona_n"
Ejemplo: A continuacin se muestra dos maneras idnticas de dividir una zona en tres. Las dos subzonas superiores son de tamao idntico y la ltima es el doble de las anteriores. <FRAMESET ROWS="25%,25%,50%">...<FRAMESET> <FRAMESET ROWS="*,*,2*">...<FRAMESET> Inicio
FRAME
Es la marca utilizada para caracterizar las subzonas definidas mediante la marca <FRAMESET>. Esta caracterizacin se realiza mediante los siguientes atributos: SCR: Indica el URL del documento que debe mostrarse en esa zona. Si el atributo no se indica, entonces la zona estar vaca.
SCR="url"
NAME: Se utiliza para nombrar la zona a fin de que pueda convertirse en el destino de cualquier enlace de hipertexto. La sintaxis del atributo es:
NAME="nombre_de_la_zona"
MARGINWIDTH: Se utiliza para precisar el nmero de pxels entre los bordes izquierdo y derecho de la zona y el documento HTML a visualizar, en definitiva marca el margen izquierdo. La sintaxis es :
MARGINWIDTH="n"
MARGINHEIGHT: Se utiliza para precisar el nmero de pixels entre los bodes superior e inferior de la zona y el documento HTML a visualizar. La sintaxis es:
MARGINHEIGHT="n"
SCROLLING: Indica si la zona debe poseer una barra de desplazamiento (SCROLLING="yes"), si no debe contar con ella (SCROLLING="no") o si esta eleccin se deja en manos del browser (SCROLLING="auto"). La sintaxis es:
SCROLLING="yes/no/auto"
NORESIZE: Indica al browser que no debe permitir que el usuario modifique el tamao de la zona. Cuando este atributo no se precisa es posible deformar una zona desplazando su frontera mediante el ratn. Inicio
NOFRAMES
Esta marca indica a todo browser incapaz de gestionar los frames el texto que debe presentar al usuario en lugar de los paneles. Dicho texto ir entre las marcas <NOFRAMES> y </NOFRAMES>. En realidad dichos browsers ignorarn las marcas FRAMESET y NOFRAMES pero casualmente no el texto comprendido entre stas ltimas. Por el contrario un browser capaz de gestionar paneles interpretar las marcas <NOFRAMES> y </NOFRAMES> y sabr que debe ignorar el texto comprendido entre ellas. Inicio
El atributo TARGET
Este nuevo atributo afecta a las marcas que caracterizan los enlaces de hipertexto, en particular a las marcas <A> y <FORM>. TARGET permite precisar el nombre de la zona que debe recibir el documento correspondiente al enlace. Por ejemplo:
<A HREF="/dossier.html" TARGET="zonadossier"> Ver el dossier </A>
El atributo TARGET existe para indicar al browser que, en respuesta a un clic, debe mostrar el documento dossier.html en el panel cuyo nombre es "zonadossier". De igual modo, el formulario definido por:
<FORM ACTION="cgi_bin/test" ... </FORM> TARGET="zonascript" METHOD="POST">
Mostrar sus resultados en el panel cuyo nombre es "zonascript". El atributo TARGET puede tener tres valores diferentes: Un valor que corresponde al nombre de un panel existente.El documento asociado al enlace de hipertexto se muestra entonces en el panel en cuestin. Un valor que no corresponde a ninguno de los paneles existentes. El browser crea entonces una nueva ventana y muestra el documento. Esta nueva ventana se considera como un panel con el atributo TARGET del origen de su creacin. TARGET puede tomar uno de los siguientes cuatro valores:
_blank, indica al browser que debe crear una nueva ventana con el fin de mostrar el documento. La nueva ventana es un panel que no tiene nombre y no puede ser por tanto el destino de otro enlace de hipertexto. _self, indica que el documento se cargar en la misma zona donde se encuentra el enlace de hipertexto. Se trata del valor predeterminado cuando no se indica el atributo TARGET. _top, indica al browser que suprima todos los paneles existentes y visualice el documento de modo normal. _parent, indica al browser que visualice el documento ocupando toda la superficie de la zona en la que se ha visualizado el documento que contiene el enlace. Esta nocin solo tiene sentido cuando los diferentes niveles de paneles provienen del anidamiento de documentos y no del anidamiento de marcas <FRAMESET>.
A continuacin se expondrn algunos ejemplos para que queden claros todos los conceptos aprendidos. Inicio
Ejemplos:
A continuacin se detallan un conjunto de ejemplos que crean frames de diversos tipos: 1. Sintaxis general 2. Areas verticales. (COLS) 3. Areas horizontales. (ROWS) 4.
Areas verticales y horizontales combinadas. (COLS y ROWS) 5. Mrgenes forzados. (MARGINWIDTH y MARGINHEIGHT) 6. Referencias cruzadas
Un frame bsico. Sintaxis general

En general, todas las pginas que contengan un frame debern ser ms o menos as:
<HTML> <HEAD><TITLE> Mi titulo ></TITLE></HEAD> <FRAMESET COLS=*,*> <NOFRAMES> <BODY> Su visualizador no soporta frames. Pulse <A HREF="indice.htm">aqui</A> para volver. </BODY> </NOFRAMES> <FRAME SRC="doc_a.htm" > <FRAME SRC="doc_b.htm" > </FRAMESET> </HTML> Ejemplo real
Un frame de 3 reas verticales (COLS)

Se vera as: Y se escribira; as: A B C
<FRAMESET COLS=30%,20%,50%> <FRAME SRC="doc_a.htm"> <FRAME SRC="doc_b.htm"> <FRAME SRC="doc_c.htm"> </FRAMESET> Ejemplo real
Un frame de 3 reas horizontales (ROWS)

Se vera as: A B Y se escribira as:
<FRAMESET ROWS=25%,25%,50%> <FRAME SRC="doc_a.htm">
<FRAME SRC="doc_b.htm"> <FRAME SRC="doc_c.htm"> </FRAMESET> Ejemplo real
Un frame combinado de un rea vertical y dos horizontales. El frame A, no podr ser redimensionado (NORESIZE).
Se vera as: Y se escribira as:
<FRAMESET COLS=20%,*> <FRAME SRC="doc_a.htm" NORESIZE> <FRAMESET ROWS=40%,*> <FRAME SRC="doc_b.htm"> <FRAME SRC="doc_c.htm"> </FRAMESET> </FRAMESET> Ejemplo real
B C
Un frame con dos reas verticales. Una normal, la otra con mrgenes forzados para el texto (MARGINWIDTH MARGINHEIGHT)
Se vera as: Y se escribira as: AA AA
<FRAMESET COLS=50%,50%> <FRAME SRC="doc_a.htm"> <FRAME SRC="doc_a.htm" MARGINWIDTH=50 MARGINHEIGHT=50> </FRAMESET> Ejemplo real
AAAA
Un frame con referencias cruzadas (NAME TARGET)

Se vera as: Y se escribira as: A B
<FRAMESET COLS=50%,50%> <FRAME SRC="doc_aa.htm"> <FRAME SRC="doc_bb.htm" NAME="VENTANA">
</FRAMESET> Ejemplo real
Esto de los cruces es un poco complicado... fjate en el contenido de cada pgina que entra en juego. Cuando actives Ejemplo real el fichero llamado es ej_cruz.htm. Prubalo. Contenido <A HREF="doc_cc.htm" doc_aa.htm TARGET="VENTANA"> <A HREF="doc_cc.htm"> doc_bb.htm Esto es "VENTANA" <A HREF="doc_bb.htm" doc_cc.htm TARGET="VENTANA"> <A HREF="doc_aa.htm"> <FRAMESET> <FRAME SRC="doc_aa.htm"> ej_cruz.htm <FRAME SRC="doc_bb.htm" NAME="VENTANA"> </FRAMESET> Inicio
Cmo se crean los marcos? Antes de nada, repasemos rpidamente las marcas HTML de gestin de marcos. N2.0 Documento Marco N2.0 altura en filas N2.0 altura en filas N2.0 anchura en columnas N2.0 anchura en columnas N3.0b anchura del borde N3.0b borde <FRAMESET></FRAMESET> <FRAMESET ROWS=,,,></FRAMESET> <FRAMESET ROWS=*></FRAMESET> <FRAMESET COLS=,,,></FRAMESET> <FRAMESET COLS=*></FRAMESET> <FRAMESET BORDER=?> <FRAMESET FRAMEBORDER="yes|no"> (en lugar de <BODY>) (pxel %) (* = tamao relativo) (pxel %) (* = tamao relativo)
Fichero
Accin Pone DOC_CC en el frame derecho Trae DOC_CC No hace nada Pone DOC_BB en el frame derecho porque se llama "VENTANA" Trae DOC_AA Pone DOC_AA en el frame izquierdo. Pone DOC_BB en el frame derecho y le da como nombre "VENTANA" -
N3.0b color del borde <FRAMESET BORDERCOLOR="#$$$$$$"> N2.0 Definicin del marco <FRAME> (contenido de cada uno de los recuadros)
N2.0 documento que <FRAME SRC="URL"> se debe mostrar N2.0 denominazione <FRAME NAME="***"|_blank|_self| del frame _parent|_top> N2.0 anchura de los mrgenes N2.0 altura de los mrgenes <FRAME MARGINWIDTH=?> (margen izquierdo y derecho) (margen superior e inferior)
<FRAME MARGINHEIGHT=?>
<FRAME N2.0 barra de desplazamiento SCROLLING="YES|NO|AUTO"> o no <FRAME NORESIZE> N2.0 no redimensionable <FRAME N3.0b borde FRAMEBORDER="yes|no"> N3.0b color del borde <FRAME BORDERCOLOR="#$$$$$$"> N2.0 contenido en ausencia de marco <NOFRAMES></NOFRAMES> (para navegadores antiguos)
Para crear una pgina dividida en marcos, es necesario crear varios archivos HTML referidos a un archivo principal, que es el que permite su gestin. As pues, antes de nada hace falta impostar este archivo "fuente", y, posteriormente, los dems archivos que componen el marco. Imaginemos que debemos crear una ventana dividida en marcos como la de la figura, con un marco en la parte superior fijo (en el cual cargaremos el archivo "top.htm", que deberemos crear aparte) y un marco central (en el cual cargaremos el archivo "central.htm", que deberemos, asimismo, crear aparte) que cambiar segn cual sea la pgina que deba mostrar. Como hemos sealado antes, la gestin de estos dos marcos correr a cargo de un tercer archivo, el cual deber invocarlos asignndoles una parte de la pgina. He aqu el cdigo de esta pgina:
<FRAMESET rows="80,*"> <frame name="alto" src="top.htm"> <frame name="central" src="central.htm"> </FRAMESET>
Como podemos ver, el cdigo del marco est encerrado entre las marcas <FRAMESET></FRAMESET> que se comportan como las marcas usuales <HTML></HTML>. El tamao de los marcos, o mejor dicho, el espacio que cada uno de ellos debe ocupar en la pgina, queda establecido mediante la marca rows="80,*, que significa que el marco alto (que en este caso es una fila, "row") debe tener 80 pxel, mientras que "*" significa que todo el resto debe asignarse al marco central. Asimismo, habramos podido expresar el tamao de los marcos en tantos por ciento de esta manera:
<FRAMESET rows="20%,*">
Una vez impostados los dos parmetros <FRAMESET></FRAMESET>, dentro de ellos se definen los nombres y los archivos que debern invocarse en los dos marcos creados. Es necesario dar un nombre al marco (name="alto") e indicar el archivo HTML que deber cargarse dentro del marco (SRC="top.htm"). Deben, por tanto, crearse previamente dos archivos de nombre "top.htm" y "central.htm". Fjate bien en lo importante que es la colocacin dentro del cdigo para una correcta interpretacin por parte del navegador. As, si se invirtiera el orden de esta manera: <FRAMESET rows="80,*"> <frame name="central" src="central.htm"> <frame name="alto" src="top.htm"> </FRAMESET> el navegador invertira el orden de asignacin y cargara el archivo "central.htm" en el marco superior, y el archivo "top.htm" en el marco central. Haz clic aqu para ver el resultado de este marco.
Para crear dos marcos verticales basta sustituir el trmino "rows" (filas) con el trmino "cols" (columnas):
<FRAMESET cols="100,*"> <frame name="sx" src="sx.htm"> <frame name="central" src="central.htm"> </FRAMESET>
Haz clic aqu para ver el resultado de este marco.
Los antiguos navegadores no soportaban los marcos por lo cual, dada la posibilidad de que se use uno de estos viejos programas para visualizar las pginas, es til insertar un cdigo que advierta de la presencia de marcos y de la imposibilidad de que el navegador los muestre. ste es el cdigo que debes incluir: <noframe> <HTML> <body> Atencin. Tu navegador no soporta la opcin de los marcos. Para ver estas pginas es necesario descargar un navegador que soporte dicha opcin. Te aconsejo Netscape 3.0 o superior. </body> </html> </noframe>
Es posible adoptar simultneamente una divisin tanto en columnas como en filas, de manera que se cree una ventana dividida en varios marcos. Veamos cmo debemos intervenir en el cdigo HTML del documento segn el nmero y la posicin de los marcos que queremos crear.
<frameset rows="100,*"> <frame name="alto" src="top.htm"> <frameset cols="150,*"> <frame name="sx" src="sx.htm.htm"> <frame name="central" src="central.htm"> </frameset>
</frameset>
<frameset cols="120,*"> <frame name="sx" src="sx.htm"> <frameset rows="100,*"> <frame name="alto" src="top.htm"> <frame name="central" src="central.htm"> </frameset>
</frameset>
<frameset cols="120,*"> <frame name="sx" src="sx.htm"> <frameset rows="20%,60%,20%,*"> <frame name="alto" src="top.htm"> <frame name="central" src="central.htm"> <frame name="bajo" src="basso.htm"> </frameset>
</frameset>
<frameset cols="75%,25%"> <frameset rows="20%,80%*"> <frame name="alto" src="top.htm"> <frame name="central" src="central.htm"> </frameset> <frame name="dx" src="dx.htm"> </frameset>
<frameset cols="75%,25%"> <frameset rows="20%,80%*"> <frame name="alto" src="top.htm"> <frameset cols="20%,80%*"> <frame name="sx" src="sx.htm"> <frame name="central" src="central.htm"> </frameset> </frameset> <frame name="dx" src="dx.htm"> </frameset>
<frameset cols="75%,25%"> <frameset rows="20%,80%*"> <frame name="alto" src="top.htm"> <frame name="central" src="central.htm"> </frameset> <frameset rows="24%,76%"> <frame name="top" src="top2.htm"> <frame name="dx" src="dx.htm"> </frameset> </frameset>
<frameset cols="25%,75%"> <frameset rows="80%,20%"> <frame name="alto" src="top.htm"> <frame name="bajo" src="basso.htm"> </frameset> <frame name="central" src="central.htm"> </frameset>
<frameset rows="20%,60%,20%"> <frame name="alto" src="top.htm"> <frame name="central" src="central.htm"> <frame name="bajo" src="basso.htm"> </frameset>
<frameset cols="20%,60%,20%"> <frame name="sx" src="sx.htm"> <frame name="central" src="central.htm"> <frame name="dx" src="dx.htm"> </frameset>
Para eliminar el borde gris de los marcos, se debe insertar el siguiente cdigo: <frameset cols="20%,60%,20%" border=0> Para impedir que los marcos sean redimensionados por el visitante: <frame name="alto" src="top.htm" noresize> Para eliminar siempre las barras de desplazamiento (scrollbars): <frame name="alto" src="top.htm" scrolling="no"> Para mostrarlas siempre: <frame name="alto" src="top.htm" scrolling="yes"> Para mostrarlas slo cuando son necesarias: <frame name="alto" src="top.htm" scrolling="auto"> Para regular la distancia del contenido del marco al margen superior (marginheight) y a los mrgenes izquierdo y derecho (marginwidth): <frame name="alto" src="top.htm" marginheight=2 marginwidth=5>
Por lo que se refiere a los enlaces dentro de los marcos (es decir, cmo cargar una pgina en un marco diverso de aqul en que se encuentra el enlace) hay que hacer referencia al nombre que hemos asignado a los diferentes marcos en la fase de realizacin. Este nombre no se refiere al archivo sino a lo que aparece escrito despus de "name=". Por ejemplo, en este caso: <frame name="alto" src="top.htm"> el nombre asignado es "alto". Tomemos la siguiente pgina subdividida en marcos:
<frameset cols="20%,60%,20%"> <frame name="sx" src="sx.htm"> <frame name="central" src="central.htm"> </frameset>
Pongamos que de un enlace presente en "SX" tengamos que cargar otra pgina en el marco "central". Si el enlace presente en el marco "SX", fuera simplemente: <A HREF="nuova.htm">Haz clic</A> la pgina se cargara dentro del mismo marco (es decir, "SX") porque sin adecuadas marcas especficas el navegador interpreta que debe cargar la nueva pgina en el mismo marco en que est presente el enlace. El cdigo exacto sera: <A HREF="nuova.htm" TARGET="central">Haz clic</A> Haz clic aqu para probar. Otro uso fundamental de la marca <TARGET> es el de llamar un enlace a otra pgina, la cual se visualizar ocupando la pantalla completa y eliminando todos los marcos preexistentes. Aqu est el cdigo: <A HREF="nuova.htm" TARGET="_parent">Haz clic</A> Haz clic aqu para probar. Si insertas el cdigo: <base target="_top"> a la cabeza del documento HTML todos los enlaces presentes en las pginas eliminarn los marcos existentes, sin necesidad de ir enlace por enlace.
Es posible tambin que queramos cargar, con un solo clic, dos o ms marcos (naturalmente, la ventana tiene que estar dividida por lo menos en tres marcos). Tomemos una pgina subdividida como en la figura:
<frameset cols="120,*"> <frame name="sx" src="sx.htm"> <frameset rows="100,*"> <frame name="alto2" src="top.htm"> <frame name="centrale3" src="central.htm"> </frameset> </frameset>
Lo que queremos es insertar un solo enlace en el marco de "SX" que cargue simultneamente dos pginas diversas en los dos marcos de la derecha: "alto" y "central". Para ello, es necesario insertar algunas lneas con cdigo JavaScript. La primera parte del cdigo va insertada entre <HEAD></HEAD>: <HEAD> <script language="JavaScript">  </script> </HEAD> mientras que la segunda parte deber quedar comprendida entre <BODY></BODY>, donde se quiere insertar el enlace: <BODY> <FORM NAME="buttons"> <INPUT TYPE="button" VALUE="Haz clic" onClick="loadtwo('nuovo1.htm','nuovo2.htm')"> </FORM> </BODY>
Haz clic aqu para probar.

Frame Set

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Frame Set

Diunggah oleh

Hak Cipta:

Format Tersedia

FRAMESET

Un frame bsico. Sintaxis general

Un frame de 3 reas verticales (COLS)

Un frame de 3 reas horizontales (ROWS)

<FRAME SRC="doc_b.htm"> <FRAME SRC="doc_c.htm"> </FRAMESET> Ejemplo real

Un frame con referencias cruzadas (NAME TARGET)

</FRAMESET> Ejemplo real

<FRAMESET rows="80,*"> <frame name="alto" src="top.htm"> <frame name="central" src="central.htm"> </FRAMESET>

Haz clic aqu para ver el resultado de este marco.

Haz clic aqu para ver el resultado de este marco.

Haz clic aqu para ver el resultado de este marco.

Haz clic aqu para ver el resultado de este marco.

Haz clic aqu para ver el resultado de este marco.

Haz clic aqu para ver el resultado de este marco.

Haz clic aqu para ver el resultado de este marco.

Haz clic aqu para ver el resultado de este marco.

Haz clic aqu para ver el resultado de este marco.

Haz clic aqu para ver el resultado de este marco.

<frameset cols="20%,60%,20%"> <frame name="sx" src="sx.htm"> <frame name="central" src="central.htm"> </frameset>

Haz clic aqu para probar.

Anda mungkin juga menyukai