Frames o marcos
Los frames o cuadros son divisiones que se le pueden dar a una pgina Web. En cada uno de los frames se pueden cargar una pgina diferente que actan independientemente una de otra. El uso ms comn del empleo de los frames es en la aplicacin de mens. En el cual se divide la pantalla en dos frames, uno estrecho (en la parte superior o al lado izquierdo) y otro mayor. Dentro del frame estrecho, se carga la pgina con un men conteniendo los enlaces a otras pginas, al pulsar uno de estos enlaces, se carga la pgina dentro del frame Mayor. De manera que el men siempre estar visible en la parte superior o izquierda, y los contenidos se estarn cambiando dentro del frame principal. Ejemplo: Men Horizontal Ejemplo: Men Vertical Para crear frames se utilizan las directivas cerradas <FRAMESET>..... </FRAMESET> Esta directiva indica inicio y final de los frames o cuadros. Dentro de ella se colocan todos los frames que se van a emplear. La directiva FRAMSET se coloca en lugar de BODY. Se coloca una directiva <FRAME> por cada cuadro que se quiera tener. La directiva <FRAME> indica el archivo que va a contener ese cuadro o frame. Ejemplo: <FRAME SRC="[Link]"> La directiva FRAMESET, necesita los parmetros ROWS COLS, que indican si la pantalla se va a dividir en filas o columnas. Ejemplos: Crear dos marcos o frames horizontales <html> <head> <title>Frame 1</title> </head> <frameset ROWS="50%,50%"> <frame src="[Link]"> <frame src="[Link]"> </frameset> </html> Resultado :
Crear dos marcos o frames Verticales <html> <head> <title>Frame 2</title> </head> <frameset COLS="50%,50%"> <frame src="[Link]"> <frame src="[Link]"> </frameset> </html> Reslultado:
Crear dos marcos o frames Horizontales de 20 % la primera FILA y 80% la segunda FILA. <html> <head> <title>frame 3</title> </head> <frameset rows="20%,80%"> <frame src="[Link]"> <frame src="[Link] "> </frameset> </html> Reslultado
Crear dos marcos o frames Verticales de 20 % la primera columna y 80% la segunda <html> <head> <title>Frame 4</title> </head> <frameset cols="20%,80%"> <frame src="[Link]"> <frame src="[Link]"> </frameset> </html> Resultado
Crear dos marcos o frames horizontales fijando el tamao por medio de pixels En el siguiente ejemplo se da un tamao de 100 pixels al frame superior y el resto de la altura para el rea inferior. <html> <head> <title>frame 5</title> </head> <frameset ROWS="100,*"> <frame src="[Link]"> <frame src="[Link]"> </frameset> </html> Reslultado
Crear 6 marcos o frames (en 2 filas y 3 columnas) todos de igual tamao <html> <head> <title>Frame 6</title> </head> <frameset ROWS="*,*" cols="*,*,*"> <frame src="[Link]"> <frame src="[Link]"> <frame src="[Link]"> <frame src="[Link]"> <frame src="[Link]"> <frame src="[Link]"> </frameset> </html> Reslultado
Tarea: Crear 4 marcos o frames de la siguiente forma: Pag 2_1 Pag 1 Pag 2_2 Pag 3
Frames o cuadros interactivos
Para que puedas controlar y decidir en qu frame se carga una nueva pgina es necesario dar un nombre al FRAME, y referir a l, la pgina a cargar. El atributo NAME, es el que permite darle un nombre a cada frame, el cual es referido por el atributo TARGET="nombre del frame". El atributo TARGET, se coloca dentro de un enlace, el cual al ser activado el enlace carga la pgina en el frame referido por TARGET en lugar de cargarlo en el propio frame. Ejemplos: Frames o cuadros verticales interactivos Para crear frames interactivos, es necesario nombrar el frame con el atributo NAME. Este atributo se coloca dentro del frame. <frameset cols="20%,80%"> <frame src="[Link]"> <frame src="[Link]" NAME="principal"> </frameset>
Resultado:
Ntese que el segundo frame se llama principal. Para que funcione el frame interactivo es necesario que los enlaces estn relacionados con el frame, por medio del atributo TARGET, el cual se coloca dentro de los enlaces. Para que funcione este ejemplo es necesario que el programa [Link], contenga el atributo TARGET en cada uno de los enlaces. A continuacin damos la codificacin de dicho programa. Extracto del archivo [Link] <a HREF="[Link]" TARGET="principal">Introduccin</a> <a HREF="[Link]" TARGET="principal">Captulo 1</a> <a HREF="[Link]" TARGET="principal"> Captulo 2</a> <a HREF="[Link]" TARGET="principal"> Captulo 3</a>
Ntese que cada enlace se le agreg el atributo TARGET="principal", este atributo le indica al browser que la pgina enlazada se debe de cargar en el frame principal, y no en el frame desde el que se est activando. Tambin se puede utilizar divisin horizontal de frames interactivos Ejemplo: ejemplo propio UILIZANDO BASE TARGET
Otro mtodo para relacionar varios enlaces con un frame, es utilizando BASE TARGET, con esta directiva, nos ahorramos el tener que especificar TARGET en cada uno de los enlaces, y en su lugar solo basta con especificar una sola vez al principio <BASE TARGET>. Para ilustrar esto a continuacin le presentamos el siguiente ejemplo: Extracto del [Link] <BASE TARGET="principal"> <a HREF="[Link]" TARGET="principal">Introduccin</a> <a HREF="[Link]" TARGET="principal">Captulo 1</a> <a HREF="[Link]" TARGET="principal"> Captulo 2</a> <a HREF="[Link]" TARGET="principal"> Captulo 3</a> Compare la codificacin del programa [Link] con [Link], y ntese que nos ahorramos escribir TARGET en cada enlace, al especificar BASE TARGET al inicio.
Directiva NOFRAMES
Esta se utiliza para advertir a los visitantes que no cuenten con un browser actualizado, ya que los browsers antiguos no manejan frames. Dentro de la seccin NOFRAMES, se coloca un mensaje advirtiendo al visitante que necesita un browser actualizado para poder ver la pagina con frames, o para dar un enlace a una versin sin frames. <frameset cols="20%,80%"> <frame src="[Link]"> <frame src="[Link]" NAME="principal"> </frameset> <NOFRAMES> <body> Esta pgina utiliza frames, pero su browser no los maneja. </body> </NOFRAMES> </html> TAREA: INVESTIGAR MAS PARAMETROS SOBRE LAS ETIQUETAS DE LOS FRAMES
