Les frames
Beaucoup de sites s’en servent mais je ne suis pas trop pour ça créé quelques problèmes avec les vieux navigateurs et d’autres petits désagréments mais c’est très pratique pour les webmasters débutants car cela permet d’afficher plusieurs pages sur une seule.
Un exemple ? L’ancienne version de Zebulon (pour ceux qui ont connu !). Le cadre et le menu du site étaient des frames.
Comment ça marche ? C’est simple. Nous allons prendre l’exemple d’un webmaster en herbe qui veut avoir un menu sur la gauche de son site. Cliquez ici pour voir son site.
L’index
En page d’accueil de son site (généralement c’est index.html chez la plupart des hébergeurs), il aura une page qui ressemblera à ça :
| <html> <head> <title>Index</title> </head> <frameset cols=”150,*”> <frame name=”menu” src=”framemenu.html” scrolling=”no” frameborder=”no”> <frame name=”corps” src=”framecorps.html” frameborder=”no”> <noframes> <body> </body> </noframes> </frameset> </html> |
On détaille maintenant le code :
La structure de base reste la même. Ensuite à la place du body, on définit les frames avec la balise <frameset>. Le paramètre cols désignent 2 choses. D’abord que les frames seront verticales et ensuite la largeur des 2 frames : 150 (c’est en pixels. On peut le spécifier en % mais ce n’est pas recommandé à cause des différentes résolutions des visiteurs) pour celle de gauche et le reste pour celle de droite(*).
Ensuite on définit chaque frame avec la balise <frame>. Les différents paramètres sont assez faciles à comprendre :
- name : c’est le nom du cadre. Indispensable car, on le verra plus tard, c’est utile pour pointer les liens du menu vers le corps.
- src : comme une image, il faut donner la source du cadre qui est un document html (nous détaillerons leur contenu plus tard).
- scrolling : 3 valeurs possibles. Soit on met “yes” et on aura toujours une barre de défilement à droite de la frame, soit on met “no” et on n’aura jamais de barre, soit on ne met pas le paramètre et le navigateur mettra la barre s’il y en a besoin.
- frameborder : si on met “no” le cadre n’aura pas de bord, si on ne met pas le paramètre, il y aura un bord (je trouve que ça fait plus “classe” sans bord mais c’est une affaire de goût ;o)
Ensuite, viennent les balises <noframes>. Elles servent à définir ce que doit afficher le navigateur s’il n’est pas capable d’afficher les frames (les vraiment très vieux navigateurs).
Généralement, on met entre les balises <body> un texte du style : Votre navigateur n’est pas capable d’afficher les cadres. Veuillez télécharger un navigateur compatible pour naviguer sur notre site.
Les moins feignants feront une version de leur site sans frames.
Voilà, une fois cela fait, normalement on a plus à toucher à ce fichier index.html.
Le menu
C’est là que rentre en jeu la petite subtilité au niveau des liens. Voici un exemple :
| <html> <head> <title>Menu</title> </head> <body bgcolor=”#c0c0c0″ text=”#000000″ link=”#0000ff” vlink=”#800080″ alink=”#ff0000″> <div align=”center”><u><b><font size=”5″ color=”#0000ff”>Menu</font></b></u></div><br> <a href=”frameacceuil.html” target=”corps”>Acceuil</a><br> <a href=”frameimages.html” target=”corps”>Images</a><br> <a href=”frameliens.html” target=”corps”>Liens</a><br> </body> </html> |
Comme vous le voyez, c’est un fichier HTML normal. Mais la particularité, ce sont les liens. Pour que les liens pointent vers le cadre “corps”, il faut ajouter aux liens le paramètre target (qu’on a déjà vu) et la valeur de ce paramètre c’est le nom du cadre de droite (“corps”).
Le corps
Il y a la même subtilité que pour le menu. Voilà l’exemple :
| <html> <head> <title>Acceuil</title> </head> <body> <div align=”center”><u><b><font size=”5″ color=”#0000ff”>Acceuil</font></b></u></div><br><br><br> <div align=”center”><font size=”7″><b><big>Bienvenue</big></b></font> <br><br>Blablabla…<br><br> Allez voir les <a href=”frameimages.html” target=”_self”>images</a> ou visitez les <a href=”frameliens.html” target=”_self”>liens</a>.</div> </body> </html> |
Encore une fois, il faut rajouter le paramètre target aux liens. La valeur du paramètre est “_self” qui signifie que le lien pointe vers le cadre où il se trouve. On aurait pu mettre “corps” mais c’est bien de voir les différentes possibilités.
Dernière mise à jour le 2 décembre 2018