Les frames

Les frames (cadres en Français) permettent d'afficher plusieurs pages HTML au sein d'une même page dans des cadres. En résumé, une frame, c'est ni plus ni moins qu'une page HTML appelé dans un cadre. L'utilisation des frames dans la conception d'un site site web est un peut particulière.
Dans un premier temps, la balise <body> et </body> permettant de définir le corp d'un document (X)HTML est mis au "rencart" et remplacée par la balise <frameset> et </frameset> contenant les frames.

Dans cet exemple, nous utiliserons un fichier nommé index.html.

Pour définir des frames qui s'afficheront horizontalement, on utilise l'attribut ROWS="". Cet attribut contient la taille de chaque frame séparée par une virgule, soit, ROWS="50%,50%". Dans cet exemple, chaque frame prendra 50% de votre écran (moitiée/moitiée). Nous verrons les autres attributs un peut plus loin!

<html>
  <head>
   <title>Exemple d'utilisation des frames</title>
  </head>
 
  <frameset ROWS="50%,50%" bordercolor="#000" border="1px">
<!--ROWS signifie que les frames sont horizontales-->
  </frameset>
 
</html>

Pour définir des frames qui s'afficheront verticalement, on utilise l'attribut COLS="". Cet attribut contient également la taille de chaque frame séparée par une virgule, soit, COLS="50%,50%".

<html>
  <head>
   <title>Exemple d'utilisation des frames</title>
  </head>
 
  <frameset COLS="50%,50%" bordercolor="#000" border="1px">
<!--COLS signifie que les frames sont verticales-->
  </frameset>
 
</html>

A l'intérieure de la balise frameset, nous indiquons la source des frames en leur donnant un nom grâce à l'attribut name et avec quelques autres attributs en plus que nous verrons un peut plus loin. Le nom que vous donnez à l'attribut name est très important car celà permet de définir dans quelle cadre seront appelés vos pages.

<html>
  <head>
   <title>Exemple d'utilisation des frames</title>
  </head>
 
  <frameset ROWS="50%,50%" bordercolor="#000" border="1px">
  <frame src="menu.html" name="haut" scrolling="no" Noresize>
  <frame src="lien-1.html" name="bas" scrolling="yes" Noresize>
  </frameset>
 
</html>

Les frames
Dans cet exemple, ma première frame se nomme menu.html et porte l'attribut name="haut". Cette frame va donc contenir le menu ci-dessous permettant de naviguer dans les différentes pages.

Fichier menu.html :
<html>
  <head>
   <title>Frame constituant le menu</title>
  </head>
 
 <body>
<p><b>Menu normal</b><br/>
 
<a href="lien-1.html" target="bas">lien-1.html</a><br/>
<a href="lien-2.html" target="bas">lien-2.html</a><br/>
<a href="lien-3.html" target="bas">lien-3.html</a><br/>
<a href="lien-4.html" target="bas">lien-4.html</a><br/>
<a href="http://creer-un-site.fr" target="bas">Créer un site</a>
<p/>
 
 </body>
</html>

Comme vous le constatez, ce sont des liens tout ce qu'il y a de plus normal à une exception près .. l'attribut "target" qui indique que ces différentes pages doivent s'afficher dans le cadre nommé "bas". Ainsi, si l'attribut name de la frame se nomme "bas" ( name="bas" ), l'attribut "target" sera aussi nommé "bas" (target="bas") pour appeler la page dans le cadre correspondant.

Les attributs de la balise frameset

Attribut Signification Résultat
ROWS="," Contient une valeur en pourcentage comprit entre 1 et 100 ou une valeur en pixel. On peut également utiliser le symbole * permettant de donner une valeur automatique à l'une des 2 valeurs (ROWS="20,*") Affiche des cadres horizontal
COLS="," Contient une valeur en pourcentage comprit entre 1 et 100 ou une valeur en pixel. On peut également utiliser le symbole * permettant de donner une valeur automatique à l'une des 2 valeurs (COLS="20,*") Affiche des cadres vertical
bordercolor="" Contient une valeur hexadécimal (#000) Couleur de la bordure
border="" Contient une valeur en pixel Taille de la bordure
frameborder="" Contient comme valeur "yes" ou "no" Indique si la frame a une bordure
framespacing="" Contient une valeur en pixel. Espace entre les cadres

Le attributs de la balise frame

Attribut Signification Résultat
src="" Contient l'url de la page. Permet de définir l'emplacement de la page.
name="" Contient le nom du cadre. Permet de définir le nom du cadre servant à afficher une page grâce à l'attribut "Target".
Noresize Permet d'interdir le redimensionnement des cadres par l'utilisateur. Interdit le redimensionnement des cadres.
marginwidth="" Contient une valeur en pixel Indique la taille des marges latérales.
scrolling="" Contient comme valeur "yes", "no" ou "auto". Indique si on autorise ou pas la barre de défilement.
marginheight="" Contient une valeur en pixel. Espace la taille des marges haut et bas.
border="" Contient une valeur en pixel. Indique la taille de l'espace en les cadres (certains navigateurs seulement).
frameborder="" Contient comme valeur "yes" ou "no". Indique si les cadres ont une bordure.

Attribut des liens

Valeur Résultat
<a href="lien-1.html" target="bas">
target="_self" Permet d'afficher la page dans le même cadre ou se situe le lien.
target="_blank" Permet d'afficher la page dans une nouvelle fenêtre.
target="_top" Permet d'afficher la page en entière dans le navigateur.
target="_parent" Permet d'afficher la page dans le cadre de niveau supérieur.

Comme je le disais au début de ce tutoriel, la balise <body> et </body> ont été misent au "rencart" ... en faite, pas tout à fait!
Il faut savoir qu'un site élaboré à partir de frames est pour ainsi dire une cata. d'un point de vue référencement et navigabilité car les moteurs indexent pas ou mal les frames, mais si vous percévérez en ce sens, il vous faudra alors utiliser un petit plus à votre code en ajoutant la balise <noframes> et </noframes>.

<noframes> et </noframes>

Cette balise permet normalement d'indiquer à certains navigateurs (donc à l'utilisateur) qui ne savent pas lire les frames que le site est justement créé à partir de frames et que leurs navigateurs est trop pourrit pour les lires!

<html>
  <head>
   <title>Exemple d'utilisation des frames</title>
  </head>
 
  <frameset ROWS="50%,50%" bordercolor="#000" border="1px">
  <frame src="menu.html" name="haut" scrolling="no" Noresize>
  <frame src="lien-1.html" name="bas" scrolling="yes" Noresize>
  </frameset>
 
<noframes>
 <body>
<p>Ce site utilise des frames et nécessite un navigateur supportant les frames!</p>
 </body>
</noframes>
 
</html>

Histoire d'améliorer le référencement d'un tel site, nous allons simplement ajouter un peut de texte représentant le contenu du dit site avec beaucoup de liens ... ce qui revient à faire un plan du site dans cette balise.

<html>
  <head>
   <title>Exemple d'utilisation des frames</title>
  </head>
 
  <frameset ROWS="50%,50%" bordercolor="#000" border="1px">
  <frame src="menu.html" name="haut" scrolling="no" Noresize>
  <frame src="lien-1.html" name="bas" scrolling="yes" Noresize>
  </frameset>
 
<noframes>
 <body>
<p>Ce site utilise des frames et nécessite un navigateur supportant les frames!</p>
<h1>Démonstration de l'utilisation des frames</h1>
<p><a href="index-COLS.html" target="_blank">Menu vertical - Attribut COLS</a><br/>
<a href="index.html" target="_blank">Menu horizontal - Attribut ROWS</a><br/>
<a href="index-3cadres.html" target="_blank">Exemple de 3 frames</a></p>
<h2>Navigation</h2>
<p>
<a href="lien-1.html" target="bas">lien-1.html</a><br/>
<a href="lien-2.html" target="bas">lien-2.html</a><br/>
<a href="lien-3.html" target="bas">lien-3.html</a><br/>
<a href="lien-4.html" target="bas">lien-4.html</a><br/>
<a href="http://creer-un-site.fr" target="bas">Créer un site</a>
<p/>
 </body>
</noframes>
 
</html>
Démonstratio
Voir/déposer un commentaire (2) | Signaler un problème