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

L'élément FRAMESET

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

ROWS="h1,h2,...hn"
permet de faire des zones horizontales.
COLS="l1,l2,...ln"
permet de faire zones verticales.

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 :

src=url pour indiquer le fichier à placer dans la zone
name=nomDeZonepermet de nommer la zone afin qu'elle puisse devenir la cible d'un lien (on utilisera alors l'attribut target de la balise <A> pour y accéder.

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 :

marginwidth
précise la largeur des marges latérales (nombre de pixels)
marginheight
précise la hauteur des marges hautes et basses (nombre de pixels)
scrolling
précise si l'on doit afficher un ascenseur ou nom — les valeurs possibles sont yes, no et auto (valeur par défaut)
noresize
Indique que la taille de la zone ne peut pas être modifiée par l'utilisateur.
frameborder
Indique si le cadre doit être séparé des autres cadres (1 pour oui —valeur par défaut, 0 pour non)

<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]

[ Cours HTML ] [ Sommaire ]

Dans le chapitre suivant,

Dominique Archambault, 1998