Formations en ligne

Grille d'évaluation

Zones réactives

Cet exercice va vous montrer ajouter de l'interaction entre l'usager et la page. Il va vous permettre aussi de comprendre le principe des zones réactives.

Étape 1: Ouvrez la page Fond_parties. Sélectionnez le texte et coupez-le. Écrivez à la place CERVEAU. Les caractéristiques de la police (Verdana et gras) ne doivent pas changer. Enregistrez cette page sous le nom Cerveau_nom.htm.

Étape 2: Remplacez CERVEAU par OEIL, sans toucher aux caractéristiques de la police. Enregistrez la page sous le nom Oeil_nom.htm.

Étape 3: Remplacez OEIL par COEUR, toujours sans toucher à la police. Enregistrez la page sous le nom Coeur_nom.htm.

Étape 4: Remplacez COEUR par FOIE en respectant les caractéristiques de la police. Enregistrez la page sous le nom Foie_nom.htm. Voilà quatre pages vite faites!

Étape 5: Refermez la page Foie_nom et ouvrez la page Reactif.htm (si elle ne l'est pas déjà).

Étape 6: Cliquez sur l'image LeCorpsHumain. La barre d'outils Image s'affiche dans le bas de la page. Prenez le temps d'aller prendre connaissance de la théorie dans la section Zones réactives du menu de droite.

Étape 7: Choisissez l'outil Zone réactive polygonale. Cliquez à divers intervalles pour sélectionner le plus précisément possible le cerveau (voir ci-dessous). Pour terminer la sélection, cliquez deux fois.

Étape 8: Cliquez sur le bouton à la droite du Cadre de destination et inscrivez exempleIframe dans la case Destination.

ExempleIframe est le nom donné au cadre dans la section HTML ajoutée lors de l'exercice précédent (balise NAME). On pourrait le changer pourvu qu'on utilise le même nom dans le code et dans le cadre de destination.

Étape 9: Cliquez sur le deuxième bouton à la droite de la case URL et sélectionnez le fichier Cerveau_nom.htm. Vous pouvez retourner voir la section théorique Hyperliens pour vous aider, si nécessaire.

Étape 10: Répétez les mêmes opérations avec l'oeil en effectuant le lien avec Oeil_nom.htm, le coeur dont le lien est Coeur_nom.htm et le foie pour le lien Foie_nom.htm.

Étape 11: Enregistrez la page sans rien changer au nom. Effectuez un Aperçu et cliquez sur chacune des quatre parties réactives. Le nom de chacune s'affiche alors dans le Iframe.

Vous avez sans doute pensé aux possibilités de cette méthode. En plus ou à la place du nom, vous pourriez donner une description, etc.

 Étape 12: Voici venu le temps de faire preuve d'un peu d'initiative. Vous devez repérer dans le dessin 12 autres parties du corps humain. Pour chaque partie, vous devez préparer une page Xxxx_nom (les x représentent le nom de la partie). Par la suite, il vous faut créer une zone réactive pour chacune et un hyperlien vers la page d'identification.

.