الرئيسية   l    كتب حديثة  l   مواضيع في التربية   l    مختلفات   l    روابط مفيدة   l    مستجدات    l   اتصال  l    ويب ماستر

لــغــة  HTML

تـكـويـن في Real Draw

إنـشـاء مـوقـع ويــب

كـيـف تـنـشئ Page de Cadre

إنشـاء صورة متحركة FLASH

إنـشاء صورة متحركة GIF

إنـشاء عـداد  Compteur

كـيـف تـحـمي جـهـازك

تـكـو ين فـي Visual Basic

أجـمـل الـخـطوط العربية

إرسال مـوقـع بواسطة FTP

بـرانـم مـهـمة للـتـحميل

تـعـلـم بـالفـيديـو

نـماذج مـواقـع ويــب

 

تـاريخ الـتـكنولـوجيا بالمغرب

تـطبـيـقات الـتـكـنـولـوجـيـا

دروس جـمـيع المستويــات
تـمـاريـن و فــروض
بـطـاقات للـتـلـمـيـذ
بـطـاقات للأسـتـاذ
امـتـحانـات مـوحدة
مـواقـع الـتـكنـولـوجـيـا
جـمـعـية التعليم الـتـقـنـي
الـتـوجـيـه الـتـقـنـي
مـذكـرة وزاريــة 151
مـذكـرة وزاريــة 43

مـشاريـع تـكـنـولوجـيـة

 

© 2007
 Oukka Soft

 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.