Technologies internet
Cadres
Voir aussi :
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?
Regardons l'ancienne page web du cours.
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>
Les hyperliens dans le fichier navigation.html utilisent l'attribut "target"
pour indiquer quel cadre devrait afficher le lien.
<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>
Il est possible de définir à l'intérieur d'une page HTML, un cadre local à
l'intérieur duquel s'affichera le contenu d'une autre page HTML.
Code HTML :
<iframe src="foo.html">Votre navigateur ne reconnaît pas les cadres.
</iframe>
Dans le navigateur :
L'affichage du cadre est contrôllé avec les paramètres suivants :
- 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
Note : en XHTML strict, l'élément iframe a été remplacé par l'élément object.
Utilisation typique : on utilise un lien avec l'attribut "target" pour
ouvrir une page donnée dans le cadre.