- Pourquoi les cadres ?
- Qu'est-ce qu'un cadre ?
- Les balises de base
- Les bordures
- Les marges internes
- Les barres de défilement
- Incompatibilité
- Cadres locaux
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.
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.
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) :
|
|
<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>
|
|
|
<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.
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>
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>
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>
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>
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>
| 
