Parfois, principalement pour des raisons de navigation, vous avez besoin de diviser l’affichage de votre page Web en différentes portions à l’écran. Nous appelons ces différentes sections indépendantes « cadres ».

Ceci vous permet de conserver un menu de navigation dans une partie de l’écran et d’afficher le contenu dans une autre partie de l’écran.

Le contenu de chaque cadre est une page Web (HTML) indépendante. Ce qui veut dire que si vous voulez créer une page avec 2 cadres, vous aurez besoin d’au moins 2 pages Web (une pour chaque cadre), en plus d’une autre page pour la définition des cadres.

La première chose que vous devrez décider est le nom des cadres. Chaque cadre a besoin d’un nom afin que le contenu soit affiché dans le bon cadre (et ne pas avoir par exemple le contenu d'une grande page de contenu affiché dans le petit espace de votre menu).

Pour cet exemple, nous allons utiliser des noms simples et nommer nos cadres « menu » et « contenu ». Le cadre de menu sera une petite colonne à la gauche de la fenêtre avec notre menu de navigation – alors que le cadre « contenu » remplira le reste de l'écran et servira à afficher le contenu de votre site Web. Cela ressemblera à ceci :

Vos visiteurs cliqueront sur un lien depuis le cadre menu et la page choisie sera affichée dans le cadre de contenu.

Vous devez ensuite créer vos pages de contenu. Ces pages sont des pages HTML tout à fait normales, comme vous le feriez pour des pages sans cadres, sans aucun code spécial.

Mais il n’en va pas de même pour la page de menu… qui a besoin d’une légère modification afin de bien jouer son rôle dans le système de cadres.

Normalement, lorsque vous cliquez sur un lien, la nouvelle page s’ouvre dans le même cadre ou fenêtre. Dans le contexte d’un menu dans un cadre, ce n’est pas ce que nous voulons. Nous voulons que le contenu soit ouvert dans un autre cadre afin d’être visionné.

Il y a deux façons d’y arriver. La plus commune est de changer la destination dans la définition de vos liens externes (pour avoir quelque chose comme <A HREF=”page2.html” TARGET=”contenu”>page 2</A>). Mais si vous avez plusieurs liens, cela peut être long à faire.

Il y a une autre solution... ajoutez simplement le code suivant au début de votre page : <BASE TARGET=”contenu”>

Cela indiquera que la destination par défaut pour tous les liens du menu est le cadre “contenu”.

Maintenant que vous avez au moins une page de contenu et votre page de menu toutes prêtes à être utilisées, vous pouvez créer votre définition de cadres.

Créez un nouveau document HTML et sauvegardez-le dans le même répertoire que vos pages de contenu et de menu, sous le nom « index.htm ». Puis allez dans le menu à onglets Tableaux, cadres et listes, puis cliquez sur le 5e bouton pour créer une nouvelle page avec cadres.

Vous aurez une grande fenêtre avec un fond bleu. Ce fond bleu représente la pleine page Web que vos visiteurs verront dans leur fureteur. Dans le coin supérieur droit, vous y verrez quelques boutons pour créer des cadres. Nous utiliserons le tout premier bouton afin de diviser la page verticalement… vous verrez alors l’espace bleu se diviser en deux parties… chacune d’elles étant un cadre.

Nous commencerons par la partie de droite. Assurez-vous qu'elle est bleue en cliquant dans cette portion afin de la sélectionner… puis accédez à ses propriétés (via le 3e bouton de droite ou encore via le menu contextuel de votre souris). Vous devez d'abord choisir le fichier source de ce cadre. Utilisez le menu de navigation au bout du champ " Fichier Source " afin de choisir le fichier qui sera affiché par défaut dans ce cadre. Puis dans le champ " Nom identificateur du cadre " vous devez indiquer quel est le nom que vous donnez à ce cadre… dans notre cas entrez " menu ". Cela devrait donc ressembler à l'image ci-contre.

Nous ne modifierons pas les autres options.

Allez dans l’onglet « Autres Propriétés » et entrez une valeur de 200 pour la largeur, lui donnant une largeur de 200 pixels. Cliquez OK.

Vous serez retourné à l’assistant de création de cadres. Cliquez sur la partie de droite et accédez à ses propriétés de la même façon que ci-dessus.

Cette fois, sélectionnez le nom de votre première page de contenu et nommes le cadre « contenu ». Cliquez sur OK pour retourner à l’assistant. Vous avez maintenant fini la définition de vos 2 cadres… donc vous pouvez cliquer sur OK pour quitter l’assistant.

Sauvegardez votre fichier et votre travail est terminé.

Vous devriez voir le code suivant dans votre page Web :

Votre définition de cadres est terminée et vous pouvez en voir le résultat en regardant la page "index.html".

Vous savez maintenant comment procéder pour créer des pages avec cadres… à vous de jouer avec les différentes options (marges, bordure, etc…) afin de voir les différents effets possibles.