Qué son los frames (1)
3,423 views
10 slides
Dec 11, 2012
Slide 1 of 10
1
2
3
4
5
6
7
8
9
10
About This Presentation
Frames ytipos de frames en html
Slide Content
QUÉ SON LOS FRAMES
Un frame es una especie de marco o recuadro independiente en el que podemos cargar una página web.
Podemos así dividir una página web en diferentes partes o ventanas, cada una con sus propios bordes y
barras de desplazamiento, pudiendo cargar dentro de cada una de ellas una página externa independiente.
Los frames permiten una flexibilidad de presentación extraordinaria, y para contenidos muy complejos,
de difícil estructura por los medios convencionales del HTML, son casi insustituibles. De nuevo se
presenta la duda de para qué visualizador es preferible programar nuestro WWW.
Los frames son parametrizables en cuanto a tamaño y número de áreas, si éstas se pueden redimensionar
por el usuario o son fijas, si tienen o no barras de scrolling, se pueden anidar, relacionar sus contenidos
UN FRAME BÁSICO.
En general, todas las páginas que contengan definiciones de frames:
<HTML>
<HEAD><TITLE>Mititulo></TITLE></HEAD>
<FRAMESET>
<NOFRAMES>
<BODY>
Su visualizador no soporta frames. Pulse
<A HREF="indice.htm">aqui</A> para volver.
</BODY>
</NOFRAMES>
<FRAME SRC="pagina1.htm" >
<FRAME SRC="pagina2.htm" >
</FRAMESET>
</HTML>
No aparece el elemento <BODY> en su posición habitual, sino dentro de un elemento especial que se
activa sólo cuando el visualizador no soporta los frames: NOFRAMES. Si no declaras el área
NOFRAMES y el visualizador no soporta este efecto, no se verá nada. Obviamente, los visualizadores
que sí soportan frames ignorarán el contenido del área NOFRAMES.
Es posible definir cualquier combinación de áreas verticales y horizontales. La clave está en combinar
adecuadamente los anidamientos del elemento <FRAMESET> con sus atributos COLS o ROWS según
interese. Como puedes ver, el más importante es el primer <FRAMESET>, ya que es el que define cómo
va a ser "troceada" la página inicialmente, si en porciones verticales u horizontales, y sobre esta base se
deberán definir todos los demás anidamientos.
Antes de nada, repasemos rápidamente las marcas HTML de gestión de marcos.
N2.0 Documento
Marco
<FRAMESET></FRAMESET> (en lugar
de<BODY>)
N2.0 altura en filas <FRAMESET
ROWS=,,,></FRAMESET>
(píxel ó %)
N2.0 altura en filas <FRAMESET
ROWS=*></FRAMESET>
(* = tamaño
relativo)
N2.0 anchura en
columnas
<FRAMESET
COLS=,,,></FRAMESET>
(píxel ó %)
N2.0 anchura en <FRAMESET (* = tamaño
Un frame es una especie de marco o recuadro independiente en el que podemos cargar una página web.
Podemos así dividir una página web en diferentes partes o ventanas, cada una con sus propios bordes y
barras de desplazamiento, pudiendo cargar dentro de cada una de ellas una página externa independiente.
Los frames permiten una flexibilidad de presentación extraordinaria, y para contenidos muy complejos,
de difícil estructura por los medios convencionales del HTML, son casi insustituibles. De nuevo se
presenta la duda de para qué visualizador es preferible programar nuestro WWW.
Los frames son parametrizables en cuanto a tamaño y número de áreas, si éstas se pueden redimensionar
por el usuario o son fijas, si tienen o no barras de scrolling, se pueden anidar, relacionar sus contenidos
UN FRAME BÁSICO.
En general, todas las páginas que contengan definiciones de frames:
<HTML>
<HEAD><TITLE>Mititulo></TITLE></HEAD>
<FRAMESET>
<NOFRAMES>
<BODY>
Su visualizador no soporta frames. Pulse
<A HREF="indice.htm">aqui</A> para volver.
</BODY>
</NOFRAMES>
<FRAME SRC="pagina1.htm" >
<FRAME SRC="pagina2.htm" >
</FRAMESET>
</HTML>
No aparece el elemento <BODY> en su posición habitual, sino dentro de un elemento especial que se
activa sólo cuando el visualizador no soporta los frames: NOFRAMES. Si no declaras el área
NOFRAMES y el visualizador no soporta este efecto, no se verá nada. Obviamente, los visualizadores
que sí soportan frames ignorarán el contenido del área NOFRAMES.
Es posible definir cualquier combinación de áreas verticales y horizontales. La clave está en combinar
adecuadamente los anidamientos del elemento <FRAMESET> con sus atributos COLS o ROWS según
interese. Como puedes ver, el más importante es el primer <FRAMESET>, ya que es el que define cómo
va a ser "troceada" la página inicialmente, si en porciones verticales u horizontales, y sobre esta base se
deberán definir todos los demás anidamientos.
Antes de nada, repasemos rápidamente las marcas HTML de gestión de marcos.
N2.0 Documento
Marco
<FRAMESET></FRAMESET> (en lugar
de<BODY>)
N2.0 altura en filas <FRAMESET
ROWS=,,,></FRAMESET>
(píxel ó %)
N2.0 altura en filas <FRAMESET
ROWS=*></FRAMESET>
(* = tamaño
relativo)
N2.0 anchura en
columnas
<FRAMESET
COLS=,,,></FRAMESET>
(píxel ó %)
N2.0 anchura en <FRAMESET (* = tamaño
columnas COLS=*></FRAMESET> relativo)
N3.0b anchura del
borde
<FRAMESET BORDER=?>
N3.0b borde <FRAMESET
FRAMEBORDER="yes|no">
N3.0b color del borde <FRAMESET
BORDERCOLOR="#$$$$$$">
N2.0 Definición del
marco
<FRAME> (contenido de
cada uno de
los recuadros)
N2.0 documento que
se debe mostrar
<FRAME SRC="URL">
N2.0 denominazione
del frame
<FRAME
NAME="***"|_blank|_self|
_parent|_top>
N2.0 anchura de los
márgenes
<FRAME MARGINWIDTH=?> (margen
izquierdo y
derecho)
N2.0 altura de los
márgenes
<FRAME MARGINHEIGHT=?> (margen
superior e
inferior)
N2.0 barra de
desplazamiento
o no
<FRAME
SCROLLING="YES|NO|AUTO">
N2.0 no
redimensionable
<FRAME NORESIZE>
N3.0b borde <FRAME
FRAMEBORDER="yes|no">
N3.0b color del borde <FRAME
BORDERCOLOR="#$$$$$$">
N2.0 contenido en
ausencia de
marco
<NOFRAMES></NOFRAMES> (para
navegadores
antiguos)
N3.0b anchura del
borde
<FRAMESET BORDER=?>
N3.0b borde <FRAMESET
FRAMEBORDER="yes|no">
N3.0b color del borde <FRAMESET
BORDERCOLOR="#$$$$$$">
N2.0 Definición del
marco
<FRAME> (contenido de
cada uno de
los recuadros)
N2.0 documento que
se debe mostrar
<FRAME SRC="URL">
N2.0 denominazione
del frame
<FRAME
NAME="***"|_blank|_self|
_parent|_top>
N2.0 anchura de los
márgenes
<FRAME MARGINWIDTH=?> (margen
izquierdo y
derecho)
N2.0 altura de los
márgenes
<FRAME MARGINHEIGHT=?> (margen
superior e
inferior)
N2.0 barra de
desplazamiento
o no
<FRAME
SCROLLING="YES|NO|AUTO">
N2.0 no
redimensionable
<FRAME NORESIZE>
N3.0b borde <FRAME
FRAMEBORDER="yes|no">
N3.0b color del borde <FRAME
BORDERCOLOR="#$$$$$$">
N2.0 contenido en
ausencia de
marco
<NOFRAMES></NOFRAMES> (para
navegadores
antiguos)
Para crear dos marcos verticales basta sustituir el término "rows" (filas) con el término "cols"
(columnas):
<FRAMESET cols="100,*">
<frame name="sx" src="sx.htm">
<frame name="central" src="central.htm">
</FRAMESET>
Es posible adoptar simultáneamente una división tanto en columnas como en filas, de manera que
se cree una ventana dividida en varios marcos. Veamos cómo debemos intervenir en el código
HTML del documento según el número y la posición 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>
(columnas):
<FRAMESET cols="100,*">
<frame name="sx" src="sx.htm">
<frame name="central" src="central.htm">
</FRAMESET>
Es posible adoptar simultáneamente una división tanto en columnas como en filas, de manera que
se cree una ventana dividida en varios marcos. Veamos cómo debemos intervenir en el código
HTML del documento según el número y la posición 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="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>
<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>
FRAMEBORDER se utiliza como atributo de FRAMESET y establece si serán visibles los bordes del
frame o no. Puede tener dos valores: YES (por defecto) y NO.
Si escribes:
<FRAMESET FRAMEBORDER=NO COLS=30%,30%,30%>
<FRAME SRC="a.htm">
<FRAME SRC="b.htm">
<FRAME SRC="c.htm">
</FRAMESET>
Se obtiene un frame de tres columnas sin barras de separación entre ellas.
BORDER
* BORDER= " n " , con n = nº entero = nº de píxeles. En el caso de que se haya establecido
FRAMEBORDER=" 1 " o no se haya especificado, este atributo nos permite definir el grosor del borde
ROWS
ROWS=" x,y,z,..." , para definir el nº de filas o marcos horizontales que va a tener la ventana, y donde
las variables x,y,z... van a definir el tamaño de cada marco horizontal, pudiendo definirse en píxeles o en
porcentaje. También podemos fijar el tamaño de una fila o filas y en este caso el tamaño de esta será todo
aquel que quede después de definir mediante píxeles o porcentajes las demás filas. Las combinaciones
posibles son muchas, siendo su estructura análoga a las vistas para COLS.
Si definimos tamaños en píxeles, estos serán absolutos, En este caso si todas las frames se indican de este
modo, los valores se ajustarán para que las frames ocupen la totalidad del espacio de la ventana del
navegador, no guardando siempre la proporción con la que se definen las frames.
BORDERCOLOR se utiliza como atributo de FRAME y establece el color de los bordes visibles.
Evidentemente, para que funcione, se tendrá que haber establecido FRAMEBORDER=yes
Si escribes:
<FRAMESET COLS=30%,30%,30%>
<FRAME BORDERCOLOR="red" SRC="a.htm">
<FRAME BORDERCOLOR="blue"SRC="b.htm">
<FRAME SRC="c.htm">
</FRAMESET>
Se obtiene un frame de tres columnas con la primera barra de separación roja y la segunda azul.
Salir de una pantalla con frames
Para salir de una pantalla compuesta de frames es necesario definir algun link. En efecto, si estamos en
una pantalla con, por ejemplo, dos frames, cualquier link invocado desde cualquiera de ellos, hace que la
página llamada aparezca en ese mismo frame. Para volver a una pantalla "normal" sin frames, se puede
escribir un link con la sintaxis siguiente:
<A HREF="indice.htm" TARGET="_parent">Ver índice sin marcos </A>
frame o no. Puede tener dos valores: YES (por defecto) y NO.
Si escribes:
<FRAMESET FRAMEBORDER=NO COLS=30%,30%,30%>
<FRAME SRC="a.htm">
<FRAME SRC="b.htm">
<FRAME SRC="c.htm">
</FRAMESET>
Se obtiene un frame de tres columnas sin barras de separación entre ellas.
BORDER
* BORDER= " n " , con n = nº entero = nº de píxeles. En el caso de que se haya establecido
FRAMEBORDER=" 1 " o no se haya especificado, este atributo nos permite definir el grosor del borde
ROWS
ROWS=" x,y,z,..." , para definir el nº de filas o marcos horizontales que va a tener la ventana, y donde
las variables x,y,z... van a definir el tamaño de cada marco horizontal, pudiendo definirse en píxeles o en
porcentaje. También podemos fijar el tamaño de una fila o filas y en este caso el tamaño de esta será todo
aquel que quede después de definir mediante píxeles o porcentajes las demás filas. Las combinaciones
posibles son muchas, siendo su estructura análoga a las vistas para COLS.
Si definimos tamaños en píxeles, estos serán absolutos, En este caso si todas las frames se indican de este
modo, los valores se ajustarán para que las frames ocupen la totalidad del espacio de la ventana del
navegador, no guardando siempre la proporción con la que se definen las frames.
BORDERCOLOR se utiliza como atributo de FRAME y establece el color de los bordes visibles.
Evidentemente, para que funcione, se tendrá que haber establecido FRAMEBORDER=yes
Si escribes:
<FRAMESET COLS=30%,30%,30%>
<FRAME BORDERCOLOR="red" SRC="a.htm">
<FRAME BORDERCOLOR="blue"SRC="b.htm">
<FRAME SRC="c.htm">
</FRAMESET>
Se obtiene un frame de tres columnas con la primera barra de separación roja y la segunda azul.
Salir de una pantalla con frames
Para salir de una pantalla compuesta de frames es necesario definir algun link. En efecto, si estamos en
una pantalla con, por ejemplo, dos frames, cualquier link invocado desde cualquiera de ellos, hace que la
página llamada aparezca en ese mismo frame. Para volver a una pantalla "normal" sin frames, se puede
escribir un link con la sintaxis siguiente:
<A HREF="indice.htm" TARGET="_parent">Ver índice sin marcos </A>
El destino "_parent" indica que presente la página llamada por el link en el navegador que se esta
ejecutando, sin marcos y sin abrir nuevas ocurrencias del navegador.
Existen otros valores predeterminados para el atributo TARGET: _blank que abre una nueva ventana
del navegador, _self que llama el destino del enlace a la misma ventana en que se está (valor por
defecto), y _top que funciona igual que _parent.
Enlaces
Los enlaces dentro de los marcos (es decir, cómo cargar una página en un marco diverso de aquél en que
se encuentra el enlace) hay que hacer referencia al nombre que hemos asignado a los diferentes marcos en
la fase de realización. Este nombre no se refiere al archivo sino a lo que aparece escrito después de
"name=". Por ejemplo, en este caso:
<framename="alto" src="top.htm">
El nombre asignado es "alto".
Tomemos la siguiente página 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 página en el marco "central".
Si el enlace presente en el marco "SX", fuera simplemente:
<A HREF="nuova.htm">Hazclic</A>
La página se cargaría dentro del mismo marco (es decir, "SX") porque sin adecuadas marcas específicas
el navegador interpreta que debe cargar la nueva página en el mismo marco en que está presente el enlace.
El código exacto sería:
<A HREF="nuova.htm" TARGET="central">Haz clic</A>
ejecutando, sin marcos y sin abrir nuevas ocurrencias del navegador.
Existen otros valores predeterminados para el atributo TARGET: _blank que abre una nueva ventana
del navegador, _self que llama el destino del enlace a la misma ventana en que se está (valor por
defecto), y _top que funciona igual que _parent.
Enlaces
Los enlaces dentro de los marcos (es decir, cómo cargar una página en un marco diverso de aquél en que
se encuentra el enlace) hay que hacer referencia al nombre que hemos asignado a los diferentes marcos en
la fase de realización. Este nombre no se refiere al archivo sino a lo que aparece escrito después de
"name=". Por ejemplo, en este caso:
<framename="alto" src="top.htm">
El nombre asignado es "alto".
Tomemos la siguiente página 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 página en el marco "central".
Si el enlace presente en el marco "SX", fuera simplemente:
<A HREF="nuova.htm">Hazclic</A>
La página se cargaría dentro del mismo marco (es decir, "SX") porque sin adecuadas marcas específicas
el navegador interpreta que debe cargar la nueva página en el mismo marco en que está presente el enlace.
El código exacto sería:
<A HREF="nuova.htm" TARGET="central">Haz clic</A>
Otro uso fundamental de la marca <TARGET> es el de llamar un enlace a otra página, la cual se
visualizará ocupando la pantalla completa y eliminando todos los marcos preexistentes.
Aquí está el código:
<A HREF="nuova.htm" TARGET="_parent">Haz clic</A>
Es posible también que queramos cargar, con un solo clic, dos o más marcos (naturalmente, la ventana
tiene que estar dividida por lo menos en tres marcos).
Tomemos una página 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>
visualizará ocupando la pantalla completa y eliminando todos los marcos preexistentes.
Aquí está el código:
<A HREF="nuova.htm" TARGET="_parent">Haz clic</A>
Es posible también que queramos cargar, con un solo clic, dos o más marcos (naturalmente, la ventana
tiene que estar dividida por lo menos en tres marcos).
Tomemos una página 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 simultáneamente dos páginas
diversas en los dos marcos de la derecha: "alto" y "central". Para ello, es necesario insertar algunas líneas
con código JavaScript. La primera parte del código va insertada entre <HEAD></HEAD>:
<HEAD>
<script language="JavaScript">
<!-- Hiding
functionloadtwo(page2, page3) {
parent.alto2.location.href=page2;
parent.centrale3.location.href=page3;
}
// -->
</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>
diversas en los dos marcos de la derecha: "alto" y "central". Para ello, es necesario insertar algunas líneas
con código JavaScript. La primera parte del código va insertada entre <HEAD></HEAD>:
<HEAD>
<script language="JavaScript">
<!-- Hiding
functionloadtwo(page2, page3) {
parent.alto2.location.href=page2;
parent.centrale3.location.href=page3;
}
// -->
</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>
Atributos:
NAME Como ya habrás supuesto, es el nombre del frame incrustado. Puede omitirse si no es
necesario.
SRC Nombre de la página que se mostrará en el frame.
WIDTH Número de pixels que tendrá el frame de ancho. También puede indicarse en tanto por
ciento respecto al ancho total de la ventana, como se hace en los frames convencionales.
HEIGHT Número de pixels que tendrá el frame de alto. También puede indicarse en tanto por
ciento respecto al alto total de la ventana.
FRAMEBORDER Indica si se debe mostrar el borde del frame. 1 = si (por defecto) 0 = no.
MARGINWIDTH Indica el número de pixels que tendrá el ancho de los márgenes interiores
izquierdo y derecho del frame respecto a su contenido.
MARGINHEIGHT Indica el número de pixels que tendrá el ancho de los márgenes interiores
superior e inferior del frame respecto a su contenido.
SCROLLING Indica si hay que mostrar barras de scroll dentro del frame incrustado. Sus valores
pueden ser: Yes, No y Auto (por defecto).
NAME Como ya habrás supuesto, es el nombre del frame incrustado. Puede omitirse si no es
necesario.
SRC Nombre de la página que se mostrará en el frame.
WIDTH Número de pixels que tendrá el frame de ancho. También puede indicarse en tanto por
ciento respecto al ancho total de la ventana, como se hace en los frames convencionales.
HEIGHT Número de pixels que tendrá el frame de alto. También puede indicarse en tanto por
ciento respecto al alto total de la ventana.
FRAMEBORDER Indica si se debe mostrar el borde del frame. 1 = si (por defecto) 0 = no.
MARGINWIDTH Indica el número de pixels que tendrá el ancho de los márgenes interiores
izquierdo y derecho del frame respecto a su contenido.
MARGINHEIGHT Indica el número de pixels que tendrá el ancho de los márgenes interiores
superior e inferior del frame respecto a su contenido.
SCROLLING Indica si hay que mostrar barras de scroll dentro del frame incrustado. Sus valores
pueden ser: Yes, No y Auto (por defecto).
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 3,423
- Slides 10
- Age 4738 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
30 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
32 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
30 views
14
Fertility awareness methods for women in the society
Isaiah47
29 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
26 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
28 views