Chapitre suivantIndex des CoursChapitre prcedentChapitre 5

Les frames.

 

    1. C'est quoi les frames ?
    2. Le conteneur <FRAMESET>
    3. La balise <FRAME>
    4. Les navigateurs non compatibles
    5. Cadres locaux (<IFRAME>)
    6. Liens vers d'autres frames



C'est quoi les frames ?

Auparavant, les navigateurs ne pouvaient afficher qu'un seul fichier HTML mais avec la technologie développée par Netscape, on peut désormais diviser en plusieurs zones la page affichée par le navigateur, ces zones ou fenêtres ou encore cadres se nomment frames. Les frames sont apparues avec la version 3.0. Même si bon nombre de webmaster les utilisaient, elle n'étaient pas une composante officielle du langage.

Le conteneur <FRAMESET>.

La balise <FRAMESET> prend la place du tag <BODY>, c'est elle qui dans un premier temps va définir les cadres, qu'ils soient verticaux ou horizontaux, et leurs dimensions (en % ou en pixels).

Voici deux exemples (les plus courants) ainsi que le code source.

  1. Le premier contient deux cadres horizontaux appelés Zone 1 et Zone2.
  2. Le deuxième contient aussi deux cadres horizontaux appelés Zone 1 et Zone2 et, un cadre vertical appelé Zone 3.

Exemple 1. 

 <FRAMESET ROWS="20%,80%"> 
 <FRAME SRC="zone1.htm" NAME="ZONE1"> 
 <FRAME SRC="zone2.htm" NAME="ZONE2"> 
 </FRAMESET>

Exemple 2. 

 <FRAMESET ROWS="80%,20%"> 
 <FRAMESET COLS="20%,80%"> 
 <FRAME SRC="zone1.htm" NAME="ZONE1"> 
 <FRAME SRC="zone2.htm" NAME="ZONE2"> 
 </FRAMESET> 
 <FRAME SRC="zone3.htm" NAME="ZONE3"> 
 </FRAMESET>

Voici les attributs du conteneur <FRAMESET>.
Les attributs ROWS et COLS :

Les attributs ROWS et COLS définissent le type de cadre, qui peut être vertical (ROWS - rangée) ou horizontal (COLS - colonnes). Ils prennent une liste de valeurs séparées par des virgules. Ces valeurs sont, sous forme de pourcentage entre 1 et 100 (valeurs relatives) ou sous forme de pixel (valeurs absolues).

Deux remarques: si une valeur manque ou est remplacée par une étoile (*) la colonne ou rangée s'ajustera automatiquement, de plus la hauteur de toutes les rangées ou la largeur de toutes les colonnes doit correspondre à la hauteur ou à la largeur de la fenêtre du navigateur, sinon la dernière valeur ne sera pas prise en compte et la fenêtre ou rangée s'ajustera automatiquement à l'écran.

Exemple de deux colonnes, qui ont comme valeur 20% et 80 %. 

 <FRAMESET COLS="20%,80%">


Exemple de deux colonnes, l'une d'une largeur de 50 pixels et l'autre s'ajustant automatiquement à la fenêtre du navigateur. 

<FRAMESET COLS="50,*">

L'attribut FRAMEBORDER.

Cet attribut permet de déterminer si les cadres auront ou n'auront pas de bordure. Il à deux valeurs YES ou NO. 

  FRAMEBORDER=YES OU FRAMEBORDER=NO


L'attribut BORDER.

Cet attribut permet de déterminer la taille des bordures entourant les cadres. Il peut prendre plusieurs valeurs ex: BORDER=n, n étant une valeur en pixels définissant la taille de la bordure. La valeur 0 indique aucune bordure. 

  BORDER=0 ou par exemple BORDER=5

L'attribut BORDERCOLOR.

Cet attribut permet de déterminer la couleur de l'ensemble des bordures des cadres. Il suffit pour cela de spécifier une couleur sous forme de nom ou de sa valeur hexadécimale . 

 BORDERCOLOR="red" ou BORDERCOLOR="#FF0000"


L'attribut FRAMESPACING.

Cet attribut permet de déterminer un espace entre les cadres. Il peut prendre plusieurs valeurs ex: FRAMESPACING=n, n étant une valeur en pixels définissant l'espace entre les cadres. La valeur 0 indique aucun espace. 

 FRAMESPACING=0 ou par exemple FRAMESPACING=5


La balise <FRAME>.

La commande FRAME permet de définir un cadre à l'intérieur du conteneur <FRAMESET>. Elle a plusieurs attributs, les plus importants étant SRC et NAME.

L'attribut SRC.

Cet attribut indique l'URL (chemin) du document HTML qui sera affiché dans un cadre spécifique. 

<FRAME SRC="zone1.htm">

L'attribut NAME.

Cet attribut permet de donner un nom à un cadre, ce qui permettra ensuite de l'appeler avec l'attribut TARGET, attention majuscule différent de minuscule. 
 <FRAME SRC="zone1.htm" NAME="ZONE1">

Les attributs MARGINWIDTH et MARGINHEIGHT.

MARGINWIDTH permet de spécifier la grandeur des marges de gauche et de droite du cadre crée, la valeur doit être exprimée en pixels, elle peut avoir comme valeur 0.

MARGINHEIGHT permet de spécifier la grandeur des marges de haut et de bas du cadre crée, la valeur doit être exprimée en pixels, elle peut avoir comme valeur 0. 

 <FRAME SRC="zone1.htm" NAME="ZONE1" MARGINWIDTH=2 MARGINHEIGHT=2>


L'attribut FRAMEBORDER.

Cet attribut permet de déterminer si les cadres auront ou n'auront pas de bordure. Deux valeurs YES ou NO. 

 <FRAME SRC="zone1.htm" NAME="ZONE1" FRAMEBORDER=NO>

L'attribut BORDER (Netscape uniquement).

Cet attribut permet d'ajuster l'espace entre les cadres. La valeur doit être en pixels. 

 <FRAME SRC="zone1.htm" NAME="ZONE1" BORDER=2>

L'attribut NORESIZE.

En utilisant cet attribut vous interdisez à l'utilisateur de redimensionner les cadres. Par défaut les cadres peuvent être redimensionnés. 

 <FRAME SRC="zone1.htm" NAME="ZONE1" NORESIZE>

L'attribut SCROLLING.

Cet attribut permet d'attribuer ou non une barre de défilement (scrollbar) à un cadre. Il possède trois valeurs :

  1. YES : Indique que la barre de défilement sera toujours visible.
  2. NO : Indique que la barre de défilement ne sera jamais visible (à tester avant de l'utiliser).
  3. AUTO : Indique que le navigateur déterminera si la barre de défilement est nécessaire. 
 <FRAME SRC="zone1.htm" NAME="ZONE1" SCROLLING="AUTO">

Les navigateurs non compatibles.

Même si il est de plus en plus rare de trouver des navigateurs non compatibles il faut néanmoins ne pas négliger cet aspect sous peine de se passer de quelques visiteurs. La technique consiste à utiliser les balises <NOFRAME> et </NOFRAME>. Ces balises permettent de spécifier un texte HTML en version normale. Entre ces balises il faut donc théoriquement développer un deuxième site vous pouvez pour simplifier le travail (ouf !!) préciser des regrets polis et insérer des liens vers les sites officiels de Microsoft et Netscape pour que le visiteur opte pour une mise à jour.

Exemple d'utilisation des balises <NOFRAME> et </NOFRAME>. 

 

<FRAMESET ROWS="20%,80%"> 
<FRAME SRC="zone1.htm" NAME="ZONE1"> 
<FRAME SRC="zone2.htm" NAME="ZONE2"> 
</FRAMESET> 
<NOFRAMES> 
<BODY> 
Désolé mais ce site comme vous pouvez le voir utilise la technique des frames. Merci de faire la mise à jour de votre navigateur chez Microsoft ou Netscape. 
</BODY></NOFRAMES>

Cadres locaux (<IFRAME>).

La technique des cadres locaux s'obtient avec la balise <IFRAME> elle permet d'insérer une fenêtre à n'importe quel endroit de votre document. Cette fenêtre fera référence à un autre document HTML, la balise <IFRAME> doit être dans le corps de votre document, c'est-à-dire entre les balises <BODY> et </BODY>. Attention cette balise est spécifique à I.Explorer malgré qu'elle a été approuvé e par le W3C. Elle a les même attributs que la balise <FRAME> c'est à dire :

Elle possède en plus les attributs HEIGHT et WIDTH qui déterminent la hauteur et la largeur du cadre inséré dans votre page. Valeur en pixels. Note : Un texte de remplacement (pour Netscape) peut être mis entre <IFRAME> et </IFRAME>

Exemple d'un cadre local. 

 <IFRAME SRC="iframe.htm" NAME="ZONE1" HEIGHT="80" WIDTH="150"> 
    Désolé mais votre navigateur ne supporte pas les cadres locaux. 
  </IFRAME>



Liens vers d'autres frames.

Normalement, les pages appelées par des liens s'affichent dans la frame où les liens ont été activés. L'attribut TARGET permet d'appeler un autre cadre par le nom défini avec l'attribut NAME précédemment. Mais il existe des noms réservés de frame cible, voici les différentes valeurs.

Valeur Signification
_self L'URL cible va s'afficher dans la même frame que le lien.
_parent L'URL cible va s'afficher dans la structure externe.
_blank L'URL cible va s'afficher dans une nouvelle fenêtre ouverte par le navigateur.
_top L'URL cible va s'afficher dans toute la fenêtre du navigateur et les frames disparaissent.



Exemple de lien vers un autre cadre. 

 <A HREF="page.htm" TARGET="ZONE2">

Exemple de lien externe avec la valeur _top. 

 <A HREF="http://www.allhtml.com" TARGET="_top">

 

Chapitre prcedentIndex des CoursChapitre suivant

Révisé le :21-Jan-2009|©2009 www.technologuepro.com