Cours HTML- Les Frameset ou Frames - Les Dossiers

Cours HTML

Les Frames simples

En ajoutant des frameset à votre page web, vous pourrez afficher plusieurs pages à la fois. Regardez l'exemple ci-dessous, vous voyez une pages appelée frame.html en noir. Cette page contient le frameset. Le frameset ne peut pas contenir le corps du site (BODY). Il n'y a ni texte ni images affichées dans frame.html. Cette page va se décomposer en 2 pages web séparées.Les pages web qui sont affichées à l'intérieur sont nommées page1.html et page2.html, ces 2 pages sont montrées en rouge ci-dessous.

Créons notre propre frameset maintenant. Il faudra créer d'abord 2 pages simples appelées page1.html et page2.html. Si ces pages ne sont pas créées, quand vous afficherez votre frameset vous aurez un message d'erreur. Ensuite il faut créer la page du framset, frames.html. Quand vous utilisez des balises de frameset, vous n'avez pas besoin d'utiliser des balises body, les balises frameset les remplace.

Nous avons juste à définir la position des frames dans le framset. Pour y arriver, nous ajoutons des balises lignes (rows) a la balise frameset. C'est avec la balise ligne (rows) que nous ajustons la taille des frames. Nous mettrons la frame du haut à 100 pixels , et puisque nous voulons que la frame inférieure prenne le reste de l'espace disponible dans la page nous utiliserons une asterisque (*) comme variable. Bien sur en utilisant des balises colonnes (Cols) nous separerons les frames gauche et droite.

<HTML>
<HEAD>
<TITLE>Ma première Frame</TITLE>
</HEAD>
<FRAMESET ROWS=“100,*”>

</FRAMESET>
</HTML>

Les frames sont faites de manière similaires aux tableaux. Une fois que vous avez defini le frameset, il faut définir les frames qui iront dans le frameset.

<FRAME NAME=top SRC=page1.html>

La balise frame est defini selon 2 paramètres. Le premier est le nom de la page. Le second paramètre est la source, cela informe le framset sur la page qu'il doit ouvrir.

Ajoutons les frames:

<HTML>
<HEAD>
<TITLE>Ma première Frame</TITLE>
</HEAD>
<FRAMESET ROWS=“100,*”>
<FRAME NAME=top SRC=page1.html>
<FRAME NAME=bottom SRC=page2.html>
</FRAMESET>
</HTML>

Avant de regarder cette page avec votre navigateur, il faut créer les pages que le frameset doit afficher page1.html et page2.html.

<HTML>
<HEAD>
<TITLE>Page 1</TITLE>
</HEAD>
<BODY>
C'est la frame du haut (top)
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE>Page 2</TITLE>
</HEAD>
<BODY>
C'est la frame du bas (bottom)
</BODY>
</HTML>

Maintenant quand nous ouvrons frame.html les pages page1.html et page2.html sont affichées toutes les deux. Voici à quoi cela devrait ressembler. Pour voir les pages dans votre navigateur cliquez ici. Voir page1.html seulement cliquez ici . Voir page2.html seulement cliquez ici

Les frames sont pratique quand vous voulez garder une section de votre site intacte et modifier une autre partie du site. Changez page2.html pour lui ajouter un lien vers page3.html.

Quand nous ajoutons ce lien, il faut lui indiquer une cible (target). La cible(target) est la destination de la nouvelle page dans le frameset, dans quelle frame elle va s'ouvrir. Puisque nous avons nommé notre frame bottom, notre cible est bottom.

<HTML>
<HEAD>
<TITLE>Page 2</TITLE>
</HEAD>
<BODY>
C'est la frame du bas (bottom)
<A HREF=page3.html TARGET=bottom>Cliquez ici pour aller en page 3.</A>
</BODY>
</HTML>

N'oubliez pas de créer la page3.html. Pour voir le resultat dans votre navigateur cliquez ici. Voir page2.html seulement cliquez ici .

Vous pouvez aussi utilisez le target_blank qui vous permettra d'ouvrir la page dans une nouvelle fenetre de votre navigateur. Incluons ceci dans page2.html.

<HTML>
<HEAD>
<TITLE>Page 2</TITLE>
</HEAD>
<BODY>
C'est la frame du bas (bottom)
<A HREF=page3.html TARGET=bottom>Ouverture dans cette frame.</A>
<A HREF=page3.html TARGET=_blank>Ouverture dans une nouvelle fenêtre.</A>
</BODY>
</HTML>

Cliquez sur le bouton précédent pour voir la page2.html dans la frame du bas(bottom). Vous devrez rafraichier la page pour voir la nouvelle version du page2.html. Pour voir le resultat dans votre navigateur cliquez ici. Pour voir page2.html seulement cliquez ici.

1 | 2 | 3 | 4 | 5 | 6 | 7