Entrée | Sommaire | Historique | Structure | Entête et Corps | Textes | Liens | Listes | Images | Tableaux | Cadres | CSS | Propriétés CSS | Annexes
Les cadres permettent de partager une même fenêtre en plusieurs cadres dont le contenu de chacun est indépendant des autres cadres.
Ils sont souvent utilisés pour mettre un menu sur la gauche d'une fenêtre dont les liens permettent d'accéder au contenu d'un site, mais sur la droite de la fenêtre cette fois-ci. Ceci permettant de garder le menu disponible sans avoir à le copier sur chaque page du site.
Un page HTML simple, et une page contenant des cadres sont définie différemment.
En fait, une page contenant des cadres n'av pas de contenu, mais uniquement la description des différents cadres qui partagerons la fenêtre, ainsi que les pages HTML qui devrons être chargées lors du chargement de cette page.
Une page de cadre ne contient donc pas de balise <body> et </body> mais des balise <frameset> et <frameset> . C'est entre ces balises que seront définit le contenu des chaque cadre lorsque la page sera chargée ceci grâce aux balises <frame /> .
Cependant, certains navigateurs ne gèrent pas les frames. Il est donc possible de donner un contenu à la manière d'une page HTML classique, en mettant ce contenu entre les balises <noframe> et </noframe> .
Une dernière particularité des documents de description de cadres, est qu'ils utilisent une balise DOCTYPE spécifique qui déclare le document comme étant un jeu de cadre. Cette balise s'écrit de la manière suivante:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/frameset.dtd">
| Code | Effet |
|---|---|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/frameset.dtd"> |
En-tête habituelle des documents html avec la balise DOCTYPE définissant un document de description de cadres. |
<frameset cols="2"> |
division d'une fenêtre en 2 colonnes. Chaque colonne étant un cadre. |
<frame src="menu.html" /> |
description du premier cadre de la fenêtre (celui de gauche). |
<frame src="page.html" /> |
description du deuxième cadre de la fenêtre (celui de droite). |
</frameset> |
fin de la description des cadres de la fenêtre. |
<noframe> |
introduction d'un contenu alternatif pour les pages ne gérant pas les cadres. |
<body>contenu d'une page HTML </body>
|
description du contenu de la page HTML affichée par un navigateur ne gérant pas les cadres. |
</noframe> |
fin de la description du contenu alternatif de la page de description de cadres. |
</html> |
fin de la page HTML. |
La balise <frameset> permet de signaler que la page actuelle est une description du découpage d'une fenêtre en cadre.
Cette balise remplace la balise <body> . La description du partage de la fenêtre doit se terminer par la balise </frameset> .
Entre des balises <frameset> et </frameset>, il peux y avoir:
Attention, utiliser uniquement des balises <frameset> ne sert pas a grand chose puisqu'elles permettent juste de définir des zones dans une page, mais, n'incluent aucun contenu.
Pour inclure un contenu dans les cadres de la page, il faut utiliser les balises <frame /> .
Trois choses sont à noter:
Si vous définissez les cadres par leur taille, et non leur nombre, il est préférable d'avoir au moins une des valeurs comme étant "*" . De cette manière, vous êtes sur que toute la page est couverte par des cadres, et il n'y aura pas d'erreur d'interprétation par les butineurs.
si votre document comporte plusieurs frameset, et que vous utilisez l'attribut border, pensez bien si cet attribut est définie à 0 pour un frameset, mais qu'un autre frameset adjacent a une valeur de 1 dans cet attribut, les bordures entre les 2 frameset seront visibles.
Il est possible d'utiliser les attributs cols et rows dans une même balise frameset, mais, il est difficile de savoir si la description du contenu des cadres se fera ligne par ligne, ou colonne par colonne. Il est donc plus judicieux de définir un frameset partageant la page en plusieurs colonne, puis de définir un nouveau partage en ligne à la place de chaque cadre.
| Code | Effet |
|---|---|
<frameset cols="30%,50%" >
|
La fenêtre est divisée en 2 cadres occupant respectivement 30 et 50 pourcent de la largeur de la fenêtre. mais, il reste 20 pourcent qui ne sont pas définit, il est impossible de connaître quel sera le résultat final de ce découpage. |
<frameset cols="2" rows="3" >
|
L'apparence d'un tel découpage est incertain. La page est découpée en 2 colonnes et 3 lignes, mais il est impossible de savoir dans quel cadre sera affiché chacune des pages html. |
| Code | Effet | ||||||
|---|---|---|---|---|---|---|---|
<frameset cols="2"
|
Partage une fenêtre en 2 cadres séparés verticalement. | ||||||
<frame src="page_1.html" />
|
La page html_1.html sera chargée dans le premier cadre (celui de gauche). | ||||||
<frame src="page_2.html" />
|
La page html_2.html sera chargée dans le deuxième cadre (celui de droite). | ||||||
</frameset>
|
fermeture de la description de ce groupe de cadre. | ||||||
<frameset rows="20%,*"
|
Partage une fenêtre en 2 cadres séparés horizontalement. | ||||||
<frame src="page_3.html" />
|
La page html_3.html sera chargée dans le premier cadre (celui du haut) qui aura une largeur de 20% de la largeur de la fenêtre. | ||||||
<frame src="page_4.html" />
|
La page html_4.html sera chargée dans le deuxième cadre (celui du bas), et occupera le reste de la fenêtre. | ||||||
</frameset>
|
fermeture de la description de ce groupe de cadre. | ||||||
<frameset rows="2"
|
Partage une fenêtre en 2 cadres séparés horizontalement. | ||||||
<frame src="page_3.html" />
|
La page html_3.html sera chargée dans le premier cadre (celui du haut). | ||||||
<frameset cols="2"
|
Partage le deuxième cadre en 2 cadres séparés verticalement. | ||||||
<frame src="page_1.html" />
|
La page html_1.html sera chargée dans le premier cadre de ce groupe, et sera donc situé en bas à gauche. | ||||||
<frame src="page_2.html" />
|
La page html_2.html sera chargée dans le deuxième cadre de ce groupe, et sera donc situé en bas à droite. | ||||||
</frameset>
|
fermeture de la description du groupe de cadre inférieur. | ||||||
</frameset>
|
fermeture de la description du cadre général. | ||||||
<frameset cols="2" >
|
Ici, est présenté une manière plus correcte de découper une fenêtre pour obtenir un résultat similaire à l'exemple de la mauvaise utilisation de balise. La fenêtre sera donc découpée en deux colonnes ayant chacune trois lignes de cadre. Les pages seront chargées de la manière suivante:
|
Cette balise permet de définir d'une part ce que contiendra un cadre, et d'autre part, une partie de l'apparence du cadre.
Exemple d'utilisation d'un jeu de cadre simple:
Code:
<frameset cols="20%,*" >
<frame src="menu.html" name="gauche" />
<frame src="site.html" name="principal" />
</frameset>
Au démarrage de cette page, la page menu.html est affiché dans le cadre de gauche nommé menu. Ce cadre a une largeur de 20% de la taille de la fenêtre.
La page site.html est, elle, affiché dans le cadre de droite nommé principal occupant le reste de la fenetre.
Si la page menu.html contient un lien <a href="accueil.html" target="principal" >accueil du site </a> .
Lorsque ce lien sera activé, la page menu.html restera en place, et c'est la page du cadre nommé principal (celui de droite) qui changera pour afficher la page acceuil.html
Cette balise permet d'inclure dans la page un contenu classique d'une page html, situé entre les balises <noframe><body> et </body></noframe> Ce contenu peut être n'importe quel contenu excepté bien sur des description de cadre puisque si ce contenu est affiché c'est que le butineur qui lit la page, ne peux interpréter ce genre de contenu.
Cette balise n'a aucun attribut. Elle permet juste aux navigateurs qui interprétant les cadres correctement d'ignorer son contenu.
Cette balise permet d'inclure un cadre à l'intérieur d'un document html.
La contenu de ce cadre pourra être changé de la même manière qu'un cadre normal, mais disparaîtra lorsque la page html qui le contient changera.
Si votre butineur interprète les cadres flottants, vous devriez en avoir un exemple ci-dessous
Entrée | Sommaire | Historique | Structure | Entête et Corps | Textes | Liens | Listes | Images | Tableaux | Cadres | CSS | Propriétés CSS | Annexes