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. Les
démos et certaines explications s'ouvrent dans une nouvelle fenêtre
- le cas échéant, pensez à débloquer l'interdiction
des pops ups.
| 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
