Qué son los frames (1)
Descargar como DOCX, PDF0 recomendaciones3,425 vistas
Un frame permite dividir una página web en diferentes ventanas independientes, cada una con su propio contenido. Los frames proporcionan flexibilidad para estructurar contenidos complejos y están definidos mediante etiquetas <FRAMESET> y <FRAME>. Es posible configurar el tamaño, posición y contenido de cada frame.
Qué son los frames (1)
- 1. 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 <FRAMESET></FRAMESET> (en lugar Marco de<BODY>) N2.0 altura en filas <FRAMESET (píxel ó %) ROWS=,,,></FRAMESET> N2.0 altura en filas <FRAMESET (* = tamaño ROWS=*></FRAMESET> relativo) N2.0 anchura en <FRAMESET (píxel ó %) columnas COLS=,,,></FRAMESET> N2.0 anchura en <FRAMESET (* = tamaño
- 2. columnas COLS=*></FRAMESET> relativo) N3.0b anchura del <FRAMESET BORDER=?> borde N3.0b borde <FRAMESET FRAMEBORDER="yes|no"> N3.0b color del borde <FRAMESET BORDERCOLOR="#$$$$$$"> N2.0 Definición del <FRAME> (contenido de marco cada uno de los recuadros) N2.0 documento que <FRAME SRC="URL"> se debe mostrar N2.0 denominazione <FRAME del frame NAME="***"|_blank|_self| _parent|_top> N2.0 anchura de los <FRAME MARGINWIDTH=?> (margen márgenes izquierdo y derecho) N2.0 altura de los <FRAME MARGINHEIGHT=?> (margen márgenes superior e inferior) N2.0 barra de <FRAME desplazamiento SCROLLING="YES|NO|AUTO"> o no N2.0 no <FRAME NORESIZE> redimensionable N3.0b borde <FRAME FRAMEBORDER="yes|no"> N3.0b color del borde <FRAME BORDERCOLOR="#$$$$$$"> N2.0 contenido en <NOFRAMES></NOFRAMES> (para ausencia de navegadores marco antiguos)
- 3. 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>
- 4. <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>
- 5. 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>
- 6. 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>
- 8. 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>
- 9. 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="Hazclic" onClick="loadtwo('nuovo1.htm','nuovo2.htm')"> </FORM> </BODY>
- 10. 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).