Les frames pour les nuls



Le principe général des frames consiste à définir plusieurs fenêtres figées dans une page web dans lesquelles peuvent s’afficher des fichiers indépendants contenant du texte, des liens, des images, des formulaires et tout autre matériel habituel du web.

Fenêtre 1
Fichier 1

Fenêtre 2
Fichier 2

Fenêtre 3
Fichier 3

Illustration 1

Les fichiers de contenu web se succèdent dans les cadres au gré des clics de l’utilisateur et selon la séquence et les règles définies par le concepteur.

Le code HTML qui définit les cadres est placé dans un fichier à part. Pour l’exemple il est baptisé DefCadre.htm et charge les fichiers Menu1.htm, SousMenu1.htm et Texte1.htm dans les cadres 1, 2 et 3 :

<html>
<head>

<!-- Il n'y a en principe rien à écrire dans la section head d'un cadre sinon d'éventuelles procédures javascript. Le script des cadres doit être aussi léger que possible. -->

</head>

<!-- La première étape consiste à définir la hauteur de chaque cadre. Il y a ici deux frames dont la hauteur relative de l’un par rapport à l’autre est de 1 pour 3, soit 25-75%. -->

<frameset rows="1*,3*">

<!-- Puisqu’il est seul sur la ligne, ce cadre occupe tout l’espace horizontal de la page web. Sa largeur n’a donc pas besoin d’être définie. -->

<!-- La seconde étape consiste à attribuer un nom au cadre, ici "Cadre1", puis à spécifier le fichier à  y afficher, ici Menu1.htm, et enfin à définir les propriétés de la fenêtre, ici pas de barre de défilement. La liste exhaustive des options d'affichage peut être consultée ici. -->

<frame name=Cadre1 src=Menu1.htm scrolling=no>

<!-- Deux cadres supplémentaires sont définis côte à côte sous le premier. Leur largeur relative est de 1 pour 4, soit 20%-80% et ils reçoivent les fichiers SousMenu1.htm et Texte1.htm. -->

 <frameset cols="1*,4*">
  <frame name=Cadre2 src=SousMenu1.htm>
  <frame name=Cadre3 src=Texte1.htm>

<!-- La section de définition des cadres est ensuite close.-->

</frameset>

<!-- L'instruction suivante représente le texte que l'internaute voit s'afficher lorsque son navigateur ne supporte pas les cadres, chose qui arrive heureusement fort rarement. Un lien pour consulter une version sans frame lui est ici proposé. Nombre de sources indiquent que c’est dans cette section qu’il faut inclure les liens à suivre par les moteurs de recherche. Mais ce n’est pas la solution idéale et une alternative moins contraignante est proposée dans l’article "Frames pour Phd en php". -->

 <noframes>
  <body lang=FR>
  <p >Cette page utilise des cadres mais votre navigateur ne les  prend pas en charge. Pour une version sans frames <a href="Texte1NoFrame.html" target = "_Self">cliquez ici</a>.</p>
  </body>
 </noframes>
</frameset>
</html>

La démonstration 1 reprend à la lettre et à la virgule le code exposé. Elle propose également un second exemple de jeu de cadres dont le code peut être consulté par le menu Affichage Source.

Il existe plusieurs variantes de syntaxe pour définir les cadres. Celle qui est exposée ici est la simplification de ce que génèrent automatiquement les applications Microsoft comme Word et Powerpoint. Elle a l’avantage de ne pas provoquer d’erreurs d’affichage et d’être simple à lire. La mise entre guillemets des noms de fichiers est recommandée bien que cela n’ait pas été fait dans l’exemple. Il en est de même pour les noms de cadres, les guillemets permettant de forcer la reconnaissance des majuscules par certains browsers et applications externes qui doivent les prendre en compte. Elles sont significatives.

Il reste désormais à donner vie à cette présentation. Lorsqu’il clique sur un lien placé dans l’une ou l’autre fenêtre, l’internaute provoque l’ouverture du fichier dans le cadre cible. Un clic sur le lien du Cadre1 de la démonstration 2 a pour effet de charger Texte2.htm en Cadre3. Le code du lien est le suivant :

<a href=Texte2.html target = "Cadre3">Charger Texte2 en remplacement de Texte3</a>

Il est également possible de provoquer l’ouverture coordonnée de plusieurs fichiers dans plusieurs fenêtres avec un seul clic. Il suffit d’inclure une instruction javascript dans le premier fichier ouvert. Cette instruction est placée en section Head du fichier Texte2.html et provoque l’ouverture de SousMenu2.htm :

<Head>

<script language="javascript">

window.open("SousMenu2.htm","Cadre2")

</script>

</Head>

La Démonstration 3 ouvre CadreDef3.htm. En cliquant sur le lien du cadre1, SousMenu1.htm est remplacé par SousMenu2.htm en même temps que Texte3.html se substitue à Texte1.htm.

Note : L’instruction window.open souvent utilisée pour générer intempestivement des fenêtres "pop-ups" contenant des publicités n’est pas bloquée par les browsers qui les interdisent. Il est simplement requis pour cela qu’elle s’ouvre dans le frame.

Imaginons désormais qu’un internaute clique sur un lien dans un moteur de recherche ou depuis un autre site et que celui-ci spécifie Texte4.htm au lieu de DefCadre4.htm. Texte4.htm s’affiche à l’écran dénué de cadre et le concepteur voit tous ses efforts de présentation perdus. Il faut par conséquent forcer l’ouverture du cadre-parent s’il est absent. L’instruction javascript est placée dans la section head de chaque fichier à toujours associer à un frame :

<Head>

<script language="javascript">

if(parent.frames.length == 0) parent.frame.location = "DefCadre4.htm"

</script>

</Head>

Démonstration 4 : L’instruction est ici placée après la section body pour permettre de visualiser le chargement en deux temps de Texte4.htm suivi de DefCadre.htm. Mais il doit normalement se trouver dans le head ce qui accélère le processus de chargement dans le cadre. Il faut rester attentif lors du chargement pour distinguer les deux temps.

Les grands principes des cadres sont à ce stade expliqués. Il s’agit d’un système de navigation d’intérêt qui permet d’afficher des informations liées entre elles comme des fichiers textes, un menu, des sous-menus et une aide contextuelle. Peuvent aussi figurer des informations toujours visibles comme le moteur de recherche du site et l’adresse email de l’administrateur. Le cadre peut également afficher une publicité ou des informations définies dans le profil utilisateur.

Globalement, l’internaute a le sentiment de maîtriser sa navigation et de n’être jamais perdu.

Mais cette vision des "Frames pour les nuls" est trop idyllique car elle omet de mentionner les problèmes auxquels sont confrontés les concepteurs, développeurs et administrateurs de sites.

Article suivant : Les frames ne sont pas nuls