Utiliser une frame

LES FRAMES

Utiliser une frame.

L'utilisation des frames vous permet de diviser la fenêtre affichant votre page Web en plusieurs cadres (parties distinctes) indépendantes les uns des autres. Ceci vous permettra d'afficher votre menu dans un cadre et d'afficher les pages liées dans un autre.

Il faut souligner le fait que tous les browser n'affichent pas les frames

Vous pourrez diviser votre fenêtre avec une ou plusieurs frames :
- horizontalement
- verticalement
- horizontalement et verticalement

Nous verrons la création des frames dans AOL press, cette possibilité étant proposé par le logiciel. Explorer et Composer n'incluant pas cette option, il sera nécessaire de recourir à WordPad pour pouvoir créer des frames.

Créer une frame.

- Dans le menu Fichier, sélectionner l'option New
- Sélectionner l'option New frames set
- Se positionner sur le bord de la fenêtre (du côté où vous voulez créer un cadre), une flèche apparaît
- Cliquer et sans lâcher faire glisser le pointeur de la souris
- Il faudra enregistrer chaque cadre séparément, ainsi que la fenêtre générale (regroupant tous les cadres).

Lorsque vous placer l'attribut TARGET dans un lien, vous avez la possibilité d'utilser quelques noms de cadres spéciaux en plus de ceux que vous avez définis avec FRAME NAME :

blank charge le lien dand une nouvelle fenêtre sans nom.
self charge le lien dans le cadre actif, remplaçant le document actuellement affiché dans ce cadre.
top charge le lien dans la totalité de la fenêtre du navigateur.
parent charge le lien sur le cadre parent si le cadre actif est imbriqué dans d'autres cadres (cela donne le même résultat que top, à moins que l'imbrication ait été réalisée sur plus d'un niveau).

Supprimer une frame.

- Se positionner dans la frame à supprimer
- Dans le menu Format, sélectionner l'option Frames
- Sélectionner Delete frame

Créer une frame.

Comme nous l'avons vu précédemment pour créer une frame il faut utiliser un logiciel de traitement de texte. Nous utiliserons WordPad de Windows.

- Cliquer sur Démarrer, Programmes, Accessoires, WordPAd
- Saisir les balises suivantes :

Dans ce listing l'écran est découpé verticalement en deux parties (deux colonnes).

FRAMESET définit en pourcentage la largeur des cadres (Dans notre exemple le premier cadre occupera 20% de l'écran et le second * ce qui veut dire que le navigateur utilise la place restant pour l'affichage dans l'autre cadre).

COLS définit un découpement d'écran vertical.

ROWS définit un découpement d'écran horizontal.

FRAME SRC indique quel fichier sera affiché dans le cadre.

NAME permet de donner un nom à un cadre, ce qui permet ensuite de modifier l'affichage dans ce cadre

MARGINWIDTH permet de spécifier la taille des marges de gauche et de droite du cadre créé

MARGINEIGHT permet de spécifier la taille des marges du haut et du bas du cadre créé

FRAMEBORDER=yes, no : indique si le cadre doit avoir une bordure

BORDER (Netscape) permet d'ajuster l'espace entre les cadres. (valeur en pixels)

NORESIZE interdit l'utilisateur de redimentionner le cadre.

SCROLLING=yes, no, auto : affichage de la barre de défilement

Pour réaliser cette écran voici les balises HTML utilisés :

Changer le contenu d'une frame
Vous aurez besoin de changer le contenu d'une frame pour afficher une nouvelle page, lorsqu'un visiteur cliquera sur l'une des options de votre menu. Pour pouvoir changer le contenu d'une fenêtre il faut au préalable donner un nom à cette fenêtre. Si nous reprenons l'exemple ci-dessus, nous remarquons que la frame contenant le fichier inslien.html est complétée par l'attibut NAME affectée de la valeur Entree.

Pour pouvoir afficher un nouveau fichier dans cette frame, il suffit dans la balise de liaison de notifier cette attribut. Pour expliquer tout cela rien de tel qu'un exemple.

Prenons l'affichage de cette écran. Il est composé de trois frames.

Frame1- Entête (Entête.html)
Frame2 Menu (Menu.html)	Frame3 Présentation (inslien.html)

Si l'on clique sur l'un des boutons du menu (Frame2), le contenu de la fenêtre Présentation (Frame3) doit être modifié. Résultat obtenu quand vous avez cliqué sur le bouton "les frames". Le fichier frame.html est venu remplacer le fichier qui se trouvait dans la frame3.

La balise de liaison est alors présentée sous cette forme.
<A HREF="frame.html" TARGET="Entree">
<IMG SRC="frame.gif" WIDTH="109" HEIGHT="19" ALT="Les Frames">
</A>

On remarque que l'attribut TARGET a été ajouté avec la valeur Entree. Elle indique donc au navigateur qu'il faut changer l'affichage de la frame3 par le fichier frame.html. Ce qui donne :

Frame1- Entête (Entête.html)
Frame2 Menu (Menu.html)	Frame3 Les frames (frame.html)

Rappel :
Les autres attributs de la balise TARGET sont indiquées plus haut dans la page.