jueves, 8 de mayo de 2014

Los Frames y Frameset

Aunque los frames dejaron de usarse hace ya varios años, vamos a aprender a trabajar con ellos, con la idea de empezar a relacionarnos y crear contenido dinámico, esto nos ayudará a entender y organizar futuros proyectos webs. Con las frames es posible dividir la ventana del navegador en varias subregiones (frames), permitiendo mostrar una URL distinta en cada una de ellas. En cada frame se nos permite:
  • Mostar su propia URL, diferenciada del resto de las frames de la pantalla, de esta forma un hiperenlace puede tener como destino un documento y la frame en el que se mostrará.
  • Tendrán asociado un nombre, que las distinguirán del resto de las frames de la pantalla y permitirá usarlo en los hiperenlaces.
  • En el caso que se cambie el tamaño de la ventana, se podrá determinar si la frame se ajusta a este tamaño o mantiene su tamaño intacto.
Esto permite crear nuevos tipos de documentos, en los que por ejemplo se mantendrá una región estática (lista de enlaces, barra de botones, formulario) y otra zona dinámica en la que se mostrará el resultado. De esta forma una de las principales utilidades de las frames es la creación de páginas con un índice (por ejemplo un manual) o una cabecera estática, consiguiendo así una mejora de la navegación al poder acceder al índice de una manera más rapida y efectiva. Un documento con frames se define de manera diferente a un documento normal, siendo la estructura del documento distinta, en este caso no se define la etiqueta BODY. Su estructura es la siguiente: 


<HTML>
      <HEAD>
          Definiciones de la cabecera 
      </HEAD> 
      <FRAMESET>
         Definición de los frames que forman el documento. 
      </FRAMESET> 
      <NOFRAMES>
        Instrucciones HTML que se mostrará en los navegadores que no lo soporten. 
      </NOFRAMES>    
</HTML>

Una vez definido el documento que contendrá los frames, es hora de saber la estructura, con la siguiente instrucción definiremos las frames que formarán el documento, su sintaxis es similar a la de las tablas, permitiendo definir muy distintos tipos de frames. Su formato es el siguiente: 

    <FRAMESET ROWS=filas o COLS=columnas>
        <FRAME SRC=URL_1 NAME="Nombre del frame1"> 
        <FRAME SRC=URL_2 NAME="Nombre del frame1"> 
        . . . 
        <FRAME SRC=URL_N NAME="Nombre del frameN"> 
    </FRAMESET>

Es importante indicar que sólo se podrá definir uno de los atributos, o la lista de filas (ROWS) o la lista de columnas (COLS).
  • ROWS: Se definirá separado por comas el tamaño de cada una de las frames. De esta forma se dividirá la pantalla de forma horizontal, según cada una de las filas definidas. El tamaño de la frame, puede expresar en porcentaje o píxeles.
  • COLS: Toma los mismos posibles valores que ROWS, pero en este caso para las columnas, se definirán las frames de forma vertical.
Una vez definida el número de frames por fila o por columna se definirá el contenido de cada una de estas con la etiqueta FRAME, pero igualmente se podría definir frames dentro de frames, de forma que cada una de las definidas anteriormente podría estar divida en varias frames, esto se hará incluyendo dentro de la instrucción FRAMESET, nuevas instrucciones FRAMESET que dividirán esta en los frames indicados.

Los atributos importantes de la etiqueta frame son:
  • SRC="URL": especifica el documento HTML o fichero que se mostrará en la frame definido.
  • NAME="Nombre del frame": Indica el nombre de la frame, este nombre es importante ya que se usará en los hiperenlaces.
  • SCROLLING=YES | NO | AUTO:  Indica sil frame tendrá o no una barra de scroll, la barra de scroll se muestra en el lateral y permite desplazarse por el documento, pulsando con el ratón en ella.
  • NORESIZE: Indica quel frame no debe ser variada de tamaño por el usuario
  • TARGET: Indicará el frame de destino de la operación.
Después de toda la teoría, vamos a ver un ejemplo practico, es muy típico que las páginas estén formadas por un encabezado para colocar una imagen tipo logotipo, debajo podemos tener a la izquierda un menú de navegación, donde iremos visualizando los enlaces en el centro de la página, y a la derecha podríamos dejar una zona auxiliar para poner información extra, para terminar podríamos colocar un pié donde poner información de nosotros. Para verlo mejor está la imagen siguiente:


El código necesario para crear esa estructura es el siguiente:


<frameset rows="200,600,100" frameborder="yes" border="0" framespacing="0">
<frame name="logo" src="cabecera.html" scrolling="No" noresize="noresize" id="topFrame" title="topFrame">
</frame>
<frameset cols="200,700,*">
<frame name="izquierda" src="menu.html" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" NORESIZE>
</frame>
<frame name="centro" src="principal.html" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" NORESIZE>
</frame>
<frame name="derecha" src="derecha.html" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" NORESIZE>
</frame>
</frameset>
</frame>
<frame name="pie" src="pie.html" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" NORESIZE>
</frameset>