L'utilité des frames est incontestable. Grâce à eux vous pouvez séparer une fenêtre du navigateur en 2, 3, 4... Même si certains en abusent, je vous recommande vivement d'en mettre un dans votre page perso. L'internaute pourra ainsi accéder plus facilement et plus rapidement aux informations qu'il cherche.
Peut-être que ce terme ne vous dit rien, alors cliquez sur ce bouton pour voir à quoi ressemble un frame :
Sachez qu'il est tout à fait possible de mettre plus de frames que ça, mais cela risque d'encombrer votre site.
Il est possible que votre navigateur soit trop ancien et ne connaisse pas les frames. En effet, les frames ne datent pas du début du HTML, donc si vous avez un vieux navigateur, vous êtes cuit et un texte vous le fera savoir.
La meilleure solution ? Vous procurer une verison plus récente de votre navigateur !
Déclarons un frame !
Il vous faudra créer autant de fichiers HTML qu'il n'y a de frames, sans compter le fichier qui fait appel aux frames.
Pour réaliser l'exemple que vous avez vu tout à l'heure, il m'a fallu un fichier pour appeler les frames, puis un fichier par frame. Ce qui fait 3 fichiers en tout !
Ca complique un peu les choses...
Pour commencer, on va s'occuper du fichier qui fait appel aux frames...
Ce fichier ne contiendra pas beaucoup d'informations. Vous pouvez à la rigueur faire l'en-tête de votre page avec <head> et y mettre le tag <title> pour le titre des 2 pages, ainsi que des méta-tags, mais c'est tout.
Nouveauté ! Il n'y a pas de tag <body> ! La page va ressembler à ça :
<html> <head> <title>Le titre de ma page avec frames</title> </head> <!-- Et ici, les appels aux frames, non entourés du tag body...--> </html>Bien. Première question : combien de frames voulez-vous, et dans quel sens ? En effet, les frames peuvent être orientés de manière horizontale ou verticale. Dans les deux cas, utilisez le tag <frameset>. Ensuite, accompagnez-le d'un de ces deux attributs :
<frameset cols="18%,51%,31%">Cela donnera 3 frames : le premier d'une taille correspondant à 18% de la fenêtre du navigateur, le second à 51% et le dernier à 31%. C'est simplissime, comme vous pouvez le voir.
Fermez le tag frameset plus loin, pour faire :
<frameset cols="18%,51%,31%"> </frameset>Nous allons indiquer quelles sont les pages HTML correspondant à chaque frame entre les deux <frameset>.
Pour chaque page vous devez écrire un tag <frame>.
Puis ajoutez à ce tag l'attribut "src", précisé du chemin d'accès au fichier HTML ; ainsi que l'attribut "name" pour donner un nom quelconque à votre frame :
<frame src="frame1.html" name="gauche"> <frame src="frame2.html" name="milieu"> <frame src="frame3.html" name="droite">Et voilà qui est fait ! Vous n'avez plus qu'à créer les fichiers frame1.html, frame2.html et frame3.html, et la page sera complète !
Je vais juste vous donner quelques autres infos pour l'attribut "cols" ou "rows".
Premièrement, vous n'êtes pas obligé de mettre des pourcentages ; si vous mettez juste des nombres, cela indiquera au browser un nombre de pixels.
Et deuxièmement, si vous mettez une * à la place d'un nombre, cela indiquera au browser que ce frame prend toute la place qui reste. Si le premier frame est large de 20% et que vous mettez une *, le deuxième frame sera large de 80%.
Pensez aussi à ceux qui ont des navigateurs qui ne connaissent pas les frames. Après le </frameset>, écrivez le tag <noframes> et refermez-le plus loin. Tapez un petit texte à l'attention de ceux qui ne peuvent pas voir de frames. Ce texte ne sera pas affiché si les frames fonctionnent correctement.
Sachez que les frames peuvent être redimensionnés à la guise de l'internaute. Si vous voulez empêcher ceci, il vous faut ajouter l'attribut "noresize" aux tags <frame>. Exemple :
<frame src="frame1.html" name="gauche" noresize> <frame src="frame2.html" name="milieu" noresize> <frame src="frame3.html" name="droite" noresize>
Finissons avec un petit exemple pour récapituler :
<html> <head> <title>Ma page avec des frames !</title> </head> <frameset cols="20%,*"> <frame src="11b1.html" name="gauche"> <frame src="11b2.html" name="droite"> </frameset> <noframes> Si vous pouvez lire ces lignes, c'est que votre navigateur ne suppporte pas les frames. </noframes> </html>
Je n'ai pas mis ici le code des pages 11b1.html et 11b2.html, simplement parce que vous savez déjà les réaliser.
Jusqu'ici, les frames ne devraient pas vous avoir causé trop de problèmes, je pense.
Ici, nous allons parler des liens dans une page qui contient des frames. En effet, comme vous avez pu le constater dans l'exemple précédent, c'est pas joli-joli si on clique sur un des liens du frame de gauche.
Il est possible d'indiquer vers où et comment le lien doit amener. On aurait préféré que les liens amènent tous dans le grand frame, non ?
Il faut rajouter un attribut au lien dont on veut modifier la cible. Il s'agit de "target" qu'il faut préciser par un de ces mots, selon votre choix :
| Si l'on veut que... | Il faut préciser "target" par : |
|---|---|
| La page s'affiche dans le même frame que le lien | _self |
| La page s'affiche dans l'autre frame (s'il n'y en a pas une nouvelle fenêtre est créée) | _parent |
| La page s'affiche dans une nouvelle fenêtre du navigateur | _blank |
| La page s'affiche dans la même fenêtre du navigateur, cette fois sans frames | _top |
| La page s'affiche dans un frame précis de votre site | Le nom du frame |
Voici 2 exemples. Le premier lien affiche la page cible dans une nouvelle fenêtre, et le second dans le frame appelé "toto".
<a href="cible.html" target="_blank">Cliquez</a> <a href="cible.html" target="toto">Cliquez</a>Et si tous les liens d'une même page sont destinés à amener au même endroit, vous pouvez écrire dans l'en-tête de votre page, c'est à dire entre les 2 <head>, le tag <base> avec l'attribut "target" comme vous savez maintenant l'utiliser :
<head> <base target="_top"> </head>Concluons ce chapitre avec cet exemple :
Code de la page qui appelle les frames :
<html> <head> <title>Des frames et des liens</title> </head> <frameset rows="50%,*"> <frame src="11c1.html" name="unframe"> <frame src="11c2.html" name="deuxframes"> </frameset> <noframes> Si vous pouvez lire ces lignes, c'est que votre navigateur ne suppporte pas les frames. </noframes> </html>Code du frame du haut :
<html> <head> </head> <body> <a href="../bases.html" target="_self">Pour revoir les bases du html dans ce frame</a<p> <a href="../bases.html" target="deuxframes">Pour revoir les bases dans l'autre frame.</a><p> <a href="../bases.html" target="_blank">Pour revoir les bases dans une nouvelle fenêtre.</a><p><br> <a href="11c2.html" target="deuxframes">Pour restaurer la page de départ du frame du bas.</a> </body> </html>Code du frame du bas :
<html> <head> </head> <body> <a href="../sommhtml.html" target="_self">Pour voir le sommaire dans ce frame</a><p> <a href="../sommhtml.html" target="unframe">Pour voir le sommaire dans l'autre frame.</a><p> <a href="../sommhtml.html" target="_blank">Pour voir le sommaire dans une nouvelle fenêtre.</a><p><br> <a href="11c1.html" target="unframe">Pour restaurer la page de départ du frame du haut.</a> </body> </html>
Vous devriez avec ce dernier exemple pouvoir manier les frames à la perfection !
Objet du prochain chapitre : les scripts, ou comment faire des trucs et des bidules dignes d'un programme dans une page web.