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

Corrigé

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.

 


Frame1
<HTML>
<HEAD>
<TITLE>HTML TUTOR FRAME1</TITLE>
</HEAD>
<FRAMESET Rows="33%,33%,*">
<FRAME SRC="entete.htm" NAME="EnTete">
<FRAME SRC="information.htm" NAME="Info1">
<FRAME SRC="information.htm" NAME="Info2">
</FRAMESET>
</HTML>

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>