Frame

<FRAME> gestionar marcos (frame)
Amados u odiados, tiles o intiles, excelentes o psimos, los marcos son

instrumentos que forman ya parte habitual del web y que los navegadores
gestionan hoy da a la perfeccin. Los detractores de los marcos afirman la
inutilidad de subdividir ulteriormente las pginas web, las cuales, en ltima
instancia, pueden resultar poco legibles. Otros, como yo, consideran que los
marcos pueden llegar a ser muy tiles ya que se evita cargar las mismas
imgenes y se mantienen ordenados el contenido y la estructura del sitio.
Naturalmente, abusar de los marcos puede producir como resultado psimas
impostaciones grficas, obteniendo un efecto contrario al previsto.
Un punto en contra de los marcos es, ciertamente, su incompatibilidad con
los programas de navegacin grfica destinados a invidentes, los cuales se
bloquean impidiendo la lectura de las pginas.
Una buena solucin es crear una versin con marco y una versin sin marco
(como esta misma gua ha hecho).
Cmo se crean los marcos?
Antes de nada, repasemos rpidamente las marcas HTML de gestin de
marcos.
N2.0 Documento
Marco
<FRAMESET></FRAMESET (en lugar de

>
<BODY>)
N2.0 altura en filas <FRAMESET

(pxel %)
ROWS=,,,></FRAMESET>
N2.0 altura en filas <FRAMESET
ROWS=*></FRAMESET>
(* = tamao
relativo)
N2.0 anchura en
columnas
<FRAMESET
(pxel %)
COLS=,,,></FRAMESET>
N2.0 anchura en
columnas
<FRAMESET
COLS=*></FRAMESET>
N3.0 anchura del

b
borde
<FRAMESET BORDER=?>
N3.0 borde
b
<FRAMESET
FRAMEBORDER="yes|
no">
N3.0 color del

b
borde
<FRAMESET
BORDERCOLOR="#$$$$$
$">
N2.0 Definicin del <FRAME>

marco
N2.0 documento
que se debe
mostrar
(* = tamao
relativo)
(contenido
de cada uno
de los
recuadros)
<FRAME SRC="URL">
N2.0 denominazion <FRAME NAME="***"|

e del frame _blank|_self|
_parent|_top>
N2.0 anchura de <FRAME MARGINWIDTH=? (margen
los mrgenes >
izquierdo y
derecho)
N2.0 altura de los <FRAME

MARGINHEIGHT=?>
mrgenes
(margen
superior e
inferior)
<FRAME
N2.0 barra de
desplazamien SCROLLING="YES|NO|
AUTO">
to o no
<FRAME NORESIZE>
N2.0 no
redimensiona
ble
<FRAME
N3.0 borde
FRAMEBORDER="yes|
b
no">
N3.0 color del
b
borde
<FRAME
BORDERCOLOR="#$$$$$
$">
N2.0 contenido en <NOFRAMES></NOFRAMES (para

ausencia de >
navegador
marco
es
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">
</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,*">
<frameset cols="150,*">
<frame name="sx" src="sx.htm.htm">
</frameset>
Haz clic aqu para ver el resultado

de este marco.
</frameset>
</frameset>

de este marco.
</frameset>
<frameset rows="20%,60%,20%,*">
<frame name="bajo" src="basso.htm">
</frameset>
Haz clic aqu para ver el resultado </frameset>

de este marco.
<frameset cols="75%,25%">

de este marco.
<frameset rows="20%,80%*">
</frameset>
<frame name="dx" src="dx.htm">
</frameset>
<frameset cols="20%,80%*">
</frameset> </frameset>
Haz clic aqu para ver el resultado </frameset>

de este marco.
Haz clic aqu para ver el

resultado de este marco.
</frameset> <frameset rows="24%,76%">
<frame name="top" src="top2.htm"> <frame
name="dx" src="dx.htm">
</frameset> </frameset>

de este marco.
<frameset rows="80%,20%">
</frameset>
</frameset>
<frameset rows="20%,60%,20%">
</frameset>

de este marco.
<frameset cols="20%,60%,20%">
</frameset>

de este marco.
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:
el nombre asignado es "alto".
Tomemos la siguiente pgina subdividida en marcos:
<frameset cols="20%,60%,20%">
</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:
<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>
La estructuracin con Capas o Divs?

El darle forma a una web se le suele llamar estructurarla, o enmaquetarla. Es darle una
estructura concreta para colocar luego el men aqu, el contenido all, etc. Para
estructurar una web podemos usar simples saltos de lnea, o avanzar un poco ms y usar
tablas, que dividen el espacio en celdas, celdas en las que podemos colocar ms
comodamente los elementos que queramos. Tambin se puede estructurar una web
partindola en frames o marcos.
Pero el mtodo ms profesional, lmpio y cmodo es sin duda el uso de Capas o Divs
(es lo mismo decir capa que div).
Qu es una Capa o un DIV?

No es ms que un elemento rectangular dentro del cual podemos incluir lo que
queramos, palabras, prrafos, enlaces, imgenes, varias de estas cosas a la vez o incluso
otras capas o tambin tablas. Es un simple hueco. Lo bueno que tiene es que luego,
desde la Hoja de Estilos, podemos darle a todo su contenido propiedades como color de
fondo, tamao de letra, dimensiones de ese recuadro, margenes, bordes, etc, etc.
Al principio quizs te de un poco de pnico todo esto, pero te prometo que no es nada
dificil, ya vers. Fjate, esto de abajo es el cdigo Html de un Div sencillo.
<div>Bienvenidos a mi Web</div>
A que no te ha dolido? je je. Como puedes ver, igual que ocurra con los elementos que
vimos atrs, empieza con una etiqueta y termina con otra de cierre, igual pero con la
contrabarra delante. Entre ambas etiquetas se coloca su contenido.
Escribe esa lnea de cdigo en el archivo plantilla.html, por supuesto, entre <body> y
</body> pues se trata de algo que debe "verse". Ahora haz vista previa "Preview" y
observa qu aparece. Nada asombroso, ya lo se.
Dando estilos a un Div

Ese Div no tiene ningn atractivo, claro. Para adornarlo lo que hacemos es definir un
tipo de estilo en la Hoja de Estilos y aplicarselo a ese DIV.
Para empezar a jugar, abre el archivo estilo-general.css que se abrir vacio, pon esto
dentro y luego gurdalo:
#cabecera {background-color:pink;}
Nota: Cada vez que hagas un cambio en la Hoja de Estilos, tienes que guardarla para
poder ver sus efectos en la vista previa de la pgina web.
Clases de Estilo y Estilos nicos
Existen dos formas de definir estilos. Una es crear una clase de estilo, que es un tipo de
estilo que podemos asignar luego a uno o a varios elementos. Por otro lado estn los
estilos nicos, que solo se deben aplicar a un elemento por pgina web.
Las clases de estilo, que se pueden usar sobre varios elementos (varios prrafos, varias
celdas, enlaces, etc) se definen en la Hoja de Estilo como vimos al crear la clase de
estilo ".centrado", es decir, con un punto delante del nombre y luego colocando las
propiedades entre los corchetes. Luego, en el cdigo Html se asigna esa clase de estilo a
un elemento colocando dentro de su etiqueta de inicio esto,
class="nombredelaclasedeestilo".
En cambio los estilos nicos se definen en la Hoja de Estilo con una almohadilla como
esta "#" (se escribe pulsando a la vez la tecla Alt Gr, que est a la derecha del espacio y
la tecla del nmero 3 de tu teclado) en lugar de con un punto, y en el cdigo Html se
asigna este tipo de estilo nico escribiendo dentro de la etiqueta del elemento esto otro
id="nombredelestilounico" en lugar de con el class, que es para clases (estilos que se
pueden asignar a varios elementos).
Si te he hecho la picha un lio, leelo despacito. Es importante entenderlo.
Como puedes ver, el estilo de antes #cabecera {background-color: pink } es un Estilo
nico y por lo tanto se asigna este tipo a un solo elemento, y se hace en el Html as:
<div id="cabecera">Bienvenidos a mi Web</div>
Abre ahora el archivo plantilla.html y pon esa lnea de cdigo. Ha de quedar as:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="cabecera">Bienvenidos a mi Web</div>
</body>
</html>
Si has guardado antes la Hoja de Estilo y haces vista previa en la plantilla, vers como
ahora la frase "Bienvenido a mi Web" aparece diferente. Con un fondo rosa (pink). Es la
magia del CSS aplicado a los Divs, pero no te creas que esto queda as, vers lo
asombroso que es todo esto ms adelante.
Pgina completa con frames
El primer paso ser crear el documento de definicin de frames. Abrimos nuestro editor
y creamos un nuevo archivo. En este caso lo llamaremos index.htm y escribimos en l
el siguiente cdigo:
<HTML>
<HEAD>
<TITLE>
Primera pgina con frames
</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
<FRAME SRC="izquierd.htm">
<FRAME SRC="derecha.htm">
</FRAMESET>
</HTML>
Con esto tendremos una pgina que dividir la ventana del navegador en una columna
izquierda y otra derecha que ocupan el 20% y el 80% del ancho respectivamente. El
contenido de cada una de estas columnas estar en los archivos izquierda.htm y
derecha.htm. El siguiente paso ser la creacin de estos archivos. Volvemos a abrir un
archivo nuevo en nuestro editor y le llamamos izquierd.htm. En este archivo podemos
escribir todo el cdigo HTML que queramos siempre teniendo en cuenta sus limitadas
dimensiones. Para empezar podemos escribir:
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="#99FF99">
<H1>
Frame izquierdo
</H1>
Este frame podra servir de ndice:
<UL>
<LI>Tema 1
<LI>Tema 2
<LI>Tema 3
</UL>
</BODY>
</HTML>
A continuacin abrimos otro archivo nuevo y le llamamos derecha.htm. El cdigo a

incluir en este tercer documento HTML ser:
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>
Este es el frame Derecho
</H1>
<P>
En este frame podra ir el contenido principal del Web.
</P>
</BODY>
</HTML>
El ltimo paso ser visualizar el documento de definicin de frames, index.htm, con el

navegador que prefiramos. Por supuesto se podra ver cada uno de los documentos
HTML por separado, y de hecho suele ser muy til hacerlo mientras escribamos el
cdigo para ir comprobando que lo estamos haciendo bien, sin embargo una vez hemos
terminado los documentos derecha.htm y izquierd.htm slo tienen significado como
contenido de frames, y no como pginas Web individuales. Por esta razn el nico
archivo que debe ser visto desde fuera debe ser el documento de definicin de frames
(en este caso llamado index.htm). Una vez abierto index.htm con nuestro navegador
deberamos ver una pgina similar a la que observamos en la figura 8.13.
Figura 8.13. Ejemplo completo de una pgina con frames formado por un frame
izquierdo pequeo que puede servir de ndice y otro derecho con el contenido
principal.
La creacin de pginas con frames es algo ms compleja que la creacin de las pginas
que hemos hecho hasta ahora, y por ello es comn cometer errores, sobre todo al
principio. Si al intentar ver una pgina con frames no observamos el resultado obtenido
es recomendable comprobar los siguientes detalles:
1. Al igual que con el resto de pginas debemos asegurarnos de haber encerrado
todo el cdigo entre las instrucciones < HTML> y </HTML> y de que hemos
guardado todos los archivos con terminacin .htm o .html.
2. Comprobar que los nombres de los archivos coinciden con los nombres
indicados como valor del atributo SRC. En algunos casos es necesario que los
nombres coincidan en maysculas y minsculas. Este ser el caso si vamos a
publicar nuestras pginas en un servidor UNIX (la mayora lo son).
3. Es importante que nos aseguremos de no haber usado la etiqueta BODY en el
archivo index.htm. Si lo hemos hecho debemos quitarla para que funcione
nuestro ejemplo.
4. Si hemos solucionado todos los problemas anteriores y la pgina sigue sin
visualizarse correctamente probablemente estaremos usando un navegador que
no soporte frames.

Frame

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Frame

Caricato da

Copyright:

Formati disponibili

<FRAME> gestionar marcos (frame)

Amados u odiados, tiles o intiles, excelentes o psimos, los marcos son

<FRAMESET></FRAMESET (en lugar de

N2.0 altura en filas <FRAMESET

N3.0 anchura del

N3.0 color del

N2.0 Definicin del <FRAME>

N2.0 denominazion <FRAME NAME="***"|

N2.0 altura de los <FRAME

N2.0 contenido en <NOFRAMES></NOFRAMES (para

en los dos marcos creados. Es necesario dar un nombre al marco

Haz clic aqu para ver el resultado de este marco.

Los antiguos navegadores no soportaban los marcos por lo cual, dada la

Es posible adoptar simultneamente una divisin tanto en columnas como

el nmero y la posicin de los marcos que queremos crear.

Haz clic aqu para ver el resultado

Haz clic aqu para ver el resultado

Haz clic aqu para ver el resultado </frameset>

Haz clic aqu para ver el resultado

Haz clic aqu para ver el resultado </frameset>

Haz clic aqu para ver el

Haz clic aqu para ver el resultado

Haz clic aqu para ver el resultado

Haz clic aqu para ver el resultado

Para eliminar el borde gris de los marcos, se debe insertar el siguiente

Para impedir que los marcos sean redimensionados por el visitante:

Pongamos que de un enlace presente en "SX" tengamos que cargar otra

otra pgina, la cual se visualizar ocupando la pantalla completa y

Lo que queremos es insertar un solo enlace en el marco de "SX" que cargue

La estructuracin con Capas o Divs?

Qu es una Capa o un DIV?

Dando estilos a un Div

Clases de Estilo y Estilos nicos

A continuacin abrimos otro archivo nuevo y le llamamos derecha.htm. El cdigo a

El ltimo paso ser visualizar el documento de definicin de frames, index.htm, con el

Potrebbero piacerti anche