ANTES DE QUE EMPECEIS A LEER aconsejo que primero termineis el curso paso a paso para que esto no os lie después
Este metodo es desde su nacimiento (netscape navigator lo invento) tan odiado como amado, bueno tal vez mas odiado que amado...
pero al final asta los que lo odian han reconocido que ofrece algunas ventajas al mezclarlos con otros metodos.
La funcion de los frames es rara ya que lo que hacen es dividir la ventana del navegador en tantas partes como quiera el que crea la web, me explico, imaginad que una pagina esta compuesta por una cabecera que ocupa toda la parte superior de la web, y el resto de la página, desde ahora cuerpo, al pulsar sobre cualquier enlace de esa página se cargaria otra diferente toda la página se renobaría; en cambio si la cabecera fuera
un frame y el cuerpo otro, al pulsar en un enlace se renobaria solamente ese frame, claro esta que lo que tenemos que hacer es indicar que se cargue en la que nosotros queramos, por ejemplo que los enlaces de la cabecera lleven al cuerpo y se cargen alli, las ventajas que nos ofrece este método son obvias, los tiempos de carga se reducen porque la cabecera solo se cargaria una vez, pero tambien tiene duros defectos que comentaremos mas adelante. Es dificil imaginarse algo totalmente nuevo asi que vamos a crear un ejemplo simple para que veais como funciona, no importa que no entendais nada esta aqui todo explicado.
Primero crearemos unos cuantos nuevos archivo llamado hoja1.html con el siguiente código (cuando hagais vista previa no habra nada raro hasta que tengais los 5 archivos que os ire diciendo, paciencia):
Después creamos otro llamado hoja2.html
Otro llamado hoja3.html
Otro mas (solo quedan 2) llamado cabeza.html
y por último creamos un nuevo archivo llamado index.html
Guarden abran el index y navegen por esa miniweb. ¿Ven lo que pasa al dar en un enlace de la cabeza? si solo se carga la parte de abajo de la página, la cabeza sigue tal cual (si pusieramos música en la cabeza tendriamos musica initerumpida ya que esa nunca se vuelve a cargar), podria haber hecho que arriba se viera youtube y abajo comocreartuweb.com, es muy fácil manejar los frames una vez los entendemos por eso esta explicacion.
Comencemos con el cursillo.
Lo primero para hace una página con frames (marcos o ventanas) es crear el documento de definición de frames desde ahora DDF, este se hace en el index, no debe ser el index, por el nombre habran imaginado que en este "documento" se definira el tamaño, posición, ... de los frames, y asi es.
La primera y mas importante característica del DDF es que no tiene body, en cambio se usa <frameset>(instrucción de inicio)</frameset>(instruccion de fin)la estructura de este documento sería:
Atributos de frameset (mas adelante los que falten)
Podemos dividir las web en filas y en columnas
ejemplo:
Os preguntais que es el asterisco (*) ¿no?
fue un invento de netscape que mas tarde adoptaron otros navegadores, equivale a lo que sobre, es decir hemos indicado que el frame de mas arriba mide el 20% de la altura de la ventana, el segundo 20px sin importar el tamaño, y el tercero el resto de la ventana.
Muchos aconsejan dar siempre almenos un valor de * (si hubieran 2 se repartirian el espacio sobrante en la ventana, tambien es posible poner un numero delante de el asterisco para que se multiplique por ese numero)Pero tambien es buena idea que tenga medidas fijas, yo personalmente lo prefiero.
Para dividir en colomnas es exactamente igual pero cambiaremos rows por cols.
Al hacer vista previa no vemos nada, esto se debe a que no hemos creado el frame, emos dicho cuanto medirá cada uno pero no esta creado aún, vamos con ello:
Para crear los frames se usa la etiqueta <frame>(no tiene instrucción de cierre, se usa una vez por cada división)
Algunos atributos importantes:
name: sirve para dar un nombre al frame y mas tarde poder referirnos a él.
src: sirve para indicar la ruta de la página que se mostrará al principio (en el ejemplo de antes al hacer vista previa se veia la cabeza y la hoja 1)
El problema esta en que al pulsar en un enlace de esos se carga una página nueva, para eso secreo un atributo que seguramente os suena: target: a target como valor se le puede dar el nombre de una ventana o de un frame, entonces sabra que debe cargarse en esa ventana o frame. Si tenemos la ventana dividida en dos, y queremos que los enlaces de la parte de arriba se cargen abajo, en <a ...>añadimos target y el nombre del frame, pero claro, habria que hacerlo enlace por enlace, y para evitar este trabajo podemos combinar target con base, "objetivo base".
este seria el código iria en el <head>...</head
<base target="">lo que hace es dar todos los enlaces de la pagina que lo tenga el atrivuto target="el nomble" como predeterminado, y asi nos ahorramos ponerlo en cada enlace.
Pero solo afectará a el documento en el que esté y al frame en el que aparezca, ya que es un documento diferente e independiente de el resto aunque se muestren en la misma ventana.
si queremos que haya un enlace diferente solo tenemos que darle a ese otro de los valores de target que tan bien explica Jorgens en el curso paso a paso, pero los repetiré:
IMPORTANTE
Para que el archivo se cargue en otra ventana en blanco:
Para que el archivo se abra en el frame o ventana madre de la actual(la que contiene el enlace):
IMPORTANTE
Para que el archivo se muestre en el mismo frame o ventana que contiene el enlace:
Para que sustituya a la actual:
Todos estan muy claros menos "_parent":
Un frame puede contener a otro, el archivo se abrirá en el que contiene al del enlace.
Anidar frames
si pusieramos cols ademas de rows en un mismo frameset lo que ariamos serian celdas.
para anidar un frame con otro:
por ejemplo tenemos un DDF que divide la pagina en 2 frames con rows
uno arriba y otro abajo, como en el ejemplo pero ahora queremos poner otro que sea una especie de menu dentro del inferior a la izquierda, es decir, dividir el frame inferior en dos, tendriamos que dejar el código de la siguiente forma:
Un <frameset> dentro de otro, copiad y pegad y a ver que a pasado
fijaos que el frameset de dentro está dividido en cols y no en rows como el exterior, podeis dividir la página en cualquier numero de frames pero no se aconsejan mas de 4.
Atributos, deben ponerse en cada frame ya que pocos navegadores los acepta en frameset(ahora pondré todos los que conozco)
-scrolling: nos ayuda a controlar la aparición o no de las barras de desplazamiento de el frame, puede tomar los siguientes valores:
scrolling="auto": se ponen automaticamente si son necesarias, aveces se ponen aunque no hagan falta demasiado.
scrolling="yes": siempre aparecen
scrolling="no": nunca aparecen, cuidado con usar esta, si son innecesarias, no dudes en usarlas, pero si el contenido del frame es mas grande que este y la usas ese contenido no podrá verse.
-noresize: esto impide que los border de los frames puedan ser movidos, es muy aconsejable usarla para mantener cierto orden (no toma ningún valor)
-marginheight="cantidad": ajusta el margen superior que debe respetar el contenido del frame.
-marginwidth="cantidad": ajusta los margenes laterales que deben respetar el contenido del frame
<noframe>...</noframe>: debe estar dentro de frameset ademas de todo el resto de frames, lo que este entre ellas sera ignorado por los navegadores que soportan frames pero lo veran los que no, entre ellas si puedes incluir la etiqueta <body> para hacer una pagina alternativa que no te lo aconsejo porque el codigo crecerá y te acabará liando, yo aconsejo poner un enlace a una version de la pagina echa con divs u otra tecnologia, si no la hay pon enlaces a paginas donde puedan descargar gratis y seguro un navegador que si los soporte.
bordercolor: para elegir el color de los bordes de un frame
frameborder: te permite elegir si hay borde o no; 0 es no y 1 es si en algunos navegadores ademas puedes poner yes y no pero no entodos como de la otra forma, ya dije que debes poner estos atributos en cada frame porque en frameset no todos los navegadores lo aceptan, asi que ten cuidado de quitar el borde a uno y al otro no porque se quedará un borde dela mitad de tamaño (yo uso esto aveces).
border: de momento es solo en algunos navegadores pero se incluyen los mas importantes; controlan el tamaño del border (no lo he usado mucho pero he oido que solo es a partir del 5, ojo no digo que sea cierto)
Netscape inventolos frames pero hoy dia hay otros tipos de frames que trataré en otro curso.
Espero que les haya interesado
Saludos y hasta el proximo curso :wink:.
Este metodo es desde su nacimiento (netscape navigator lo invento) tan odiado como amado, bueno tal vez mas odiado que amado...
pero al final asta los que lo odian han reconocido que ofrece algunas ventajas al mezclarlos con otros metodos.
La funcion de los frames es rara ya que lo que hacen es dividir la ventana del navegador en tantas partes como quiera el que crea la web, me explico, imaginad que una pagina esta compuesta por una cabecera que ocupa toda la parte superior de la web, y el resto de la página, desde ahora cuerpo, al pulsar sobre cualquier enlace de esa página se cargaria otra diferente toda la página se renobaría; en cambio si la cabecera fuera
un frame y el cuerpo otro, al pulsar en un enlace se renobaria solamente ese frame, claro esta que lo que tenemos que hacer es indicar que se cargue en la que nosotros queramos, por ejemplo que los enlaces de la cabecera lleven al cuerpo y se cargen alli, las ventajas que nos ofrece este método son obvias, los tiempos de carga se reducen porque la cabecera solo se cargaria una vez, pero tambien tiene duros defectos que comentaremos mas adelante. Es dificil imaginarse algo totalmente nuevo asi que vamos a crear un ejemplo simple para que veais como funciona, no importa que no entendais nada esta aqui todo explicado.
Primero crearemos unos cuantos nuevos archivo llamado hoja1.html con el siguiente código (cuando hagais vista previa no habra nada raro hasta que tengais los 5 archivos que os ire diciendo, paciencia):
<html>
<head>
</head>
<body bgcolor="#0000ff">
<h2>Página 1 del FRAME "principal"</h2>
<ul>[*][url="hoja2.html"]Hoja 2[/url][*][url="hoja3.html"]Hoja 3[/url][/list]
</body>
</html>Después creamos otro llamado hoja2.html
<html>
<head>
</head>
<body bgcolor="#ff0000">
<h2>Página 2 del FRAME "principal"</h2>
<ul>[*][url="hoja1.html"]Hoja 1[/url][*][url="hoja3.html"]Hoja 3[/url][/list]
</body>
</html>Otro llamado hoja3.html
<html>
<head>
</head>
<body bgcolor="#00ff00">
<h2>Página 1 del FRAME "principal"</h2>
<ul>[*][url="hoja1.html"]Hoja 1[/url][*][url="hoja2.html"]Hoja 2[/url][/list]
</body>
</html>Otro mas (solo quedan 2) llamado cabeza.html
<html>
<head>
<base target="principal">
</head>
<body bgcolor="#000000" text="#ffffff">
<h1>Esto debe ocupar el FRAME superior o "cabeza"</h1>
[url="hoja1.html"]Hoja 1[/url][url="hoja2.html"]Hoja 2[/url][url="hoja3.html"]Hoja 3[/url]</p>
</body>
</html>y por último creamos un nuevo archivo llamado index.html
<html>
<head>
<base target="principal">
</head>
<body bgcolor="#000000" text="#ffffff">
<h1>Esto debe ocupar el FRAME superior o "cabeza"</h1>
[url="hoja1.html"]Hoja 1[/url][url="hoja2.html"]Hoja 2[/url][url="hoja3.html"]Hoja 3[/url]</p>
</body>
</html>Guarden abran el index y navegen por esa miniweb. ¿Ven lo que pasa al dar en un enlace de la cabeza? si solo se carga la parte de abajo de la página, la cabeza sigue tal cual (si pusieramos música en la cabeza tendriamos musica initerumpida ya que esa nunca se vuelve a cargar), podria haber hecho que arriba se viera youtube y abajo comocreartuweb.com, es muy fácil manejar los frames una vez los entendemos por eso esta explicacion.
Comencemos con el cursillo.
Lo primero para hace una página con frames (marcos o ventanas) es crear el documento de definición de frames desde ahora DDF, este se hace en el index, no debe ser el index, por el nombre habran imaginado que en este "documento" se definira el tamaño, posición, ... de los frames, y asi es.
La primera y mas importante característica del DDF es que no tiene body, en cambio se usa <frameset>(instrucción de inicio)</frameset>(instruccion de fin)la estructura de este documento sería:
<html>
<head>
<title>Documento de Definición de FRAMES (DDF)</titile>
</head>
<frameset>
...codigos de los frames...
</frameset>
</html>Atributos de frameset (mas adelante los que falten)
Podemos dividir las web en filas y en columnas
rows="valor,valor,valor,..."ejemplo:
<frameset rows="20%,20px,*">
...codigos de los frames...
</frameset>Os preguntais que es el asterisco (*) ¿no?
fue un invento de netscape que mas tarde adoptaron otros navegadores, equivale a lo que sobre, es decir hemos indicado que el frame de mas arriba mide el 20% de la altura de la ventana, el segundo 20px sin importar el tamaño, y el tercero el resto de la ventana.
Muchos aconsejan dar siempre almenos un valor de * (si hubieran 2 se repartirian el espacio sobrante en la ventana, tambien es posible poner un numero delante de el asterisco para que se multiplique por ese numero)Pero tambien es buena idea que tenga medidas fijas, yo personalmente lo prefiero.
Para dividir en colomnas es exactamente igual pero cambiaremos rows por cols.
Al hacer vista previa no vemos nada, esto se debe a que no hemos creado el frame, emos dicho cuanto medirá cada uno pero no esta creado aún, vamos con ello:
Para crear los frames se usa la etiqueta <frame>(no tiene instrucción de cierre, se usa una vez por cada división)
Algunos atributos importantes:
name: sirve para dar un nombre al frame y mas tarde poder referirnos a él.
src: sirve para indicar la ruta de la página que se mostrará al principio (en el ejemplo de antes al hacer vista previa se veia la cabeza y la hoja 1)
El problema esta en que al pulsar en un enlace de esos se carga una página nueva, para eso secreo un atributo que seguramente os suena: target: a target como valor se le puede dar el nombre de una ventana o de un frame, entonces sabra que debe cargarse en esa ventana o frame. Si tenemos la ventana dividida en dos, y queremos que los enlaces de la parte de arriba se cargen abajo, en <a ...>añadimos target y el nombre del frame, pero claro, habria que hacerlo enlace por enlace, y para evitar este trabajo podemos combinar target con base, "objetivo base".
este seria el código iria en el <head>...</head
<head>
<base target="nombre del frame objetivo, lo que pusimos en name en la etiqueta frame">
<head><base target="">lo que hace es dar todos los enlaces de la pagina que lo tenga el atrivuto target="el nomble" como predeterminado, y asi nos ahorramos ponerlo en cada enlace.
Pero solo afectará a el documento en el que esté y al frame en el que aparezca, ya que es un documento diferente e independiente de el resto aunque se muestren en la misma ventana.
si queremos que haya un enlace diferente solo tenemos que darle a ese otro de los valores de target que tan bien explica Jorgens en el curso paso a paso, pero los repetiré:
IMPORTANTE
Para que el archivo se cargue en otra ventana en blanco:
<a src="ruta del archivo" target="_blank">...</a>Para que el archivo se abra en el frame o ventana madre de la actual(la que contiene el enlace):
<a src="ruta del archivo" target="_parent">...</a>IMPORTANTE
Para que el archivo se muestre en el mismo frame o ventana que contiene el enlace:
<a src="ruta del archivo" target="_self">...</a>Para que sustituya a la actual:
<a src="ruta del archivo" target="_top">...</a>Todos estan muy claros menos "_parent":
Un frame puede contener a otro, el archivo se abrirá en el que contiene al del enlace.
Anidar frames
si pusieramos cols ademas de rows en un mismo frameset lo que ariamos serian celdas.
para anidar un frame con otro:
por ejemplo tenemos un DDF que divide la pagina en 2 frames con rows
uno arriba y otro abajo, como en el ejemplo pero ahora queremos poner otro que sea una especie de menu dentro del inferior a la izquierda, es decir, dividir el frame inferior en dos, tendriamos que dejar el código de la siguiente forma:
...........
<html>
<head></head>
<frameset rows="20%,*">
<frame src="ruta" name="cabeza">
<frameset cols="16%,*">
<frame src="ruta" name="izq">
<frame src="ruta" name="principal">
</frameset>
</frameset>
</head>
...........Un <frameset> dentro de otro, copiad y pegad y a ver que a pasado
fijaos que el frameset de dentro está dividido en cols y no en rows como el exterior, podeis dividir la página en cualquier numero de frames pero no se aconsejan mas de 4.
Atributos, deben ponerse en cada frame ya que pocos navegadores los acepta en frameset(ahora pondré todos los que conozco)
-scrolling: nos ayuda a controlar la aparición o no de las barras de desplazamiento de el frame, puede tomar los siguientes valores:
scrolling="auto": se ponen automaticamente si son necesarias, aveces se ponen aunque no hagan falta demasiado.
scrolling="yes": siempre aparecen
scrolling="no": nunca aparecen, cuidado con usar esta, si son innecesarias, no dudes en usarlas, pero si el contenido del frame es mas grande que este y la usas ese contenido no podrá verse.
-noresize: esto impide que los border de los frames puedan ser movidos, es muy aconsejable usarla para mantener cierto orden (no toma ningún valor)
-marginheight="cantidad": ajusta el margen superior que debe respetar el contenido del frame.
-marginwidth="cantidad": ajusta los margenes laterales que deben respetar el contenido del frame
<noframe>...</noframe>: debe estar dentro de frameset ademas de todo el resto de frames, lo que este entre ellas sera ignorado por los navegadores que soportan frames pero lo veran los que no, entre ellas si puedes incluir la etiqueta <body> para hacer una pagina alternativa que no te lo aconsejo porque el codigo crecerá y te acabará liando, yo aconsejo poner un enlace a una version de la pagina echa con divs u otra tecnologia, si no la hay pon enlaces a paginas donde puedan descargar gratis y seguro un navegador que si los soporte.
bordercolor: para elegir el color de los bordes de un frame
frameborder: te permite elegir si hay borde o no; 0 es no y 1 es si en algunos navegadores ademas puedes poner yes y no pero no entodos como de la otra forma, ya dije que debes poner estos atributos en cada frame porque en frameset no todos los navegadores lo aceptan, asi que ten cuidado de quitar el borde a uno y al otro no porque se quedará un borde dela mitad de tamaño (yo uso esto aveces).
border: de momento es solo en algunos navegadores pero se incluyen los mas importantes; controlan el tamaño del border (no lo he usado mucho pero he oido que solo es a partir del 5, ojo no digo que sea cierto)
Netscape inventolos frames pero hoy dia hay otros tipos de frames que trataré en otro curso.
Espero que les haya interesado
Saludos y hasta el proximo curso :wink:.