Cours HTML : les cadres (frames)

Les cadres (frames)

L'utilisation de cadres (les "frames") permet de diviser l'écran du navigateur en plusieurs zones. Chaque zone peut contenir une page html.

Sommaire

  1. L'élément FRAMESET
  2. L'élément FRAME
  3. L'élément NOFRAME
  4. Type de document
  5. Envoyer un lien vers un cadre

L'élément FRAMESET

Il permet de définir le nombre de zones et leurs dimensions. Les deux principaux attributs sont rows et code.

Les hauteurs peuvent être données en pixels ou en proportions. Ces deux attributs peuvent être employés conjointement pour faire une grille.

Quelques exemples
  • <FRAMESET rows="25%,25%,50%"> ... </FRAMESET> [exemple]
  • <FRAMESET rows="*,*,2*"> ... </FRAMESET> [exemple]
  • <FRAMESET cols="100,*"> ... </FRAMESET> [exemple]
  • <FRAMESET cols="100,50%,*"> ... </FRAMESET> [exemple]
  • <FRAMESET rows="*,*,*" cols="80,*,*,*"> ... </FRAMESET> [exemple]

Les éléments FRAMESET peuvent être imbriqués :

<FRAMESET cols="100,3*,*"> 
  ...
  <FRAMESET rows="30%,*"> 
  ...
  </FRAMESET>
</FRAMESET>                                                       [exemple]

L'élément FRAME

L'élément FRAME permet de définir le contenu de chacune des zones. Pour cela, on utilise deux attributs :

Les éléments FRAMESET peuvent être imbriqués :

<FRAMESET rows="100,3*,*"> 
<FRAME src=fichier1.html name=sommaire ...>
<FRAME src=fichier2.html name=principale>
<FRAME src=fichier3.html name=animaux ...>
</FRAMESET>                                                       [exemple]

D'autres attributs permettent de préciser différents paramètres :

<FRAMESET rows="100,3*,*"> 
<FRAME src=fichier1.html name=sommaire scrolling=no resize=no marginwidth=0>
<FRAME src=fichier2.html name=principale>
<FRAME src=fichier3.html name=animaux_droit scrolling=no resize=no>
</FRAMESET>                                                       [exemple]
Attention au choix des noms de cadres (attribut name). De plus en plus de navigateurs non graphiques proposent à l'utilisateur de choisir quel cadre charger. L'utilisation de noms comme "cadre1", "cadre2"... peut alors s'avérer très génante pour l'utilisateur. Mieux vaut l'utilisation de noms explicites, permettant de donner une idée sur le contenu du cadre, comme "sommaire" ou "principal".

L'élément NOFRAME

Il s'agit d'indiquer le contenu à afficher dans un navigateur qui ne supporte pas les cadres.

<FRAMESET rows="100,3*,*">
  <FRAME ...>
  <FRAME ...>
  <FRAME ...>
  <NOFRAME> 
    <BODY> 
    <P><EM>Version sans cadres</EM>
    <H1>La Venus de Boticelli</H1>
    <P>...
    </BODY> 
  </NOFRAME>
</FRAMESET>

Type de document

Un document contenant des frames doit tout d'abord être délaré comme tel (élément DOCTYPE de type FRAMESET). Voici la forme d'un document contenant des frames.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
   "http://www.w3.org/TR/REC-html40/frameset.dtd">
<HTML>
  <HEAD>
    <TITLE>Titre du document</TITLE>
  </HEAD>
  <FRAMESET cols="200,*">

  <FRAME src=sommaire.html name=sommaire>
  <FRAME src=index0.html name=principal>

  <NOFRAME>
    <BODY>
    ...
    </BODY>
  </NOFRAME>

  </FRAMESET>

</HTML>

Envoyer un lien vers un cadre

L'attribut target de l'élément A permet de diriger un document vers un cadre autre que celui qui contient le lien activé. Sinon, lorsqu'on active un lien, par défaut la nouvelle page s'affiche dans le cadre contenant le lien en question.

<A href="venus1.html" target=principale>Venus 1</A>
<A href="venus2.html" target=principale>Venus 2</A>
<A href="venus3.html" target=principale>Venus 3</A>

<A href="frames7c1.html" target=cadre_droit class=droite>Lapin</A>
<A href="frames7c2.html" target=cadre_droit class=droite>Orque</A>

[exemple]

Dans le chapitre suivant,


Dominique Archambault, 1998