Vous êtes sur la page 1sur 16

Les frames

Dr. Manel KOLLI


1. Fonction
• Les cadres (frames dans la terminologie anglo-saxonne)
découpent la fenêtre principale en autant de petits cadres,
chacun d'eux jouant le même rôle qu'une fenêtre :
document HTML propre, barres de défilement
indépendantes...

• Ces frames peuvent être chargés de manière totalement


indépendante : un cadre sera modifié et l'autre maintenu.
Ils peuvent interargir entre eux : un choix dans un premier
cadre pourra provoquer le chargement d'une nouvelle page
dans un deuxième.
2. Avantages/Inconvénients
• Les cadres permettent de créer rapidement une mise en page simple
pour un site.
• L'utilisation classique consiste ainsi à présenter sur un cadre à gauche
une liste de liens vers les différentes parties d'un site, qui s'affichent
dans la fenêtre principale au centre.
• Cela facilite de plus la maintenance des différentes pages.

• Cependant, les moteurs de recherche indexent les pages à l'intérieur des


cadres autant que les autres. Il y a donc un risque pour qu'une page
indexée de la sorte soit "orpheline", et ne donne pas accès au reste du
site.
• Plus généralement, une telle page ne se suffit souvent pas à elle-même
(il y manque parfois les outils de navigation à l'intérieur du site). Enfin, la
présence de cadres s'accompagne souvent de celles de barres de
défilement horizontales.
3. Structure de la page HTML
a. Un nouveau type de document

• L'appel à des cadres ne peut se faire qu'à l'aide de balises


qui nécessitent une troisième forme de déclaration :
• <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

• Ce type de document étant une extension de la


recommandation HTML Transitionnel, les balises de
présentation sont également acceptées, même s'il vaut
mieux éviter de faire appel à elles.
b. Le squelette d'une page-cadre
• Une page destinée à recevoir plusieurs cadres
a une structure légèrement différente d'une
page "habituelle".
• Cette dernière, on s'en souvient, possède la
structure suivante...
<html>
<head>
<title>Premiers pas</title>
</head>
<body>
(contenu de la page) </body>
</html>
• Cette fois-ci, la balise <body> est remplacée
par la balise <frameset> :
<html>
<head>
<title>Premiers pas</title>
</head>
<frameset>
(déclaration des cadres) <noframes>contenu alternatif pour les
navigateurs ne supportant pas les cadres.</noframes>
</frameset>
</html>
c. La balise <noframes>
• L'objectif est d'avertir l'utilisateur d'une vieille version de navigateur (2),
ou bien d'un navigateur ne supportant pas les cadres (navigateur texte ou
PDA) qu'il n'a pas accès au contenu du document sous la forme de cadres.

• le contenu de cet élément doit fournir une méthode alternative


d'accéder à l'intégralité des informations contenues dans les cadres.

• La balise <noframes> est fille de la balise <frameset>. Un navigateur


reconnaissant </frameset> ignore le contenu du conteneur <noframes>.
Cette balise peut contenir un élément <body>.

• Réciproquement, un navigateur de vieille version sautera les balises dont


il ne connaît pas la signification : <frameset>, <frame>, <noframes> et
affichera la suite du document. Le cas est prévu dans l'exemple. Examiner
son source.
II. La balise <frameset>
1. Définition du découpage de la page: les attributs rows et cols

• Les attributs rows et cols définissent un quadrillage


dont chaque élément sera un cadre (frame).
• rows définit le découpage horizontal et cols le
découpage vertical.
• Exemples (l'illustration est au bout de chaque lien) :

 <frameset rows="150,200,300" cols="100,300,500"> : rendu à l'écran.


 <frameset rows="150,200,300"> : rendu à l'écran.
 <frameset cols="100,300,500"> : rendu à l'écran.
2. Jeux de valeurs possibles
• Les valeurs peuvent s'exprimer par :

• Par un nombre entier de pixels (voir les exemples précédents).


• Par un pourcentage (ex : 20%) de la fenêtre du navigateur : lorsque
l'utilisateur modifie la taille de sa fenêtre, la taille du cadre se modifie en
proportion. Exemple : <frameset cols="20%,50%,30%">
• Si la somme ne fait pas 100%, les pourcentages sont ajustés par règle de trois.
• Par le caractère astérisque *. Deux usages sont possibles :
– peut signifier ce qui reste de libre. Exemple : <frameset rows="150,*,100">. Rendu à l'écran.
– peut signifier : le facteur multiplicatif nécessaire pour que l'ensemble soit à la taille de
la fenêtre. Exemple : <frameset cols="2*,*,5*">. Rendu à l'écran.

• De manière générale, si le jeu de paramètres est incohérent, le navigateur


trouve toujours un moyen de les ajuster (ce qui peut produire une apparence
parfois fluctuante au gré des interprétations !).
3. Découpage irrégulier
• Le découpage peut ne pas être un quadrillage mais un simple pavage
de rectangles. Ce pavage est obtenu en insérant une nouvelle fois la
balise <frameset> à l'intérieur du conteneur <frameset></frameset>.
La structure de l'exemple est la suivante :

<frameset cols="218,*">
<frame name="menu" src="Cadre_ex11.htm"></frame>
<frame name="bandeau" src="Cadre_ex12.htm"></frame>
<frame name="principal" src="Cadre_ex13.htm"></frame>
</frameset>
III. La balise <frame>
1. Utilisation de la balise

• Il doit y avoir autant de conteneurs <frame>


qu'il y a de régions définies dans la balise
<frameset>.

• L'ordre est imposé de gauche à droite, puis de


haut en bas (voir les numérotations des
régions dans les exemples précédents).
2. Les attributs
Attribut Effet Valeur(s)
URL du document à
Une URL. Facultatif, le chargement
Src charger initialement dans le
peut avoir lieu plus tard.
cadre.
Une chaîne de caractères.
Obligatoire si son contenu doit être
Name Nom du cadre. modifié après le chargement initial.
Répond à l'attribut target de l'appel
de lien <a>.
Renvoie vers un fichier
contenant une "longue"
Longdesc Une URL.
description du contenu de la
fenêtre.
Présence d'une bordure de
séparation entre les cadres. 1 (présence) ou 0 (absence). Valeur
frameborder
Reprendre le premier par défaut 1.
exemple.
marginwidth, Marge entre le contenu et
Un nombre de pixels.
marginheight le bord du cadre.
Gère le
Si noresize="noresize", l'utilisateur
noresize redimensionnement du
ne peut pas redimensionner le cadre.
cadre.
 yes : le navigateur crée
toujours des barres.
 no : les barres sont
scrolling
Gère l'apparition des interdites.
barres de défilement.  auto : le navigateur crée
des barres si besoin. Valeur par
défaut.
IV. La balise <iframe>
1. Utilisation de la balise

• Il ne s'agit plus du quadrillage de la fenêtre du


navigateur de la balise <frameset> mais d'une
petite lucarne insérée dans le document
HTML.
• Le document lui-même garde la structure
habituelle :
o entête (<head>)
o corps (<body>).
2. Les attributs
Attribut Effet Valeur(s)
Une URL. Facultatif, le
URL du document à charger
src chargement peut avoir lieu plus
initialement dans le cadre.
tard.
Une chaîne de caractères.
Obligatoire si son contenu doit être
name Nom du cadre. modifié après le chargement initial.
Répond à l'attribut target de
l'appel de lien <a>.
Renvoie vers un fichier
contenant une "longue"
longdesc Une URL.
description du contenu de la
fenêtre.
1 (présence) ou 0 (absence).
frameborder Présence d'un encadrement.
Valeur par défaut 1.
marginwidth Marge entre le contenu et le
, marginheight bord du cadre. Un nombre de pixels.

 yes : le navigateur
crée toujours des barres.
 no : les barres sont
scrolling Gère l'apparition des barres interdites.
de défilement.  auto : le navigateur
crée des barres si besoin.
Valeur par défaut.

 left (valeur par


défaut)
 right
 top : l'alignement se
Détermine la position du
fait par rapport au sommet
cadre par rapport au texte qui
du cadre.
l'entoure. Le cadre peut suivre
align  bottom : l'alignement
le flot du texte ou être
se fait par rapport au bas du
enveloppée par ce texte. Par
cadre.
défaut la valeur est à bottom.
 middle : l'alignement
se fait par rapport au centre
du cadre.

width , Un nombre de pixels ou un


Largeur et hauteur du cadre.
height pourcentage.
V. L'attribut target
1. L'attribut target en HTML Transitionnel

• La balise <a> permettant de créer un lien possède en HTML


Transitionnel un attribut supplémentaire,
• target ("cible" en anglais), qui permet de spécifier la fenêtre dans
laquelle le document lié doit s'ouvrir.
• target ne peut prendre qu'une seule valeur pertinente possible en
HTML Transitionnel, la valeur target="_blank".
• Cela permet d'ouvrir le lien dans une nouvelle fenêtre. Par
exemple,
• <a href="http://dam.cicrp.jussieu.fr" target="_blank"> permet
d'ouvrir une seconde fenêtre du navigateur, à l'intérieur de
laquelle s'affiche le document spécifié par l'attribut href, ici la
page d'accueil du DEUST.
2. L'attribut target avec des cadres

• Par défaut, l'appel de lien par la balise <a


href="url_du_source"> charge la fenêtre courante par le
document désigné par href.
• L'attribut target permet de spécifier dans quel cadre (au sens
large) va se charger le document. Il peut prendre quatre valeurs
prédéfinies, ou bien une valeur déterminée par l'auteur.
o target="_self" : fenêtre ou cadre d'appel (valeur par défaut).
o target="_parent" : fenêtre ouvrant le <frameset> du <frame>.
o target="_top" : fenêtre entière du navigateur.
o target="_blank" : nouvelle fenêtre.
o Valeur de l'attribut name du cadre visé.

Vous aimerez peut-être aussi