6a sessió: Els frames .

Avui en dia la majoria de pàgines Web divideixen la pantalla en diferents finestres, on mostren simultàniament diferents documents. Moltes tenen a l'esquerra un arbre de navegació en una finestra estreta, i a la dreta mostren els continguts. D'altres mostren una barra de navegació a la part de dalt, i asota mostren els continguts.

Darrera d'aquesta estructuració de l'espai tenim els codis HTML FRAMESET i FRAME, i l'atribut per els enllaços TARGET.

El que fem es dividir la pantalla amb talls rectes verticals (COLS="...") o horitzontal (ROWS="...") amb el codi FRAMESET, com si tallessim un pastís rectangular amb un ganivet. Cada divisió la podem omplir de contingut amb el codi FRAME i assignar-la un nom, o be tornar a dividir-la amb un altra codi FRAMESET.

Aquesta estructura de talls la desem a un arxiu HTML independent, sense BODY, només amb el HEAD i els FRAMESET.

Per que un enllaç canvii el contingut d'un frame afegim a l'enllaç el atribut TARGET amb el nom del frame a utilitzar.

Veiem un exemple (frame1.html):

<HTML>
<HEAD>
<TITLE>Material HTML</TITLE>
</HEAD>
<FRAMESET ROWS="50,*">
    <FRAME NAME="barra" SRC="menugraf.html">
    <FRAMESET COLS="20%,80%">
        <FRAME NAME="arbre" SRC="menuarbre.html">
        <FRAME NAME="dades" SRC="pag1.html">
    </FRAMESET>
</FRAMESET>
</HTML>

Aleshores, quan carreguem al navegador aquest arxiu, carregarem aquest tres arxius a la vegada:

Fixem-nos que amb l'asterisc (*) indiquem que el darrer tall agafa la resta de l'alçada (o amplada, segons el cas) de la finestra, i que podem fer els talls en percentatge de la finestra (amb el %) o en píxels (sense el %).

Com veiem haurem d'ajustar alguns paràmetres:

Veiem el resultat (atenció: hiperenllaç! Cliqueu a la imatge per provar els enllaços i tafanejar al codi):

Altres atributs útils són:


Als enllaços hem d'afegir l'atribut TARGET="dades" com a Extra HTML:

Si tots els enllaços utilitzan un mateix target, ens podem estalviar escriure'l per a cada enllaç afegint al HEAD:
<BASE TARGET="dades">

Hi ha una sèrie de targets predefinits:


Per a aquells navegadors que no accepten frames, existeix el codi NOFRAMES:

<NOFRAMES>
       <BODY>
       EL SEU NAVEGADOR NO MOSTRA FRAMES.
       Cliqui <A href= "home.htm"> AQUI </A> per anar a la pàgina sense Frames.
       </BODY>
</NOFRAMES>
 

© Jordi Orts, març 2000