.

 

Les outils interactifs du Web

Tutoriel : cadres

Réaliser un site avec des cadres

Avant de commencer : téléchargez les pages de contenu en cliquant ici.. Vous en aurez besoin pour réaliser ce tutoriel. Ce fichier devra être décompressé avec WinZip ou un autre utilitaire du genre.

Première étape : créer le fichier principal

  1. Lancer le programme Home Page.
  2. Choisir Nouveau... dans le menu fichier. Attention de ne pas choisir Nouvelle page!
  3. Cliquer sur Page de cadres puis sur OK.
  4. Choisir l'orientation Horizontale et cliquer sur OK. Le logiciel nous permet aussi d'insérer les fichiers à cette étape. Je préfère faire cette opération plus tard. Ne cochez donc pas de fichier.
  5. L'écran suivant devrait apparaître :

  6. Cliquer à l'intérieur du cadre du bas.
  7. Cliquer sur l'icône subdivision verticale ou choisir subdivision verticale dans le menu Cadre.
  8. Vous devriez maintenant avoir un écran comme celui-ci :


  9. Enregistrer votre page : choisir Fichier, enregistrer. Donner Site avec cadres comme titre de la page. Enregistrez le fichier dans le dossier cadre que vous avez téléchargé au début de l'activité et nommez-le index.htm.

 

Deuxième étape : nommer les cadres. Cette étape est très importante!

  1. Faire un double-clic dans le cadre du haut.
  2. Inscrire haut dans la case nom du cadre.
  3. Cliquer dans le cadre du bas à gauche.
  4. Inscrire gauche dans la case nom du cadre.
  5. Cliquer dans le cadre de droite.
  6. Inscrire droite dans la case nom du cadre.
  7. Enregistrer votre page.

ATTENTION! les noms de cadres doivent être inscrits en lettres minuscules, sans caractère accentué et sans espace.

 

Troisième étape : fixer les dimensions et les paramètres des cadres.

  1. Faire un double-clic dans le cadre haut.
  2. Cliquer sur l'onglet Apparence.
  3. Fixer les paramètres suivants comme cet exemple.
    1. Taille : 85 pixels, fixe
    2. Hauteur et largeur de marges à 0
    3. Barres de défilement : jamais
    4. Afficher bordure : non coché.
  4. Faire la même opération pour le cadre gauche.
    1. Taille : 210 pixels, fixe
    2. Hauteur et largeur de marges à 0
    3. Barres de défilement : auto
    4. Afficher bordure : non coché.
  5. Et pour le cadre droite.
    1. Taille : en pourcentage, non fixe
    2. Hauteur et largeur de marges à 0
    3. Barres de défilement : auto
    4. Afficher bordure : non coché.
  6. Enregistrer votre page.

Quatrième étape : affecter les fichiers

  1. Faire un double-clic dans le cadre haut.
  2. Choisir l'onglet contenu.
  3. Cliquer sur Affecter fichier.
  4. Choisir le fichier titre.htm
  5. Dans le cadre gauche, placer le fichier menu_txt.htm
  6. Dans le cadre droite, placer le fichier structure.htm.
  7. Enregistrer votre page.

Dernière étape : faire les liens dans le cadre gauche contenant le menu.

  1. Faire un double-clic dans le cadre gauche.
  2. Cliquer sur le bouton éditeur de page.
  3. Sélectionner le mot structure.
  4. Cliquer sur l'éditeur de lien.
  5. Cliquer sur Parcourir fichiers et ouvrir le fichier structure.htm
  6. Cliquer sur le petit triangle pointant vers le bas pour agrandir la fenêtre de l'éditeur de lien.
  7. Dans la case Cadre cible, inscrire droite. Nous voulons que le résultat s'affiche dans le cadre de droite.

Les liens suivants seront plus faciles à définir si le fichier creercadres.htm est ouvert.

  1. Choisir Ouvrir dans le menu fichier.
  2. Ouvrir le fichier creercadres.htm
  3. Réduire la fenêtre du fichier creercadre.htm.
  4. Dans la fenêtre menu_txt.htm, sélectionner les mots Définir le fichier de base.
  5. Cliquer sur l'éditeur de lien.
  6. Cliquer sur le triangle à droite de la fenêtre et choisir lien vers fichier ouvert et choisir le fichier creercadre.htm - début de page
  7. Dans la case Cadre cible, inscrire droite. Nous voulons que le résultat s'affiche dans le cadre de droite.
  8. Dans la fenêtre menu_txt.htm, sélectionner les mots Subdiviser et modifier les dimensions
  9. Cliquer sur l'éditeur de lien.
  10. Cliquer sur le triangle à droite de la fenêtre et choisir lien vers fichier ouvert et choisir le fichier creercadre.htm - subdiviser
  11. Dans la case Cadre cible, inscrire droite. Nous voulons que le résultat s'affiche dans le cadre de droite.

Je suis sûr que vous n'aurez aucun mal à faire par vous-même les deux liens suivants vers nommer et insérer.

Il reste deux liens à faire :

  1. Les liens (cadre cible) devrait permettre d'ouvrir la page liens.htm dans le cadre droite
  2. Les pièges à éviter devrait permettre d'ouvrir la page pieges.htm dans le cadre droite
  3. Enregistrer votre page une dernière fois, vous avez terminé.

Visionner la page index.htm dans un navigateur Internet de votre choix et vérifier si tous les liens fonctionnent bien.

Bien lire les pages, elles contiennent les instructions de base pour refaire cet exercice.

Voilà!