Cours d`initiation html2 les frames

Transcription

Cours d`initiation html2 les frames
Initiation au langage html
Amaury Senelle
Cours d’initiation
au langage HTML
Chapitre 9 : les frames
Chapitre 9 : Les frames
Objectifs :
L’objectif ici est de dé
démystifier les cadres (ou
frame en anglais), de vous en exposer
briè
brièvement la technique et surtout de vous
montrer les avantages et inconvé
inconvénients de
cette faç
façon de travailler.
Chapitre 9 : Les frames
Les cadres (ou frames)
frames) :
Les cadres sont des parties d’é
cran. En effet,
d’écran.
jusquejusque-là, nous avons toujours travaillé
travaillé avec
tout l’é
cran disponible.
l’écran
Avec le systè
système des cadres, on peut dé
découper
son écran comme on veut.
1
Chapitre 9 : Les frames
L’utilisation la plus fré
fréquente des cadres est
de proposer à l’utilisateur un menu. Ce menu
reste en permanence à l’écran
’écran
http://membres.lycos.fr
/antonzec/
http://membres.lycos.fr/
antonzec/fram
e.html
Chapitre 9 : Les frames
Comment ça marche :
Pour obtenir un écran avec un menu d’
d’un côté
côté
et un contenu de l’
l’autre, on a besoin de
TROIS fichiers :
1. un qui contient les informations du menu,
2. un autre qui contient le contenu
3. un autre qui dé
cran
décrit la dé
découpe de l’é
l’écran
(horizontal, vertical, etc)
etc)
Chapitre 9 : Les frames
Il y a donc un fichier de mise en forme de
l’écran.
’écran.
La mise en page de l’é
cran :
l’écran
Dans le point pré
précédent, nous vous expliquions
qu'il y a TROIS fichiers à mettre en oeuvre
Dans ce point, nous abordons la conception du
fichier qui permet de dé
découper l'é
l'écran en
diffé
différentes parties.
Le point suivant est la conception des deux
fichiers qui constituent la composition de
l'é
l'écran.
2
Chapitre 9 : Les frames
Un menu à gauche et les donné
données à droite?
Voici comment mettre en musique cette
description de l’
l’espace :
<html>
<head></head>
<frameset cols="30%,70%">
<frame src="
menu.htm"
" name="gauche">
src="menu.htm
<frame src="
contenu.htm"
"
src="contenu.htm
name="droite
">
name="droite">
</frameset>
</html>
Chapitre 9 : Les frames
Remarque:
Vous visualiserez le ré
résultat lorsque
menu.htm et contenu.htm seront créé
s.
créés.
Attention!
<frameset></frameset>
remplace
<body></body>
Chapitre 9 : Les frames
Les donné
données :
Il est fait mention de deux autres fichiers :
menu.htm et contenu.htm,
contenu.htm, vous devez aussi
réaliser ces deux fichiers.
Nous vous proposons de lister dans le fichier
menu.htm,
menu.htm, les points de thé
théorie que vous
avez parcourus jusquejusque-là (et ils sont
nombreux).
Voici un exemple de code (trè
(très simple, à vous
de l’
l’amé
améliorer) pour le fichier menu.htm:
menu.htm:
3
Chapitre 9 : Les frames
menu.htm:
menu.htm:
<html>
<head>
head>
<title>Menu</
title>
>
title>Menu</title
</head
>
</head>
<body>
* les paragraphes et les sauts de ligne<br
>
ligne<br>
* les alignements<br
>
alignements<br>
* les couleurs<br
>
couleurs<br>
<a href ="http://www.lesoir.be
="http://www.lesoir.be""
target="droite">journal
>
target="droite">journal Le Soir</a><br
Soir</a><br>
</body>
</html>
Chapitre 9 : Les frames
fichier contenu.htm
<html>
<head>
head>
<title>Contenu</
title>
>
title>Contenu</title
</head
>
</head>
<body>
Bienvenue sur mon site.<br
>
site.<br>
Cliquez dans la partie de gauche pour
atteindre l’é
l’éllément souhaité
souhaité
</body>
</html>
Chapitre 9 : Les frames
Visualisation d’
d’un site framé
framé :
Pour visualiser le ré
résultat de ce que vous
venez de cré
créer, vous devez visualiser le
fichier qui dé
cran.
décrit la dé
découpe de l’é
l’écran.
C’estest-à-dire :
Cadre.htm
4