Réaliser sa page Web
   Leçon 14 : Les frames

Le principe des cadres

Les cadres, plus connus sous le nom de frames, nous permettent de créer des fenêtres dans une page Web. Chacune de ces fenêtres contiendra une page Web indépendante. Le document principal, devra contenir à la place de la balise usuelle <BODY> </BODY>, une directive <FRAMESET> </FRAMESET>.

Ainsi, un programme définissant des cadres aura la structure principale suivante:
<HTML> Début du programme (c'est la première ligne)
<HEAD> Début de l'en-tête du programme
<TITLE> Titre du programme </TITLE>
</HEAD> Fin de l'en-tête du programme
<FRAMESET> Début de votre programme
C'est dans cette partie vous décrirez vos cadres par des directives du type <FRAME SRC="fichier.html" name="nom du cadre">
</FRAMESET> Fin du corps du programme
</HTML> Fin du programme

Voyons quelques exemples :


Division du document en fenêtres horizontales

<HTML>
<HEAD>
<TITLE>Titre du document
</TITLE>
</HEAD>
<FRAMESET ROWS="20%,80%">
    <FRAME SRC="fenetre1.htm">
    <FRAME SRC="fenetre2.htm" name="window2">
</FRAMESET>
</HTML>
Avec cette commande, nous avons divisé le document en deux cadres horizontaux dont l'un occupe 20% du document et l'autre 80%. Chaque fenêtre contient son propre document HTML (les fichiers fenetre1.htm et fenetre2.htm). Nous avons donné un nom, window2, à la seconde fenêtre, qui servira à nommer ce cadre dans un lien TARGET="window2" décrit plus bas.


Voici ce que vous obtiendrez.





Division en trois fenêtres

<HTML>
<HEAD>
<TITLE>Titre du document
</TITLE>
</HEAD>
<FRAMESET ROWS="30%,50%,20%">
    <FRAME SRC="fenetre1.htm" name="window1">
    <FRAME SRC="fenetre2.htm" name="window2">
    <FRAME SRC="fenetre3.htm" name="window3">
</FRAMESET>
</HTML>
Nous avons divisé le document en trois fenêtres horizontales. La première occupe 30%, la deuxième 50% et la troisième 20% du document. Avec <FRAMESET ROWS="30%,50%,*"> nous aurions obtenu le même résultat. L'étoile "*" prendra par défaut la valeur de 20% qui est le reste de 100% - (50%+30%).

Voici ce que vous obtiendrez.





Division du document en fenêtres verticales

<HTML>
<HEAD>
<TITLE>Titre du document
</TITLE>
</HEAD>
<FRAMESET COLS="40%,60%">
    <FRAME SRC="fenetre1.htm">
    <FRAME SRC="fenetre2.htm" name="window2">
</FRAMESET>
</HTML>
Nous avons divisé le document en deux fenêtres verticales dont l'une occupe 40% du document et l'autre 60% <FRAMESET COLS="40%,60%">.

Voici ce que vous obtiendrez.





Division en trois fenêtres

<HTML>
<HEAD>
<TITLE>Titre du document
</TITLE>
</HEAD>
<FRAMESET ROWS="*,60%,*">
<FRAME SRC="fenetre1.htm" name="window1">
    <FRAME SRC="fenetre2.htm" name="window2">
    <FRAME SRC="fenetre3.htm" name="window3">
</FRAMESET>
</HTML>
Ici <FRAMESET ROWS="*,60%,*"> est équivalent à <FRAMESET ROWS="20%,60%,20%">.

Voici ce que vous obtiendrez.





Division du document en fenêtres mixtes

<HTML>
<HEAD>
<TITLE>Titre du document
</TITLE>
</HEAD>
<FRAMESET COLS="30%,70%">
    <FRAME SRC="fenetre1.htm" name="nom1">
       <FRAMESET ROWS="35%,65%">
          <FRAME SRC="fenetre2.htm" name="nom2">
          <FRAME SRC="fenetre3.htm" name="nom3">
       </FRAMESET>
</FRAMESET>
</HTML>
Dans le <FRAMESET COLS="30%,70%">, nous avons mis le premier fichier fenetre1.html dans la zone de grandeur de 30%; ensuite, la zone de grandeur de 70%, nous l'avons divisée en deux fenêtres verticales dont l'une occupe 35% (fenetre2.htm) et l'autre occupe 65% (fenetre3.htm).

Voici ce que vous obtiendrez.





Division du document en 5 fenêtres

<HTML>
<HEAD>
<TITLE>Titre du document
</TITLE>
</HEAD>
<FRAMESET ROWS="40%,60%">
    <FRAMESET COLS="50%,*">
       <FRAME SRC="fenetre1.htm" name="nom1">
       <FRAME SRC="fenetre2.htm" name="nom2">
    </FRAMESET>
    <FRAMESET COLS="33%,*,*">
       <FRAME SRC="fenetre3.htm" name="nom3">
       <FRAME SRC="fenetre4.htm" name="maman">
       <FRAME SRC="fenetre5.htm" name="papa">
    </FRAMESET>
</FRAMESET>
</HTML>
Nous avons divisé le document en deux fenêtres verticales. La première a été divisée en deux parties égales et la deuxième fenêtre a été divisée en trois autres parties égales.

Voici ce que vous obtiendrez.





Compléments à FRAMESET et FRAME

En plus des attributs ROWS et COLS, la balise FRAMESET accepte les suivants:
  • Bordure des cadres : Si vous voulez supprimer les bordures, utilisez <FRAMESET BORDER="0">
  • Couleur des bordures : La commande est <FRAMESET BORDERCOLOR="#rrggbb">


La balise FRAME peut aussi avoir comme attributs :

  • NORESIZE : Interdit le redimensionnement de ce cadre
  • Barre de défilement : La commande est <FRAME SRC="xxxx.htm" SCROLLING="YES/NO/AUTO"> comme dans l'exemple ci-dessous.

    <HTML>
    <HEAD>
    <TITLE>Titre du document
    </TITLE>
    </HEAD>
    <FRAMESET ROWS="30%,70%">
        <FRAME SRC="bordure1.htm" name="nom1" SCROLLING="YES">
        <FRAMESET COLS="35%,65%">
           <FRAME SRC="bordure2.htm" NAME="nom2" SCROLLING="AUTO">
           <FRAME SRC="bordure3.htm" SCROLLING="NO">
        </FRAMESET>
    </FRAMESET>
    </HTML>


    Voici ce que vous obtiendrez.

    <FRAME SCROLLING="AUTO"> va créer des barres de défilement automatiquement et ce, dès que le contenu de la page l'excède. C'est le cas pour la deuxième fenêtre dans l'exemple précédant.
    <FRAME SCROLLING="YES"> va créer des barres de défilement à droite et en bas de la page que son contenu soit suffisant ou non. C'est le cas pour la première fenêtre dans l'exemple précédant.
    <FRAME SCROLLING="NO"> ne va créer aucune barre de défilement même si la page est insuffisante pour son contenu. C'est le cas pour la troisième fenêtre dans l'exemple précédant.

  • Largeur de la marge : L'attribut est <FRAME MARGINWIDTH="Valeur">.

    <HTML>
    <HEAD>
    <TITLE>Titre du document
    </TITLE>
    </HEAD>
    <FRAMESET ROWS="30%,70%">
        <FRAME SRC="width1.htm" MARGINWIDTH="25">
        <FRAMESET COLS="35%,65%">
           <FRAME SRC="width2.htm" MARGINWIDTH="80">
           <FRAME SRC="width3.htm" MARGINWIDTH="150">
        </FRAMESET>
    </FRAMESET>
    </HTML>


    Voici ce que vous obtiendrez.

    L'attribut <FRAME MARGINWIDTH="Valeur"> va laisser un espace à droite et à gauche du contenu de la fenêtre. La valeur des marges de la fenêtre est une valeur donnée en pixels comme démontré à l'exemple précédant.

  • Hauteur de la marge : La commande est <FRAME MARGINHEIGTH="Valeur">.

    <HTML>
    <HEAD>
    <TITLE>Titre du document
    </TITLE>
    </HEAD>
    <FRAMESET ROWS="30%,70%">
        <FRAME SRC="height1.htm" MARGINHEIGHT="100">
        <FRAMESET COLS="35%,65%">
           <FRAME SRC="height2.htm" MARGINHEIGHT="20">
           <FRAME SRC="height3.htm" MARGINHEIGHT="75">
        </FRAMESET>
    </FRAMESET>
    </HTML>


    Voici ce que vous obtiendrez.

    La commande <FRAME MARGINHEIGHT="Valeur"> va laisser un espace en haut et en bas du contenu de la fenêtre.




La directive TARGET

Cette directive permet de spécifier la zone de l'écran ou il convient de placer l'URL spécifié dans un lien HREF. Son utilisation principale est dans un contexte de cadres. Dans les liens de la table des matières il faut indiquer que les pages citées doivent être affichées dans la seconde fenêtre. Ceci se fait par la syntaxe :

<A HREF="fichier2.htm" TARGET="Nom_de_la_fenêtre"> Message </A>

La variable Nom_de_la_fenêtre sert à référencer les différentes fenêtres, et elle peut être initialisée de différentes façons, par une directive NAME="valeur"

  • un région d'un document quelconque peut être nommé,
  • une document quelconque peut être nommé
  • une fenêtre créée par un FRAMESET peut être nommé

Ainsi dans un document multi fenêtres, vous pouvez faire en sorte d'appeler un document dans une autre fenêtre depuis une fenêtre de contrôle.
L'appel à une fenêtre se fait par la variable TARGET :

  • dans une définition de lien : <A HREF="fichier2.htm" TARGET="Nom_de_la_fenêtre">votre texte</A>
  • dans un champ AREA : <AREA SHAPE="shape" COORDS="x,y,..." HREF="fichier2.htm" TARGET="Nom_de_la_fenêtre">
  • dans une balise FORM : <FORM ACTION="fichier2.htm" TARGET="Nom_de_la_fenêtre">

Ainsi chacune de ces balises appellera la fenêtre définie par la directive NAME.
La balise TARGET doit être définie par une chaîne de caractères commençant par une lettre de l'alphabet.
Enfin des valeurs particulieres peuvent être attribués à TARGET, ils commencent par le caractère _ :

  • TARGET="_blank" : force l'appel d'une nouvelle fenêtre. Cliquez ici
  • TARGET="_self" : Force l'appel d'une page dans la même fenêtre (Evite les divisions). Cliquez ici
  • TARGET="_parent" : Force l'appel à la page mère. Cliquez ici
  • TARGET="_top" : Force l'appel à la première page de la liste. Cliquez ici
   On résume :
  • On donne un nom à toutes ses fenêtres dans le fichier qui définit les frames.
  • On redirige les liens d'un frame vers un autre par un <A HREF="..." TARGET="nom fenetre">clic<A>