Reprenons notre catalogue. Il n'est pas très satisfaisant, la lecture n'est pas très aisée.
Nous allons transformer ce catalogue grâce aux cadres. Nous aurons dans la partie gauche de notre fenêtre, le menu, la partie droite sera réservée aux images.
Il faut d'abord réaliser la structure de la fenêtre, c'est une page indépendante que nous nommerons : "catalogue2.html".
|
<HTML> <HEAD> <TITLE> Catalogue 2</TITLE> </HEAD> <FRAMESET COLS="200,*" BORDER="2" BORDERCOLOR="#000000"> <FRAME NAME="menu" SRC="menu.html" SCROLLING="auto"> <FRAME NAME="principale" SRC="images.html" SCROLLING="auto"> </FRAMESET> <BODY BGCOLOR="#FFFFFF"> </BODY> </HTML> |
La balise FRAMESET définit la répartition entre les différents cadres (définis dans FRAME).
| Options de FRAMESET | Valeur | Fonction |
|---|---|---|
| COLS= ou ROWS= |
nombre de pixel, pourcentage ou * (joker) | épaisseur des différentes colonnes ou lignes |
| BORDER= | valeur numérique | épaisseur du trait séparant les cadres |
| BORDERCOLOR= | nom de la couleur en anglais ou code #RRGGBB | couleur du trait séparant les cadres |
| Options de FRAME | Valeur | Fonction |
|---|---|---|
| NAME= | nom | définit le nom du cadre |
| SRC= | chemin | définit le chemin vers l'élément qui va occuper le cadre |
| SCROLLING= | auto, yes, no | définit la présence ou non des ascenceurs dans le cadre |
Dans note exemple, la page catalogue2.html fait appel à 2 autres pages "menu.html" et "images.html". Ces 2 pages se partegeront la fenêtre, une ligne verticale noire à 200 pixel du bord gauche les séparera.
| revenir | suite... |