Les cadres sont utilisés pour montrer plus d'un document html dans une fenêtre. Cela signifie que vous aurez moins de contenu, qui aura le rôle de montrer au navigateur quelles pages doivent être affichées. Depuis PHP et CSS ont été introduits, cette technique est de moins en moins utilisée.
Généralement, les cadres sont utilisés pour afficher un menu dans un coin et le contenu dans un autre coin. Quand quelqu'un cliquera sur un lien depuis le menu une autre page s'ouvrira dans la partie contenu.
Nous mettrons ceci en exemple en utilisant le code suivant:
html<html>
<head></head>
<frameset cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html>Utiliser le code suivant:
html<html>
<head></head>
<frameset rows="20%,*">
<frame src="title.html">
<frameset cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</frameset>
</html>frameset rows="#%, *" - "rows" établit la taille de chaque cadre qui sera affiché. Dans l'exemple précédent nous avons choisi que le premier cadre sera 20%, et le reste de l'espace restant sera divisé entre menu.html et content.html
Vous devez avoir remarqué qu'entre les cadres il y a quelques lignes grises qui la plupart du temps ne sont pas voulues. Les effacer est possible en utilisant les balises frameborder et framespacing. Ces attributs seront introduits sous la balise frameset.
**Note: Frameset et frameborder est le même attribut. Il y a quelques navigateurs qui ne reconnaissent pas les deux, seulement un des deux. Cela étant dit, notre conseil est d'utiliser les deux pour plus de sécurité.
Voici un exemple pratique:
html<html>
<head></head>
<frameset border="0" frameborder="0" framespacing="0" rows="20%,*">
<frame src="title.html">
<frameset border="0" frameborder="0" framespacing="0" cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</frameset>
</html>Pour maintenir le menu dans sa position actuelle et que lorsqu'on clique sur la page contact pour ouvrir, par exemple, au lieu de la page de contenu, nous nommerons chaque cadre et nous spécifierons l'emplacement où il s'ouvrera en utilisant la balise 'base target'.
Voici notre code pour la page:
html<html>
<head>
<base target="content">
</head>
<frameset rows="20%,*">
<frame name="title" src="title.html">
<frameset cols="30%,*">
<frame name="menu" src="menu.html">
<name="content" src="content.html">
</frameset>
</frameset>
</html>Vous pouvez personnaliser le cadre davantage en utilisant noresize et scrolling
html<html>
<head></head>
<frameset border="2" frameborder="1" framespacing="2" rows="20%,*">
<frame src="title.html" noresize scrolling="no">
<frameset border="4" frameborder="1" framespacing="4" cols="30%,*">
<frame src="menu.html" scrolling="auto" noresize>
<frame src="content.html" scrolling="yes" noresize>
</frameset>
</frameset>
</html>