1.
Les cadres : C'est quoi?
2.
Le conteneur <frameset>
</frameset>
3.
Les attributs du conteneur <frameset>
</frameset>
4.
La balise<frame>
5.
Liens vers d'autres cadres
6.
Certains navigateurs ne sont pas compatibles avec les cadres
 1.
Les cadres : C'est quoi?
Les premiers navigateurs
ne pouvaient afficher qu'un seul fichier HTML.
Avec la technologie développée à l'origine par
Netscape, on peut désormais diviser en plusieurs zones la page
affichée par le navigateur : ces zones ou fenêtres ou encore
cadres se nomment frames en anglais. Les frames sont apparues avec la
version 3.0 des navigateurs. Bon nombre de Webmasters les utilisaient,
elles n'étaient pas encore une composante officielle du langage
HTML.
2.
Le conteneur <frameset>
</frameset>
Le tag <frameset> prend la place de la balise <body>
</body>, c'est elle qui va définir les
cadres.
<html>
<head>
<title>Le titre de la page</title>
</head>
<FRAMESET
>
<FRAME>
la
page HTML à charger.
<FRAME>la
page HTML à charger.
</FRAMESET>
<NOFRAMES>
<body>
Les
textes, liens & images...
(lisibles
par les navigateurs qui ne comprennent pas les cadres)
</body>
</NOFRAMES>
</html>
Exemple de page avec deux cadres
horizontaux (rows - rangées)
<html>
<head>
<title>Le titre de la page</title>
</head>
<FRAMESET
ROWS="200,*">
<FRAME
SRC="cadre1.htm"> (la
page HTML cadre1.htm
à charger.)
<FRAME
SRC="cadre2.htm"> (la
page HTML cadre2.htm
à
charger).
<NOFRAMES>
<body bgcolor="FFFFCC">
Les textes,
liens & images...
Votre navigateur ne comprend pas les cadres
<!--
les commentaires -->
</body>
</NOFRAMES>
</FRAMESET>
</html>
Pour voir cette page cliquer
ici
_______________________________________________
Exemple
de page avec deux cadres verticaux (cols - colonnes)
<html>
<head>
<title>Le titre de la page</title>
</head>
<FRAMESET
COLS="200,*">
<FRAME
SRC="cadre1.htm"> (la
page HTML cadre1.htm
à charger.)
<FRAME
SRC="cadre2.htm"> (la
page HTML cadre2.htm
à
charger).
</FRAMESET>
<NOFRAMES>
<body bgcolor="FFFFCC">
Les textes,
liens & images...
Votre navigateur ne comprend pas les cadres
<!--
les commentaires -->
</body>
</NOFRAMES>
</html>
Pour voir cette page cliquer
ici
_______________________________________________
Page
avec trois cadres 
Nous pouvons commancer comme si nous avions deux cadres verticaux
<FRAMESET
COLS="200,*">
<FRAME
SRC="cadre1.htm"> (la
page HTML cadre1.htm
à charger.)
<FRAME
SRC="cadre2.htm"> (la
page HTML cadre2.htm
à
charger).
</FRAMESET>
Mais
on remplace
<FRAME
SRC="cadre2.htm"> par
<FRAMESET
ROWS="200,*">
<FRAME
SRC="cadre2.htm"> (la
page HTML cadre2.htm
à charger.)
<FRAME
SRC="cadre3.htm"> (la
page HTML cadre3.htm
à
charger).
</FRAMESET>
pour diviser la partie restante à
droite en deux cadres horizontaux ce qui donne :
<html>
<head>
<title>Le titre de la page</title>
</head>
<FRAMESET
COLS="200,*">
<FRAME
SRC="cadre1.htm"> (la
page HTML cadre1.htm
à charger.)
<FRAMESET
ROWS="200,*">
<FRAME
SRC="cadre2.htm"> (la
page HTML cadre2.htm
à charger.)
<FRAME
SRC="cadre3.htm"> (la
page HTML cadre3.htm
à
charger).
</FRAMESET>
</FRAMESET>
<NOFRAMES>
<body bgcolor="FFFFCC">
Les textes,
liens & images...
Votre navigateur ne comprend pas les cadres
<!--
les commentaires -->
</body>
</NOFRAMES>
</html>
Pour voir cette page cliquer
ici
3. Les attributs du conteneur <frameset> :
Les
attributs rows et cols
Ces attributs définissent le type des cadres, qui peut être
verticaux (cols - colonnes) ou horizontaux (rows - rangée)
. Ils prennent une liste de valeurs séparées par des
virgules.
Ces valeurs sont exprimées :
- en
pourcentage entre 1% et 100% (valeurs relatives)
- en pixel (valeurs absolues)
- remplacée par une étoile (*) (la colonne ou rangée
s'ajustera automatiquement)
- si une valeur manque (la colonne ou rangée s'ajustera automatiquement)
par exemple : <frameset cols="20%,80%">
ou <frameset
rows="50,*">
Deux remarques :
- Si une valeur manque ou est remplacée par une étoile
(*) la colonne ou rangée s'ajustera automatiquement,
- De plus la hauteur de toutes les rangées ou la largeur de
toutes les colonnes doit correspondre à la hauteur ou à
la largeur de la fenêtre du navigateur, sinon la dernière
valeur ne sera pas prise en compte et la colonne ou rangée
s'ajustera automatiquement à l'écran.
L'attribut frameborder.
Cet attribut permet de déterminer si les cadres auront ou n'auront
pas de bordure. Il a deux valeurs yes ou no. frameborder=yes
ou frameborder=no
L'attribut
border.
Cet attribut permet de déterminer la taille des bordures entourant
les cadres. Il peut prendre plusieurs valeurs ex: border=n, n étant
une valeur en pixels définissant la taille de la bordure, par
exemple border=3
La valeur 0 indique aucune bordure. border=0
L'attribut
bordercolor.
Cet attribut permet de déterminer la couleur de l'ensemble
des bordures des cadres. Il suffit pour cela de spécifier une
couleur sous forme de nom ou de sa valeur hexadécimale .
bordercolor="red"
ou bordercolor="#ff0000"
L'attribut
framespacing.
Cet attribut permet de déterminer un espace entre les cadres.
Il peut prendre plusieurs valeurs ex: framespacing=n, n étant
une valeur en pixels définissant l'espace entre les cadres
par exemple framespacing=5
.
La valeur 0 indique aucun espace. framespacing=0
exemple
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<frameset cols="143,*" border="0" framespacing="0"
frameborder="NO">
<frame src="cadre2.htm" noresize scrolling="NO"
marginwidth="0" marginheight="0" frameborder="NO"
name="menu">
<frame src="cadre3.htm" name="page" marginwidth="0"
marginheight="0" scrolling="AUTO" noresize>
<noframes>
</frameset>
<body>
</body>
</noframes>
</html>
Pour voir cette page cliquer
ici
4. La balise <frame>
La
commande frame permet de définir un cadre à
l'intérieur du conteneur <frameset>.
Elle a plusieurs attributs, les plus importants sont src
et name.
L'attribut
src.
Cet attribut indique l'URL du document HTML qui sera affiché
dans un cadre spécifique.
<frame
src="cadre1.htm">
L'attribut
name.
Cet attribut permet de donner un nom à un cadre, ce qui permettra
ensuite de l'appeler avec l'attribut target .
<frame
src="cadre1.htm" name="cadre1">
(nota
:un nom de cadre en majuscule est différent d'un nom en minuscule,
utiliser de préférence les minuscules)
L'attributs
marginwidth .
- marginwidth permet de spécifier la grandeur des marges gauche
et droite du cadre créé, la valeur doit être exprimée
en pixels, elle peut avoir comme valeur 0.
<frame src="cadre1.htm"
name="cadre1" marginwidth=3>
L'attributs
marginheight.
- marginheight permet de spécifier la grandeur des marges de
haut et de bas du cadre crée, la valeur doit être exprimée
en pixels, elle peut avoir comme valeur 0.
<frame
src="cadre1.htm" name="cadre1" marginheight=3>
L'attribut
frameborder.
Cet attribut permet de déterminer si les cadres auront ou n'auront
pas de bordure. Deux valeurs yes ou no.<frame
src="cadre1.htm" name="cadre1" frameborder=no>
L'attribut
noresize.
cet attribut, interdit à l'utilisateur de redimensionner les
cadres. Par défaut les cadres peuvent être redimensionnés.
<frame
src="cadre1.htm" name="cadre1" noresize>
L'attribut
scrolling.
Cet attribut permet d'attribuer ou non une barre de défilement
(scrollbar) à un cadre.
Trois valeurs sont possible :
- yes : Indique que
la barre de défilement sera toujours visible
- no : Indique que la
barre de défilement ne sera jamais visible (à tester
avant de l'utiliser)
- auto : Indique que
le navigateur déterminera si la barre de défilement
est nécessaire
<frame
src="cadre.htm" name="cadre1" scrolling="auto">
L'attribut
border (Netscape uniquement).
Cet attribut permet d'ajuster l'espace entre les cadres. La valeur
doit être exprimée en pixels.
<frame
src="cadre1.htm" name="cadre1" border=2>
5. Liens vers d'autres cadres
En général,
les pages appelées par des liens s'affichent dans le cadre
où les liens ont été activés.
L'attribut
target permet d'appeler
un autre cadre. Le nom du cadre est défini avec l'attribut
name vu précédemment.
Mais il existe des noms de cadre cible réservés.
Noms
de frame cible réservés
_self L'URL
cible va s'afficher dans la même frame que le lien
_parent L'URL
cible va s'afficher dans la structure externe
_blank L'URL
cible va s'afficher dans une nouvelle fenêtre ouverte par le
navigateur
_top L'URL
cible va s'afficher dans toute la fenêtre du navigateur
(les frames disparaissent)
_new Identique
à _blank (nouvelle fenêtre)
Exemple de lien vers un autre cadre. (voir le
lien6)
<a
href="cadre3.htm" target="cadre2">Lien</a>
Exemple
de lien externe avec la valeur _top. (voir le
lien7)
<a
href="http://www.allhtml.com" target="_top">Lien</a>
6. Certains navigateurs ne sont pas compatibles avec les cadres
Même
si il est de plus en plus rare de trouver des navigateurs non compatibles,
il faut néanmoins ne pas négliger cet aspect, sous peine
de se passer de quelques visiteurs, en particulier, les navigateurs
pour les personnes mal-voyantes. La technique consiste à utiliser
les balises <noframes>
et </noframes>.
Ces balises permettent de spécifier un texte HTML en version
normale. Entre ces balises il faut donc, théoriquement, développer
un deuxième site. Il est aussi possible pour
simplifier le travail de préciser des regrets polis et insérer
des liens vers les sites officiels de Microsoft et Netscape pour que
le visiteur opte pour une mise à jour.
Exemple
d'utilisation des balises <noframes> et </noframes>.
<frameset
rows="20%,80%">
<frame src="cadre1.htm" name="cadre1">
<frame src="cadre2.htm" name="cadre2">
<noframes>
<body>
Désolé mais ce site comme vous pouvez le voir utilise
la technique des frames. Merci de faire la mise à jour de
votre navigateur.
</body>
</noframes>
</frameset>
|