Les frames apparues au moyen-age de l'histoire courte du web. Popularisée par les fabricants de pages web amateurs, elles répondent à des instincts assez bas. Si vous regardez un peu autour de vous, vous parviendrez au constat que les frames sont utilisées pour de petits sites alors qu'à priori elles servent une architecture liée à de grands site. Les frames sont mauvaises et nous allons voir pourquoi.
Les frames sont un moyen de diviser la zone de navigation du browser en plusieurs espaces distincts. Chaque zone ou frame se trouve donc remplie d'un page HTML différente. Classiquement, on réserve par exemple une frame pour les éléments de menu et de navigation et une frame pour le contenu principal.
Si on imagine que vous avez une page que vous voulez diviser en deux frames, un menu dans un colone sur la gauche et un espace central pour le contenu. Il vous faut faire trois pages HTML. Chacuns des deux espaces que vous voulez remplir sont en fait des pages HTML classiques comme vous savez les faire et il y a la page qui défini comment est divisé l'espace de la fenêtre du browser. Ce dernier fichier est appellé frameset.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>frameset</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> </head> <frameset cols="100,*" border=0> <frame src="menu.html" name="menu" title="My menu"> <frame src="main.html" name="main" title="Main content"> <noframes> Your browser does not support frames. Here is the alternative content. </noframes> </frameset> </html>
Ce que nous avons fait est assez simple à comprendre. La ligne <frameset> indique que nous divisons l'espace en deux colones, une de 100 pixels de large et une autre qui prendra tout le reste grâce à l'étoile *. Ensuite avec les deux lignes <frame> nous disons ce que nous voulont voir afficher dans chacune de ces frames. Remarquez que les unités par défaut sont des pixels mais nous aurions tout aussi bien pu nous exprimer en pourcentages %. Nous avons défini un répartition entre 2 frames mais vous pouvez en définir autant que vous voulez. Il est même possible d'imbriquer des frameset pour obtenir des choses plus compliquées.
Ce qui suit est encore une page avec à gauche un menu, au centre une frame de contenu principal mais aussi une frame d'en-tête et un pied de page.
<frameset rows="100,*,50" border=0>
<frame src="tete.html" name="tete" title="Headers frame">
<frameset cols="100,*" border=0>
<frame src="menu.html" name="menu" title="My menu">
<frame src="main.html" name="main" title="Main content">
<frameset>
<frame src="pied.html" name="pied" title="Footer frame">
</frameset>
Quand on veut imbriquer des framesets, c'est juste qu'un bloc frameset vient à la place d'un élément frame comme vous vennez de le voir.
Dans les deux exemples donnés, vous avez déjà vu name et title qui ne nécessitent pas d'explication et cols et rows. Passons aux autres dont vous pourriez avoir besoin.
Nous avons des choses classiques pour toute personne qui a déjà fait du HTML tels que border=n et bordercolor="#8844bb". Il existe en plus frameborder=1 qui peut prendre pour valeur 0 ou 1 et framespacing=n.
Nous avons déjà vu le principal à savoir scr="foo.html" qui indique l'adresse de la page à afficher dans la frame, name="foo" et title="long foo" qui ne nécessitent pas d'explications. Sachez qu'il existe aussi bordercolor="#ffaacc", frameborder="1" qui peut aussi prendre pour valeur 0, longdesc="url" qui donne une longue description du contenu de la frame et peut être utile si vous vous intéressez à l'accessibilité universelle, marginwidth="n" et marginheight="n".
Par défaut, il est possible pour l'utilisateur de redimensionner les frames que vous avez créé. Si vous ne voulez pas qu'il en soit ainsi, ajoutez l'argument noresize.
Enfin, vous pouvez déterminer la manière dont le navigateur va gérer les ascenseurs, scrolling="value". Par défaut on est en mode auto ce qui fait qu'il n'y a des ascenseurs que s'il y en a besoin, c'est à dire si tout le contenu ne peut pas s'afficher dans l'espace alloué. Si vous dites yes il y en aura toujours et no il n'y en aura jamais.
Par défaut, un lien s'ouvre dans la frame où il se situe. Pour modifier ce comportement, il suffit de rajouter à votre balise <a> un attribut target="" et de mettre entre les guillemets le nom de la frame dans laquelle vous voulez que la frame s'ouvre. Ce n'est pas plus compliqué.
Il y aussi ce que l'on appellait dans le temps les magic targets: Pour qu'un lien s'ouvre dans une nouvelle fenêtre on utilise target="_blank", pour ouvrir un lien en pleine fenêtre target="_top", pour ouvrir le lien dans le parent target="_parent" et pour ouvrir le lien dans la frame où il se trouve target="_self". Vous pouvez être suppris de trouver cette dernière option dans la mesure où il s'agit de l'action par défaut comme je l'ai expliqué mais justement le comportement par défaut peut être modifié en utilisant <base target="foo"> oùu foo peut prendre toute valeur correspondant à un nom de frame ou à une magic target. Enfin, sachez que si le nom de la fram n'est pas reconnu (faute de frappe ou de code), le comportement du navigateur est alors d'ouvrir une nouvelle fenêtre.
On a vu comment ça marche, maintenant voyons dans quel contexte on s'en sert. L'idée est en principe d'investir de la bande passante en espérant que cela devienne un profit : le premier affichage génère (dans le cas d'une page 2 frames) le téléchargement de 3 pages HTML, c'est à dire une perte, dans l'espoir potentiel qu'ensuite il n'y ai plus que des téléchargements de pages uniques qui, elles, seront plus légères car une partie du contenu qui aurait pu s'y trouver est déjà présent à l'écran par le biais d'autres frames. Qui dit investissement dit pari et risque. Faites votre audit personnel de bande passante, et réfléchisez bien à cette rentabilité en imaginant des sessions de durée raisonnables, 2 à 7 clics.
Un problème classique des frames est lié aux URLs. Dans la barre d'adresse du navigateur que vous utilisez apparaît l'URL de la page du frameset et la plupart de ces navigateurs mémorisent dans leurs signets cette adresse. Le résultat est que vos pages ne pourront, la plupart du temps, pas être mises correctement dans les bookmarks de vos visiteurs, ils ne pouront pas retrouver en endroit préçis de votre site. Les frames sont aussi un gros problème quand il s'agit du référencement profond de votre site sur les moteurs de recherche qui vont indexer chacune des frames individuellement ce qui fait que les gens qui cherchent des informations de votre site vont se retrouver sur la page préçise en dehors de son contexte de frame.
Un autre usage des frames plus pernicieux est la pratique du framage : Vous créez sur votre site un frameset et vous affichez dans une de vos frames une page HTML issue d'un autre site. Il y a ici un moyen de faire croire que vous êtes l'auteur d'un contenu qui vous est étranger. Cette pratique est unanimement dénoncée, contraire à la netiquette et source d'un contentieux juridique. N'oubliez pas que vous pouvez vous aussi vous retrouver framé par quelqu'un d'autre.
On ne sait jamais, vous pouvez vous retrouver dans les frames de quelqu'un d'autre. Pour en sortir, faites des liens avec target="_top" ou insérez le javascript suivant qui vous fera reprendre le dessus:
<script language="JavaScript" type="text/javascript"> if (top.location != location) top.location.href = location.href; <script>
Les alternatives aux frames sont trop nombreuses pour les évoquer toutes. Il y a des solutions pour chacunes des raisons pour lesquelles vous voulez utiliser des frames. Si vous le faites pour économiser de la bande passante ou pour avoir des éléments fixes à l'écran, penchez vous vers les feuilles de style (CSS).
Si vous êtes dans le cas le plus commun, c'est à dire que vous trouvez que d'un point de vue maintenance, un site en frame est plus facile à administrer car, par exemple, si vous changez l'apparence ou le contenu de votre menu, vous n'avez qu'une page à modifier au lieu de l'ensemble de vos pages, alors intéressez-vous au Server Side Includes (SSI).
Les SSI sont une manière beaucoup plus élégante de gérer la maintenance d'un site facilement. Vous commencez par créer votre page type unique avec tous les éléments que vous voulez. Ensuite isolez les éléments que vous voulez fixes, votre menu par exemple et vous le sauvez dans un fichier HTML distinct même si ce n'est pas une vraie page HTML car elle ne contient qu'un extrait de votre code. Ensuite vous changez l'extension de votre page de base en .shtml et vous remplacez dans la page d'origine le code ainsi extrait par <!--#include file="menu.html"-->. Répétez l'opération si vous avez plus d'éléments statiques puis dérivez vos autres pages de votre page type. Du point de vue de l'espace disque c'est une opération à peu près neutre mais du point de vue de la maintenance c'est un gros gain, surtout si vous couplez cela avec des CSS externes.
Les SSI peuvent être utilisées à d'autres fins que d'insérer des bouts de codes HTML. Voici quelques exemples:
Le seul désaventage mineur des SSI est qu'elles représentent une charge légèrement supérieure pour le serveur, et qu'elles sont parfois désactivées par l'administrateur pour des raisons de sécurité (cmd).
Bref si après tout cela vous continuez à utiliser des frames, veuillez au moins penser à établir une section <noframes> dans votre code et évidement à utiliser le bon doctype (à savoir <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">). Si vous persistez dans votre mauvaise technologie, demandez-vous si vous le faites par parresse ou par défaut, sachant qu'il existe toujours des alternatives.