interfaces simples

Entre la solution un peu complexe des frames, et celle plus simple de copier/coller une barre de navigation identique sur un ensemble de pages, ce qui "fera le même effet" si les composants sont légers, réfléchissez bien....

Les tables étudiées à la leçon précédente permettent la présentation compacte de différents éléments. Les frames offrent la possibilité de faire se succéder des contenus au même endroit, sans avoir l'impression de changer de page, en limitant les "aller-retours". C'est un élément de stabilité visuelle et de simplicité pour l'utilisateur (notion d'ergonomie), qui permet d'éviter 12 allers/retours trop répétitifs.

Les pages qui vont défiler doivent être prévues pour. On organisera en frames, des contenus dont la consultation motiverait des "aller-retours" trop répétitifs
entre la page de liens et les pages cibles, comme pour montrer une série de définitions ou d'images par exemple

<frameset frameborder="yes/no" border=" ", cols"*,*" rows="*,*" framespacing="0">
<frame src="page.htm" name="haut/gauche" scrolling="yes/no">
<frame src="autrePage.htm" name="bas/droite" noresize> </frameset>
Supprimer les mentions inutiles...

<frameset> annonce le jeu de cadres ;
les informations suivantes concernent l'apparence du jeu de cadres, comme nous l'avons vu précédemment dans les tableaux :
<cols="300,300"> annonce deux colonnes de 300 pixels de large .
<rows="12%,88%"> annoncera deux "rangées", la première occupant 12% de l'espace vertical, la seconde qui en prend 88% .
Un autre cas de figure peut être <row="100,*">, qui donne 100 pixels à la frame d'en haut, et le reste de l'écran à l'affichage des contenus de liens, variant selon la taille disponible (hauteur d'écrans en 480 pixels, 600 pixels, 768 pixels....)

La page de frames est une page de "cadres". Un peu comme on parle de cadres pour des tableaux ou des dessins encadrés : le cadre n'est pas son contenu. Le contenu est le dessin. Ces 2 cadres sont 2 fenêtres qui laissent voir 2 contenus distincts sur le même écran.
On peut imaginer une grande feuille de papier (notre page html) dans laquelle nous taillons deux fenêtres. Nommons les fenêtres ( par exemple fenêtre 'gauche' et fenêtre 'droite' pour bien les repérer). Dans ces fenêtres nous affichons respectivement les pages 1.htm et 2.htm
La première page 1.htm offre une liste de liens.
La deuxième page 2.htm ne contient rien mais existe en tant que surface vide. Ce cadre "droite", dans lequel nous voyons pour l'instant une page vide (2.htm), va devenir la destination d'affichage de la cible pour chaque lien activé, successivement (de la page 1.htm).
Pour cela il faut spécifier un endroit pour la présentation de la cible. C'est pourquoi quand on travaille avec des frames il faut ajouter dans la balise de chaque lien un nouvel attribut, "target" <a href="6a.htm" target="droite"*> pour indiquer où afficher la cible du lien .
*"droite" évidemment SI et seulement si nous avons nommé ainsi la frame de droite name="droite". Il faut mettre le nom choisi au moment de l'écriture du frameset. Sinon le programme ne saurait pas quelle fenêtre choisir. Rappellez-vous les ancres, c'est pareil.
(dans le doute le navigateur choisirait la solution <target="self">, faisant apparaître la page de contenu en remplacement de la page des liens comme dans une configuration ordinaire) .

Récapitulation par l'image

les noms de frames <frame name="nom"> servent à se repérer, notamment au moment d'écrire la balise <target="ou?">. C'est vous qui décidez des noms. On peut choisir le plus pratique : gauche&droite dans l'exemple ci-contre, haut&bas, Laurel&Hardy, Starsky&Hutch, Roméo&Juliette...Le jeu devient plus compliqué si l'on s'attaque à un écran de 3 ou 4 frames ( record observé: 9 frames, 3 x 3, avec des images ou videos dans chacune...). Qu'ils soient méthodiques ou rigolos il devient d'autant plus important d'avoir de bons noms comme repères.

PRATIQUE: un jeu de frames pour présenter une liste de liens dans l'une, les cibles dans l'autre.
Rappel : un lien peut s'appliquer sur des mots ou des images.
Possibilités :une liste de liens texte dans une frame, prèsentation des pages dans l'autre frame ;
Un tableau de vignettes d'images dans une frame, présentation des images de grande taille dans l'autre frame.
évolution : la liste de liens peut être de type :<a href="1.html">lien1 </a> - <a href="2.html"> lien2 </a> - <a href="3.html"> lien3 </a>...Etc. Avec un peu plus de temps on peut remplacer les mentions"lien..." par de petites images de fichiers-image...
puis, mieux, par des vignettes d'images individualisées (la petite vignette donne une idée de la grande image et l'on peut décider si l'on veut la voir ou pas...) ou autres effets visuels de plus en plus compliqués...
Si cela vous aide, vous pouvez télécharger le dossier qui contient les fichiers de l'exemple pour les modifier. Mais les images ne marcheront pas (elles ne sont pas dans ce dossier). A moins que vous n'ayez copié le site du cours, auquel cas, dézippez le dossier et installez-le dans 'cours', les images remarcheront.

TOUT-À-COUP : et comment on revient ?
Pour revenir à la page du cours, depuis le frameset, il faut ajouter un lien et aussi donner une cible target au lien (sinon cette page s'ouvrira dans la frame de gauche)
C'est <a href="6.htm" target="top">, "top" commande au navigateur d'afficher la nouvelle page (6.htm), qui n'a pas de frames, depuis le haut de l'écran (donc de défaire le jeu de frames).

Un bon exemple, simple et efficace pour une présentation claire de rubriques et informations (très) nombreuses sur : www.culture.gouv.fr.
PS: Travail remarquable mais depuis la première rédaction de cette page, l'Html a évolué et culture.gouv.fr a abandonné lui aussi les frames pour les <div> et les listes. Néanmoins je laisse le lien en place, car il reste un très bon exemple d'organisation de contenus très nombreux et complexes.)