Les frames

Description

Les frames

Une frame est fenêtre indépendante, ou cadre, dans une partition d'écran en plusieurs éléments, deux au minimum, qui sont chargés simultanément dans la zone d'affichage du navigateur : on parle alors de multifenêtrage.

Chacun des cadres est librement défini et possède son propre contenu, ce qui permet d'afficher en même temps plusieurs fichiers ou différentes parties d'un seul et même fichier afin de les visualiser les unes à coté des autres autrement que de façon linéaire.

L'application la plus répandue de ce système de multifenêtrage est la répartition de la zone d'affichage en deux cadres, l'un contenant par exemple un sommaire avec des liens locaux et l'autre qui affiche les informations relatives à ces liens.

Principe des frames

Chaque fenêtre définie dans une partition d'écran nécessite l'ouverture d'un fichier, en plus de celui qui contient la description de la partition elle-même.

Par exemple :
frame00.htm : description de la partition d'écran
frame01.htm : description du premier cadre de la partition
frame02.htm : description du deuxième cadre de la partition
frame03.htm : description du troisième cadre de la partition
et ainsi de suite...

Si l'usage excessif des frames peut nuire à la navigation c'est parce que, plus il y a de partition de la zone d'affichage en fenêtres différentes, plus le navigateur doit interpréter de fichier et, conséquemment, le temps de chargement de la page est relatif au nombre d'éléments de la partition.

Déclaration des frames

La répartition de la zone d'affichage s'effectue à l'aide d'un fichier spécial (fichier d'index) qui est chargé en premier dans la mesure où c'est lui qui spécifie l'affichage des différents cadres de la partition.

Déclaration de la partition

<FRAMESET> ... </FRAMESET>: Déclaration de l'association de plusieurs cadres dans la zone d'affichage.

Les instructions <FRAMESET> et </FRAMESET> remplacent les instructions <BODY> et </BODY> d'une page classique.

La déclaration du frameset doit contenir tous les renseignements dont le navigateur a besoin pour afficher les cadres qui vont constituer la partition : chemin des fichiers, division de la zone d'affichage en rangées et/ou colonnes, attributs des bordures...

<NOFRAMES> ... </NOFRAMES>: Placée avant la fin du frameset, cette instruction sert à définir le contenu de la page qui sera visualisée par les navigateurs incapables d'afficher des cadres.

Cadres

À l'intérieur de la structure <FRAMESET> ... </FRAMESET> sont définis les différents cadres de la partition et les attributs qui leur sont propres.

<FRAME ...>: Définit le contenu de chaque cadre qui compose la partition d'écran.

SRC="url": Source du cadre (obligatoire), permet de d'établir un lien vers le fichier à afficher à l'intérieur du cadre.

NAME="nom": Permet de donner un nom (obligatoire) à un cadre de manière à le définir en tant que zone d'affichage.

Exemple :

index.htm :
`<HTML> <HEAD> <TITLE>Frame verticale</TITLE> </HEAD> <FRAMESET ROWS="80,*"> <FRAME NAME="Haut" SRC="cadre01.htm"> <FRAME NAME="Bas" SRC="cadre02.htm"> </FRAMESET> </HTML>`
cadre01.htm :
`<HTML> <HEAD> <TITLE>Cadre 1</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> ... </BODY> </HTML>`
cadre02.htm :
`<HTML> <HEAD> <TITLE>Cadre 2</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> ... </BODY> </HTML>`

Partition verticale

<FRAMESET ROWS="*,*">: Division en lignes, permet de définir sur le plan vertical les différents cadres de la partition et leur hauteur respective en pixel ou en pourcentage.

Le caractère "*" signifie que le cadre spécifié occupe l'espace restant de la zone d'affichage quand il n'est spécifié qu'une seule valeur.
Exemple pour deux lignes :
<FRAMESET ROWS="25%,75%"> ou <FRAMESET ROWS="100,*">

Exemple pour quatre lignes :
<FRAMESET ROWS="25%,25%,25%,25%">
Exemple :

`<FRAMESET ROWS="33%,*,33%">`
Exemple de partition verticale

Partition horizontale

<FRAMESET COLS="*,*">: Division en colonnes, permet de définir sur le plan horizontal les différents cadres de la partition et leur largeur respective en pixel ou en pourcentage.

Le caractère "*" signifie que le cadre spécifié occupe l'espace restant de la zone d'affichage quand il n'est spécifié qu'une seule valeur.
Exemple pour deux colonnes :
<FRAMESET COLS="180,*"> ou <FRAMESET COLS="*,70%">

Exemple pour trois colonnes :
<FRAMESET COLS="100,*,150%">
Exemple :

`<FRAMESET COLS="33%,*,33%">`
Exemple de partition horizontale

Partition multiple

Une partition multiple, qui combine des colonnes et des lignes, s'obtient en divisant un cadre en plusieurs.

L'imbrication des cadres les uns dans les autres est hiérarchique, il faut d'abord définir le cadre externe puis la partition qu'il contient à l'aide d'une nouvelle déclaration de partition.

Exemple :

`<HTML> <HEAD> <TITLE>Frame verticale</TITLE> </HEAD> <FRAMESET COLS="100,"> <FRAME NAME="gauche" SRC="gauche.htm"> <FRAMESET ROWS="70,"> <FRAME NAME="haut" SRC="haut.htm"> <FRAME NAME="bas" SRC="bas.htm"> </FRAMESET> </FRAMESET> </HTML>`
Exemple de partition multiple

Attributs des cadres

Par défaut, les différents cadres d'une partition sont délimités par une bordure grise et sont redimensionnables mais on peut modifier ces attributs en fonction des besoins.

Dimensions des cadres

NORESIZE: Permet d'indiquer que l'utilisateur ne peut pas changer les dimensions du cadre (par défaut, tous les cadres peuvent être redimensionnés).

SCROLLING="yes|no|auto": Permet d'attribuer ou non une barre de défilement (Scrollbar) à un cadre ("auto", valeur par défaut, laisse le navigateur en déterminer la nécessité).

Bordures des cadres

La déclaration des bordures dans une partition d'écran se fait soit pour l'ensemble des cadres à l'intérieur de la déclaration de la partition, soit pour les cadres eux-mêmes à l'intérieur de la décraration de chacun d'entre eux.

FRAMEBORDER="yes|no|0": Permet d'afficher ou non les bordures des différents cadres.

Spécificité Netscape :

BORDER=?: Permet de changer l'épaisseur en pixel de l'ensemble des bordures des cadres.

Spécificité Internet Explorer :

FRAMESPACING="?": Permet de changer l'épaisseur en pixel de l'ensemble des bordures des cadres.

Marges

MARGINWIDTH="?": Permet de spécifier la largeur en pixel des marges à gauche et à droite du cadre.

MARGINHEIGHT="?": Permet de spécifier la hauteur en pixel des marges en haut et en bas du cadre.

Spécificité Netscape :

BORDER="?": Permet d'ajuster l'espace en pixel entre les cadres : quand la bordure du cadre n'est pas affichée, la valeur 0 permet d'effacer l'espace de séparation des cadres.

Spécificité Internet Explorer :

FRAMESPACING="?": Permet d'ajuster l'espace en pixel entre les cadres : quand la bordure du cadre n'est pas affichée, la valeur 0 permet d'effacer l'espace de séparation des cadres.

Liens dans une partition d'écran

Par défaut, les pages appelées par des liens dans une partition d'écran s'affichent dans le cadre où ces liens sont activés.

Pour les liens vers un autre cadre, on fait appel au nom qui lui a été attribué (NAME="nom").

<A HREF="url" TARGET="cible"> ... </A>: Destination du lien vers un cadre défini.

Exemple de liens dans une frame

Il existe des noms réservés qui renvoient, non pas vers un cadre particulier, mais dans une structure interprétée par le navigateur :

TARGET="_self": Permet d'afficher la page appelée par le lien dans le même cadre.

TARGET="_parent": Permet d'afficher la page appelée par le lien dans le cadre de la page parente au niveau de l'arborescence du site.

TARGET="_top": Permet d'afficher la page appelée par le lien dans la fenêtre du navigateur (les cadres disparaissent).

TARGET="_new" ou TARGET="_blank": Permet d'afficher la page appelée par le lien dans une nouvelle fenêtre, c'est à dire en ouvrant un nouveau navigateur.

Cadre unique

<IFRAME>: Cadre unique (Floating Frames) : permet d'insérer un cadre unique dans la page, dans lequel s'affiche un autre fichier HTML.

Attributs :

HSPACE="?": Détermine l'espace en pixel à gauche et à droite du cadre.

VSPACE="?": Détermine l'espace en pixel en haut et en bas du cadre.

Pour les autres attributs, les cadres uniques peuvent être affectés des mêmes attributs que les cadres classiques.

Exemple :

<IFRAME NAME="Cadre" SRC="cadre.htm" ALIGN=RIGHT WIDTH="200" HEIGHT="100" VSPACE=20 HSPACE=30> </IFRAME>