GRATUIT

Vos offres d'emploi informatique

Développeurs, chefs de projets, ingénieurs, informaticiens
Postez gratuitement vos offres d'emploi ici visibles par 4 000 000 de visiteurs uniques par mois

emploi.developpez.com

Developpez.com - Développement Web
X

Choisissez d'abord la catégorieensuite la rubrique :

 

III. Les cadres

Par Hugo ETIEVANT

  1. Pourquoi les cadres ?
  2. Qu'est-ce qu'un cadre ?
  3. Les balises de base
  4. Les bordures
  5. Les marges internes
  6. Les barres de défilement
  7. Incompatibilité
  8. Cadres locaux

Pourquoi les cadres ?

Un site qui retient l'attention c'est un site sur lequel il est très aisé de naviguer et de prendre des repères. Il faut donc que l'internaute soit capable de se déplacer rapidement de page en page et de revenir plus tard très facilement au même endroit. Pour cela, il est nécessaire d'offrir des menus efficace qui puissent permettre à vos visiteurs de se ballader sur vos pages. La technique la plus utilisée pour cela, et la plus simple : c'est les cadres.


Qu'est-ce qu'un cadre ?

Un cadre est une zone de la fenêtre associée à un fichier HTML. On utilise au minimum deux cadres dans une fenêtre, l'un associé au menu et l'autre aux documents, par exemple. Si on souhaite créer une rubrique contenant de nombreux articles accessibles depuis un sommaire visible en permanance, on va séparer la fenêtre du navigateur en deux zones (deux cadres) dont l'un contiendra une page sommaire.php3 et l'autre, l'article correspondant article1.php3. Un click sur un lien du sommaire fera apparaître l'article souhaité dans la zone d'à côté. On peut mettre autant de cadres que l'on veut dans une fenêtre, leur taille et leur disposition est au choix. Il est aussi possible qu'un cadre contiennent d'autres cadres... Bref, c'est une technique ultra puissante.


Les balises de base

Une page appelant des cadres sert exclusivement à définir les cadres, elle ne peut être utilisée pour afficher du texte, des images. Le page principale d'appel et de définition des cadres est réservée, elle ne peut accepter que les balises associées aux cadres. Par contre les pages secondaires appelées depuis cette page principales et qui se partageront la fenêtre du navigateur seront "normales", c'est-à-dire que vous pourrez en faire ce que vous voudrez, y mettre des tableaux, des images, du texte...

La page principale est transparente à l'internaute qui visite votre site puisqu'il verra les pages associées aux cadres. Par contre c'est préférenciellement cette page principale qui devra contenir les méta-informations (voir chapitre <META>) correspondantes aux pages appelées dans les cadres car il est préférable qu'un moteur de recherche renvoit l'internaute vers la page principale qui propose le sommaire. N'oubliez pas de donner un titre à votre page principale car les balises <TITLE> de vos pages secondaires seront ignorées.

L'architecture de base d'une page principale est similaire à celle des autres pages web à cela que la balise <FRAMESET> remplace <BODY>.
Exemple de page principale :

<HTML>
<HEAD>
les méta-informations
<TITLE>Votre titre</TITLE>
</HEAD>
<FRAMESET>
le contenu de la page principale
</FRAMESET>
</HTML>

Orientation et taille des cadres :

La balise <FRAMESET> définit la liste des cadres parallèles sur l'horizontale ou la verticale. L'attribut COLS a pour valeurs la liste des dimensions respectives en pourcentage ou en pixels des cadres (séparées par des virgules), la séparation des cadres se fera sur l'horizontale, c'est-à-dire qu'une ligne séparatrice verticale (ou plusieurs) coupera la fenêtre entre chaque cadre. L'attribut ROWS a pour valeurs a liste des dimensions respectives en pourcentage ou en pixels des cadres (séparées par des virgules), la séparation des cadres se fera sur la verticale, c'est-à-dire que la ligne séparatrice sera horizontale.
Syntaxes :

<FRAMESET COLS="20%, 80%"> pour deux cadres séparées verticalement
<FRAMESET COLS="20%, 20%, 60%"> pour trois cadres séparées verticalement
<FRAMESET ROWS="200, 600"> pour deux cadres séparées horizontalement
<FRAMESET ROWS="30%, *"> l'astérix signifie que la dimension correspondante est automatiquement celle qui reste disponible dans la fenêtre du navigateur

Définition individuelle des cadres :

La balise <FRAMET> définit chaque cadre individuellement. Chaque cadre doit être associé à une page web grace à l'attribut SRC dont la valeur est l'adresse absolue (ex: http://www.multimania.com/cyberzoide/info/contrib.php3) ou relative (ex: ../info/contrib.php3). Un nom est donné à chaque cadre par l'intermédiaire de l'attribut NAME.
Exemples :

<FRAMESET COLS="30%,70%">
<FRAME NAME="sommaire" SRC="sommaire.php3">
<FRAME NAME="article" SRC="article1.php3">
</FRAMESET>

Ce premier exemple définit deux cadres qui se partageront la fenêtre du navigateur. A gauche se trouvera le sommaire c'est-à-dire la page sommaire.php3 et à droite, l'internautre verra par defaut la page article1.php3. Ces deux cadres sont séparés horizontalement, c'est-à-dire que la ligne séparatrice est verticale. Pour que les liens hypertextes de la page sommaire.php3 s'affichent dans le cadre nommé article, il faudra mettre l'attribut TARGET de valeur "article" dans la balise <A> du lien.

A noter que la première valeur de la liste de l'attribut COLS ou ROWS correspond à la première balise <FRAME> et ainsi de suite.

Exemple de page sommaire :

<HTML>
<BODY>
<UL>
<LI><A HREF="article1.php3" TARGET="article">Poulet aux dioxines</A>
<LI><A HREF="article2.php3" TARGET="article">Boeuf aux hormones</A>
<LI><A HREF="article3.php3" TARGET="article">Vache folle</A>
<LI><A HREF="article4.php3" TARGET="article">Sang contaminé</A>
<LI><A HREF="article5.php3" TARGET="article">Amiante</A>
</UL>
<A HREF="../index.php3" TARGET="_top">Retour à l'index</A>
</BODY>
</HTML>

Cet exemple de page sommaire.php3 montre une liste d'article à thème dont les liens hypertextes renvoient respectivement aux articles correspondants mais la destination de l'affichage des pages associées est le cadre article. Tandit que le lien vers la page index du site sera affiché en pleine fenêtre (TARGET="_top"), ce qui aura pour effet de détruire (virtuellement) tous les cadres en présence.

Résultat :

  • Poulet aux dioxines
  • Boeuf aux hormones
  • Vache folle
  • Sang contaminé
  • Amiante




Retour à l'index
Ils sont fous ces poulets ! ...
et blablablabla

Imbrication des cadres :

Il est tout à fait possible d'imbriquer les cadres les uns dans les autres pour obtenir les configurations suivantes (ou toutes autres) :

cadre1
cadre2
cadre3

<FRAMESET ROWS="50%,25%,25%">
<FRAME NAME="cadre1" SRC="intro.php3">
<FRAME NAME="cadre2" SRC="../info/contrib.php3">
<FRAME NAME="cadre3" SRC="http://cyberzoide.developpez.com/home.php">
</FRAMESET>


Som-
maire
cadre1
cadre2

<FRAMESET COLS="30%,70%">
<FRAME NAME="sommaire" SRC="sommaire.php3">
  <FRAMESET ROWS="50%,50%">
  <FRAME NAME="cadre1" SRC="intro.php3">
  <FRAME NAME="cadre2" SRC="article1.php3">
  </FRAMESET>
</FRAMESET>


Menu primaire
Som-
maire
Article

<FRAMESET ROWS="15%,*">
<FRAME NAME="menu" SRC="menu0.php3">
  <FRAMESET COLS="50%,*">
  <FRAME NAME="sommaire" SRC="sommaire.php3">
  <FRAME NAME="article" SRC="article1.php3">
  </FRAMESET>
</FRAMESET>

A noter qu'il n'est pas indispensable de donner des noms à tous les cadres. Ainsi ceux vers lesquels aucun lien n'ira jamais pourrais très bien ne porter aucun nom. Par contre ce nom est absoluement obligatoire pour le ou les cadre(s) vers lesquels des liens pointent leur destinations.


Les bordures

On peut ou non donner une bordure à l'ensemble des cadres grace à l'attribut FRAMEBORDER (valeur YES ou NO) de la balise <FRAMESET>. Par défaut, FRAMEBORDER="YES".

Pour donner une taille spécifique à la bordure, utilisez l'attribut BORDER dont la valeur est la largeur en pixel de la bordure. Par défaut, BORDER=5.

On peut aussi choisir la couleur de la bordure de l'ensemble des cadres à l'aide de l'attribut BORDERCOLOR dont la valeur est soit le nom normalisé (HTML) de la couleur soit le code hexadécimal correspondant. Par défaut, cette couleur est celle de la palette Windows courante.

Exemple :

<FRAMESET ROWS="30%,*" FRAMEBORDER="yes" BORDER=3 BORDERCOLOR="red">
<FRAME NAME="sommaire" SRC="somaire.php3">
<FRAME NAME="article" SRC="article1.php3">
</FRAMESET>


Les marges internes aux cadres

Comme très souvent ça fait plutôt vilain d'écrire juste au bord d'un cadre, il faut mettre des marges sur les côtés gauche et droit du cadre avec l'attribut MARGINWIDTH de la balise <FRAME> et dont la valeur est le nombre de pixel en largeur de la marge de gauche et de la marge de droite. On peut faire la même chose pour les marges du haut et du bas avec MARGINHEIGHT.

Exemple :

<FRAMESET ROWS="30%,*">
<FRAME NAME="sommaire" SRC="somaire.php3">
<FRAME NAME="article" SRC="article1.php3" MARGINWIDTH=10 MARGINHEIGHT=20>
</FRAMESET>


Les barres de défilement

Il est possible d'interdire à l'internaute de redimentionner les cadres grace à sa souris par l'utilisation de l'attribut NORESIZE de la balise <FRAME>. Par défaut, les cadres peuvent être redimensionnés.

Exemple :

<FRAMESET ROWS="30%,*">
<FRAME NAME="sommaire" SRC="somaire.php3" NORESIZE>
<FRAME NAME="article" SRC="article1.php3" NORESIZE>
</FRAMESET>

Il est également permit d'attribuer ou non des barres de défilement à un cadre grace à l'attribut SCROLLING dont les valeurs sont :

  • YES : barres horizontale et verticale internes au cadre
  • NO : pas de barre de défilement, ATTENTION car si le contenu du cadre est plus grand que l'espace disponible, vos visiteurs ne pourront pas tout voir !
  • AUTO c'est le navigateur qui décide s'il est nécessaire d'insérer une barre horirontale et/ou verticale (valeur par défaut)

Exemple :

<FRAMESET ROWS="30%,*">
<FRAME NAME="sommaire" SRC="somaire.php3" SCROLLING="no">
<FRAME NAME="article" SRC="article1.php3" SCROLLING="auto">
</FRAMESET>


Incompatibilité

Si le navigateur de l'internaute ne supporte pas les cadres (versions antérieurs aux IE 3.0 et Netscape 3.0), il peut être intéressant de pouvoir afficher un message dans la fenêtre grace à la balise <NOFRAME>.

Exemple :

<FRAMESET ROWS="30%,*">
<FRAME NAME="sommaire" SRC="somaire.php3">
<FRAME NAME="article" SRC="article1.php3">
</FRAMESET>
<NOFRAME>
<BODY>
Votre navigateur ne supporte pas les cadres, <BR>
mettez-le à jour auprès de Netscape ou Microsoft.
</BODY>
</NOFRAME>


Cadres locaux

Il est possible de définir à l'intérieur d'une page HTML contenant du texte, des images... un cadre local (ou des cadres, à loisir) à l'intérieur duquel s'affichera le contenu d'une autre page HTML. La balise associée est <IFRAME>.

Ces attributs sont FRAMEBORDER (dont la valeur YES ou NO autorise ou interdit le dessin d'une bordure autour du cadre local), MARGINHEIGHT, MARGINWIDTH (qui définissent reciproquement la marge interne sur la hauteur et la largeur), NAME (qui spécifie le nom du cadre, utile en JavaScript), SCROLLING (YES : barres horizontale et verticale internes au cadre, NO : pas de barre de défilement, AUTO c'est le navigateur qui décide s'il est nécessaire d'insérer une barre horirontale et/ou verticale), SRC (le plus important car spécifie l'adresse de la page à afficher dans le cadre local), HEIGHT, WIDTH (respectivement la hauteur et la largeur du cadre) et ALIGN (dont la valeur LEFT, RIGHT, CENTER, JUSTIFY permet d'aligner le cadre à gauche, à droite, au centre ou de le justifier).

Dans le conteneur <IFRAME>, vous pouvez insérer du texte (ou des images) qui sera affiché dans les navigateurs n'affichant pas les cadres locaux.

Exemple :

<IFRAME SRC="intro.php3" WIDTH=400 HEIGTH=200>
Désolé vous z'avez pas IE5 !
</IFRAME>

Responsable bénévole de la rubrique Développement Web : Xavier Lecomte -