26. Pages Web Encadrées

Objectifs

Après cette leçon, vous pourrez :

• Créer une page web composée de plusieurs cadres
• Ecrire des liens hypertexte chargeant leur contenu dans une partie spécifiée d'une page avec des cadres
• Ecrire des liens hypertexte chargeant leur contenu dans une page en remplaçant une page avec des cadres
• Modifier les attributs de bordure d'une page web composée de cadres

Leçon

Note : Si vous n'avez pas les documents des leçons précédentes, téléchargez une copie maintenant.

Vous avez sûrement vu des pages web utilisant les cadres. Si vous ne l'avez pas encore compris, cette page utilise des cadres -- si vous faites défiler cette leçon vers le bas, les liens dans la zone orange clair du haut restent fixes. Ils sont dans un cadre séparé, différent du reste de la page.

Les cadres font de cette page web deux documents HTML différents -- un document définit la mise en page de la portion du haut avec les liens de navigation, et l'autre contient le reste de cette leçon. Chaque cadre est indépendant.

L'avantage est évident pour les sites web contenant des liens de navigation vers plusieurs autre pages web. A titre d'autre exemple, consultez notre Web de Référence Multimedia. Cette base de données intègre un outil de recherche qui fige tous les éléments de contrôle et de navigation dans le cadre de gauche pendant que le contenu est affiché à droite.

On utilise les hyperliens d'une manière particulière dans les pages avec des cadres. Un hyperlien dans un cadre remplacera parfois le contenu de ce même cadre. Un hyperlien pourra aussi charger le nouveau contenu dans un autre cadre. Certains liens pourront méme complètement remplacer tous les cadres par une autre page. En fait, c'est le même genre de lien "cible" que nous avons vu dans la leçon 25.

Quels sont les inconvénients des cadres ? En tant que concepteur web, vous devez gérer plus de documents HTML. Quand on le convertit en cadres, un simple document HTML se décomposera en 3,4 ou peut-être 12 fichiers HTML. Pour l'utilisateur, une page avec des cadres mettra plus longtemps à se charger et à s'afficher. Quand elles sont mal conçues, les pages web avec des cadres sont confuses et peu professionnelles. Les cadres rendent également les documents difficiles à imprimer. Enfin, vous pouvez empêcher certains internautes de visiter votre site si ils utilisent des navigateurs ne supportant pas les cadres (la majorité des navigateurs depuis Netscape 2.0 et Internet Explorer 3.0 les supportent).

Quand utiliser des cadres ? Le contenu devrait vous le dire. Si vous avez besoin de garder à l'écran certains éléments d'une page tout en changeant une partie du contenu, les cadres peuvent être efficaces. Vous pouvez vous faire une meilleure idée en examinant d'autres sites web pour voir comment ils utilisent les cadres.

Bases des Cadres

Une page web utilisant des cadres se compose d'un document HTML "maître"que nous appellerons "modèle" de mise en page, définissant les framesets (ensemble de cadres), ou l'organisation des cadres dans la page. Ce document charge la structure des cadres et représente l'URL de la page contenant des cadres.

Il existe plusieurs façons de découper et diviser une page web :

Chacune des cases est associée à un fichier HTML qui décrit ce qui va dans cette zone. La première étape est donc de définir comment la page devra être divisée et la place allouée à chaque zone.

Une fois que vous avez une idée que vous pouvez représenter de façon visuelle, vous devez la décrire en termes de lignes et de colonnes, un peu comme nous l'avons vu en concevant les tables (voir la leçon 21). Commencez à travailler du haut à gauche jusqu'en bas à droite.

En regardant les exemples ci-dessus, l'exemple 1 est composé de 2 lignes et l'exemple 2 de 2 colonnes. L'exemple 3 peut être vu comme deux lignes contenant chacune deux colonnes, ou comme 2 colonnes contenant chacune deux lignes.

Vous êtes toujours avec nous ? L'exemple 5 peut être défini comme trois lignes, avec la ligne du milieu contenant deux colonnes. Tout comme l'exemple 6 dont la première ligne est celle contenant les deux colonnes.

Maintenant, regardez attentivement l'exemple 7. Il est divisé en 2 lignes. La ligne du bas contient 2 colonnes, chacune d'elles contenant deux lignes de proportions différentes.

Chaque collection de lignes et de colonnes forme un frameset (ensemble de cadres) HTML et le document HTML "modèle" de la page peut contenir un ou plusieurs framesets. Le format du document HTML est légèrement différent de ceux que nous avons créés jusqu'ici -- on enlève la paire de tags <body>...</body>. C'est tout à fait logique, compte tenu de ce que nous avons appris tout au début dans la leçon 1, car aucune des définitions de framesets ne décrit réellement le contenu de ce qui s'affichera dans la page web (normalement tout ce qui se trouve entre les tags <body>...</body>). Ce document décrit plutôt la structure de la page.

Vous avez ci-dessous le format générique d'un document HTML "modèle" :

  <!doctype html public "-//W3C//DTD HTML 3.2 Final//FR">
    <html>
    <head>
      <title>Titre de la Page Entière</title>
     </head>
    
      <FRAMESET ROWS/COLS="X,Y,...Z">
    	<FRAME SRC="frame_source1.html">
    	<FRAME SRC="frame_source2.html">
    	    :
    	    :
    	<FRAME SRC="frame_sourceN.html">	    
      </frameset>
      <NOFRAMES>
      Ce texte serait affiché dans un navigateur
      ne supportant pas les cadres.
      </NOFRAMES>
  </html>

La partie la plus difficile dans la conception de sites web utilisant des cadres réside dans la structure de ce document principal. Encore une fois, les chiffres que vous donnez dans la balise <FRAMESET...> décrivent le nombre et les dimensions d'un ensemble de lignes ou de colonnes dans la page. Vous pouvez utiliser, soit des pourcentages (i.e. ROWS=10%,30%,60%), soit des nombres fixes de pixels d'écran (i.e. COLS=100,300,80,200). Le choix se fera suivant votre besoin d'avoir un cadre de taille fixe (utilisez les pixels) ou qui puisse s'ajuster à la taille de la fenêtre de navigateur de l'internaute (utilisez les pourcentages). Nous verrons d'autres exemples au fur et à mesure.

Voyons donc comment se présentent certaines pages. En reprenant les exemples ci-dessus,

nous pourrions écrire la page pour l'exemple 1 comme suit :

    <!doctype html public "­//W3C//DTD HTML 3.2 Final//FR">
    <html>
    <head>
      <title>Une Page de Cadre avec deux Lignes</title>
     </head>
  
      <FRAMESET ROWS="15%,85%">
    	<FRAME SRC="frame_source1.html">
    	<FRAME SRC="frame_source2.html">    
      </frameset>
      <NOFRAMES>
      Ce texte serait affichÈ dans un navigateur
      ne supportant pas les cadres.
      </NOFRAMES>
  </html>

Nous pourrions aisément modifier ce document pour créer la structure de l'exemple 2 en changeant ROWS= par COLS=. Dans ces deux cas, si l'internaute modifie la taille de sa fenêtre de navigateur, les cadres s'ajusteront en fonction des pourcentages précisés. Si vous aviez voulu figer la taille d'un cadre, pour que dans l'exemple 1, la ligne du haut ait toujours une hauteur de 100 pixels, vous changeriez le tag de la manière suivante :

  <FRAMESET ROWS="100,*">

Maintenant, étudions un document plus complexe, celui qui définirait l'exemple 7 :

    <!doctype html public "­//W3C//DTD HTML 3.2 Final//FR">
    <html>
    <head>
      <title>Une Page plus Complexe</title>
     </head>
      <!-- deux lignes principales -->
      <FRAMESET ROWS="120,*>
      
      	<!-- la ligne 1 est un document unique -->
    	<FRAME SRC="row1.html">
    	
    	<!-- deux colonnes principales dans la ligne 2 -->
    	<FRAMESET COLS="75%,25%>
    		<!-- deux lignes dans la première colonne -->
    		<FRAMESET ROWS="60%,40%>
    			<FRAME SRC="row2col1row1.html">
    			<FRAME SRC="row2col1row2.html">
    		</frameset>
    			
        	<!-- deux lignes dans la seconde colonne -->
    		<FRAMESET ROWS="100,*>
    			<FRAME SRC="row2col21row1.html">
    			<FRAME SRC="row2col21row2.html">
    		</frameset>
    	</frameset>
      </frameset>
      <NOFRAMES>
      Ce texte serait affichÈ dans un navigateur
      ne supportant pas les cadres.
      </NOFRAMES>
  </html>

Oui, ca devient compliqué ! Et... vous allez apprendre à faire bien plus avec le code HTML des cadres des exemples ci-dessous.

Et maintenant, travaillons sur notre site Web Volcan. La page que nous avons créée pour le projet de Recherche, proj.html, contient trois sections différentes :

1. une description du projet,
2. une liste de références de sites web et
3. une bibliographie

Nous allons utiliser les cadres pour transformer cette page simple en une version présentée dans le diagramme ci-dessous.

Le cadre du haut contient les liens de navigation vers les autres pages de notre site. Ces liens doivent remplacer la page entière. Le cadre du bas contiendra notre bas de page standard, et les liens éventuels de cette zone doivent également remplacer toute la page. Le cadre gauche de la ligne du milieu présentera les hyperliens vers les trois différentes parties de la page d'origine. Ces hyperliens doivent charger leur contenu dans le cadre de droite. Le contenu des trois sections sera affiché dans le cadre droit de la ligne du milieu. Tous les hyperliens de cette zone renverront vers des sites web externes que nous chargerons dans une nouvelle fenêtre de navigateur.

Cette structure nous permet de diviser la page du projet en de plus petits morceaux ; pour l'instant, ils sont petits, mais vous voyez comme cela peut être pratique si nous avions beaucoup plus de contenu pour chaque section.

Voici les étapes pour construire cette page.

1. Changez le nom du fichier proj.html en proj-noframes.html. Ce sera la page que nous enverrons aux internautes utilisant un navigateur qui ne peut pas afficher les cadres.
2. Créez un nouveau fichier dans votre éditeur de texte et sauvegardez-le sous proj.html. Ce sera le document de structure des cadres pour la page. Entrez le code HTML suivant dans ce fichier :

<!doctype html public "-//W3C//DTD HTML 3.2 Final//FR">
<html><head>
<title>Projet</title></head>
<FRAMESET ROWS="45,*,150">
	<FRAME NAME="top" SRC="proj_nav.html" scrolling="no">

	<FRAMESET COLS="24%,*">			 
		<FRAME NAME="menu" SRC="proj_menu.html">
		<FRAME NAME="display" SRC="proj_descrip.html">		 
	</FRAMESET>
	
	<FRAME NAME="bottom" SRC="proj_footer.html" scrolling="no">
</FRAMESET>

<NOFRAMES>
<h2 align=center>NOTE : ce site utilise les cadres mais, apparemment, votre navigateur
 ne supporte pas cette fonctionnalité. Essayez la page 
<A HREF="proj-noframes.html">alternative</A>.</h2>
</NOFRAMES>
</html>

NOTE : Ce frameset fixe la ligne du haut à 45 pixels de haut, celle du bas à 150 pixels et la ligne du milieu utilise la place qui reste. Dans les tags <FRAME NAME="top" SRC...> des cadres haut et bas, on a ajouté les attributs scrolling=no indiquant au navigateur de supprimer les barres de défilement dans ce cadre (ces cadres sont petits et n'ont pas besoin d'ascenseurs). Sans cette précision, le navigateur active l'attribut scrolling=auto indiquant que des barres de défilement apparaîtront si le contenu est trop grand pour s'afficher entièrement dans la zone spécifiée. Vous pouvez également imposer les ascenseurs grâce à l'attribut scrolling=yes.

Chacun des tags <FRAME NAME="top" SRC...> contient également un attribut NAME= que nous utiliserons quand nous définirons les liens entre les différents cadres.

Enfin, notez la zone <NOFRAMES> qui proposera à l'internaute utilisant un navigateur sans support de cadres d'aller sur une autre page web. Vous pouvez encore affiner la structure en rajoutant dans la zone <NOFRAMES> le code HTML (les tags <BODY>...</BODY> et tout ce qui se trouve à l'intérieur) de la page alternative. Nous préférons ne pas le faire car le nombre d'utilisateurs utilisant des navigateurs sans le support de cadres décroit, et ce code <NOFRAMES> prend de la place dans vos fichiers HTML. Dans tous les cas, vous devrez mettre à jour le contenu des pages alternatives quand vous modifiez les pages de cadres. Vous rencontrerez de nombreux sites n'offrant pas l'alternative, mais nous vous recommandons d'afficher au moins un message dans la zone <NOFRAMES> par mesure de courtoisie.

Nous avons créé la structure de la page, mais nous devons maintenant ajouter les documents HTML de contenu.
3. Cadre du haut : Créez un nouveau fichier HTML dans votre éditeur de texte et sauvegardez-le sous proj_nav.html. Entrez-y le HTML suivant :

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//FR">
   <html>
   <head>
   </head>
   <BODY BGCOLOR=#000000 TEXT=#FFFFCC LINK=#33CCFF VLINK=#FF6666>
   <base target="_top">
   <H5>Web Volcan / 
   <A HREF="index1.html">Index</A> / 
   <A HREF="mars.html">retour</A> / 
   </H5>
   </body>
   </html>
   

   NOTE : l'utilisation du nom spécial "_top" dans le tag <base target=...> indique au navigateur que tous les liens hypertexte suivants doivent charger leur contenu dans une page web remplaçant la page entière. (Voir la leçon 25 pour plus d'informations sur les cibles). De plus, nous n'avons pas besoin d'ajouter un tag <TITLE>..</TITLE> dans la section <HEAD> (ce ne serait pas un problème si vous le faisiez, mais ça n'a pas de sens ici ; le tag <TITLE>..</TITLE> du fichier proj.html sert de titre pour la page de cadres toute entière).

4. cadre du bas : Créez un nouveau fichier HTML dans votre éditeur de texte et sauvegardez-le sous proj_footer.html. Entrez-y le code HTML suivant :

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//FR">
   <html>
   <head>
   </head>
   <BODY BGCOLOR=#000000 TEXT=#FFFFCC LINK=#33CCFF VLINK=#FF6666>
   <base target="_top">
   <HR>
   <ADDRESS><B><A HREF="index1.html">Web Volcan</A> : Projet de Recherche</B> <p>
   créé par Lorrie Lava, <A HREF="mailto:lava@pele.bigu.edu">lava@pele.bigu.edu</A><br>
   Etudes Volcaniques, <A HREF="http://www.bigu.edu/">Big University</A><p>
   <TT>Dernière modification : 1er Avril 1995</TT>
   </ADDRESS>
   <p>
   <tt>URL: http://www.bigu.edu/web/proj.html</tt>
   <p>
   </body>
   </html>

5. Cadre de menu : Créez un nouveau fichier HTML dans votre éditeur de texte et sauvegardez-le sous proj_menu.html. Entrez-y le HTML suivant :

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//FR">
   <html>
   <head>
   </head>
   <BODY BGCOLOR=#000000 TEXT=#FFFFCC LINK=#33CCFF VLINK=#FF6666>
   <base target="display">
   <A HREF="proj_descrip.html">
     <font size=+2 face="arial,helvetica">
     D</font>ESCRIPTION...</A><br>
   de votre projet.
   <p>
   <A HREF="proj_ref.html">
     <font size=+2 face="arial,helvetica">
     S</font>ITES WEB..</A><br>
   de références
   <p>
   <A HREF="proj_bib.html">
     <font size=+2 face="arial,helvetica">
     B</font>IBLIOGRAPHIE...</A><br>
   autres ressources
   </font>
   </body>
   </html>
   

   NOTE : Cette page fournit des liens vers les trois parties du projet. Notez que le tag <base target="display"> dans ce fichier fera apparaître les trois liens hypertexte dans le cadre appelé "display".
   
   Nous avons également utilisé des tags <font size=... face=...> pour présenter les liens texte.

6. Cadre d'affichage (description) : Créez un nouveau fichier HTML dans votre éditeur de texte et sauvegardez-le sous proj_descrip.html. Entrez-y le HTML suivant :

   
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//FR">
   <html>
   <head></head>
   <BODY BGCOLOR=#FFFFCC TEXT=#333333 LINK="#0000CC" VLINK=#FF6666>
   <h2 align=center>Projet de Recherche</h2>
   Votre mission est de trouver des informations et de faire un rapport sur un volcan,
    autre que ceux listés ci-dessus, où une éruption s'est produite dans les 100 dernières années.
   Vos rapports doivent inclure :
   <ul type=circle>
   <li>Type de volcan
   <li>Position Géographique
   <li>Nom, distance et population de la grande ville la plus proche
   <li>Dates des Èruptions les plus rÈcentes et les plus destructrices. 
   <li>Autres ÈvËnements associÈs aux rÈcentes Èruptions (Tremblements de terre, inondations, coulÈes de boue, etc) 
   </ul>
   <p>
   Ensuite, Ècrivez une description d'une page sur les dangers majeurs pour les humains au voisinage de ce volcan. 
   SpÈculez sur les actions que vous prendriez si vous aviez la responsabilitÈ de minimiser les risques pour la population. 
   </body>
   </html>
   

   NOTE : Cette page décrivant le projet de recherche sera chargée quand la page de cadres est assemblée. Elle sera également affichée si l'internaute clique le lien "DESCRIPTION" du cadre de menu. Ce contenu est tout simplement une copie de notre fichier original proj.html, mais nous avons changé son arrière-plan en jaune pâle dans la nouvelle page de cadres.

7. cadre d'affichage (référence) : Créez un nouveau fichier HTML dans votre éditeur de texte et sauvegardez-le sous proj_ref.html. Entrez-y le HTML suivant :

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//FR">
   <html>
   <head>
   </head>
   <BODY BGCOLOR=#FFFFCC TEXT=#333333 LINK="#0000CC" VLINK=#FF6666>
   <base target="_blank">
   <h2 align=center>Références</h2>
   Utilisez ces références pour commencer votre recherche :
   <p>
   <table>
   <tr>
   <td valign=top>
   <ol type=a>
   <li><A HREF="http://www.avo.alaska.edu/">
   Observatoire de Volcans d'Alaska</A>
   <li><A HREF="http://vulcan.wr.usgs.gov/home.html">
   Observatoire de Volcans de Cascades</A>
   <li><A HREF="http://www.dartmouth.edu/~volcano/">
   Le Volcan Electronique</A>
   <li><A HREF="http://www.geo.mtu.edu/volcanoes/">
   Page Volcans de Michigan Tech</a>
   <li><A HREF="http://volcano2.pgd.hawaii.edu/eos/">
   Equipe Volcanologue IDS du SystËme d'Observation de la Terre (Earth Observing System - EOS) de la NASA</A>
   <li><A HREF="http://www.geol.ucsb.edu/~fisher/">
   Centre d'Information sur les Volcans</a>
   </ol>
   </td>
   <td valign=top>
   <ol type=a start=7>
   <li><A HREF="http://vulcan.wr.usgs.gov/Servers/earth_servers.html">
   Serveurs Scientifiques Volcans/Terre</A>
   <li><A HREF="http://volcanoes.usgs.gov/">
   Programme de Dangers Volcaniques du US Geological Survey</a>
   <li><a href="http://www.nmnh.si.edu/gvp/">
   Programme Global de Volcanisme du Smithsonian (GVP)</a>
   <li><a href= "http://hvo.wr.usgs.gov/volcanowatch/">
   Newsletter de Surveillance des Volcans</a>
   <li><a href="http://library.advanced.org/17457/">
   Volcans Online</a>
   <li><A HREF="http://volcano.und.edu/">
   Le Monde des Volcans</A>
   </ol>
   </td>
   </tr>
   </table>
   </body>
   </html>

   NOTE : Cette page contenant les liens des références web se charge si l'internaute clique le lien "REFERENCES" du cadre de menu. Ce contenu est tout simplement une copie de notre fichier original proj.html, mais nous avons changÈ son arriËre-plan en jaune p’le dans la nouvelle page de cadres.
   
   Le tag <base target="_blank"> charge le contenu de tous les hyperliens dans une fenêtre vide afin que les liens vers les sites externes ne perturbent pas notre contenu. Sans ce tag, tous les hyperliens chargeraient leur contenu dans le cadre d'affichage.

8. Cadre d'affichage (bibliographie) : Créez un nouveau fichier HTML dans votre éditeur de texte et sauvegardez-le sous proj_bib.html. Entrez-y le HTML suivant :

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//FR">
   <html>
   <head>
   </head>
   <BODY BGCOLOR=#FFFFCC TEXT=#333333 LINK="#0000CC" VLINK=#FF6666>
   <h2 align=center>Bibliographie</h2>
   Cherchez ces livres dans votre bibliothèque :
   <dl>
   <dt>Cas, R.A.F. et Wright, J. V. (1987). 
   <dd><I>Les Successions Volcaniques : Modernes et Anciennes.</I> 
   Londres : Allen & Unwin.
   
   <dt>La Croix, A. (1904)
   <dd><I>La Montagne Pelée et ses Eruptions.</I>
   Paris: Masson
   
   <dt>Lipman, P.W. et Mullineaux (eds). (1981)
   <dd><I>Les Eruptions du Mont St. Helens en 1980, Washington.</I>
   Rapport Professionnel des Etudes Géologiques U.S. 1250.
   </dl>
   </body>
   </html>
   

   A ce point, vous devriez avoir créé sept nouveaux fichiers html correspondant à la structure des cadres :
   
   
   1. proj.html (décrit la structure des framesets)
   2. proj_nav.html (contenu pour le cadre du haut, liens de navigation)
   3. proj_footer.html (contenu du cadre du bas, Pied de Page)
   4. proj_menu.html (contenu du cadre menu, le côté gauche relie à des portions du contenu du projet)
   5. proj_descrip.html (contenu du cadre d'affichage, contenu de description du projet)
   6. proj_ref.html (contenu du cadre d'affichage, contenu des références du projet)
   7. proj_bib.html (contenu pour le cadre d'affichage, contenu de la bibliographie du projet)
   
   
9. Maintenant, il est temps de tester toutes les pages que nous venons de faire. Chargez le fichier proj.html dans votre navigateur. Si tout va bien, cela devrait ressembler à cet exemple. Si l'écran est vide, vous avez probablement fait une erreur dans la page de définition de structure, proj.html. Si seuls quelques cadres ne se chargent pas, vérifiez que les noms de fichiers dans proj.html sont identiques aux noms de fichiers que vous avez créés.
   
   Testez aussi les liens dans votre page de cadres. Tous les hyperliens des cadres "haut" et "bas" doivent remplacer tout le contenu. Les liens dans le cadre de "menu" à gauche doivent charger le contenu dans le cadre "d'affichage" de droite.

Quelques Options Supplémentaires de Cadres

Nous allons maintenant présenter quelques options supplémentaires pour les cadres. Mais tout d'abord, gardez à l'esprit que leur implémentation ne sera pas la même sous les navigateurs de Netscape ou de Microsoft (merci pour le respect des "standards" !) -- nous allons donc nous concentrer sur celles que nous avons trouvées les plus universelles.

Vous avez peut-être remarqué que votre navigateur web place des lignes grises en guise de séparations entre les cadres. Vous pouvez définir la largeur de ces divisions et même leur couleur.

1. Ouvrez le fichier proj.html dans votre éditeur de texte et modifiez le premier tag <FRAMESET...> comme suit :

     <FRAMESET ROWS="45,*,150" BORDER=10 frameborder="1" BORDERCOLOR="#66CCFF">
   

   L'attribut frameborder positionné à 1 active les options de modification des bordures. L'option BORDER=... définit la largeur du séparateur en pixels. Et l'attribut BORDERCOLOR= permet de choisir une couleur pour les divisions (voir la leçon 16 pour les codes de couleur).

   NOTE : Dans nos tests, nous avons remarqué que le premier tag frameset définissant ces options contrôle les framesets qui suivent. D'autres références HTML précisent que chaque tag frameset peut spécifier des largeurs et des couleurs de séparateurs différentes, mais nous n'avons pas réussi à obtenir ce résultat.

2. Sauvegardez et Rechargez dans votre navigateur web. Comparez avec notre exemple de bordure colorée.
3. A notre avis, les pages de cadres contenant des séparateurs larges (ou minces) sont plutôt "criardes", comme certains "patchworks". Nous préférons un look un peu plus discret, avec un contenu sans divisions apparentes. Nous allons modifier le premier tag <FRAMESET...> de notre fichier proj.html comme suit :

     <FRAMESET ROWS="45,*,150"  BORDER=0 frameborder="0">
   

   NOTE : ces balises peuvent paraître redondantes, mais ça semble marcher pour tous les navigateurs.

4. Sauvegardez et Rechargez dans votre navigateur web. Comparez avec notre exemple de bordure invisible.

Les cadres sont un domaine où les navigateurs se comportent différemment. Les navigateurs Netscape vont "envelopper" les marges des cadres avec à peu près 4 pixels de marge blanche, alors qu'Internet Explorer n'en mettra pas. Cela veut dire que, sous Internet Explorer, les cadres "d'affichage" jaune présenteront le texte touchant pratiquement le cadre noir de "menu" à gauche. C'est difficile à lire.

Plusieurs références HTML listent des options pour définir ces marges (MARGINWIDTH=X et MARGNHEIGHT=Z dans le tag <FRAME...>), mais nous n'avons pas réussi à obtenir des résultats durables sur les navigateurs les plus célèbres. Pourtant, comme nous sommes des programmeurs HTML intelligents, nous pouvons trouver un moyen d'insérer une petite marge entre les deux cadres de la ligne du milieu.

1. Créez un nouveau fichier HTML appelé yellow.html et entrez-y le texte suivant :

   <html><head></head><BODY BGCOLOR=#FFFFCC></body></html>

   Oui, c'est un document HTML minuscule ! C'est juste une page vide de même couleur jaune que l'arrière-plan du cadre d'"affichage".
2. Editez le fichier proj.html et changez les lignes :

   	<FRAMESET COLS="24%,*">			 
   		<FRAME NAME="menu" SRC="proj_menu.html">
   		<FRAME NAME="display" SRC="proj_descrip.html">		 
   	</frameset>

   en :

   	<FRAMESET COLS="24%,10,*">			 
   		<FRAME NAME="menu" SRC="proj_menu.html">
   		<FRAME NAME="spacer" SRC="yellow.html">
   		<FRAME NAME="display" SRC="proj_descrip.html">		 
   	</frameset>

   Nous avons inséré une colonne supplémentaire de 10 pixels de large dans le tag <FRAMESET COLS=...> qui pointe vers la page jaune que nous avons créée dans l'étape précédente. (Remarquez comment vous pouvez mélanger les dimensions de cadres : les pourcentages, les pixels et les astérisques !)

3. Sauvegardez et Rechargez dans votre navigateur web.

Vérifiez Votre Travail

Comparez vos pages web avec cet exemple du document-type. Si vos pages sont différentes de l'exemple ou que les liens hypertexte ne fonctionnent pas correctement, vérifiez le texte que vous avez tapé dans l'éditeur de texte.

Révision

Revoyons les grandes lignes de cette leçon :

1. A quoi servent les tags <FRAMESET..> et <FRAME...> ?
2. Combien de documents HTML faut-il pour créer une page de cadres avec 3 lignes, chacune comportant 2 colonnes ?
3. Comment faire pour que l'hyperlien d'un cadre charge l'information dans un autre cadre ?
4. Comment faire pour que l'hyperlien d'un cadre relie à un URL remplaçant toute la structure de cadres ?
5. Comment créer des séparateurs épais de couleur rouge entre les cadres ? Comment rendre ces divisions invisibles ?

Travail Indépendant

Ecrivez les pages de frameset pour les exemples 4 et 8 de la leçon ci-dessus.

Revoyez vos propres pages web et essayez de voir si les cadres peuvent vous apporter des atouts supplémentaires.

Informations Supplémentaires

Si votre page de cadres contient des séparateurs/bordures visibles, l'internaute peut cliquer et déplacer ces bordures avec la souris pour modifier les dimensions du cadre. Essayez avec la bordure de cadre bleue en haut de cette page. Si vous voulez empêcher cela, ajoutez l'attribut NORESIZE dans les tags <FRAME ...> :

		 
  <FRAME NAME="moncadrefigé" border=8 frameborder="1" SRC="fixed.html" NORESIZE>

A Suivre....

Ajoutez de l'interactivité avec JavaScript.

ALLER A.... | Index des Leçons | précédent : "Suivez cette Fenêtre" | suivant : "JavaScript (une partie)" |

Ecrire le HTML : Leçon 26: Les Cadres
©1994-2003 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

La 'net connection (en anglais) à MCLI est Alan Levine
Suggestions en Français à Bernard Bensoussan

URL: http://www.mcli.dist.maricopa.edu/tut/tut26.html