6 Structure FRAME Fiche

Réf : 6_Structure_FRAME_fiche.
doc
Cours HTML : « Les FRAMES (cadres) »
L'utilisation de cadres (les "frames") permet de diviser l'écran du navigateur en plusieurs zones. Chaque
zone peut contenir une page html.
Pas de body mais une balise spéciale :
L'élément FRAMESET
Il permet de définir le nombre de zones et leurs dimensions. Les deux principaux attributs sont rows et
code.
 ROWS="h1,h2,...hn"
permet de faire des zones horizontales.
 COLS="l1,l2,...ln"
permet de faire zones verticales.
QUELQUES EXEMPLES :
<FRAMESET rows="25%,25%,50%"> ... </FRAMESET> : en 3 lignes

<FRAMESET cols="100,50%,*"> ... </FRAMESET> en 3 colonnes dont une sur le reste de la page<FRAMESET
cols="100,50%,*"> ... </FRAMESET>
L'élément FRAME
L'élément FRAME permet de définir le contenu de chacune des zones. Pour cela, on utilise deux attributs :
 src=url pour indiquer le fichier à placer dans la zone
 name=nomDeZone permet de nommer la zone afin qu'elle puisse devenir la cible d'un lien (on utilisera alors
l'attribut target de la balise <A> pour y accéder.
Attention au choix des noms de cadres (attribut name). Mieux vaut l'utilisation de noms
explicites, permettant de donner une idée sur le contenu du cadre, comme "menu" ou "principal"
ou "pied".
D'autres attributs permettent de préciser différents paramètres :
 marginwidth
précise la largeur des marges latérales (nombre de pixels)
 marginheight
précise la hauteur des marges hautes et basses (nombre de pixels)
 scrolling
précise si l'on doit afficher un ascenseur ou nom — les valeurs possibles sont yes, no et auto
(valeur par défaut)
 noresize
Indique que la taille de la zone ne peut pas être modifiée par l'utilisateur.
 frameborder
Indique si le cadre doit être séparé des autres cadres (1 pour oui —valeur par défaut, 0 pour non)
L'élément NOFRAME
Il s'agit d'indiquer le contenu à afficher dans un navigateur qui ne supporte pas les cadres.
Constant AXELRAD – Anne BOUTARIN - Jean-Claude CHÊNE Page 1 sur 4
Réf : 6_Structure_FRAME_fiche.doc
EXERCICE DU COURS
Une page index :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>6_Structure_FRAME_Page_INDEX</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>


<frameset cols="140,*" frameborder="0" framespacing="0">


<frame src="6_Structure_FRAME_Page-menu.htm" name="menu" />


<frameset rows="150,*,100">


<frame src="6_Structure_FRAME_Page-entete.htm" name="entete" />


<frame src="6_Structure_FRAME_Page-centre.htm" name="centre" />
<noframes>
Votre navigateur ne peut malheureusement pas afficher cette page!
</noframes>
</frameset>
</html>
Page entête avec l’image :

<head>
<title>Exo_Frame_menu</title>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
</head>
<BODY lang="fr-FR" style="background-color: rgb(102, 204, 204);" >

<div align="center" >
<img src="images/entete.jpg" alt="Entete UIAD" width="700" height="80"/>
</div>
</BODY>
</HTML>
Page MENU
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Exo_Frame_menu</title>
<style type="text/css">
#mon-menu { position: relative; top: 50px;} /* Déplacement du bloc MENU */
#mon-menu ul {
margin: 0px;
padding: 0px;
list-style-type: none; /* Suppression des puces */
}
#mon-menu ul li {
margin: 2px; /* écart entre les boutons */
width: 120px;
}
#mon-menu ul li a {
font-family: Arial,Helvetica,sans-serif;
line-height: 20px;
font-weight: lighter;
font-style: oblique;
font-size: 15px;
text-decoration: none;
text-align:center;
padding: 3px 0px 3px 0px;
display: block;
height: 23px;
}
#mon-menu a:link, #mon-menu a:active, #mon-menu a:visited {
background-image: url(images/Choix_non.jpg);
color: yellow;
}
#mon-menu a:hover {
background-image: url(images/Choix_oui.jpg);
color: #00FF00;
}
</style>
</head>
<body style="background-color: rgb(102, 204, 204);">

<div id="mon-menu">
<ul>
<li><a href="6_Structure_FRAME_Page-centre.htm" target="centre">Les images</a></li>
<li><a href="6_Structure_FRAME_Page-menu.htm" target="centre">Le menu</a></li>
<li><a href="#" target="centre">Le menu</a></li>
</ul>
</div>
</body>
</html>
Page CENTRE :
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>Exo_Frame_centre</title>
<style>
.la_photo {
position: absolute; height: 92%; width: 48%; left: 0%;
background-color: #FFFFCC; border: 10px outset #F90;
}
.les_div {
position: absolute; height: 92%; width: 48%; right: 0%;
background-color: #FFFFCC; border: 10px outset #99CCCC;
}
img gauche{ width:320px; height:200px;} /* Largeur / Hauteur de l'image */
img droite{ width:300px; height:320px;} /* Largeur / Hauteur de l'image */
</style>
</head>
<body style="background-color: rgb(102, 204, 204);">

<div class="la_photo">
<div align="center" style="padding-top:10%">
<img src="images/Dauphins[320x200].gif" alt="Dauphins" id="gauche" width="80%"
border="10" style="border-color:#F60; border-style:ridge;" />
</div>
</div>
<div class="les_div">
<div align="center" style="padding-top:5%">
<img src="images/LesBoitesCss[320x300].jpg" alt="Les DIV" id="droite" width="60%"
border="10" style="border-color:#00F; border-style:inset" />
</div>
</div>
</body>
</HTML>

Page PIED :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Exo_Frame_pied</title>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
</head>
<body style="background-color: rgb(102, 204, 204)" lang="fr-FR">

<div style="text-align: center; color: rgb(0, 0, 0); font-size: 80%;">
Le cours SITE INTERNET - UIAD - 38000 GRENOBLE<br>
Tél : 04-76-00-00-00 - Courriel : uiad@free.fr - Site : http://uiad.internet.free.fr/
</div>
</body>
</html>
DEVOIR A FAIRE

6 Structure FRAME Fiche

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

6 Structure FRAME Fiche

Transféré par

Droits d'auteur :

Formats disponibles

Réf : 6_Structure_FRAME_fiche.

Cours HTML : « Les FRAMES (cadres) »

<FRAMESET rows="25%,25%,50%"> ... </FRAMESET> : en 3 lignes

Page entête avec l’image :

<BODY lang="fr-FR" style="background-color: rgb(102, 204, 204);" >

<body style="background-color: rgb(102, 204, 204);">

<body style="background-color: rgb(102, 204, 204);">

Constant AXELRAD – Anne BOUTARIN - Jean-Claude CHÊNE Page 3 sur 4

<body style="background-color: rgb(102, 204, 204)" lang="fr-FR">

Constant AXELRAD – Anne BOUTARIN - Jean-Claude CHÊNE Page 4 sur 4

Vous aimerez peut-être aussi