Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.
Cours précédent : Les images dans une page Web
Cours suivant : Contrôle du son et de la vidéo
Liste des fichiers associés à ce fichier HTML :
version 1.10, dernière mise à jour le 18 juillet 2005.
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.
Examiner l'exemple au bout de ce lien.
Puis admirer la magnifique réalisation du Site officiel du musée du Louvre http://www.louvre.fr/ : Observer la navigation.
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.
Nous avions déjà rencontré les déclarations de type de document suivantes :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
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.
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>
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.
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.
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 !).
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>
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).
|
Attribut |
Effet |
Valeur(s) |
|---|---|---|
|
|
URL du document à charger initialement dans le cadre. |
Une URL. Facultatif, le chargement peut avoir lieu plus tard. |
|
|
Nom du cadre. |
Une chaîne de caractères. Obligatoire si son contenu doit être modifié après le chargement initial. Répond à l'attribut |
|
|
Renvoie vers un fichier contenant une "longue" description du contenu de la fenêtre. |
Une URL. |
|
|
Présence d'une bordure de séparation entre les cadres. Reprendre le premier exemple. |
|
|
|
Marge entre le contenu et le bord du cadre. |
Un nombre de pixels. |
|
|
Gère le redimensionnement du cadre. |
Si |
|
|
Gère l'apparition des barres de défilement. |
|
Table 1. Attributs de la balise <frame>.
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 : entête (<head>) et corps (<body>).
|
Attribut |
Effet |
Valeur(s) |
|---|---|---|
|
|
URL du document à charger initialement dans le cadre. |
Une URL. Facultatif, le chargement peut avoir lieu plus tard. |
|
|
Nom du cadre. |
Une chaîne de caractères. Obligatoire si son contenu doit être modifié après le chargement initial. Répond à l'attribut |
|
|
Renvoie vers un fichier contenant une "longue" description du contenu de la fenêtre. |
Une URL. |
|
|
Présence d'un encadrement. |
|
|
|
Marge entre le contenu et le bord du cadre. |
Un nombre de pixels. |
|
|
Gère l'apparition des barres de défilement. |
|
|
|
Détermine la position du cadre par rapport au texte qui l'entoure. Le cadre peut suivre le flot du texte ou être enveloppée
par ce texte. Par défaut la valeur est à |
|
|
|
Largeur et hauteur du cadre. |
Un nombre de pixels ou un pourcentage. |
Table 2. Attributs de la balise <iframe>.
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.
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.
target="_self" : fenêtre ou cadre d'appel (valeur par défaut).
target="_parent" : fenêtre ouvrant le <frameset> du <frame>.
target="_top" : fenêtre entière du navigateur.
target="_blank" : nouvelle fenêtre.
Valeur de l'attribut name du cadre visé.
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.
Cours précédent : Les images dans une page Web
Cours suivant : Contrôle du son et de la vidéo
Liste des fichiers associés à ce fichier HTML :
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.