Sommaire
Les cadres HTML permettent aux auteurs de présenter des documents à travers des vues multiples. Ces vues peuvent être des fenêtres indépendantes ou des portions de fenêtre. Les vues multiples permettent aux concepteurs de maintenir une certaine partie de l'information visible, tandis que d'autres vues sont défilées ou carrément remplacées. Par exemple, l'on pourrait utiliser trois cadres : un premier pour une en-tête statique, une pour un menu de navigation, et un troisième pour la vue "principale", laquelle peut être défilées ou remplacée en cliquant sur un élément activable du cadre de "navigation".
Un document HTML avec cadres a une structure légérement différente qu'un document HTML sans cadres. Un document standard est composé d'une section HEAD et une section BODY. Un document avec cadres dispose quant à lui d'une section HEAD, d'une section FRAMESET, et d'une dernière section optionnelle BODY.
La section FRAMESET d'un document spécifie comment seront disposées les vues dans la fenêtre principale de l'agent utilisateur.
La section BODY qui suit la section FRAMESET permet d'y mentionner un contenu alternatif au cas où l'agent utilisateur ne supporterait pas les cadres ou serait configuré pour les ignorer. Une discussion plus approfondie sur la façon de définir une alternative de contenu sera présentée ci-après.
Les éléments qui seraient normalement placés dans une section BODY d'un document sans cadres ne peuvent apparaître avant la première déclaration de FRAMESET, auquel cas l'élément FRAMESET serait ignoré.
<!ELEMENT FRAMESET - - ((FRAMESET|FRAME)+ & NOFRAMES?)> <!ATTLIST FRAMESET -- valeurs absolues en pixels, pourcentages ou échelles relatives -- rows CDATA #IMPLIED -- si non mentionné, 1 ligne par défaut -- cols CDATA #IMPLIED -- si non mentionné, 1 colonne par défaut -- onload %Script #IMPLIED -- événement une fois tous les cadres chargés -- onunload %Script #IMPLIED -- tous les cadres "démontés" -- >
Balise de début : requise, Balise de fin : requise
Définition des attributs
Attributs définis par ailleurs
L'élément FRAMESET construit le découpage de la fenêtre principale en différents rectangles indépendants.
La définition de l'attribut rows donne le nombre de coupes horizontales. La définition de l'attribut cols donne le nombre de coupes verticales. Les deux attributs peuvent être utilisés simultanément pour construire un découpage en grille.
Si l'attribut rows n'est pas défini, chaque colonne s'étend sur toute la hauteur de la page. Si l'attribut cols n'est pas défini, chaque cadre s'étend sur toute la largeur de la page. Si aucune des deux attributs n'apparaît, le cadre unique résultant prend les mêmes dimensions que la page.
Ces deux attributs prennent pour valeur une liste de longueurs séparées par des virgules. Une longueur peut être absolue (un nombre de pixels ou un pourcentage d'écran) ou une longueur relative, indiquée sous la forme "i*", où "i" est un entier. Lors de l'attribution d'espace aux rangs et aux colonnes, les agents utilisateurs attribuent d'abord les longueurs absolues, puis divisent l'espace qui reste entre toutes les définitions relatives. La valeur "*" est équivalente à "1*".
Les vues sont créées de gauche à droite (pour les coupes verticales) et de haut en bas (pour les coupes horizontales). Lorsque les deux attributs apparaissent, les vues sont créées de gauche à droite dans la première ligne, puis de gauche à droite dans la deuxième ligne, etc.
Le premier exemple divise l'écran horizontalement en deux (c-à-d., crée une moitié supérieure et une moitié inférieure).
<FRAMESET rows="50%, 50%"> ...le reste de la définition... </FRAMESET>
L'exemple suivant crée trois colonnes : la colonne centrale a une largeur fixe de 250 pixels (c'est utile, par exemple, pour y placer un eimage d'une taille connue à l'avance). La première recevra 25% de l'espace restant et la troisième 75% de ce même espace.
<FRAMESET cols="1*,250,3*"> ...le reste de la définition... </FRAMESET>
L'exemple qui suit crée une grille 2x3.
<FRAMESET rows="30%,70%" cols="33%,34%,33%"> ...le reste de la définition... </FRAMESET>
Dans l'exemple qui suit, nous supposerons que la fenêtre du navigateur a une hauteur actuelle de 1000 pixels. 30% de la hauteur totale (300 pixels) est attribué à la première vue. La deuxième vue à une hauteur de 400 pixels exactement. Il reste donc 300 pixels à répartir entre les deux cadres restants. La hauteur de la quatrième vue est spécifiée valoir "2*", et est de ce fait deux fois plus haute que la troisième vue (de hauteur "*" (1*)). Dans notre cas, la hauteur de la troisième vue sera donc calculée à 100 pixels tandis que la quatrième vaudra 200 pixels.
<FRAMESET rows="30%,400,*,2*"> ...le reste de la définition... </FRAMESET>
Si une définition de longueurs absolues est telle que leur somme diffère de 100% de l'espace réellement disponible, les agents utilisateurs ajusteront toutes les longueurs en conséquence. En cas de sousdéfinition, l'espace restant sera divisé proportionellement, chaque portion étant respectivement rajoutée à chacune des vues. En cas de surdéfinition, chaque vue sera amputée proportionnellement.
Les définitions de cadres peuvent s'imbriquer en principe à l'infini.
Dans l'exemple suivant, la définition de FRAMESET externe divise l'espace en trois colonnes d'égale largeur. La déclaration de FRAMESET intérieure découpe la colonne centrale horizontalement en deux zones de hauteurs différentes.
<FRAMESET cols="33%, 33%, 34%">
...contenu de la première vue...
<FRAMESET rows="40%, 50%">
...contenu de la deuxième vue, premier rang...
...contenu de la deuxième vue, deuxième rang...
</FRAMESET>
...contenu de la troisième vue...
</FRAMESET>
<!-- reserved frame names start with "_" otherwise starts with letter --> <!ELEMENT FRAME - O EMPTY> <!ATTLIST FRAME name CDATA #IMPLIED -- nom du cadre en tant que cible -- src %URL #IMPLIED -- source du contenu du cadre -- frameborder (1|0) 1 -- le cadre doit-il avoir des bordures -- marginwidth %Pixels #IMPLIED -- marges horizontales en pixels -- marginheight %Pixels #IMPLIED -- marges verticales en pixels -- noresize (noresize) #IMPLIED -- les utilisateurs peuvent-il redimensionner le cadre -- scrolling (yes|no|auto) auto -- options de barre de défilement -- >
Balise de début : requise, Balise de fin : interdite
Définition des attributs
Attributs définis par ailleurs
L'élément FRAME définit le contenu et l'apparence d'un volet particulier d'une fenêtre multi-vues.
L'attribut src spécifie quel est le document initial qui doit être chargé dans le cadre. Il n'y a en effet aucune possibilité pour que le contenu d'un cadre soit défini dans le même document qui définit le découpage.
Voici un exemple avec des fichiers HTML :
<HTML>
<FRAMESET cols="33%,33%,33%">
<FRAMESET rows="*,200">
<FRAME src="contenu_du_cadre1.html">
<FRAME src="contenu_du_cadre2.gif">
</FRAMESET>
<FRAME src="contenu_du_cadre3.html">
<FRAME src="contenu_du_cadre4.html">
</FRAMESET>
</HTML>
créerait un dispositif de cadres à peu près similaire à :
-------------------------------------------- |Frame 1 |Frame 3 |Frame 4 | | | | | | | | | | | | | | | | | | | | | | | | | | | | | -------------| | | |Frame 2 | | | | | | | | | | | --------------------------------------------
et demanderait à l'agent utilisateur de charger chaque fichier dans un volet séparé.
EXEMPLE ILLEGAL :
La définition de découpage qui suit est illégale en HTML car le contenu du second cadre est situé dans le même document que le frameset.
<HTML> <FRAMESET cols="50%,50%"> <FRAME src="contenu_du_cadre1.html"> <FRAME src="#ancre_dans_le_même_document"> </FRAMESET> <BODY> ...du texte... <H2><A name="ancre_dans_le_même_document">Section importante</A></H2> ...du texte... </BODY> </HTML>
L'exemple qui suit illustre l'utilisation des attributs "décoratifs" du FRAME. Nous y spécifions que le cadre 1 n'aura pas de barres de défilement. Le cadre 2 laissera un espace blanc autour de son contenu (à l'origine, un fichier image) et ce cadre ne pourra être redimensionné. Aucun bord n'apparaîtra entre les cadres 3 et 4. Des bordures (par défaut) apparaîtront entre les cadres 1, 2, et 3.
<HTML>
<FRAMESET cols="33%,33%,33%">
<FRAMESET rows="*,200">
<FRAME src="contenu_du_cadre1.html" scrolling="no">
<FRAME src="contenu_du_cadre2.gif"
marginwidth="10" marginheight="15"
noresize>
</FRAMESET>
<FRAME src="contenu_du_cadre3.html" border="0">
<FRAME src="contenu_du_cadre4.html" border="0">
</FRAMESET>
</HTML>
L'exemple suivant illustre comment les cibles permettent une modification dynamique du contenu du cadre. En premier lieu nous aurions défini un découpage primitif dans le document frameset.html, tel que montré ci-dessous :
<HTML> <FRAMESET rows="50%,50%"> <FRAME name="fixe" src="init_fixe.html"> <FRAME name="dynamique" src="init_dynamique.html"> </FRAMESET> </HTML>
Puis, dans un document init_dynamique.html, nous utiliserions des liens "ciblés" vers le cadre "dynamique".
<HTML>
<BODY>
...début du document...
Vous pouvez maintenant aller à la diapo
<A href="slide2.html" target="dynamique">slide 2.</A>
...suite du document...
C'était très bien. Maintenant continuez par la
<A href="slide3.html" target="dynamique">slide 3.</A>
</BODY>
</HTML>
L'activation d'un de ces deux liens aurait ouvert un document dans le cadre nommé "dynamique" tandis que l'autre cadre, "fixe", aurait conservé son contenu initial.
Note : Une fois que le contenu d'un cadre est modifié dynamiquement, la définition de découpage originale ne reflète plus avec exactitude le véritable contenu de chaque cadre ; La définition du découpage, avec ses documents initiaux, est quant à elle invariante.
Il n'existe aucune méthode aujourd'hui pour encoder l'état complet d'un document multi-vues par une URL. C'est pourquoi de nombreux agents utilisateurs refusent de permettre aux utilisateurs d'enregistrer des signets pour une définition de découpage.
Le découpage en multi-vues peut rendre plus délicate la navigation "avant" et "arrière" dans l'historique de votre agent utilisateur.
Lorsque de nombreux liens du même document désignent la même cible, il est possible d'en alléger l'écriture en en définissant un une fois, puis en distribuant cette définition sur tous les attributs target de chaque élément. Ceci est réalisé en définissant l'attribut target au niveau de l'élément BASE.
Retournons à l'exemple précédent, mais cette fois en "factorisant" la définition de cible dans la déclaration de l'élément BASE, ce qui conduit à l'ôter des éléments A.
<HTML>
<HEAD>
<BASE target="dynamique">
</HEAD>
<BODY>
...début du document...
Vous pouvez maintenant aller à la diapo
<A href="slide2.html">slide 2.</A>
...suite du document...
C'est très bien. Maintenant continuez par la
<A href="slide3.html">slide 3.</A>
</BODY>
</HTML>
Plusieurs méthodes existent qui conduisent à désigner un cadre comme étant la cible d'un lien. Nous en exposons ici les interactions.
Les agents utilisateurs pourront le cas échéant fournir aux utilisateurs un mécanisme qui permet d'outrepasser l'attribut target.
A l'exception des noms réservés cités ci-dessous, les noms de cadres doivent commencer par une lettre alphabétique (a-zA-Z). Les agents utilisateurs devraient ignorer toute autre syntaxe.
Les noms de cadres suivants sont réservés et ont une signification particulière.
Nous recommandons vivement de joindre à la définition de découpage un contenu alternatif pour tous les agents utilisateurs qui ne supportent pas les cadres ou sont configurés pour les ignorer.
Les agents utilisateurs ne supportant pas les cadres devront afficher au moins la section BODY qui suit la définition de FRAMESET la plus extérieure du document. Les agents utilisateurs qui acceptent les cadres ignoreront cette section BODY sauf si leur configuration courante leur interdit de rendre les cadres.
<!--
The following is quite complicated because of the mixed
content model. However it's actually only meant to contain
either BODY or %block.
-->
<!ELEMENT NOFRAMES - -
(#PCDATA,((BODY,#PCDATA)|
(((%blocklevel)|%font|%phrase|%special|%formctrl),%block)))>
Balise de début : requise, Balise de fin : requise
L'élément NOFRAMES spécifie un contenu qui ne doit être affiché que si les cadres ne doivent pas l'être. Les agents utilisateurs qui supportent habituellement les cadres n'afficheront donc le contenu de la section NOFRAMES que lorsqu'ils sont configurés pour ignorer les découpages. Les agents utilisateurs ne supprotant pas les cadres afficheront le contenu d'une déclaration NOFRAMES en toutes circonstances.
Supposez que nous ayons un découapge exemple défini dans un fichier "top.html" qui désigne un document principal ("main.html") et une table des matières particulière ("table_des_matières.html") liée à ce document. Voici l'expression de "top.html" :
<HTML> <FRAMESET cols="50%, 50%"> <FRAME src="main.html"> <FRAME src="table_des_matières.html"> </FRAMESET> </HTML>
Que se passe t-il lors du chargement de "top.html" si l'agent utilisateur n'est pas configuré pour accepter les cadres ? L'utilisateur ne verrait absolument rien du fait qu'aucune alternative de contenu n'est spécifiée dans le BODY de "top.html". Si nous insérons "table_des_matières.html" et "main.html" directement dans la section BODY, nous solutionnons le problème de l'association des deux documents, mais obligerait les agents utilisateurs à récupérer les mêmes données deux fois : une copie associée aux cadres et une copie inserée dans la section BODY.
Il sera nettement plus économique d'inclure la table des matières en tête du fichier "main.html" dans un élément NOFRAMES :
<!-- main.html --> <HTML> <BODY> <NOFRAMES> ...la table des matières, ici... </NOFRAMES> ...le reste du document... </BODY> </HTML>
et de lier "main.html" à partir de "top.html" au cas où les cadres ne seraient pas affichés :
<!-- top.html --> <HTML> <FRAMESET cols="50%, 50%"> <FRAME src="main.html"> <FRAME src="table_des_matières.html"> </FRAMESET> <BODY> Cliquez <A href="main.html">ici</A> pour la version sans cadres. </BODY> </HTML>
<!ELEMENT IFRAME - - %block> <!ATTLIST IFRAME name CDATA #IMPLIED -- nom du cadre pour ciblage -- src %URL #IMPLIED -- source du contenu du cadre -- frameborder (1|0) 1 -- bordures ? -- marginwidth %Pixels #IMPLIED -- marge verticale en pixels -- marginheight %Pixels #IMPLIED -- marge horizontale en pixels -- scrolling (yes|no|auto) auto -- options de barre de défilement -- align %IAlign #IMPLIED -- alignement vertical ou horizontal -- height %Length #IMPLIED -- hauteur suggérée -- width %Length #IMPLIED -- largeur suggérée -- >
Balise de début : requise, Balise de fin : requise
Le document devant être inséré "en ligne" est désigné par l'attribut src de cet élément. Le contenu de l'élément IFRAME lui-même, ne devra être affiché que si l'agent utilisateur ne supporte pas le cadre ou n'est pas configuré pour le faire.
Pour tout agent utilisateur qui supporte les cadres, l'exemple suivant placerait un cadre en ligne entouré d'une bordure dans le texte du document.
<IFRAME src="foo.html" width="400" height="500"
scrolling="auto" frameborder="1">
[votre agent utilisateur ne supporte pas les cadres ou n'est pas configuré pour les afficher
. Cliquez pour récupérer
<A href="foo.html">le document associé.</A>]
</IFRAME>
Les cadres en ligne ne peuvent être redimensionnés (et de ce fait, ne comportent pas d'attribut noresize).
Note : Les documents HTML peuvent également être inclus dans d'autres documents HTML grâce à l'élément OBJECT. Voir la section concernant les inclusions de documents HTML pour plus de détails.