Valeur de cette activité : 5 points
Compétence :
10- Les cadres

A-Module 01 : HTML : 5 points - difficulté : 2

Présentation


Les cadres permettent d'insérer deux ou plusieurs pages dans une même fenêtre.
Comme vous l'avez peut-être remarqué, le site Centre de formation utilise les cadres.
La bannière du haut (logo et titre) est contenue dans un cadre.
Le menu de gauche est contenu dans un autre cadre.
La page affichée est contenue dans un autre cadre.

En résumé, afin d'utiliser des cadres, vous devez d'abord créer une page qui définira les cadres utilisés ainsi que les pages qui s'y afficheront.

AIDE? Pour plus d'explications concernant les cadres, veuilles consulter les sites :
- http://www.g1script.com/home/CREERSONSITE/FRAME/index.php
- http://membres.lycos.fr/mbolo/HTpage4.html#expe_fr

Directives

Dans cette activité, vous allez créer votre premier site internet.

Le thème de cette activité est :
Pour les élèves de l'option Science et technologie : Les 3 états de l'eau
Pour les élèves de l'option Art : Les grands peintres
Pour les élèves de l'option Sport : Les techniques du tennis

Pour les autres élèves : un thème de votre choix

Cette section vous explique le travail qui sera effectué.
S.v.p. Veuillez lire cette section avant de débuter votre travail.
  1. Pour ce travail, afin de bien comprendre le fonctionnement des cadres, vous produirez 5 pages web que vous devrez placer dans votre espace de téléchargement.
    - la page cadre.html
    - la page menu.html
    - la page pc1.html
    - la page pc2.html
    - la page pc3.html

    Le résulat final ressemblera à :

    Vous allez produire un site internet à partir d'une page de cadres qui affichera une page contenant deux cadres séparés horizontalement (Voir la figure ci-dessus)

  2. Le cadre du haut affichera un menu contenu dans un tableau de façon à ce que
    - le clic sur "Thème de la Page 1" affiche la page pc1.html dans la cadre du bas
    - le clic sur "Thème de la Page 2" affiche la pc2.html dans la cadre du bas
    - le clic sur "Thème de la Page 3" affiche la page pc3.html dans la cadre du bas
Explications de l'utilisation du paramètre TARGET de la balise de lien A :
target="_blank" ouvre le lien dans une nouvelle fenêtre (à ne pas utiliser)
target="_self" ouvre le lien dans la même fenêtre
target="blabla" ouvre le lien dans un cadre nommé blabla (à utiliser pour les pages de cadres seulement)
target="_top" ouvre le lien dans la fenêtre principale dans le cas d'une page insérée dans une page de cadres (à utiliser pour les pages de cadres seulement)

Étapes de réalisation du travail :

Création de la page pc1.html :

  1. Cliquez le bouton 4- Accès à mon espace de téléchargement de votre portfolio

  2. Cliquez le bouton Ajouter une page avec directive en inscrivant le numéro 1094 dans le champ NO de la directive

  3. Vérifiez que vous avez bien suivi les directives 1 et 2.

  4. Suivez les directives ci-dessous afin de créer la page pc1.html - Inscrivez dans la page (grand carré blanc) un titre de niveau 1 et un court texte relié à votre sujet et insérez une image.
    - Enregistrez cette page en inscrivant pc1.html dans le champ NOM DE VOTRE PAGE situé au bas de la page et cliquez le bouton Créer la page - cliquez le bouton Retour

    Création de la page pc2.html :

  5. Suivez les directives ci-dessous afin de créer la page pc2.html - Cliquez le bouton Ajouter une page avec directive en inscrivant le numéro 1094 dans le champ NO de la directive - Inscrivez dans la page (grand carré blanc) un titre de niveau 1 et un court texte relié à votre sujet et insérez une image.
    - Inscrivez le code HTML afin que ce texte s'affiche avec la couleur bleue en utilisant le bouton Couleur du texte Exemple : <span style='color:blue;'>Texte bleu</span> - Enregistrez cette page sous le nom pc2.HTML en inscrivant pc2.html dans le champ situé au bas de la page et cliquez le bouton Créer la page - cliquez le bouton Retour

    Création de la page pc3.html :

  6. Suivez les directives ci-dessous afin de créer la page pc3.html - Cliquez le bouton Ajouter une page avec directive en inscrivant le numéro 1094 dans le champ NO de la directive - Inscrivez dans la page (grand carré blanc) un titre de niveau 1 et un court texte relié à votre sujet et insérez une image.
    - Inscrivez le code HTML afin que ce texte s'affiche avec la couleur rouge en utilisant le bouton Couleur du texte Exemple : <font color=red>Texte rouge</font> - Enregistrez cette page sous le nom pc3.HTML en inscrivant pc3.html dans le champ NOM DE VOTRE PAGE situé au bas de la page et cliquez le bouton Créer la page - cliquez le bouton Retour

    Création de la page cadre.html :

    ATTENTION : le bouton PRÉVISUALISER ne fonctionnera pas pour cette page.
    Ne vous inquiétez pas, lorsque votre travail sera complété, votre site fonctionnera très bien.
  7. Suivez les directives ci-dessous afin de créer la page cadre.html - Cliquez le bouton Ajouter une page avec directive en inscrivant le numéro 1094 dans le champ NO de la directive Cette page contiendra deux cadres: afin de créer ces cadres, cliquez le bouton CADRE HAUT BAS : - Voici les données à inscrire dans la fenêtre de dialogue qui apparaîtra :
    - cadre du haut : nom= hh, hauteur= 20%, source= menu.html
    - cadre du bas : nom= bb, hauteur= 80%, source= pc1.html
    - Enregistrez cette page sous le nom cadre.HTML en inscrivant cadre.html dans le champ situé au bas de la page et cliquez le bouton Créer la page - cliquez le bouton Retour

    Création de la page menu.html :

  8. Suivez les directives ci-dessous afin de créer la page Menu.html - Cliquez le bouton Ajouter une page avec directive en inscrivant le numéro 1094 dans le champ NO de la directive

    Cette page contiendra les liens vers les pages pc1.html, pc2.html et pc3.html dans un tableau une ligne 3 colonnes centré avec une bordure de 3. Suivez les directives ci=dessous afin de créer cette page.

    - Cliquez le bouton Centré - Dans ce code, insérez un TABLEAU de BORDURE 3 ayant 1 RANGÉE et 3 COLONNES d'une largeur de 900
    - Dans la première colonne, inscrivez le texte "Votre sujet 1 du thème choisi, exemple L'état liquide"
    - Dans la deuxième colonne, inscrivez le texte "Sujet 2 du thème choisi"
    - Dans la troisième colonne, inscrivez le texte "Sujet 3 du thème choisi"

    --> Sélectionnez le "Sujet 1 du thème choisi" et cliquez le bouton LIEN - Supprimez le contenu du champ dans la fenêtre de dialogue qui s'affiche et inscrivez pc1.html et cliquez le bouton OK
    - Supprimez le contenu du champ dans la fenêtre de dialogue qui s'affiche et inscrivez bb et cliquez le bouton OK afin d'obtenir le paramètre target="bb"

    --> Sélectionnez le "Sujet 2 du thème choisi" et cliquez le bouton LIEN
    - Supprimez le contenu du champ dans la fenêtre de dialogue qui s'affiche et inscrivez pc2.html et cliquez le bouton OK

    - Supprimez le contenu du champ dans la fenêtre de dialogue qui s'affiche et inscrivez bb et cliquez le bouton OK
    --> Sélectionnez le "Sujet 3 du thème choisi" et cliquez le bouton LIEN

    - Supprimez le contenu du champ dans la fenêtre de dialogue qui s'affiche et inscrivez pc3.html et cliquez le bouton OK
    - Supprimez le contenu du champ dans la fenêtre de dialogue qui s'affiche et inscrivez bb et cliquez le bouton OK
    EXPLICATIONS :
    Lorsque vous avez produit vos liens, vous avez utilisé le paramètre TARGET=bb afin que la page s'affiche dans la cadre du bas

    - Enregistrez cette page sous le nom menu.HTML en inscrivant menu.html dans le champ NOM DE VOTRE PAGE situé au bas de la page et cliquez le bouton Créer la page

    - Cliquez le bouton Retour
  9. Allez dans votre espace de téléchargement et cliquez le bouton de votre page de cadres (cadre.html) afin d'afficher cette page et de valider le travail .
  10. Corrigez au besoin en utilisant le bouton Modifier
  11. IMPORTANT : Ajoutez une page à votre portfolio (BOUTON 6) qui contiendra : - dans le champ titre : Les cadres
    - dans le champ matière : Informatique
    - Sélectionnez dans la boîte à liste déroulante "SECTION", "Module 01 : HTML".
    - dans le champ No de la directive : 1094
    - dans la page : un lien vers votre page de cadres (cadre.html)
  12. Cochez la case à cocher de correction du travail
  13. Enregistrez cette page

    Cette page servira à la correction de votre travail et à transmettre mes commentaires concernant ton travail.