13. Cadres (frames)

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 constitue une page Web indépendante.
Cependant, dans le document où vous programmerez les frames, il faut remplacer la balise <BODY> </BODY> par <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 délimitée par <FRAMESET> </FRAMESET> où vous décrirez vos cadres.

</FRAMESET> Fin du corps du programme
</HTML> Fin du programme (c'est la dernière ligne)

Voyons quelques exemples:

a. Division du document en fenêtres horizontales

Premier exemple

Division en deux fenêtres:

<HTML> <HEAD> <TITLE>Titre du document </TITLE> </HEAD> <FRAMESET ROWS="20%,80%"> <frame src="fenetre1.html"> <frame src="fenetre2.html" name="window2"> </FRAMESET> </HTML>

Résultat:

Voici ce que vous obtiendrez .

<FRAMESET ROWS="20%,80%"> Avec cette commande, nous avons divisé le document en deux cadres horizontaux dont l'un occupe 20% du document et l'autre 80%.

<FRAME SRC="fenetre1.html"> La première fenêtre est un document HTML ordinaire.

<FRAME SRC="fenetre2.html" name="window2">La deuxième fenêtre aussi; cependant, nous lui avons donné un nom, window2, qui servira à une application ultérieure.

Deuxième exemple

Division en trois fenêtres:

<HTML> <HEAD> <TITLE>Titre du document </TITLE> </HEAD> <FRAMESET ROWS="30%,50%,20%"> <frame src="fenetre1.html" name="window1"> <frame src="fenetre2.html" name="window2"> <frame src="fenetre3.html" name="window3"> </FRAMESET> </HTML>

Résultat:

Voici ce que vous obtiendrez.

Avec <FRAMESET ROWS="30%,50%,20%">, 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 obtiendrons le même résultat. L'étoile " * " prendra par défaut la valeur de 20% qui est le reste de 100% - (50%+30%).

b. Division du document en fenêtres verticales

Premier exemple

Division en deux fenêtres:

<HTML> <HEAD> <TITLE>Titre du document </TITLE> </HEAD> <FRAMESET COLS="40%,60%"> <frame src="fenetre1.html"> <frame src="fenetre2.html" name="window2"> </FRAMESET> </HTML>

Résultat:

Voici ce que vous obtiendrez.

<FRAMESET COLS="40%,60%"> Nous avons divisé le document en deux fenêtres verticales dont l'une occupe 40% du document et l'autre 60%.

Deuxième exemple

Division en trois fenêtres:

<HTML> <HEAD> <TITLE>Titre du document </TITLE> </HEAD> <FRAMESET ROWS="*,60%,*"> <frame src="fenetre1.html" name="window1"> <frame src="fenetre2.html" name="window2"> <frame src="fenetre3.html" name="window3"> </FRAMESET> </HTML>

Résultat:

Voici ce que vous obtiendrez.

<FRAMESET ROWS="*,60%,*"> est équivalente à <FRAMESET ROWS="20%,60%,20%">.

c. Division du document en fenêtres mixtes

Premier exemple

<HTML> <HEAD> <TITLE>Titre du document </TITLE> </HEAD> <FRAMESET COLS="30%,70%"> <frame src="fenetre1.html name="nom1"> <FRAMESET ROWS="35%,65%"> <frame src="fenetre2.html" name="nom2"> <frame src="fenetre3.html" name="nom3"> </FRAMESET> </FRAMESET> </HTML>

Résultat:

Voici ce que vous obtiendrez.

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% (fenêtre2) et l'autre occupe 65% (fenêtre3).

Deuxième exemple

<HTML> <HEAD> <TITLE>Titre du document </TITLE> </HEAD> <FRAMESET ROWS="40%,60%"> <FRAMESET COLS="50%,*"> <frame src="fenetre1.html" name="nom1"> <frame src="fenetre2.html" name="nom2"> </FRAMESET> <FRAMESET COLS="33%,*,*"> <frame src="fenetre3.html" name="nom3"> <frame src="fenetre4.html" name="maman"> <frame src="fenetre5.html" name="papa"> </FRAMESET> </FRAMESET> </HTML>

Résultat:

Voici ce que vous obtiendrez.


Nous avons divisé le document en deux fenêtres horizontales. 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.

d. Bordure des cadres

Soit la page
suivante.

Si vous voulez supprimer les cadres, la commande est <FRAMESET BORDER=0>comme dans l'exemple ci-dessous.

<HTML> <HEAD> <TITLE>Titre du document </TITLE> </HEAD> <FRAMESET COLS="30%,70% BORDER=0"> <frame src="bordure1.html" name="nom1"> </FRAMESET COLS="45%,55%"> <frame src="bordure2.html" name="nom2"> <frame src="bordure3.html" name="nom3"> </FRAMESET> </FRAMESET> </HTML>

Résultat:

Voici ce que vous obtiendrez.

e. Couleur des bordures

La commande est <FRAMESET BORDERCOLOR="#$$$$$$">comme dans l'exemple ci-dessous.

<HTML> <HEAD> <TITLE>Titre du document </TITLE> </HEAD> <FRAMESET COLS="30%,70% BORDERCOLOR="#FFFF99"> <frame src="bordure1.html" name="nom1"> </FRAMESET COLS="35%,65%"> <frame src="bordure2.html" name="nom2"> <frame src="bordure3.html"> </FRAMESET> </FRAMESET> </HTML>

Résultat:

Voici ce que
vous obtiendrez.

f. Barre de défilement

La commande est <FRAME 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.html" name="nom1" SCROLLING="YES"> </FRAMESET COLS="35%,65%"> <frame src="bordure2.html" name="nom2" SCROLLING="AUTO"> <frame src="bordure3.html" SCROLLING="NO"> </FRAMESET> </FRAMESET> </HTML>

Résultat:

Voici ce que
vous obtiendrez.

La commande <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.

La commande <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.

La commande <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.

g. Largeur de la marge

La commande est <FRAME MARGINWIDTH=$$$>.

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

Résultat:

Voici ce que
vous obtiendrez.

La commande <FRAME MARGINWIDTH=$$$> 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.

h. Hauteur de la marge

La commande est <FRAME MARGINHEIGTH=$$$>.

<HTML> <HEAD> <TITLE>Titre du document </TITLE> </HEAD> <FRAMESET ROWS="30%,70%"> <frame src="fichier1.htm" MARGINHEIGHT=100> </FRAMESET COLS="35%,65%"> <frame src="fichier2.htm" MARGINHEIGHT=20> <frame src="fichier3.htm" MARGINHEIGHT=75> </FRAMESET> </FRAMESET> </HTML>

Résultat:

Voici ce que
vous obtiendrez.

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

i. Liens dans les cadres

Cliquez sur l'exemple qui suit pour avoir des explications:
Exemple