Cours de HTML Les cadres (frames) G. Chagnon Même s'ils ont tendance à disparaître, les cadres (ou frames) restent encore présents sur nombre de pages Web. html, frame, frameset
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 : L'appel à des cadres ne peut se faire qu'à l'aide de balises qui nécessitent une troisième forme de déclaration : 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... Premiers pas (contenu de la page) Cette fois-ci, la balise ]]> est remplacée par la balise ]]> : Premiers pas (déclaration des cadres) contenu alternatif pour les navigateurs ne supportant pas les cadres. 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 ]]> est fille de la balise ]]>. Un navigateur reconnaissant ]]> ignore le contenu du conteneur ]]>. Cette balise peut contenir un élément ]]>. Réciproquement, un navigateur de vieille version sautera les balises dont il ne connaît pas la signification : ]]>, ]]>, ]]> 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) : ]]> : rendu à l'écran. ]]> : rendu à l'écran. ]]> : 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 : ]]> 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 : ]]>. Rendu à l'écran. * peut signifier : le facteur multiplicatif nécessaire pour que l'ensemble soit à la taille de la fenêtre. Exemple : ]]>. 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 ]]> à l'intérieur du conteneur ]]>. La structure de l'exemple est la suivante : 218,* menuCadre_ex11.htm bandeauCadre_ex12.htm principalCadre_ex13.htm
Il doit y avoir autant de conteneurs ]]> qu'il y a de régions définies dans la balise ]]>. 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) src URL du document à charger initialement dans le cadre. Une URL. Facultatif, le chargement peut avoir lieu plus tard. name 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 target de l'appel de lien <a>. longdesc Renvoie vers un fichier contenant une "longue" description du contenu de la fenêtre. Une URL. frameborder Présence d'une bordure de séparation entre les cadres. Reprendre le premier exemple. 1 (présence) ou 0 (absence). Valeur par défaut 1. marginwidth, marginheight Marge entre le contenu et le bord du cadre. Un nombre de pixels. noresize Gère le redimensionnement du cadre. Si noresize="noresize", l'utilisateur ne peut pas redimensionner le cadre. scrolling Gère l'apparition des barres de défilement. yes : le navigateur crée toujours des barres. no : les barres sont interdites. auto : le navigateur crée des barres si besoin. Valeur par défaut. Attributs de la balise ]]>.
Il ne s'agit plus du quadrillage de la fenêtre du navigateur de la balise ]]> mais d'une petite lucarne insérée dans le document HTML. Le document lui-même garde la structure habituelle : entête (]]>) et corps (]]>).
Attribut Effet Valeur(s) src URL du document à charger initialement dans le cadre. Une URL. Facultatif, le chargement peut avoir lieu plus tard. name 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 target de l'appel de lien <a>. longdesc Renvoie vers un fichier contenant une "longue" description du contenu de la fenêtre. Une URL. frameborder Présence d'un encadrement. 1 (présence) ou 0 (absence). Valeur par défaut 1. marginwidth, marginheight Marge entre le contenu et le bord du cadre. Un nombre de pixels. scrolling Gère l'apparition des barres de défilement. yes : le navigateur crée toujours des barres. no : les barres sont interdites. auto : le navigateur crée des barres si besoin. Valeur par défaut. align 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 à bottom. left (valeur par défaut) right top : l'alignement se fait par rapport au sommet du cadre. bottom : l'alignement se fait par rapport au bas du cadre. middle : l'alignement se fait par rapport au centre du cadre. width, height Largeur et hauteur du cadre. Un nombre de pixels ou un pourcentage. Attributs de la balise ]]>.
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, ]]> 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 ]]> 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 ]]> du ]]>. target="_top" : fenêtre entière du navigateur. target="_blank" : nouvelle fenêtre. Valeur de l'attribut name du cadre visé.