Travaux pratiques

Ces exercices ont été élaborés durant l'année 99-00 dans le cadre de la formation continue des maîtres enseignant les SIC. Ils ne concernent donc pas les cours CPTIC 80 et 176. Le cours théorique est disponible à cette adresse.
Ils ont été préparés en fournissant à chaque participant les documents de base pour débuter Une version existe
pour Mac et une pour PC. Ces deux archives auto-décompactables vous donneront un dossier intitulé site_a_construire et contenant les différents fichiers nécessaires au déroulement des TP.

Vous avez bien évidemment la possibilité de vous exercer sur vos propres documents. Dans le cas contraire, je vous propose un exercice très dirigé avec comme but de réaliser durant ce séminaire une page sur la grenouille rousse et en fonction des connaissances et de la rapidité de chacun un site complet sur les batraciens du canton.

Celui-ci comprendra une page d'accueil de l'inventaire, une ou plusieurs pages sur des étangs et une ou plusieurs pages sur les batraciens, interconnectées de la manière suivante :

  

Comme le cours est en ligne, vous avez, à tout moment, la possibilité de consulter les éléments théoriques.
Rappel : le site se trouve à l'adresse suivante :

http://wwwedu.ge.ch/cptic/prospective/enseignements/sic/welcome.html

et ce document se trouve plus précisément à http://wwwedu.ge.ch/cptic/prospective/enseignements/sic/pages_web/travaux_pratiques/travaux_pratiques.html

Un bon réflexe lorsqu'on travaille sur la création de pages Web est d'avoir toujours un navigateur ouvert, ce qui permet de prévisualiser la page en cours et ce qui vous permettra de lire ce protocole de travaux pratiques.

 

Travaux pratiques 1

But :

Maîtrise de la mise en page de texte dans un document Web

 

Propositions d'activités :

Sur votre bureau, vous trouvez un dossier intitulé : "site_en_construction". Il contient déjà un certain nombre d'éléments, dont des pages html, un dossier image (c'est à cet endroit que vous rangerez toutes les images utilisées) et un fichier AppleWorks. Il s'agira d'abord d'ouvrir le fichier "texte_grenouille.cwk" et de copier le texte qui s'y trouve, puis d'ouvrir Home Page et de coller le texte. Les amateurs de drag & drop pourront toujours ouvrir les 2 logiciels et faire glisser le texte de l'un à l'autre.

Enregistrer ce document Home Page dans ce dossier, mais avant il vous obligera à lui donner un titre, par exemple grenouille_rousse, ce qui donnera comme nom d'enregistrement par défaut grenouille_rousse.html.

Réaliser une mise en page du texte en testant un peu toutes les possibilités

Un document grenouille_rousse1.html mis en page est consultable.

Enregistrer le document dans sa forme finale

 

Travaux pratiques 2

But :

Gestion des images et des arrière-plans

Gestion des liens (liens à l'intérieur d'un document, notion d'ancre, liens sur image, lien vers un e-mail, liens externes, …).

 

Propositions d'activités :

Modifier la couleur du fond de page du document travaillé précédemment (grenouille_rousse.html)

Ajouter une image (grenouille_rousse.gif) et un arrière-plan (fond_gren_rousse.gif) selon le document grenouille_rousse2.html. Jouer sur la transparence de l'image. Essayer avec autre un arrière-plan (fond_saumon_grand.gif).
On peut aussi ajouter une image jpeg (grenouille_rousse.jpeg), avec un alignement à droite et un espace entre le texte et l'image (notion de hspace=nombre de pixels). Une image exportée en jpeg de photoshop ne s'affiche pas correctement dans Home Page, mais tout est ok dans le navigateur. Graphic Converter donne dans ce cas de bien meilleurs résultats.
Pensez à mettre un texte de remplacement dans les cas de chargement lent de la page.

Modifier ce document en y ajoutant un sommaire en haut comme dans grenouille_rousse3.html. Créer des liens à l'intérieur du document permettant ensuite de naviguer dans cette page (cela passe par la pose préalable d'ancres !). Ajouter un lien vers une adresse e-mail.

Ajouter une image de flèche (fleche.gif) pour pouvoir revenir en haut de la page.

Enregistrez votre travail

 

J'ai déjà créé le document inventaire.html, je vous propose donc de l'ouvrir. Créez dans ce document un lien qui appelle votre document grenouille_rousse.html et depuis ce dernier, vous pouvez aussi créer un lien qui ramène à la page de l'inventaire (grenouille_rousse4.html).

Créer en bas du document inventaire.html un lien vers l'inventaire des reptiles et batraciens du canton de Fribourg qui se trouve à l'adresse suivante : http://www.etatfr.ch/mhn/expositions/r-batrep.htm. Cela devrait vous donner quelque chose comme ça : inventaire1.html

 

Travaux pratiques 3

But :

Gestion des tableaux

 

Propositions d'activités :

Utiliser le document bois_mouilles.html (présentation d'un étang). L'ouvrir et utiliser les possibilités des tableaux pour réaliser une mise en page, par exemple comme bois_mouilles1.html. J'ai fixé la largeur des tableaux à 570 pixels. La mise en page de la carte de l'étang avec les batraciens qui l'entourent peut se faire assez facilement en jouant sur la fusion des cellules (cellules de tailles différentes).
Pensez à mettre un lien sur les flèches rouges, un lien sur la page principale de l'inventaire et des liens sur le texte "la grenouille rousse" et l'image de la grenouille rousse.

Il faut encore aller donner un coup de cosmétique au document inventaire.html. Voir inventaire2.html

On peut ajouter le titre dans un tableau et mettre la carte du canton dans un tableau ainsi que la liste des sites. Il faut aussi poser un lien vers le Bois-des-Mouilles et ajouter un lien vers une adresse e-mail.

Enregistrer ce document.

Si vous désirez revoir ce qui a été fait, vous pouvez ajouter à l'inventaire la description du crapaud sonneur à ventre jaune (sonneur.html) : il faut alors améliorer la présentation de cette page en mettant par exemple une photo, un arrière-plan et créer tous les liens nécessaires entre l'inventaire et le site du Bois-des-Mouilles. 

  

Travaux pratiques 4

But :

Utilisation des images réactives

Utilisation d'une bibliothèque et d'animations

Comprendre la structure d'un site avec cadres (frames)

Découverte de sites Web sur la construction de sites.

 

Propositions d'activités :

Construire une image à liens multiples sur le document inventaire.html au niveau de la carte du canton où un clic sur l'étang du Bois-des-Mouilles (disque rouge au milieu) appelle le document bois_mouilles.html.

Montrer une image animée en mettant un logo d'email en bas de la page pris dans la bibliothèque animations (sous animation_explosion_boutons) sur la page de inventaire.html. On peut mettre aussi une animation sur le document inventaire.html (compteur.gif). Pour voir le résultat final, cliquer sur Inventaire des batraciens de Genève

Vous pouvez ajouter un son à la page sur le sonneur à ventre jaune sous forme d'un movie QuickTime (sonneur.mov) présent dans votre dossier.

Pour essayer de créer le même type de sites, mais avec des frames, il faut choisir Nouvelle ... dans le menu Édition et se laisser guider par l'assistant de cadres. On peut partir sur la première structure proposée (3 cadres) et ensuite ne conserver que deux cadres verticaux. Celui de gauche servira de navigateur. Il devra être complété manuellement par la liste des espèces et des étangs. Pour voir un Inventaire des batraciens de Genève avec cadres, cliquer ...

Créer un document avec des cadres (frames). Ouvrir un nouveau document CHP avec cadre, placer dans le cadre de gauche le document liste.htm et dans le cadre de droite le document inventaire.htm créé précédemment. Enregistrer sous inventaire_cadre.htm et créer les liens nécessaires sur le document liste.htm. Enregistrer le tout.

Naviguer sur les sites Web offrant des ressources pour la construction de sites.

Remarques, réflexions : Christian Oïhénart