Accueil   l    Nouveaux Livres   l   Thèmes Education   l    Divers   l    Liens Utiles   l    Actualités    l   Contacts  l    A Propos

 Informatique & Internet

Astuces HTML
Astuces Real Draw Pro
Créer un site Web
Créer Page de Cadre
Créer bannière Flash
Créer bannière GIF
Compteur de visite
Bien Protéger son PC
Formation à Visual Basic
Polices Arabes & Fr
Transfert FTP
Logiciels à Télécharger

 

 Technologie au Collège

Histoire de la Techno
Applications de techno
Cours tous les niveaux
Exercices & Devoirs
Fiches pour élèves
Fiches pour prof
Sites de technologie
Orientation Technique
Ameti Oujda
Note Ministérielle 151
Note Ministérielle 43

 

© 2006
 Oukka Soft
Tous droits réservés

 Introduction:

   
  • Les cadres ou "frames" sont devenus à la mode. Ils facilitent en effet l'organisation et la consultation d'un site en le découpant en deux, trois, ou plusieurs fenêtres.

  • Exemple de page de cadres découpée  en 3 fenêtres:

    Cadre 1  pour afficher une Bannière

    Cadre 2 pour afficher des liens, un Sommaire

    Cadre 3  pour afficher la page Principale/pages des liens

  Exemple  de site  comportant des cadres:
   

Le site que nous allons construire en utilisant uniquement du code html est le suivant :

 

Il se compose de trois fenêtres : une bannière horizontale - qui indique le titre du site, une fenêtre verticale sur la gauche qui donne le plan du site ou des liens, et une fenêtre horizontale sur la droite qui affiche les pages - par défaut la page d'accueil.

·      Ce  site se compose en fait de 4 fichiers HTML :

- Un fichier qui décrit la structure des 3 fenêtres, (appelé ici maitre.htm).

- Un fichier accueillant la bannière de titre, (nommé : banniere.htm).

- Un fichier comportant le plan du site; (nommé : plan.htm)..

- 4 fichiers potentiels dans la page de droite, selon que l'on affiche la page d'accueil ou les pages 1, 2 et 3. (Nous les avons appelés accueil.htm, Page1.htm, Page2.htm, Page3.htm).

·      Commencez par créer un dossier ou vous devez enregistrer tous les fichiers indiqués ci-dessous.

·      Nous allons créer en premier lieu le fichier maitre.htm.

  1. Cliquez sur démarrer/Programmes/Accessoires/Bloc-notes.

  2. Copiez et collez le code suivant :

<HTML>

<HEAD>

<TITLE>Page de cadres</TITLE>

</HEAD>

          <! Définition du cadre horizontal dans lequel viendra se placer la bannière>

 

<FRAMESET ROWS="80,*">

          <FRAME SRC="banniere.htm">

 

          <! Définition des fenêtres verticales>

<FRAMESET COLS="150,*">

          <FRAME SRC="plan.htm">

          <FRAME SRC="accueil.htm" NAME="FENETRE">

 

</FRAMESET>

</HTML>

  1. Cliquez su Fichier/Enregistrer sous et Sauvegardez le fichier sous le nom Maitre.htm.

  1. Cliquez sur Fichier/Nouveau de Bloc-notes puis créez le fichier banniere.htm. Il s'agit d'une page classique avec les instructions suivantes à l'intérieur des balises <BODY> et </BODY>

<BODY BGCOLOR=blue TEXT=white>            <! Texte blanc sur fond bleu>

<FONT FACE="Arial, Helvetica">

<H1 ALIGN=center>UN SITE AVEC DES CADRES</H1>

</BODY>

  1. Cliquez sur Fichier/Nouveau de Bloc-notes puis créez le fichier plan.htm.

<BODY>

<FONT FACE="Aria, Helvetica">

<H3>Plan du site</H3>

<A HREF="acceuil.htm" TARGET="FENETRE">Accueil</A>

<P>

<A HREF="page1.htm" TARGET="FENETRE">Page 1</A>

<P>

<A HREF="page2.htm" TARGET="FENETRE">Page 2</A>

<P>

<A HREF="page3.htm" TARGET="FENETRE">Page 3</A>

<P>

</BODY>

  1. Cliquez sur Fichier/Nouveau de Bloc-notes puis créez le fichier accueil.htm qui décrit la page d'accueil.

<BODY>

<FONT FACE="Arial, Helvetica">

<H1 ALIGN=center>Bienvenue dans la page d'accueil.</H1>

<H4>Voici la page d'accueil de ce site.

<P>

C'est la page qui est affichée lorsque l'on démarre le site. </H4>

</BODY>

·      Créez les trois fichiers Page1.htm, Page2.htm et Page3.htm selon ce modèle :

<BODY>

<H1>Page 1</H1>

<P>

<H2>C'est La page 1 de ce site.</H2>

</BODY>

·      Enregistrez  la page sous Page1.htm.

<BODY>

<H1>Page 2</H1>

<P>

<H2>C'est La page 2 de ce site.</H2>

</BODY>

·      Enregistrez  la page sous Page2.htm.

<BODY>

<H1>Page 3</H1>

<P>

<H2>C'est La page 3 de ce site.</H2>

</BODY>

·      Enregistrez  la page sous Page3.htm.

A présent, si vous cliquez sur n'importe lequel des liens indiqués dans la fenêtre de gauche, vous voyez apparaître en regard la page correspondante !

Vous pouvez utiliser le modèle ci-dessus pour définir votre propre site au moyen de cadres, en y ajoutant toutes les caractéristiques désirées : fond de pages, images, etc.

 

 

Pour plus de détails sur d'autres exemples de sites comportant des cadres,  consultez l'ouvrage.

© 2006
 Oukka Soft
Tous droits réservés