I) Le concept de cadre
Netscape a introduit, à partir de la version 2.0, la possibilité de diviser
la fenêtre du navigateur en plusieurs cadres indépendants (
frames),
contenant
chacun un document HTML différent. Cette extension a ensuite
été intégrée dans la norme actuelle HTML 4.0.
Pourquoi ?
Ce principe s'utilise présenter de façon plus rationnelle un site avec
par exemple une barre de navigation (type menu et de hauteur fixe) et
un corps contenant les éléments (page déroulante). Il existe aussi
quelques inconvénients :
- la mise à jour du site est plus difficile,
- les frames accroissent sensiblement les temps de chargement pour vos
visiteurs,
- les frames ont tendances à "charger" le design des sites (un
maximum de trois frames est impératif).
Conseils
La mise en place d'un jeu de cadres se construit avant sur le papier
! Vous définirez ainsi l'exacte présentation de vos pages, la fonction de
chacun de vos cadres et leurs attributs. Dans le cas d'une gestion évoluée
des cadres, vous associerez naturellement des scripts, où les références de
vos cadres et de leurs éléments sont indispensables.
II) La mise en oeuvre du concept de cadre
Les balises
et attributs essentiels
- <FRAMESET> détermine le
cadre, avec pour attributs rows pour
un découpage horizontal et cols
pour un découpage vertical. Les valeurs attribuées à ces attributs
peuvent être fixes (en pixels) ou variables (en pourcentage).
- <FRAME> indique le contenu
chargé dans le cadre. L'attribut src
est obligatoire, il donne la source du document à charger au navigateur
URL. Notez donc que la page html vue fait partie d'un document séparé.
- <NOFRAMES> propose un
contenu sans cadres pour les navigateurs non compatibles (il y en a
encore !) ou pour des résolutions de 640 X 480 sur un moniteur 14
pouces ...
Exemple
Nous voulons créer un jeu de deux cadres verticaux comme ceci :
Le code correspondant du fichier cadre.htm :
|
|
<html>
<head>
<title> Exemple de cadre </title>
</head>
<frameset cols="50,*">
<frame src="menu.htm"> <!-- Première colonne, largeur fixe de 50 -->
<frame src="contenu.htm"> <!-- Deuxième colonne, largeur variable sur le reste -->
</frameset>
<noframes>
<body>
... contenu de la page sans cadres
</body>
</noframes>
</html>
|
Remarques
- La balise <FRAMESET>
remplace la balise <BODY> dans
le document html
- Vous avez dans notre exemple trois fichiers html : cadre.htm,
menu.htm et contenu.htm
- L'attribut cols à pour valeur 50
(donc en pixels), *
signifiant "le reste"
Les cadres imbriqués
Vous avez la possibilité de créer des cadres dans les cadres... Voyons
la structure suivante :
Voici le code correspondant :
|
|
<html>
<head>
<title> Exemple de cadre bis </title>
</head>
<frameset cols="50,*">
<frame src="menu.htm"> <!-- Première colonne, largeur fixe de 50 -->
<frameset rows="20%,80%">
<frame src="presentation.htm"> <!-- Première ligne, largeur variable 20% -->
<frame src="contenu.htm"> <!-- Deuxième ligne, largeur variable de 80% -->
</frameset>
</frameset>
<noframes>
<body>
... contenu de la page sans cadres
</body>
</noframes>
</html>
|
Remarques
- On divise la fenêtre en deux cadres puis le cadre de droite en
deux
- On aurait pu mettre * au lieu de
80%, par défaut le cadre remplissant ce qui reste
- La balise <FRAMESET> prend
l'un ou l'autre des attributs cols
et rows mais pas en même temps
Le chargement des pages et l'attribut target
Dans notre deuxième exemple (trois cadres), que ce passe-t'il
s'il existe un lien vers une autre page dans la page d'accueil ? Que
ce passe-t'il si, et cela est normal dans un menu, un lien vers une autre
page existe dans la page menu et que l'on désire voir son contenu dans la
page d'accueil ? La résolution de ces problèmes passe par l'attribut target
de la balise <A> du lien et par
l'attribut name de la balise <FRAME>.
|
|
<!-- Dans la déclaration des cadres -->
...
<frame src="contenu.htm" name="principal"> <!-- Le cadre a pour nom : principal -->
...
<!-- Dans la page contenu.htm, on suppose un lien vers une autre page -->
...
<a href="boite.htm" target="principal"> M'écrire </a>
...
|
Remarque
- Il existe des noms de cadres réservés : _blank charge le
document dans une nouvelle fenêtre, _self charge le document
dans le cadre contenant le lien, _parent charge le document dans
le cadre supérieur (s'il existe) au cadre appelant et _top
charge le document dans la fenêtre entière.
Dans notre exemple, le cadre père du cadre 2.2 est le cadre 2. Un lien
cadre 2.2 sur son cadre parent ouvrira la fenêtre dans le cadre 2 effaçant
par-là le cadre 2.1.
III) Extensions du concept de cadre
Les attributs complémentaires
Sur la balise <FRAME>
- marginheight : donne la taille en pixels de la marge supérieure
- marginwidth : donne la taille en pixels de la marge de gauche
- noresize : interdit le redimensionnement du cadre par
l'utilisateur
- scrolling : yes ou no, autorise ou non les barres
de défilement
Les cadres flottants
L'idée des cadres flottants vient cette fois-ci de Microsoft avec la
version 3 d'Internet Explorer. Elle consiste à pouvoir afficher un cadre
indépendant du reste du document et placé n'importe ou dans la
page. Vous disposez de tous les éléments d'un cadre classique, y compris
les barres de défilement.
La balise utilisée est <IFRAME>
avec pour attributs obligatoires width, height
et src qui indique respectivement la
largeur et la hauteur du frame flottant (en pixels ou en pourcentage)
et enfin la source URL du document à charger dans le cadre flottant. Entre
la balise <IFRAME> et </IFRAME>
sera placé le code pour les navigateurs non compatibles. Exemple de code de
base d'un cadre flottant :
|
|
...
<iframe src="contenu.htm" width=300 heigth=300>
code ou image ou texte de remplacement
</iframe>
...
|
Les autres attributs sont :
- align : gère l'alignement du
cadre, valeurs possibles left et right
- frameborder : bordure du cadre, 1
l'affiche, 0 la masque
- name : nom du cadre
- noresize : interdit le
redimensionnement du cadre par l'utilisateur
- scrolling : détermine
l'apparition des barres de défilement, valeurs possibles yes, no et
auto
Remarque
- N'oubliez-pas que le cadre flottant est un concept Microsoft Internet
Eplorer. Il n'est pas visible avec les versions actuelles (4.6)
de Netscape... En fait ce dernier utilise les balises <LAYER>
et <ILAYER> introduites dans
la version 4. Le W3C a rejeté ces balises, ce qui n'empêche pas
Netscape de continuer à les implémenter dans son navigateur. Ce
concept fait plus référence au HTML dynamique, il ne sera pas détaillé
ici.