Les cadres

Introduction

Les cadres, encore appelés frames en anglais, vont permettre une division de l'écran en plusieurs fenêtres indépendantes. Ils peuvent s'avérer très utiles dans certaines situations, comme pour laisser un menu de commandes toujours apparent en bas de l'écran, ou pour créer une zone d'aide à droite par exemple.
Cependant ils sont à manipuler avec précaution et parcimonie. Avec précaution car les cadres exigent une bonne connaissance des balises HTML et de la hiérarchie des documents. Avec parcimonie car diviser une fenêtre, qui s'affiche sur un écran de 14 ou 15 pouces, en plusieurs cadres peut rendre le tout très vite illisible ou inutilisable.

Avant toute chose : un exemple

Il est plus facile de décrire et d'expliquer les cadres dès que l'on en a vu. Cliquez donc sur le lien ci-dessous pour faire apparaître une fenêtre comportant des cadres.

Je veux voir des cadres !

Création des cadres

La fabrication d'une page HTML devant recevoir des cadres diffère de celle d'une page classique. En particulier on ne retrouvera pas les balises <HEAD> et <BODY>. Nous vous proposons de regarder l'animation suivante afin de bien comprendre comment est conçue une page avec des cadres.

Vous avez remarqué que la page principale, située au-dessous, est vide de texte, mais qu'elle contient les pages 1 et 2 qui viennent s'y déposer. Les pages 1 et 2 sont des pages HTML classiques et elles devront avoir été crées auparavant.

La balise <FRAMESET>

C'est la balise qui remplace le corps d'un document HTML classique <BODY> </BODY>. La syntaxe est la suivante :
<FRAMESET> ensemble des cadres </FRAMESET>. Cette balise possède les attributs suivants :

ROWS : permet de diviser la fenêtre en sous-cadres horizontaux ;
COLS : permet de diviser la fenêtre en sous-cadres verticaux ;
FRAMEBORDER : active ou désactive l'effet 3D des frontières de cadres ;
BORDER : indique la largeur de la bordure entre deux cadres ;
BORDERCOLOR : précise la couleur des bordures de cadres.

Le tableau ci-dessous résume l'ensemble des paramètres possibles pour chaque attribut.

Attribut	Valeurs possibles
ROWS	ROWS="n₁,n₂...n_i" n₁...n_i: hauteurs des cadres i : nombre de cadres à créer 3 définitions différentes de la hauteur : n_i: en pixels n_i% : en pourcentage du cadre mère n* : le navigateur donne toute la hauteur restante
COLS	COLS="n₁,n₂...n_i" n₁...n_i: largeurs des cadres i : nombre de cadres à créer 3 définitions différentes de la largeur : n_i: en pixels n_i% : en pourcentage du cadre mère n* : le navigateur donne toute la largeur restante
FRAMEBORDER	valeur par défaut FRAMEBORDER="yes" deux valeurs possibles : yes ou no
BORDER	nécessaire si FRAMEBORDER="no" BORDER="n" avec n=1..9 si n=0, il n'y a pas de bordure
BORDERCOLOR	nécessaire si FRAMEBORDER="yes" BORDERCOLOR="#rrvvbb"

La balise <FRAME>

Cette balise est utilisée pour fixer les sous-cadres définis par la balise <FRAMESET>. Cette balise possède six attributs :

Attribut	Utilisation	Syntaxe
SRC	indique l'URL du document qui doit être affiché	SRC="URL"
NAME	nom de la zone ; utile pour que cette zone puisse être ciblée par un lien hypertexte	NAME="nom"
MARGINWIDTH	précise le nombre de pixels entre les frontières gauche et droite de la zone et le document HTMLà afficher	MARGINWIDTH="nombre de pixels"
MARGINHEIGHT	précise le nombre de pixels entre les frontières haute et basse de la zone et le document HTMLà afficher	MARGINHEIGHT="nombre de pixels"
SCROLLING	indique si la zone doit être munie d'une barre de défilement ; si = "auto" c'est le navigateur qui choisit	SCROLLING="yes" ou "no" ou "auto"
NORESIZE	indique au navigateur qu'il ne doit pas autoriser la modification de la taille d'une zone	pas de valeur

La balise <NOFRAME>

Cette balise indique à un navigateur ne sachant pas gérer les frames, ce qu'il doit afficher comme page à la place des frames. Bien entendu, cette balise est ignorée par un navigateur capable d'afficher les frames !

Utiliser des cadres : l'attribut "TARGET"

Au tout début de cette leçon, vous êtes sans doute allé(e) voir une page de cadres. Dans cette page figurait un lien intitulé "J'ai vu, je veux revenir à la page du cours sur les cadres.". Quand vous avez cliqué sur ce lien, les cadres se sont effacés et vous êtes revenu(e) dans une page sans cadre. Or ce n'est pas si simple qu'il n'y paraît. Vous verrez souvent, quand vous ferez des pages avec cadres, que vos liens ne fonctionnent que dans le cadre contenant le lien ; en d'autres termes, en cliquant sur un lien, vous vous attendez à voir disparaître les cadres pour revenir dans une page unique, alors que la page demandée s'affiche dans le cadre.

Page de départ	Ce qu'on aurait voulu	Ce qu'on obtient

Pour s'en sortir, et éviter ainsi l'imbrication de cadres dans les cadres (etc !) il faut utiliser l'attribut TARGET.

Cet attribut indique au navigateur qu'il doit afficher la page cettePage.html dans le cadre de nom ceCadre. Il existe de nombreuses manières d'afficher un cadre dans un autre cadre, et cela devient vite compliqué, en plus de devenir presque illisible. Je vous recommande de retenir la syntaxe de la commande suivante, qui permet de sortir des cadres avec un lien et de revenir à une page sans cadre :

<A HREF="cettePage.html" TARGET="_top">le lien à cliquer</A>

Exercice

Pour finir cette leçon en beauté, essayez de reproduire la page qui est derrière ce lien. Je vous conseille de commencer par dessiner au brouillon les cadres et de leur donner des noms.

Retourner à la page précédente