Cadres

Introduction

Les cadres permettent de diviser la fenêtre du navigateur en zones multiples rectangulaires

Chaque zone affiche un fichier HTML.

Plusieurs documents peuvent donc être présentés dans une seule fenêtre du navigateur.

Le document de base, appelé le plan de découpage ("frameset") définit l'organisation des cadres. Exemple :

Code HTML :

<html>
<frameset cols="20%, 80%">
  <frameset rows="50, 200">
    <frame src="contenu_du_cadre1.jpg"/>
    <frame src="contenu_du_cadre2.html"/>
  </frameset>
  <frame src=""http://equipementsport.cafr.ebay.ca/"/>
  <noframes>
    <p>ce document avec un jeu d'encadrement contient :</p>
    <ul>
      <li><img src="contenu_du_cadre1.jpg" alt="un vélo typique"/>
      <li><a href="contenu_du_cadre2.html">d'autres moyens de transport</a>
      <li><a href="http://equipementsport.cafr.ebay.ca/">Voulez-vous
        acheter un vélo sur eBay ?</a></li>
    </ul>
  </noframes>
</frameset>
</html>

Dans le navigateur : voir

un "frameset" vertical, un "frameset" horizontal,

Pour spécifier les dimensions de cadres, nous pouvons aussi utilier le caractère '*'.
Dans l'exemple qui suit, on suppose que la fenêtre du navigateur fait 1000 pixels de haut. La première vue se voit allouer 30% de la hauteur totale (300 pixels). La seconde vue est fixée pour avoir exactement 400 pixels de haut. Il reste 300 pixels à répartir entre les deux autres cadres. La hauteur du quatrième cadre est définie comme étant "2*", il est donc deux fois plus haut que le troisième cadre, dont la hauteur n'est que de "*" (équivalant à "1*"). Ainsi, le troisième cadre fera 100 pixels de haut et le quatrième 200 pixels de haut.

<frameset rows="30%,400,*,2*">
... le reste de la définition ...
</frameset>

Comment faire pour qu'un lien dans un cadre mette à jour un autre cadre?

page web

La page est composée des deux cadres dont l'attribut "name" est égal à "gauche" et à "droit" respectivement.

<frameset cols="25%,*">
  <frame name="gauche" src="navigation.html" scrolling="auto">
  <frame name="droit" src="contenu.html" scrolling="auto">
  <noframes>
    <body/>
  </noframes>
</frameset>

<a href="TP/tp1_07h.html" target="droit">tp1</a>

Points faibles de cadres

En général, les moteurs de recherche indexent uniquement la page "mère" et le contenu de la balise <noframes>...</noframes>.
Raison : si un mot clé est trouvé dans une page "fille", le moteur n'est pas capable de reconstituer le lien avec la page "mère".

Les cadres se concentrent sur la mise en forme plutôt que sur la structuration de l'information.

Il existe de moins en moins de sites réalisés avec des frames.

Cadre en ligne : la balise <iframe>

Code HTML :

src : url de la page qui se chargera par défaut dans le cadre

width et height : la largeur et la hauteur du cadre

scrolling avec valeurs possibles :
yes - navigateur fournira toujours un mécanisme de défilement pour la fenêtre du cadre
no - pas de mécanisme de défilement
auto - mécanisme de défilement quand cela est nécessaire c.-à-d. quand la page insérée dans l'iframe est plus grande que l'iframe lui-même