Frames
Préambule
La création de frames nécessitant la manipulation de
plusieurs pages en même temps, il est plus facile de vous servir d'un éditeur
de texte pour créer ces pages. Les corrections ne se font plus dans une
fenêtre volante mais sont données sous forme de texte.
1. Définition
La page que vous regardez actuellement est composé de trois pages.
Son
organisation est montré sur la figure ci-contre. Les trois pages sont
FrameHeader, menuFrame et Principal. Le placement et les dimensions de ces pages
sont dans Html9, on peut considérer que Html9 appelle et place les trois pages.
2. Intérêt des Frames.
La possibilité d'afficher des informations indépendantes et reliées sur un
même écran, par exemple; comme sur cette page, un menu et une frame
présentant les parties de ce menu. Chacune des frames a toutes les possibilités
d'une page Html indépendante. Elle peut appeler une autre page dans sa frame.
Les frames peuvent aussi interagir entre elles.
3. Réalisation de Frames. Division
horizontale.
Réalisation de la page d'appel
La page à réaliser comporte 2 frames horizontales, l'une occupant 30% de
l'écran, l'autre le reste. La page se présentera ainsi
| .En Tête |
| .Page d'Information . . |
Réalisation de la page de base.
Nous appellerons cette page appel.htm
<HTML>
<HEAD>
<TITLE>Appel Frames</TITLE>
</HEAD>
<FRAMESET ROWS="30%,*">
<FRAME SRC="entete.htm" NAME="EnTete">
<FRAME SRC="information.htm" NAME="Info">
</FRAMESET>
</HTML>
Nous voyons que cette page ne comporte pas de corps <BODY></BODY>
, en fait elle ne comporte rien de visible par elle même, par contre il est
important de définir le titre <TITLE> et les Meta Tag, ces informations
étant les seuls prises en compte pour l'affichage sur le navigateur et dans
l'historique(Back, Retour).
Les frames sont définies entre : <FRAMESET et </FRAMESET>.
Comme pour les tables on définit des lignes par ROWS= .
Ici la premiere frame occupe une ligne de 30% de la hauteur utile de l'écran,
(hauteur de l'écran moins les en tête du navigateur), la 2ème frame le reste
,*
Le contenu des frames est définis par :
<FRAME SRC="entete.htm" NAME="EnTete"> .
Ou SRC= définit le nom du fichier contenant la page, Name= définit un nom
symbolique permettant le dialogue entre frames(optionnel). Pour que cette page
fonctionne, les fichiers entete.htm et information .htm doivent exister sous le
même répertoire que appel.htm.
Voici entete.htm
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="#FFFF80">
<CENTER><B><FONT SIZE=+2>En
Tête</FONT></B></CENTER>
</BODY>
</HTML>
Voici information.htm :
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="#FF8000">
<CENTER><B><FONT
SIZE=+2>Information</FONT></B></CENTER>
</BODY>
</HTML>
Pour testez cet exemple, créer dans votre répertoire d'essai
les fichiers précédents. Puis, dans une fenêtre supplémentaire de votre
navigateur, appeller le fichier appel.htm. Si vous
utilisez Netscape et que vous vouliez réessayer un fichier précédemment
chargé, vous verrez que le navigateur ne prend pas en compte les modifications
que vous avez faites en éditeur. Pour que le rechargement s'effectue
correctement vous devez appuyer sur la touche Shift,(majuscule transitoire) en
même temps que vous faites le rechargement(Reload) ou recharger la page par
Fichier, Ouvrir etc...
Si nous avions voulu décrire 3 frames , nous pourrions écrire :
Rows="33%,33%,*", essayer cette modification dans appel.htm, n'oubliez
pas de définir une autre frame, par <FRAME SRC= ......etc.
Vous pouvez prendre comme nom de fichier un de vos fichiers précédemment
écris tel que information.htm.
Voici l'aspect que devrait présenter votre page.
En Tête |
Information |
Information |
4. Division Verticale
Exemple de page à deux frames verticales :
<HTML>
<HEAD>
<TITLE>HTML TUTOR 6</TITLE>
</HEAD>
<FRAMESET COLS="30%,*">
<FRAME SRC="entete.htm" NAME="EnTete">
<FRAME SRC="information.htm" NAME="Info">
</FRAMESET>
</HTML>
Ce qui donnerait :
En Tête . |
Information . |
La syntaxe est similaire à la division en lignes :
Cols= pour colonne et indication de l'espace occupé 30% pour la première
colonne, et * c'est à dire le reste pour la 2ème colonne.
Exercice : modifiez l'exemple précédent pour créer 3 colonnes de 15%, 45% et
55%. les fichiers seront entete, information et information. Testez votre
exemple.
Corrigé
5. Mixage horizontal vertical.
Il faut remplacer la définition <FRAME SRC= par un
ensemble <FRAMESET ..... </FRAMESET> qui
définit le bon découpage.
Exemple: à partir du premier exemple 2 lignes occupant 20% et 80%.
<FRAMESET ROWS="20%,*">
<FRAME SRC="entete.htm" NAME="EnTete">
<FRAME SRC="information.htm" NAME="Info">
</FRAMESET>
Nous allons diviser la deuxième ligne en deux colonnes pour
obtenir ceci :

Pour ce faire nous remplaçons dans le fichier précédent la ligne :
<FRAME SRC=information.htm NAME="Info"> qui
donnait le contenu de la 2ème ligne par :
<FRAMESET COLS="15%,*">
<FRAME SRC="menu.htm" NAME="Menu" >
<FRAME SRC="information.htm" NAME="info">
</FRAMESET>
On a remplacé la définition du contenu d'une ligne par la définition de deux
frames en colonnes.
Avant de tester la modification précédente créer le fichier menu.htm
Corrigé
Vous allez maintenant créer la page suivante:

Au lieu de remplacer la deuxième ligne par la définition des deux frames,
c'est la première ligne que vous devez remplacer. Il faut aussi bien placer les
fichiers de pages.
Corrigé
6. Bordure
Vous pouvez supprimer les bordures séparant les frames en écrivant BORDER=0
dans l'exemple précédent (appel.htm), remplacer <FRAMESET
ROWS="20%,*"> par <FRAMESET
ROWS="20%,*" BORDER=0> . Ceci devrait vous
supprimer toutes les bordures.
7. Application

Nous pouvons utiliser sans beaucoup de modifications le fichier d'appel
précédent, insérer dans les définitions des frames SCROLLING="NO"
interdisant la présence des barres de défilement dans les deux premières
frames comme dans :
<FRAME SRC="entete.htm" NAME="Menu"
SCROLLING="NO">
Il vaut mieux dimensionner la première frame à 20% pour
pouvoir faire entrer l'image.
Contenu d'entete.htm , Cornet.gif, couleur de fond bleu.
Contenu de menu2.htm ; couleur de fond blanc
Trois images servant à la navigation, flecheG.gif, semapho.gif et flecheD.gif
Un texte Famille & C°
Une façon d'insérer ces 4 composants est de les grouper dans une table 1x4.
Contenu de information.htm; image de fond Granuleuxocre.jpg (background)
Un texte centré Ma Famille
Corrigé
Faire suite pour voir les interactions entre frames.
Frame2
<HTML>
<HEAD>
<TITLE>HTML TUTOR FRAME2</TITLE>
</HEAD>
<FRAMESET COLS="15%,45%,*">
<FRAME SRC="entete.htm" NAME="EnTete">
<FRAME SRC="information.htm" NAME="Info1">
<FRAME SRC="information.htm" NAME="Info2">
</FRAMESET>
</HTML>
Frame3
<HTML>
<HEAD>
<TITLE>Appel Frames</TITLE>
</HEAD>
<FRAMESET ROWS="20%,*">
<FRAME SRC="entete.htm" NAME="EnTete">
<FRAMESET COLS="15%,*">
<FRAME SRC="menu.htm" NAME="Menu" >
<FRAME SRC="nformation.htm" NAME="info">
</FRAMESET>
</FRAMESET>
</HTML>
Frame 4
<HTML>
<HEAD>
<TITLE>Appel Frames</TITLE>
</HEAD>
<FRAMESET ROWS="30%,*">
<FRAMESET COLS="15%,*">
<FRAME SRC="entete.htm" NAME="Menu" >
<FRAME SRC="menu.htm" NAME="info">
</FRAMESET>
<FRAME SRC="information.htm" NAME="EnTete">
</FRAMESET>
</HTML>
Application
appel.htm
<HTML>
<HEAD>
<TITLE>Appel Frames Application< /TITLE>
</HEAD>
<FRAMESET ROWS="20%,*">
<FRAMESET COLS="20%,*">
<FRAME SRC="entete.htm" NAME="entete"
SCROLLING="NO">
<FRAME SRC="menu.htm" NAME="menu"
SCROLLING="NO">
</FRAMESET>
<FRAME SRC="information.htm" NAME="information">
</FRAMESET>
</HTML>
entete.htm
<HTML>
<HEAD>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#80FFFF">
<IMG SRC="images/cornet.gif" HEIGHT=58 WIDTH=100>
</BODY>
</HTML>
menu.htm
<HTML>
<HEAD>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#FFFFFF">
<TABLE WIDTH="100%" > <TR>
<FONT SIZE=+3>Menu</FONT>
<p>
<FONT SIZE=+2>
Item 1 <BR>
Item 2 <BR>
Item 3 <BR>
Item 4 <BR>
</FONT>
</TR>
</BODY>
</HTML>
information.htm
<HTML>
<HEAD>
</HEAD>
<BODY TEXT="#000000"
BACKGROUND="images/Granuleuxocre.jpg">
<CENTER><B><FONT SIZE=+3>Ma
Famille</FONT></B></CENTER>
</BODY>
</HTML>
menu2.htm
<HTML>
<HEAD>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#FFFFFF">
<TABLE WIDTH="100%"> <TR>
<TD WIDTH="10%"><IMG SRC="images/flecheG.gif"
HEIGHT=38 WIDTH=35></TD>
<TD WIDTH="10%"><IMG SRC="images/semapho.gif"
HEIGHT=32 WIDTH=30></TD>
<TD WIDTH="10%"><IMG SRC="images/flecheD.gif"
HEIGHT=38 WIDTH=35></TD>
<TD> <CENTER><P><FONT SIZE=+3>Famille &
C°</FONT></P></CENTER> </TD>
</TR>
</TABLE>
</BODY>
</HTML>