Webzine de vulgarisation des sciences et techniques.
membre de
avec 
III. Les cadres
Par Hugo ETIEVANT
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 baseUne 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
L'architecture de base d'une page principale est similaire à celle des autres pages web
à cela que la balise <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 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 navigateurDéfinition individuelle des cadres : La balise <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 A noter que la première valeur de la liste de l'attribut <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 ( Résultat :
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) :
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 borduresOn peut ou non donner une bordure à l'ensemble des cadres grace à l'attribut
Pour donner une taille spécifique à la bordure, utilisez l'attribut On peut aussi choisir la couleur de la bordure de l'ensemble des cadres à l'aide de l'attribut
Exemple :
Les marges internes aux cadresComme 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 Exemple :
Les barres de défilementIl est possible d'interdire à l'internaute de redimentionner les cadres grace à sa souris par l'utilisation
de l'attribut Exemple :
Il est également permit d'attribuer ou non des barres de défilement à un cadre grace à l'attribut
Exemple :
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 Exemple :
Cadres locaux
| ||||||||||||||||||
