Accueil > HTML > HTML – Les cadres (FRAMES)

HTML – Les cadres (FRAMES)

25/03/2002 cybwarrior Commenter Allez aux commentaires
This entry is part 14 of 23 in the series HTML - Tutoriel

HTML - Tutoriel
  1. Découpage de l’écran
  2. Les attributs de la balise <FRAME>
    1. SRC (Emplacement du document)
    2. NORESIZE (Redimensionnement des cadres)
    3. FRAMEBORDER (Bordure présente ou non)
    4. SCROLLING (Barre de défilement)
    5. MARGINWIDTH et MARGINHEIGHT (Marge horizontal et vetical)
    6. NAME (Nom des cadre)
  3. Les attributs de la balise <FRAMESET>
    1. FRAMESPACING (Espacement entre les Cadres)
  4. La balise <NOFRAMES>

Les cadres ont révolutionné le monde de l’Internet. Avant que la technologie PHP atteigne ce niveau
de notoriété, on peut même dire que 90% des sites Web utilisaient les cadres.

Mais un cadre, qu’est-ce que c’est ? On pourrait dire que c’est une petite fenêtre à l’intérieur
de la fenêtre de votre navigateur. Et dans cette petite fenêtre, il y a le document à visualiser.

Les avantages sont certains : on peut par exemple placer le sommaire du site dans un cadre, et
les documents à visualiser dans un autre (si vous êtes observateur, vous aurrez remarquez que c’est
cette méthode que j’utilise…). Ainsi, il est inutile de recopier le sommaire sur chaque page.

Par contre, certains navigateurs ne reconnaissent pas les Frames (c’est la même chose, mais
en Anglais). Rassurez-vous, Internet Explorer et Netscape Navigator n’en font pas partis (du moins
dans les versions récentes…). Par contre, les nouveaux adeptes du logiciel libre et de Linux
risquent de ne pas pouvoir béneficier de ce progrès dans l’immédiat, puisqu’à ma connaissance,
les navigateurs Linux sont incapables de déchiffrer les Frames.


Découpage de l’écran


Pour pouvoir utiliser les Frames, il faut tout d’abord établir une stratégie pour définir où
chaque cadre se situera dans la fenêtre du navigateur. Cette découpe sera inscrite dans un fichier.
Pour avoir un aperçu de ce fichier, vous pouvez cliquez dans le menu ‘Affichage’, puis sur ‘Source’
si vous utilisez Internet Explorer, afin de visualiser le découpage que j’utilise pour mes afficher
mes pages.

Pour définir un ensemble de cadre, on va utiliser la balise du type conteneur <FRAMESET>.
À ce stade là, il faut spécifier un attribut pour la découpe, après avoir choisis entre découper
la fenêtre du navigateur dans le sens horizontal (en lignes), ou dans le sens vertical (en colonnes).
On utilisera selon le cas :

  • rows pour spécifier le nombres de lignes

  • cols pour spécifier le nombres de colonnes


On peut bien sur utiliser ces deux attributs en même temps, mais c’est peu conseillé.

De toute façon, le principe est le même, que ce soit avec rows ou avec cols :
on indique les largeurs des colonnes (ou des lignes, c’est selon) séparées par des virgules. Evidemment,
il y a autant de dimensions qu’il y a de cadres. Les dimensions peuvent être exprimées en pixels
(dans ce cas, les cadres gardent les même dimensions quel que soit la dimension de la fenêtre
du navigateur) ou bien en pourcentage, en ajoutant le signe % à la fin de la valeur. Dans
ce dernier cas, la largeur (ou la hauteur) du cadre sera calculé en fonction de la taille de la
fenêtre du navigateur.

À l’intérieur de cette balise <FRAMESET>, il va falloir indiquer les documents
à afficher à l’intérieur de chaque cadre. On va pour cela utiliser la balise du type marqueur
<FRAME>. Elle posséde de nombreux attributs, mais nous ferrons l’impasse dessus pour
le moment.

Bien entendu, il faut une balise <FRAME> par cadre.

Voici un exemple :


<HTML>

<HEAD>

<TITLE>Exemple d’utilisation des cadres</TITLE>

</HEAD>


<FRAMESET cols= »50%,* »>

  <FRAME>

  <FRAME>

</FRAMESET>


<BODY>

</BODY>

</HTML>

Cliquez-ici pour voir le résultat



Vous remarquez que la portion qui définit les cadres n’a été écrite ni dans la partie d’en-tête
(entre <HEAD> et </HEAD>), ni dans le corps du document
(entre <BODY> et </BODY>); mais bel et bien entre ces deux
parties. La balise <FRAMESET> est en fait une nouvelle section.

Pour un découpage horizontal, on aurrait utiliser cet ensemble de cadre :


<FRAMESET rows= »50%,* »>

  <FRAME>

  <FRAME>

</FRAMESET>

Cliquez-ici pour voir le résultat



Bien sûr, on peut tout à fait inclure des ensembles de cadres les uns dans les autres, ceci afin
de pouvoir mêler les découpages horizontaux et verticaux :


<FRAMESET rows= »50%,* »>

  <FRAME>

  <FRAMESET cols= »50%,* »>

    <FRAME>

    <FRAMESET rows= »50%,* »>

      <FRAME>

      <FRAME>

    </FRAMESET>

  </FRAMESET>

</FRAMESET>

Cliquez-ici pour voir le résultat


Les attributs de la balise <FRAME>



SRC (Emplacement du document)

C’est bien beau de faire des cadres, mais si il n’y a rien dedans ? C’est à ceci que va servir
l’attribut src. La valeur doit être celui d’un lien (reportez-vous à la partie correspondante).
L’exemple ci-dessous affiche mon écran de démarage :


<FRAMESET rows= »70, * »>

   <FRAME src= »http://pcwarrior.multimania.com/titre.html »>

   <FRAMESET cols= »125, * »>

      <FRAME src= »http://pcwarrior.multimania.com/sommaire.htm »>

      <FRAME src= »http://pcwarrior.multimania.com/presentation.htm »>

   </FRAMESET>

</FRAMESET>

Cliquez-ici pour voir le résultat



Vous remarquez que la présentation est un petit peu différente. Il manque des attributs…


NORESIZE (Redimensionnement des cadres)

Les exemples de cadres précedents peuvent être redimensionnés. Mais on peut tout à fait interdire
cette option en placant l’attribut noresize dans la balise <FRAME> du
cadre choisi.

Cette attribut est booléen (voir partie précedente), c’est à dire qu’il se suffit à lui
seul et n’a pas besoin de valeur.
Exemple :


<FRAMESET rows= »50%,* »>

  <FRAME noresize>

  <FRAMESET cols= »50%,* »>

    <FRAME noresize>

    <FRAMESET rows= »50%,* »>

      <FRAME noresize>

      <FRAME noresize>

    </FRAMESET>

  </FRAMESET>

</FRAMESET>

Cliquez-ici pour voir le résultat


FRAMEBORDER (Bordure présente ou non)

Cet attribut permet d’afficher une bordure (le grand trait) autour du cadre. La valeur est :

  • 0 aucune bordure

  • 1 bordure


Exemple :


<FRAMESET rows= »50%,* »>

  <FRAME frameborder= »0″>

  <FRAME frameborder= »0″>

</FRAMESET>

Cliquez-ici pour voir le résultat



Ne vous inquiétez pas si il n’y a rien du tout, c’est normal…


SCROLLING (Barre de défilement)

On peut choisir de faire apparaître une barre de défilement sur les cotés du cadres avec l’attribut
scrolling. Les valeurs valides sont :

  • auto laisse le choix au navigateur : en affiche si le document déborde, en affiche
    pas si il tient dans le cadre. C’est l’option par défaut.

  • yes en affiche, quoi qu’il arrive, même si il n’y en a pas besoin.

  • no n’en affiche pas, même si il y en a besoin.


Reprenons l’exemple de ma page de démarrage et completons avec ces nouveaux attributs :


<FRAMESET rows= »70, * »>

   <FRAME src= »http://pcwarrior.multimania.com/titre.html » noresize

   frameborder= »0″ scrolling= »no »>

   <FRAMESET cols= »125, * »>

      <FRAME src= »http://pcwarrior.multimania.com/sommaire.htm » noresize

      frameborder= »0″ scrolling= »auto »>

      <FRAME src= »http://pcwarrior.multimania.com/presentation.htm » noresize

      frameborder= »0″ scrolling= »auto »>

   </FRAMESET>

</FRAMESET>

Cliquez-ici pour voir le résultat



C’est presque ça! Encore un petit effort :)


MARGINWIDTH et MARGINHEIGHT (Marge horizontal et vetical)

Ces deux attributs définissent les marges à laisser entre les bords du cadre et le début du document.
Les valeurs sont à fournir en pixels.

Completons encore l’écran de démarrage :


<FRAMESET rows= »70, * »>

   <FRAME src= »http://pcwarrior.multimania.com/titre.html » noresize frameborder= »0″

   scrolling= »no » marginheight= »0″>

   <FRAMESET cols= »125, * »>

      <FRAME src= »http://pcwarrior.multimania.com/sommaire.htm » noresize

      frameborder= »0″ scrolling= »auto »>

      <FRAME src= »http://pcwarrior.multimania.com/presentation.htm » noresize

      frameborder= »0″ scrolling= »auto »>

   </FRAMESET>

</FRAMESET>

Cliquez-ici pour voir le résultat



Il ne nous reste maintenant plus qu’à enlever ces espaces entre les cadres et améliorer le fonctionnement.


NAME (Nom des cadre)

L’attribut name est l’attribut essentiel pour le fonctionnement des Frames. Si on omet de
nommer un cadre, il sera assez délicat d’afficher un document là où on veux qu’il soit.

En effet, avec l’exemple suivant, le lien est ouvert dans le même cadre :

  • Code du document du cadre de Gauche :

    
<HTML>
    
<HEAD>
    
</HEAD>
    

    <BODY>
    
<A href= »http://pcwarrior.multimania.com/images/bromelfe.jpg »>
    
Cliquez-ici</A>
    
</BODY>
    
</HTML>

  • Code du document créant les cadre :

    
<HTML>
    
<HEAD>
    
</HEAD>
    

    <FRAMESET cols= »50%,* »>
    
  <FRAME>                         <!– Pas de liens –>
    
  <FRAME>                         <!– Pas de liens –>
    
</FRAMESET>
    

    <BODY>
    
</BODY>
    
</HTML>


Ne tenez pas compte de l’abscence de liens dans les balises <FRAME>, c’est à
cause de JavaScript…

Cliquez-ici pour voir le résultat



Vous remarquez que comme prévu, l’image est ouverte dans le même cadre. Comment faire alors ?

Nous allons attribuer un nom à ces deux cadres avec l’attribut name. Ici, nous allons faire
simple : le cadre de gauche va s’appeler gauche, et celui de droite droite.

Ensuite, il va faloir utiliser ce nom dans l’appel de lien. Comment ? Rappelez-vous de l’attribut target.
C’est lui qui va contenir le nom du cadre où ouvrir le lien.

Notre exemple ainsi modifier sera :

  • Code du document du cadre de Gauche :

    
<HTML>
    
<HEAD>
    
</HEAD>
    

    <BODY>
    
<A href= »http://pcwarrior.multimania.com/images/bromelfe.jpg » target= »droite »>
    
Cliquez-ici</A>
    
</BODY>
    
</HTML>

  • Code du document créant les cadre :

    
<HTML>
    
<HEAD>
    
</HEAD>
    

    <FRAMESET cols= »50%,* »>
    
  <FRAME name= »gauche »>                       <!– Pas de liens –>
    
  <FRAME name= »droite »>                       <!– Pas de liens –>
    
</FRAMESET>
    

    <BODY>
    
</BODY>
    
</HTML>


Cliquez-ici pour voir le résultat



Et cette fois ci, ça roule…

Petit détail : et si on avait des dizaines et des dizaines de liens ? On ne va tout de même pas
s’amuser à spécifier la cible dans chaque balise ?

C’est pourquoi il existe la balise <BASE> (du type marqueur). Grâce à elle, on va
pouvoir définir une cible commune à tout les liens du document. L’attribut à utiliser avec elle
sera bien évidemment target. La balise <BASE> doit se situer dans
la section d’en-tête du document, c’est à dire entre <HEAD> et </HEAD>.

On pourrait donc modifier le code du document de gauche ainsi :


<HTML>

<HEAD>

<BASE target= »droite »</BASE>

</HEAD>


<BODY>

<A href= »http://pcwarrior.multimania.com/images/bromelfe.jpg »>Cliquez-ici</A><BR>

<A href= »http://pcwarrior.multimania.com/images/pirate.gif »>Ou bien ici</A>

</BODY>

</HTML>

Cliquez-ici pour voir le résultat



Vous pouvez attribuer n’importe quel nom à un cadre, pour peu qu’il n’appartienne pas au 4 noms
ci-dessous. Les noms ci-dessous ont des fonctions particulières :

  • _parent désigne la fenêtre (ou le cadre) directement supérieur

  • _top désigne la fenêtre de départ.

  • _self désigne le propre cadre. Utile lorsque l’on à utiliser la balise <BASE>

  • _blank cré une nouvelle fenêtre pour le document


Ainsi, si pour l’attribut target d’un lien on a la valeur _blank, le
document sera ouvert dans une nouvelle fenêtre.


Les attributs de la balise <FRAMESET>



FRAMESPACING (Espacement entre les Cadres)

Les attributs de la balise <FRAME> ne sont pas surabondants. Il n’y en a qu’un
seul : framespacing. Il reçoit une valeur en pixels qui définit l’espacement à maintenir
entre les différents cadres.


La balise <NOFRAMES>


On a vu au début de cette page que certains navigateurs sont incapable d’utiliser les cadres. Au
lieu de laisser le malheureux visiteur devant une page désespérement blanche, il faut utiliser
la balise du type conteneur <NOFRAMES>. Le contenu de cette balise n’est affiché
que si le navigateur ne reconnait pas les cadres. Sinon, il est ignoré.

Son utilisation est simple : il doit englober la balise <BODY>, comme dans
l’exemple suivant :


<HTML>

<HEAD>

<TITLE>Exemple d’utilisation des cadres</TITLE>

</HEAD>


<FRAMESET cols= »50%,* »>

  <FRAME>

  <FRAME>

</FRAMESET>


<NOFRAMES>

  <BODY>

  </BODY>

</NOFRAMES>

</HTML>

Je vous conseille fortement d’utiliser cette balise à chaque fois que vous aurez recours à des
Frames. D’ailleurs, certains moteurs de rechercher, comme Lycos, refuse de réferencer vos page
dans leur base de données si une page utilisant les Frames ne posséde pas de balise <NOFRAMES>.

Ensuite, certains moteurs de recherche effectue leur réferencement suivant le contenu de la page.
Il est évident qu’ils ne vont pas trouver grand chose si vous vous limitez simplement aux balises
<FRAMESET> et <FRAME>.

Mais alors qu’écrire dans cette balise ? Vous pouvez déjà informer le visiteur qu’il posséde un
navigateur incompétent, bien qu’il doit certainement le savoir.

Puis vous pouvez lui décrire les merveilleuses choses qu’il rate, le malheureux!

Vous pouvez aussi créer un petit sommaire succint des pages pouvant être vues sans avoir recours
au cadres.

Certains WebMasters n’hésitent pas à réaliser deux versions de leur site : une avec Frames, et
l’autre sans. C’est à vous de voir…

Series Navigation«HTML – TableauxHTML – Les formulaires»
Categories: HTML Tags:
  1. Pas encore de commentaire
  1. Pas encore de trackbacks