logo UsualSoft   Skip Navigation Links
Accueil
Références
Formations
TutorielsExpand Tutoriels
Liens téléchargements

Contact : usualsoft@outlook.fr
Microsoft Certified Professional
Cours : HTML

Les cadres

Gilles Chamillard

Fiche n°7
Retour    

I) Le concept de cadre


Netscape a introduit, à partir de la version 2.0, la possibilité de diviser la fenêtre du navigateur en plusieurs cadres indépendants (frames), contenant chacun un document HTML différent. Cette extension a ensuite été intégrée dans la norme actuelle HTML 4.0.

Pourquoi ?

Ce principe s'utilise présenter de façon plus rationnelle un site avec par exemple une barre de navigation (type menu et de hauteur fixe) et un corps contenant les éléments (page déroulante). Il existe aussi quelques inconvénients :

  • la mise à jour du site est plus difficile,
  • les frames accroissent sensiblement les temps de chargement pour vos visiteurs,
  • les frames ont tendances à "charger" le design des sites (un maximum de trois frames est impératif).

Conseils

La mise en place d'un jeu de cadres se construit avant sur le papier ! Vous définirez ainsi l'exacte présentation de vos pages, la fonction de chacun de vos cadres et leurs attributs. Dans le cas d'une gestion évoluée des cadres, vous associerez naturellement des scripts, où les références de vos cadres et de leurs éléments sont indispensables.

 

II) La mise en oeuvre du concept de cadre

Les balises et attributs essentiels

  • <FRAMESET> détermine le cadre, avec pour attributs rows pour un découpage horizontal et cols pour un découpage vertical. Les valeurs attribuées à ces attributs peuvent être fixes (en pixels) ou variables (en pourcentage).
  • <FRAME> indique le contenu chargé dans le cadre. L'attribut src est obligatoire, il donne la source du document à charger au navigateur URL. Notez donc que la page html vue fait partie d'un document séparé.
  • <NOFRAMES> propose un contenu sans cadres pour les navigateurs non compatibles (il y en a encore !) ou pour des résolutions de 640 X 480 sur un moniteur 14 pouces ...

Exemple

Nous voulons créer un jeu de deux cadres verticaux comme ceci :

Le code correspondant du fichier cadre.htm :

 

<html>
 <head>
  <title> Exemple de cadre </title>
 </head>

 <frameset cols="50,*"> 
  <frame src="menu.htm"> <!-- Première colonne, largeur fixe de 50 -->
  <frame src="contenu.htm"> <!-- Deuxième colonne, largeur variable sur le reste -->
 </frameset>

 <noframes>
  <body>
   ... contenu de la page sans cadres
  </body>
 </noframes>
</html>

Remarques

  • La balise <FRAMESET> remplace la balise <BODY> dans le document html
  • Vous avez dans notre exemple trois fichiers html : cadre.htm, menu.htm et contenu.htm
  • L'attribut cols à pour valeur 50 (donc en pixels), * signifiant "le reste"

Les cadres imbriqués

Vous avez la possibilité de créer des cadres dans les cadres... Voyons la structure suivante :

Voici le code correspondant :

 

<html>
 <head>
  <title> Exemple de cadre bis </title>
 </head>

 <frameset cols="50,*"> 
  <frame src="menu.htm"> <!-- Première colonne, largeur fixe de 50 -->
  <frameset rows="20%,80%">
   <frame src="presentation.htm"> <!-- Première ligne, largeur variable 20% -->
   <frame src="contenu.htm"> <!-- Deuxième ligne, largeur variable de 80% -->
  </frameset>
 </frameset>

 <noframes>
  <body>
   ... contenu de la page sans cadres
  </body>
 </noframes>
</html>

Remarques

  • On divise la fenêtre en deux cadres puis le cadre de droite en deux
  • On aurait pu mettre * au lieu de 80%, par défaut le cadre remplissant ce qui reste
  • La balise <FRAMESET> prend l'un ou l'autre des attributs cols et rows mais pas en même temps

Le chargement des pages et l'attribut target

Dans notre deuxième exemple (trois cadres), que ce passe-t'il s'il existe un lien vers une autre page dans la page d'accueil ? Que ce passe-t'il si, et cela est normal dans un menu, un lien vers une autre page existe dans la page menu et que l'on désire voir son contenu dans la page d'accueil ? La résolution de ces problèmes passe par l'attribut target de la balise <A> du lien et par l'attribut name de la balise <FRAME>.

 

 <!-- Dans la déclaration des cadres -->

...
   <frame src="contenu.htm" name="principal"> <!-- Le cadre a pour nom : principal -->
...


 <!-- Dans la page contenu.htm, on suppose un lien vers une autre page -->

... 
 <a href="boite.htm" target="principal"> M'écrire </a>
...

Remarque

  • Il existe des noms de cadres réservés : _blank charge le document dans une nouvelle fenêtre, _self charge le document dans le cadre contenant le lien, _parent charge le document dans le cadre supérieur (s'il existe) au cadre appelant et _top charge le document dans la fenêtre entière.

Dans notre exemple, le cadre père du cadre 2.2 est le cadre 2. Un lien cadre 2.2 sur son cadre parent ouvrira la fenêtre dans le cadre 2 effaçant par-là le cadre 2.1.

 

III) Extensions du concept de cadre

Les attributs complémentaires

Sur la balise <FRAME>

  • marginheight : donne la taille en pixels de la marge supérieure
  • marginwidth : donne la taille en pixels de la marge de gauche
  • noresize : interdit le redimensionnement du cadre par l'utilisateur
  • scrolling : yes ou no, autorise ou non les barres de défilement

Les cadres flottants

L'idée des cadres flottants vient cette fois-ci de Microsoft avec la version 3 d'Internet Explorer. Elle consiste à pouvoir afficher un cadre indépendant du reste du document et placé n'importe ou dans la page. Vous disposez de tous les éléments d'un cadre classique, y compris les barres de défilement.

La balise utilisée est <IFRAME> avec pour attributs obligatoires width, height et src qui indique respectivement la largeur et la hauteur du frame flottant (en pixels ou en pourcentage) et enfin la source URL du document à charger dans le cadre flottant. Entre la balise <IFRAME> et </IFRAME> sera placé le code pour les navigateurs non compatibles. Exemple de code de base d'un cadre flottant :

 

...
   <iframe src="contenu.htm" width=300 heigth=300>
    code ou image ou texte de remplacement
   </iframe>
...

Les autres attributs sont :

  • align : gère l'alignement du cadre, valeurs possibles left et right
  • frameborder : bordure du cadre, 1 l'affiche, 0 la masque
  • name : nom du cadre
  • noresize : interdit le redimensionnement du cadre par l'utilisateur
  • scrolling : détermine l'apparition des barres de défilement, valeurs possibles yes, no et auto

Remarque

  • N'oubliez-pas que le cadre flottant est un concept Microsoft Internet Eplorer. Il n'est pas visible avec les versions actuelles (4.6) de Netscape... En fait ce dernier utilise les balises <LAYER> et <ILAYER> introduites dans la version 4. Le W3C a rejeté ces balises, ce qui n'empêche pas Netscape de continuer à les implémenter dans son navigateur. Ce concept fait plus référence au HTML dynamique, il ne sera pas détaillé ici.

 

Retour haut Retour vers le haut de la page