Fascicule1 TIC 3 SI VF

Chapitre 1 : Les outils de collaboration
Fascicule TIC
Page 1
Fascicule TIC
Page 2
Fascicule TIC
I. Prsentation
En troisime anne, les lves ont utilis surtout le service Web et ils ont exploit plusieurs techniques de recherche de l'information. Bien que ce service leurs offre un moyen d'amliorer leurs connaissances et de disposer de ressources considrables d'information, ces lves ont besoin aujourd'hui d'changer et de partager ce qu'ils connaissent et ce qu'ils aiment, surtout qu'ils bnficient de diffrents outils multimdia performants pour satisfaire leurs besoins. Il n'est pas plus agrable et plus motivant que de pouvoir communiquer et de collaborer avec d'autres lves, de leur tablissement, d'un autre tablissement ou mme d'un autre pays et d'changer des images, des sons ou des squences vido et a devient plus impressionnant lorsqu'ils peuvent se voir directement par le biais de moyens audio-visuels simples disponibles dans leurs laboratoires d'informatique. Dans ce chapitre, nous allons aborder une autre dimension de l'utilisation des TIC travers des applications dans le rseau local ou travers l'utilisation des outils de collaborations, forum et visioconfrence par le biais de l'Internet.
II. Applications dans un rseau local

Pour amliorer leurs pratiques pdagogiques, les enseignants font appel plusieurs logiciels de gestion et de travail en rseau, permettant d'assurer un cours interactif. En plus de la fonctionnalit d'enseignement, ces logiciels permettent de : superviser la classe et suivre les travaux des lves, contrler l'accs certains sites ou certaines applications et donnes, distribuer et rcuprer des documents, crer et raliser des valuations. Ces fonctionnalits sont permises celui qui utilise le poste configur en mode administrateur, qui est gnralement l'enseignant. Dans la suite, nous allons nous intresser l'utilisation de tels logiciels pour consolider le travail collaboratif en classe, en exploitant le logiciel disponible dans le laboratoire d'informatique.
Activit 1
On se propose de crer des petites prsentations sur un thme donn, en classe ou la maison, et les prsenter aux autres lves.
Droulement :
Le groupe sera rparti en sous-groupes de trois 5 lves, Chaque groupe d'lves sera charg de prparer une prsentation de quelques, pages sur un thme propos par eux-mmes ou par leur enseignant, Ensuite, un membre de chaque groupe prsentera, partir de son poste, le travail de son groupe au reste des lves.
Activit 2
Cette activit consiste faire des recherches sur Internet pour un thme donn, puis un lve prsentera aux autres la dmarche utilise pour trouver les informations demandes par l'enseignant.
Page 3
Fascicule TIC
Droulement :
Les lves font la recherche d'une faon individuelle, Le premier lve qui trouve l'information, fait signe son enseignant qui bloquera les postes des autres lves, Ensuite, cet lve prsentera, partir de son poste, la dmarche qui lui a permis de retrouver l'information recherche. N. B. : Cette activit peut tre rpte autant de fois que cela est possible selon la vitesse de recherche et l'efficacit des dmarches utilises par les lves et suivant la nature d'informations demandes (textes, images ou vidos).
III. Les forums

Activit 3
a. Quels sont les services de communications offerts par Internet ? b. Quels sont ceux qui assurent une communication en mode asynchrone (en
diffr) ?
1. Qu'est ce qu'un forum ?

Les forums ou groupes de discussions (Newsgroups en anglais) dsignent des lieux lectroniques dchange de messages et de discussions, organiss gnralement par thmes. Ils se distinguent des autres systmes de discussion par le fait que les discussions sont asynchrones, les messages lectroniques sont archivs sur des sites Internet.
Figure I.1 : Exemple de thmes proposs par un forum
2. Principes d'un forum

L'administrateur d'un forum, appel modrateur, propose un thme de discussion et d'enrichissement de connaissances. Les internautes intresss par le thme en cours de discussion, peuvent envoyer des informations, poser des questions ou rpondre aux ceux proposes. Pour certains forums, un internaute ne peut participer qu'aprs avoir faire une inscription (figure I.2) et qu'il soit accept par le modrateur du forum.
Page 4
Fascicule TIC
Figure I.2 : Exemple d'enregistrement un forum Faute d'irresponsabilit et de manque de srieux, un message peut tre supprim par le modrateur ou ne pas tre dit et le participant peut tre exclu du forum.
Figure I.3 : Exemple de rgles respecter IN NF FO OS S I Le service associ aux forums est le USENET, le protocole utilis au dessus de TCP/IP est le NNTP. Les forums peuvent permettre une organisation de diffuser assez largement des informations dans un domaine o elle a autorit
Application 1 a. Crer un forum en utilisant un site permettant de crer des forums gratuitement. b. Donner des permissions de participation quelques amis de votre classe.
Page 5
Fascicule TIC
Figure I.4 : Exemple de sites permettant la cration gratuite d'un forum Application 2 Rechercher des forums vocation ducative sur Internet et y participez.
Figure I.5 : Exemple de forums
Page 6
Fascicule TIC
IV. La visioconfrence
Activit 4
Quels sont les outils permettant de faire des conversations synchrones (en temps rel) ? Droulement : Il existe divers outils de communication synchrone, nous citons par exemple la tlphonie sur Internet, le chat, la visioconfrence.
1. Qu'est ce que la visioconfrence ?

La visioconfrence est une technologie s'articulant sur l'audiovisuel et la tlcommunication. Elle permet des personnes loignes de communiquer, de s'changer des images et du son, de se voir entre elles et de s'inter-ragir, en temps rel.
2. Avantages de la visioconfrence
La visioconfrence offre plusieurs avantage, parmi les quels nous pouvons citer : L'conomie de temps. L'conomie d'argent. L'largissement du nombre de participants. L'accroissement des frquences de runions. Dans la littrature, on trouve parfois le terme vidoconfrence au lieu du terme visioconfrence. Il s'agit en fait de la traduction franaise de l'anglais videoconferencing, mais il s'agit en fait strictement de la mme notion. Si les dispositifs sont relis des systmes informatiques, on peut aussi accompagner la confrence de squences de travail coopratif (messagerie lectronique synchrone, partage d'applications informatiques, transfert de fichiers synchrone, etc.)
IN NF FO OS S I IN NF FO O I
3. Modes d'utilisation de la visioconfrence

Il y a trois principaux modes d'utiliser la visioconfrence : a. La visioconfrence en point point : Ce mode met en relation seulement deux sites. Sur chaque site on peut trouver une seule personne ou un groupe de personnes. b. La visioconfrence en multipoint : Ce mode permet d'interconnecter au moins 3 sites. Sur chaque site on peut trouver une ou plusieurs personnes. Ce mode ncessite l'utilisation d'un pont qui gre le multipoint. c. La visioconfrence en mode broadcast (mode diffus) : ce mode fait rfrence une communication point multipoint o un site, source de l'information, diffuse un message vers les autres sites, qui peuvent ventuellement interagir et poser des questions. Les visioconfrences en mode broadcast sont, par exemple, utiliss dans plusieurs domaines tels que : le tlenseignement, la tlmdecine, pour les stages d'entreprise ou lorsqu'un responsable dsire s'adresser au personnel d'une succursale de son entreprise.
Page 7
Fascicule TIC
4. Types de la visioconfrence
a) Visioconfrence par Rseaux Numriques Intgration de services (RNIS) : Ce type est utilis depuis l'apparition de la visioconfrence dans les annes 80, les donnes sont numrises et compresses sur chaque site, puis transmises puis dcodes et restitues. b) La visioconfrence par Internet : Au milieu des annes 1990, le dveloppement de la micro-informatique a permis de "populariser"' les visioconfrences entre deux micro-ordinateurs, ou plus, connects par Internet. Ce type de visioconfrence est trs conomique mais de moindre qualit. Beaucoup d'application sont bases sur la visioconfrence par Internet, par exemple : la Tl-Ingnierie, l'apprentissage distance, la diffusion de sminaires et confrences, la confrence personnelle, les runions de travail, etc. c) Les visioconfrences hybrides : Un micro-ordinateur muni d'une carte approprie peut assurer l'interaction entre un ou plusieurs sites de visioconfrence utilisant les rseaux numriques (RNIS par exemple) et d'autres micro-ordinateurs quips de microphones et de camras (ou Webcam) connects au premier ordinateur par rseau IP (Intranet ou Internet). d) La visioconfrence par ATM : L'ATM (Asynchronous Transfer Mode) est une technologie de transfert de donnes trs large bande intgrant textes, images, sons et vido. e) La visioconfrence par satellite : C'est une visioconfrence radiodiffuse par satellite. C'est en fait la tlvision interactive entre personnes distantes ou groupes de personnes. Vu son important dbit, elle est d'excellente qualit, mais trs coteuse.
Figure I.6 : Architecture gnrale de la visioconfrence hybride
Page 8
Fascicule TIC
5. Outils matriels et logiciels

Outils matriels : a) Cas d'une connexion utilisant les rseaux RNIS : Dans ce cas on utilise des outils et des lieux spciaux, tels que les "meubles mobiles de visioconfrence" (figure I.8) ou les "studios de visioconfrence" (figure I.9). A chaque extrmit de la liaison se trouve : Un appareil de visioconfrence. Un tlviseur ou un vido projecteur. Un ou plusieurs micro-ordinateurs quips de cartes rseau. Un visualiseur (camra pour documents). Une ou plusieurs camras fixes ou montes sur tourelle tlcommande. Un ou plusieurs microphones. Un CODEC (codeur/dcodeur). Un ou plusieurs moniteurs vido pour reproduire les images et les sons reus.
Figure I.7 : Exemple d'appareil de visioconfrence UN CODEC est un dispositif assurant : Les fonctions de conversion des signaux analogiques dlivrs par les priphriques (micro et camras) utiliss par les rseaux et vice-versa. La compression et la dcompression des informations pour tre transportes sur une ligne bas dbit.
IN NF FO OS S I
Page 9
Fascicule TIC
Figure I.8 : Exemples de meubles de visioconfrence
Figure I.9 : Exemples de salle de visioconfrence b) Cas d'une connexion par Internet Dans ce cas, chaque extrmit, on trouve : une connexion Internet, une camra numrique ou une Webcam mettre sur l'cran de chaque participant actif, un microphone.
Figure I.10 : Exemple de visioconfrence utilisant Internet et une Webcam Outils logiciels : Outre le matriel ncessaire, il faut disposer d'un logiciel grant la visioconfrence. Le tableau ci-dessous prsente quelques logiciels et les plates-formes sur lesquelles sont utiliss :
Page 10
Fascicule TIC
Produit CU-SeeMe IVS FreeVue Network Vido
Plate-forme
licence
Windows /MacOs Gratuite Linux Windows Windows Gratuite Gratuite Gratuite Payante Payante Payante Gratuite Gratuite
PictureWindow Windows ShowMe VidoVu NetMeeting Gnomemeeting Application 3 Windows Windows Windows MacOS/ Linux
En utilisant deux Webcams et le rseau Internet, faites la simulation d'une visioconfrence entre deux groupes d'lves dans le mme laboratoire, ou entre deux laboratoires de votre tablissement si c'est possible.
Page 11
Fascicule TIC
EXERCICES
Exercice 1 Lors de l'utilisation d'un logiciel de gestion de rseau, un lve travaillant sur un poste configur comme client, peut-il : bloquer les claviers des autres lves ? exposer son travail aux autres lves ? Exercice 2 Un internaute participant un forum peut-il : envoyer un document multimdia ? Justifier votre rponse. Demander des informations sur n'importe quel thme qui le proccupe ? Justifier votre rponse. Exercice 3 Un internaute peut-il participer n'importe quel forum ? Justifier votre rponse. Exercice 4 Comparer les deux services d'Internet, le Chatting et le forum. Exercice 5 Rpondre par (V) si la proposition est correcte et par (F) dans le cas contraire. Le protocole utilis dans le service forum est : FTP HTTP NNTP Exercice 6 Quel est le nombre minimum de site participant, pour pouvoir parler d'une visioconfrence en mode multipoints ? Justifier votre rponse. Exercice 7 Les participants une visioconfrence, ont-ils la possibilit de s'changer des messages ? Justifier votre rponse. Exercice 8 1. Les participants une visioconfrence, ont-ils la possibilit de s'changer des messages ? Justifier votre rponse. 2. Dans une visioconfrence en mode broadcast, les participants qui suivent la diffusion, peuvent-ils intervenir ou poser des questions ? Justifier votre rponse. Exercice 9 Dans le cas de l'utilisation du rseau Internet et des Webcams, qu'el est le composant qui remplace le CODEC ? Justifier votre rponse.
Page 12
Chapitre 2 : Les animations
Fascicule TIC
Page 13
Fascicule TIC
Page 14
Fascicule TIC
I.
Introduction
On trouve souvent dans les pages Web des lments anims qui ont subi un mouvement et/ou une dformation. Ces lments sont gnralement dorigines graphiques vectorielles. Un logiciel crateur danimations pour le Web est une application qui permet de crer une animation pour quelle soit intgre dans une page Web. Les animations cres par ces logiciels sont gnralement sous formats dimages vectorielles. Un logiciel danimation permet aussi de crer une interactivit avec lanimation en utilisant des boutons qui peuvent tre associes des actions et des vnements. Il existe plusieurs logiciels crateurs danimations orients Web comme Macromedia Flash, SWiSHmax, flax, etc. Dans ce cours on sintressera au Macromedia Flash version 8.
II. Prsentation de linterface de Flash

Activit 1
Lancer le logiciel flash puis dcrire la fentre de son interface.
Figure II.1 : Prsentation de linterface du Macromedia Flash
Page 15
Fascicule TIC
1 2 3 4 5 6
LGENDE La barre des menus 7 La barre doutils principale 8 Les panneaux affichs 9 Le scnario 10 Le document 11 Linspecteur des proprits 12
La boite outils La zone du travail Le calque actif La tte de lecture La barre ddition La ligne du temps
1. La scne
La scne est la zone rectangulaire dans laquelle vous placez les objets animer (images vectorielles, zones de texte, boutons, graphiques bitmap imports, clips vido, etc.) lors de la cration de documents Flash.
2. Le Scnario
Le scnario organise et contrle le contenu d'un document au fil du temps par des calques. Tout comme les films, les documents Flash divisent les priodes de temps en images. Pour masquer le scnario, il suffit de cliquer dessus. IN NF FO OS S I En plus des calques, le scnario affiche la ligne de temps, la cadence, lindice de limage courante, etc. Il est possible de dvelopper ou de rduire les panneaux activs avec les flches noires existant gauche du titre de chaque panneau.
III. lments daffichage

Le document relatif une squence doit comporter des objets "Textes, Formes, Symboles, etc.". Pour faciliter linsertion dun objet, on doit afficher : La rgle, les guides, la grille, de mme, il est possible de grer ces objets en exploitant les panneaux.
1. La rgle
Pour afficher ou masquer les rgles : Activer le menu Affichage, Choisir la commande rgles.
2. La grille
Pour paramtrer la grille : Activer le menu Affichage, Choisir le groupe de commandes Grille, Choisir la commande Modifier la grille, Choisir les paramtres ncessaires et confirmer.
Page 16
Fascicule TIC
Figure II.2 : La dfinition des proprits de la grille
3. Les panneaux
Flash propose plusieurs possibilits pour personnaliser l'espace de travail en fonction des besoins. Les panneaux et l'inspecteur des proprits permettent d'afficher, d'organiser et de modifier les mdias et d'autres lments actifs, ainsi que leurs attributs. L'inspecteur des proprits se modifie en fonction de l'outil ou de l'lment actif avec lequel vous travaillez et il vous permet d'accder rapidement aux fonctions frquemment utilises. Erreur ! Rfrence de lien hypertexte non valide. Activer le menu fentre, Choisir le nom du panneau souhait. Erreur ! Rfrence de lien hypertexte non valide. Afficher le menu contextuel de la barre de titre du panneau, Choisir la commande Fermer le groupe de panneaux. Dans le tableau ci-dessous vous trouvez les rles des panneaux frquemment utiliss
Panneau
Info
Rle
Afficher et modifier les dimensions et les coordonnes de llment slectionn Transformer Modifier les dimensions, pivoter et incliner llment slectionn Afficher et modifier les couleurs, le type de dgrad, et le paramtre Mlangeur Alpha de llment slectionn. Affiche la palette des couleurs afin den choisir une couleur pour Nuancier lappliquer llment slectionn. Afficher et changer lalignement de llment actif. Aligner Afficher et modifier les proprits de llment slectionn ou actif. Proprits Afficher et accder aux lments dj mis dans la bibliothque Bibliothque (Symbole, Son, Image bmp) Permet dassocier une Action un lment de lanimation Actions Permet de grer les squences de votre animation. Squences Permet dafficher les tches dj effectues. Historique
Page 17
Fascicule TIC
Il est possible de grouper plusieurs panneaux ensemble. Les panneaux Historique et squence sont accessibles via le menu Fentre, puis la commande Autre panneaux Le panneau Bibliothque commune comporte des objets prts lusage "Boutons, clips, etc."
IV. Les lments dune animation flash

Activit 2
A partir de l'imprime cran suivant, dterminer les lments qui forment lanimation active :
IN NF FO OS S I
Figure II.3 : Les lments dune animation
Solution
Le nom de lanimation courante est "activit2" La squence affiche est "sq roue" Cette squence comporte les calques "Roue" "Ombre" et "Aplan" Daprs le scnario, chacun des trois calques comporte 30 images et limage courante est celle n1 du calque "Aplan"
Constatation
Une animation flash doit comporter au moins une squence, de mme, une squence doit comporter au moins un calque, qui doit comporter au moins une image et une image doit avoir un contenu (forme, texte, symbole, son, image bmp).
Page 18
Fascicule TIC
1. Les proprits du document

Activit 3
a. Crer une nouvelle animation. b. Changer sa taille (550x400), son arrire plan (gris) et lui appliquer une vitesse de 12 ips (images par secondes).
Solution
Pour changer les paramtres du document : Activer le menu Modification, Choisir la commande Document , Saisir les paramtres convenables Comme les montre limage suivante :
Figure II.4 : Les proprits dun document
Constatations :
A laide de cette boite de dialogue il est possible de : Changer lunit de la rgle. Modifier la vitesse ou la cadence qui sexprime en images/seconde (ips). Choisir une couleur darrire plan. Choisir des dimensions personnalises. Attribuer un titre au document. Etc.
2. Les squences
Activit 4
a. b. c. d. e.
Crer un nouveau document flash. Ajouter deux squences votre animation courante. Renommer les squences respectivement par "Un", "Deux" et "Trois" Modifier leur ordre "Trois", "Deux" et "Un". Supprimer la squence "deux".
Page 19
Fascicule TIC
Solution
Pour ajouter une squence : Activer le menu Insertion, Choisir la commande Squence, Pour renommer, dplacer ou supprimer une squence : Drouler le menu Fentre, Choisir le groupe Autres panneaux, Slectionner la commande Squence, Effectuer les oprations ncessaires.
Figure II.5 : Le panneau Squence
Constatations :
Pour renommer une squence il suffit de cliquer 2 fois sur son nom dans le panneau squence puis saisir le nouveau nom. Pour dplacer une squence il suffit de maintenir la souris clique l'icne de la squence, tout en la dplaant vers la position convenable. Les trois boutons de la barre dtat du panneau squence permettent respectivement de dupliquer, ajouter ou supprimer une squence. Pour se dplacer dune squence une autre, on peut utiliser le bouton Modifie la squence qui existe dans la barre scnario.
Figure II.6 : La liste des squences
3. Les calques
Activit 5
a. b. c. d. e.
Dans la squence "Trois" cre dans l'activit 4, insrer deux calques, Renommer les trois calques respectivement "Cun", "Cdeux" et "Ctrois", Supprimer "Cun", Verrouiller "Cdeux", Masquer "Ctrois".
Page 20
Fascicule TIC
Solution
Figure II.7 : Les calques du scnario Trois
Constatations :
Pour insrer un calque : Activer le menu Insertion, Slectionner le groupe Scnario, Choisir la sous commande Calque. Pour changer les proprits dun calque : Activer le menu Modification, Slectionner le groupe Scnario, Choisir la commande Proprits du Calque, Apporter les modifications ncessaires. Pour supprimer un calque : Activer le calque supprimer Cliquer sur licne de la corbeille qui existe dans le scnario. IN NF FO OS S I On peut dplacer un calque laide dun glissement par la souris. Il est impossible de modifier le contenu dun calque masqu ou verrouill.
4. Les images
Activit
A partir du scnario suivant, dduire les diffrents types dimages utilises.
Figure II.8 : Les diffrents types dimages
Page 21
Fascicule TIC
Solution
On distingue 5 types dimages Les images cls : Une image-cl est indique par un point noir ; exemple les images n1, 2, 15,29 et 30 du calque Roue. Les images cls vides : Une image cl vide est indique par un point creux ; exemple limage n1 du Calque4 Les images vides : Une image vide est caractrise par une couleur blanche sans aucun contenu ; exemple les images du n2 au n30 du Calque4. Les images copies : toute image en gris est une copie de limage prcdente ; exemple : les images du n2 au n 30 du calque APlan. Les images calcules : Lors dune interpolation, il est ncessaire de dfinir uniquement les images cls qui reprsentent le dbut et la fin de linterpolation ; les autres images qui se trouvent au milieu sont calcules suite des commandes de calcul mathmatique ; exemple : les images du n2 au n14 du calque Ombre. Les images de couleur (violet) du calque "Roue" ont subi une interpolation de mouvement. Les images de couleur (vert) du calque "Ombre" ont subi une interpolation de forme.
IN NF FO OS S I
5. Utilisation d'images dans le scnario

Une image-cl est une image dans laquelle se dfinit des changements de proprits d'un objet, ou dans laquelle vous incluez du code Action Script afin de contrler un aspect du document. Une image cl vide est une image qui est prte recevoir un contenu Pour insrer une image : Choisir l'emplacement de l'insertion sur le scnario, Activer le menu Insertion, Slectionner le groupe Scnario, Choisir la commande Image ou image cl, ou image Cl vide. Pour supprimer une image (Cl vide) Choisir dans le scnario limage supprimer, Activer le menu Edition, Slectionner le groupe Scnario, Choisir la commande Supprimer les images. Pour supprimer une image cl Choisir dans le scnario limage supprimer, Activer le menu Modification, Slectionner le groupe Scnario, Choisir la commande Supprimer l'image cl.
Page 22
Fascicule TIC
IN NF FO OS S I
La commande Effacer les images permet de remplacer les images slectionnes par des images vides alors que la commande Supprimer les images permet de les enlever compltement de la ligne de temps.
V. Les formes
Activit !
a. Dessiner un cercle de remplissage bleu et de contour noir, b. Modifier sa couleur de remplissage en rouge, et sa couleur de contour en bleu, c. Modifier sa taille L=100 et H=100 et ses coordonnes X= 50 et Y= 50, d. Slectionner son contour et le dplacer au coordonnes X=250 et Y=50 puis le
remplir par une couleur verte,

e. Appliquer au disque vert, une transformation de 150% aux dimensions et une
inclinaison de 60par rapport la verticale.
Solution
Figure II.9 : La manipulation des formes
Constatations :
Il est possible de changer les couleurs de la forme (contour et/ou remplissage) soit l'aide de la boite outils, soit avec le panneau des proprits, soit avec le panneau Couleur. Il est possible de modifier les coordonnes et les dimensions dune forme soit avec le panneau des proprits, soit avec le panneau Info. Toute forme est caractrise par un contour et un remplissage qui peuvent tre spars l'un de l'autre. La transformation d'une forme est possible soit avec le panneau Transformer, soit avec la boite outils ou mme avec la commande Transformer du menu modification. Pour slectionner un remplissage, utiliser l'outil slection puis cliquer sur le remplissage ; de mme pour le contour ; mais pour slectionner les deux effectuer un double clic sur le remplissage. Lorsque deux formes se superposent ; la forme suprieure mange la partie commune avec la forme infrieure.
VI. Les groupes

Activit "
a. b. c.
Crer trois formes, un rectangle, une ellipse un triangle Transformer chaque forme (Contour et remplissage) en un groupe. Superposer les trois formes en mettant le rectangle au premier plan, le triangle au deuxime plan et l'ellipse au dernier plan.
Page 23
Fascicule TIC
Solution
Pour grouper des formes : Slectionner les formes grouper, Activer le menu Modification, Choisir la commande Grouper.
Figure II. 10 : La cration des groupes
Constatations :
Pour viter le problme de superposition des formes ; Il est possible de grouper le contour et le remplissage des formes. Il est possible d'associer un groupe avec d'autres groupes ou d'autres formes. Il est possible de changer l'ordre des groupes superposs en utilisant la commande Rorganisation du menu Modification. Il est possible de verrouiller un groupe contre les modifications en utilisant la commande Verrouiller du menu Modification. Il est possible de dissocier un groupe en des sous groupes ou en des formes, en utilisant La commande Dissocier du menu modifications.
VII. Les textes

Activit #
a. b.
crire le texte "Animation" Appliquer les proprits suivantes :
Police
Monotype Corsiva
c. d. e.
Couleur Style Taille Espacement

Bleu Gras 96 10
Sparer ce texte. Dplacer les lettres de ce texte. Convertir ces lettres en des formes.
Page 24
Fascicule TIC
Solution
tant donn qu'un texte est considr comme un groupe, pour sparer ses caractres : Slectionner le texte sparer, Activer le menu Modification, Choisir la commande Sparer. N. B. : Pour convertir les caractres en formes, il suffit de leurs appliquer une deuxime sparation, comme l'indique la figure suivante :
Figure : II.11 La manipulation des textes
VIII. Limportation des mdias

Avec Flash vous pouvez insrer des mdias externes une animation, ces mdias peuvent tre des fichiers sonores, des images bitmap, des squences vido, etc.
Page 25
Fascicule TIC
Activit1$
Crer une animation comportant une squence de deux calques forms chacun de 10 images. a. Le 1er calque comporte une image bitmap qui couvrira le document de la scne. b. Le 2me calque comporte un fichier sonore.
Solution
Pour importer une image Bmp (bitmap), un fichier sonore ou un autre mdia : Choisir l'emplacement de l'insertion du mdia (Calque et image), Activer le menu Fichier, Choisir le groupe de commandes Importer, Choisir la commande Importer dans la bibliothque Slectionner le mdia importer Glisser, partir de la bibliothque, le mdia vers la scne.
Figure II.12 : Limportation dune image bitmap et dun fichier sonore
Page 26
Fascicule TIC
Constatations :
L'importation d'un mdia consiste l'envoyer la bibliothque, pour en exploiter des copies ultrieurement en tant qu'occurrences sur la scne. Il est possible d'exploiter l'inspecteur des proprits pour dfinir les paramtres de lecture du fichier audio insr dans l'animation.
Figure II.13 : La bibliothque de l'animation, comportant les deux mdias imports
IX. Les symboles graphiques

Les objets que vous pouvez insrer une animation Flash peuvent tre des formes, des groupes, des textes, des mdias etc. Mais il arrive souvent qu'une animation utilise le mme objet plusieurs fois, dans ce cas, vous pouvez l'envoyer la bibliothque de l'animation comme tant un graphique, un bouton, un mdia ou un clip et utiliser autant de fois que vous avez besoin des copies de ce dernier (occurrences).
Activit 11
Crer un symbole graphique nomm case reprsentant un carr sans remplissage et de contour noir.
Page 27
Fascicule TIC
Solution
Figure II. 14 : La cration dun graphique Pour crer un symbole graphique il faut : Activer le menu Insertion Slectionner la commande Nouveau symbole Dans la boite de dialogue "Crer un symbole", choisir le nom et le comportement (graphique) Dessiner le graphique
Constatation
Une fois le symbole graphique est dessin, il sera stock dans la bibliothque.
X. Les animations
Avec Flash vous pouvez avoir deux types d'animations : les animations interpoles. les animations image par image Dans ce qui suit on va se limiter aux animations interpoles.
1. L'interpolation de forme
Activit 12
On se propose de crer une animation nomme interpolation de forme dans laquelle il y aura la transformation d'un pentagone vers une toile de cinq cots et en respectant les tapes suivantes : a. Utiliser deux calques nomms "Morphing" et "Titre". b. Dans le calque nomm "Titre", saisir le titre "Interpolation de forme" qui doit s'afficher de l'image 1 jusqu'au l'image 40. c. Dans l'image n1 du calque nomm "Morphing", dessiner un pentagone Bleu sans contour, de largeur = 100 et de hauteur = 100, de coordonnes X=0 et Y=0.
Page 28
Fascicule TIC
d. Dans l'image n40 du calque nomm "Morphing", dessiner une toile Rouge
sans contour, de largeur = 200 et de hauteur = 200, de coordonnes X=300 et Y=300 et avec une inclinaison de 60. e. Dans l'image n1 du calque nomm "Morphing", activer l'inspecteur de proprits et appliquer une interpolation de forme. N. B. : Pour dessiner un polygone ou une toile, utiliser l'inspecteur de proprits de l'outil rectangle.
Solution
Figure II. 15 : Le scnario de lanimation comportant une interpolation de forme
Constatations :
Les images d'interpolation de forme "Morphing" sont toujours colores en vert dans la ligne de temps du scnario. Lors d'une interpolation de forme les images intermdiaires seront calcules et non dessines avec la boite outils.
IN NF FO OS S I L'interpolation de forme s'applique uniquement aux formes. Pour appliquer un morphing un texte ou un groupe il faut le convertir en forme.
2. L'Interpolation de mouvement
Activit 13
On se propose de crer une animation nomme interpolation de Mouvement dans laquelle il y aura le dplacement d'un symbole d'une position une autre tout en respectant les tapes suivantes : a. Crer un graphique nomm Etoile qui comporte une toile de 3 cots et sans contour. b. Dans un calque nomm "Titre", saisir le titre "Interpolation de Mouvement" qui doit s'afficher jusqu' l'image 40. c. Dans l'image n1 du calque nomm "Mouvement", insrer, partir de la bibliothque, une occurrence du graphique "Etoile" en lui attribuant une largeur de 50 et une hauteur de 50, et les coordonnes X=0 et Y=0.
Page 29
Chapitre 2 : Les animations d.
Fascicule TIC
Dans l'image n40 du calque nomm "Mouvement", insrer une occurrence du symbole "Etoile" en lui attribuant la mme largeur et la mme longueur et les coordonnes X=450 et Y=300 et un angle de rotation de 90. e. Dans l'image n1 du calque nomm "Mouvement" ; activer l'inspecteur de proprits et appliquer une interpolation de mouvement.
Solution
Pour raliser une interpolation de mouvement Insrer un graphique dans limage de dbut de linterpolation Insrer le mme graphique dans limage de fin de linterpolation. Slectionner limage de dpart Dans linspecteur des proprits choisir linterpolation de mouvement.
Figure II. 16 : le scnario d'une animation qui comporte une interpolation de mouvement
Constatations :
Les images d'interpolation de mouvement sont toujours colores en violet dans la ligne de temps du scnario. Lors d'une interpolation de mouvement les images intermdiaires seront calcules et non dessines avec la boite outils. Avec une interpolation de mouvement, vous pouvez exploiter l'inspecteur des proprits pour personnaliser cette animation (acclration, rotation, dimensionnement, orientation vers la trajectoire, etc.)
IN NF FO OS S I
L'interpolation de mouvement s'applique aux symboles, aux groupes et aux textes et non aux formes. Pour appliquer une interpolation de mouvement une forme, il faut la convertir en groupe ou symbole.
Page 30
Fascicule TIC
RETENONS
a. Le logiciel Macromedia Flash est un outil crateur d'animations pouvant tre
intgres dans des pages Web.

b. Les objets pouvant exister dans une animation Flash, sont crs base
d'images vectorielles ; telles que les formes, les groupes, les symboles graphiques, les boutons etc.
c. Les graphiques crs ainsi que les mdias imports sont stocks dans la
bibliothque pour un usage multiple.

d. Une animation Flash est forme par des squences (scnes) ; une squence peut
comporter plusieurs calques et un calque peut renfermer plusieurs images.

e. Dans une animation on peut avoir 5 types d'images : Les images cls, les
images vides, les images cls vides, les images recopies et les images calcules.
f. Avec le logiciel Macromedia Flash, il est possible de crer deux types
d'animations : Les animations image par image et les animations interpoles.

g. Dans une animation interpole, il suffit de dfinir les deux images extrmes de
l'animation (image dbut et image fin) puis dans l'image dbut appliquer les proprits d'interpolation.
h. Il est possible d'avoir deux types d'interpolations : interpolation de forme qui
s'applique uniquement aux formes et interpolation de mouvement qui peut s'appliquer aux graphiques et aux groupes.
Page 31
Fascicule TIC
EXERCICES
Exercice 1 a. En utilisant la boite outils, dessiner le drapeau de la Tunisie. b. Ajouter en dessous le texte "TUNISIE" comme le prsente la figure suivante :
Exercice 2 1. Crer une animation qui transforme un triangle en un rectangle puis en pentagone et la fin en disque. 2. Insrer un deuxime calque travers le quel on associe chaque forme son nom et on y applique un effet de morphing. Exercice 3 Crer une animation qui illustre le rebondissement dun ballon. Exercice 4 Crer une animation qui illustre la rotation de la terre par rapport au soleil. Exercice 5 1. Crer une nouvelle animation. 2. Dans les 40 premires positions du premier calque, importer un fichier audio. 3. Dans les 40 premires positions du deuxime calque, importer un fichier image. 4. Crer un morphing dans le troisime calque, qui transforme une toile en un triangle. Exercice 6 Crer une nouvelle animation qui illustre le passage dun ballon travers un cerceau. Exercice 7 Crer une animation qui comporte le drapeau de la Tunisie anim et en lui ajoutant lhymne nationale.
Page 32
Chapitre 3 : Le lan%a%e &T'L
Fascicule TIC
Page 33
Fascicule TIC
Page 34
Fascicule TIC
I. Introduction
Les pages Web visualises dans un navigateur Internet sont crites avec un langage nomm HTML (HyperText Markup Language). Cest un langage de description de contenu et de structure. Les pages HTML ont la particularit dtre indpendantes de toute plate-forme, et donc particulirement bien adaptes des changes dinformations dans un environnement htrogne comme le Web. Le langage HTML est compos dun ensemble de balises (tags). Une balise est un lment spcial qui indique une action concernant la mise en page, la mise en forme ou la structure logique dun document.
Activit 1
Crer un nouveau dossier sous la racine de votre disque dur avec le nom tpHtml. b. Dans le dossier tpHtml, crer un nouveau document texte (cliquer avec le bouton droit dans une zone vide et choisir nouveau document texte). c. Renommer le fichier afin de le doter de lextension Html (tp1.Html).
a.
Constatations :
Le fichier texte sest transform en page Web ce qui signifie qu'une page Web nest rien dautre quun fichier texte enregistr avec lextension Html (ou htm). En double cliquant sur ce fichier, le navigateur se lance avec comme contenu le fichier tp1.Html, ce qui signifie que le langage HTML utilis pour la cration des pages Web, est un langage interprt, dont linterprteur est le navigateur install sur la machine de test (tel que : Firefox, Internet Explorer, Chrome, ). Bien que de nombreux logiciels soient destins crer des pages HTML, dans ce manuel nous allons utiliser un diteur de texte pour la cration et ldition des pages Web, et ce dune part pour vous inviter connatre de plus prs la syntaxe du langage HTML et dautre part pour ne pas tre dpendant des fonctionnalits dun logiciel particulier.
IN NF FO O I
Activit 2
Dans le dossier de travail, crer un nouveau fichier tp2.Html. Rechercher une image dextension jpg sur votre disque dur, pour la copier dans votre dossier de travail avec le nom image1.jpg. c. Double cliquer sur le fichier tp2.Html. d. A laide de votre navigateur, accder la fentre ddition du code source de la page (menu affichage source de la page). e. Saisir le code HTML donn ci-dessous, enregistrer et tester (bouton rafrachir).
a. b.
Page 35
Fascicule TIC
<HTML> <HEAD> <TITLE> MA PREMIRE PAGE </TITLE> </HEAD> <BODY> <CENTER> <FONT SIZE="5" COLOR="blue"> PAGE Web N1 </FONT> <HR> <BR> <IMG BORDER="0" SRC="image1.jpg" width="80" height="100" > </CENTER> </BODY> </HTML> Figure III- 1 : Une page Web contenant un titre et une image
Constatations :
Le document HTML peut contenir un ensemble de balises tels que <HTML>, <HEAD>, <TITLE>, <BODY>, <HR>, <BR>, <IMG>, etc. Les balises du langage HTML sont inclues entre le caractre infrieur (<) et le caractre suprieur (>). Les balises du langage HTML ne sont pas sensibles la casse. Syntaxiquement, les balises rencontres peuvent tre reparties en quatre catgories : o Des balises composes dune partie ouvrante et dune partie fermente, tel que <BODY>. </BODY>, o Des balises composes dune seule partie ouvrante tel que : <BR>, o Des balises composes dune partie ouvrante et dune partie fermante, avec des proprits, tel que <FONT SIZE="5" COLOR="blue">.</FONT>, o Des balises composes dune partie ouvrante avec des proprits, tel que <IMG BORDER="0" SRC="image1.jpg" WIDTH="80" HEIGHT="100" >
Page 36
Fascicule TIC
II. La Structure dun document HTML

<HTML> <HEAD> Titre du document HTML <TITLE> . . </ TITLE> </HEAD> <BODY> . . </ BODY> </HTML> Corps du document HTML Entte du document HTML
Figure III- 2 : Structure gnrale d'un document HTML
Constatations :
Un fichier HTML commence par la balise <HTML> et finit par la balise </HTML> La partie entte dlimite par <HEAD> et </HEAD> sert dfinir le titre de la page Web qui sera affich dans la barre du titre du navigateur (entre <TITLE> et </TITLE>) et indiquer un certain nombre d'informations facultatives tel que les mots cls, la date de cration, lexception du titre, le contenu de cette section nest pas directement visible pour le visiteur. <BODY> et </BODY> est une balise optionnelle qui permet de dlimiter le corps du document Html. Le titre dune page ne peut pas contenir de mise en forme ou dimages. Le choix du titre doit se faire avec beaucoup de soin, en effet cest cette information qui est utilise dans les listes historiques et favoris de votre navigateur. IN NF FO OS S I
Page 37
Fascicule TIC
La gestion des textes

Activit 3
Dans votre dossier de travail, crer un nouveau fichier tp3.Html. Double cliquer sur ce fichier. A laide de votre navigateur, accder la fentre ddition du code source de la page. d. Saisir le code HTML donn ci-dessous, enregistrer et tester.
a. b. c.
<HTML> <HEAD> <TITLE> Textes et Paragraphes</TITLE> </HEAD> <BODY> <P align="center"> <FONT color="blue" size=7 face="arial"> <B> Dveloppement Web </B> </FONT> </P> <HR color="#884412" width="400" size="5"> <CENTER> <FONT size="6">les langages pour le Web</FONT> </CENTER> <HR color="#000000" width="500"> <BR><B>Langage Html</B> <BR><I> Langage javascript</I> <BR><U> Langage PHP </U> <BR> <P><FONT size="5">Autre</FONT></P> MERCI </BODY> </HTML>
Page 38
Fascicule TIC
Figure III- 3 : La gestion du texte avec le langage HTML
Constatations :
Le texte dfini entre <BODY> et </BODY> sans balises (Merci), sera repris par le navigateur avec les proprits de mise en forme par dfaut, de ce dernier. La balise <BR> permet un retour la ligne, alors que <P> provoque un passage la ligne et dcale la ligne suivante denviron une ligne (espacement inter paragraphe). On remarque que la balise <FONT> permet de changer la police, la couleur et la taille du texte. Les styles d'criture : gras, italique et soulign s'appliquent respectivement avec les balises <B> (Bold), <I> (Italic) et <U> (Underline). La balise <CENTER> permet dappliquer un alignement centr. La balise <BR> permet d'effectuer un retour la ligne. La balise <HR> permet d'insrer une ligne horizontale et la proprit width permet de dfinir la largeur de la ligne horizontale qui est mesure soit en pixels, soit en pourcentage par rapport son conteneur. Le tableau suivant comporte les balises de mise en forme des caractres et des paragraphes.
Page 39
Fascicule TIC
Fonction
Gras Italique Soulig Mise en forme de Caractre Exposant Indice Retour la ligne Ligne de sparation
Balise
<B>...</B> <I>...</I> <U>....</U> <FONT SIZE="**" COLOR="#****" FACE="****"> </FONT> <SUP></SUP> <SUB></SUB> <BR> <HR SIZE="**" COLOR="#******" WIDTH="***" ALIGN="CENTER/LEFT/RI GHT" > <CENTER></CENTER>
Exemple de code
<B>Tunisie</B> <I>Tunisie</I> <U>Tunisie</U> <FONT size="2" color="blue" face="arial"> Tunisie </FONT> X<SUP>2</SUP> H<sub>2</sub>O HTML<BR>Web HTML <HR color="blue"> Web <center> Tunisie </center> <div align="right"> Tunisie</div> <p align="right"> Tunisie </p> 
Rsultat
Tunisie Tunisie Tunisie
Tunisie X2 H2 O HTML Web HTML Web
Centrage
Tunisie Tunisie
<DIV Alignement ALIGN="CENTER/LEFT/RI d'un lment GHT"> ...</DIV> Dfinition et alignement <P>...</P> <P ALIGN="******">...</P> d'un paragraphe Commentaire 
Tunisie
Il est possible d'utiliser plusieurs balises pour un mme lment de texte. Il faut veiller bien les imbriquer. Ainsi <B><I>...</I></B> est correct mais <B><I>...</B></I> est incorrect et risque de poser des problmes. La taille dans <FONT SIZE= "taille"> est un nombre entre de 1 7 La couleur dans <FONT color="couleur"> peut tre indique de deux faons : avec le nom dune couleur exprim en anglais (black, white,...) ou avec un code hexadcimal de la couleur souhaite exemples: #ffffff, #0022AF etc. Afin de garantir laffichage correct des pages Web, des caractres accentus et des symboles spciaux sur toutes les plate-formes, le HTML a prvu pour chacun dentre eux un code commencant par & ( ET commercial) Exemple : é pour . Certains de ces codes ont leurs quivalents sous forme dun nom. Par exemple, ce mme scris aussi é
Page 40
IN NF FO OS S I
Fascicule TIC
Les titres
Le langage HTML nous offre la possibilit de crer des titres avec plusieurs niveaux hirarchiques afin de subdiviser un document Web en plusieurs parties spares.
Activit 4
Dans votre dossier de travail, crer un nouveau fichier tp4.Html. Double cliquer sur ce fichier. A laide de votre navigateur, accder la fentre ddition du code source de la page. d. Saisir le code HTML donn ci-dessous, enregistrer et tester.
a. b. c.
<HTML><HEAD> <TITLE>Les titres</TITLE> </HEAD> <BODY> <P align="center"><FONT size=7>Les Titres</FONT></P><BR><HR> <P> <H1>on distingue six niveaux pour les titres</H1></P> <H1> titre niveau 1</H1> <H2> titre niveau 2</H2> <H3> titre niveau 3</H3> <H4> titre niveau 4</H4> <H5> titre niveau 5</H5> <H6> titre niveau 6</H6> </BODY></HTML>
Figure III- 4 : La dfinition des titres avec le langage HTML

Page 41
Fascicule TIC
Constatations :
La balise qui permet de dfinir un titre est <Hn></Hn>; avec n qui varie de 1 6. Pour chaque titre, il y a une taille qui croit du niveau 1 au niveau 6 Les balises <Hn> incluent des retours automatiques la ligne. Cela signifie quil nest pas ncessaire dajouter <P> ou <Br> pour commencer un nouveau paragraphe la suite dune balise de ce type.
III. Les images

Activit 5
Dans votre dossier de travail, crer un nouveau fichier tp5.Html. Crer un sous dossier dans votre dossier de travail, avec le nom images. Copier deux images d'extension JPG de votre disque dur, dans le dossier images, et renommer les en image1.jpg et image2.jpg. d. Double cliquer sur ce fichier. e. A laide de votre navigateur, accder la fentre ddition du code source de la page. f. Saisir le code HTML donn ci-dessous, enregistrer et tester. <HTML> <HEAD> <TITLE>Les Images</TITLE></HEAD> <BODY> <P align= "center"><FONT size="6" >L'INSERTION D'IMAGES </FONT> </P><BR> <HR color="#123456" width="400" size="2"> <IMG src="i1.jpg" width="200" height="150"> <HR color="#123456" width="400" size="2"> <IMG border="2" src="i2.jpg" width="200" height="150" align="right" alt="image insre"> </BODY></HTML>
a. b. c.
Page 42
Fascicule TIC
Figure III- 5 : Insertion d'images
Constatations :
Dans les pages Web, l'insertion d'une image en tant qu'objet se fait avec la balise suivante:
<IMG SRC ="adresse" WIDTH="largeur" HEIGHT="hauteur" BORDER="TAILLE" ALT="texte" ALIGN="alignement">
o SRC="adresse" : donne ladresse absolue ou relative de limage afficher. o WIDTH="largeur" et HEIGHT="hauteur" : donnent la largeur et la hauteur de limage, en pixels. o ALT="texte" : permet de donner le texte de l'info bulle de limage o BORDER="taille" : donne la largeur de la bordure autour de limage. o ALIGN="alignement" permet de dfinir l'alignement de limage ("left", "center", "right"). Les navigateurs Web reconnaissent les images aux formats GIF, JPG et PNG. En effet, dune part ses formats offrent les tailles les plus lgres pour les images et dautre part ses formats sont reconnus par la majorit des systmes dexploitation. Bien quil soit possible dutiliser des adresses absolues pour rfrencer une image, il est fortement conseill dutiliser des adresses relatives pour se prmunir des ventuels problmes dadressage lors des dplacements des dossiers contenant vos sites. (Par exemple pour lhbergement).
IN NF FO OS S I
a. b. c.
Activit
Dans votre dossier de travail, crer un nouveau fichier tp6.Html. Double cliquer sur ce fichier. A laide de votre navigateur, accder la fentre ddition du code source de la page. d. Saisir le code HTML donn ci-dessous, enregistrer et tester de nouveau <Html> <head> <title> Image comme arrire-plan </title> </head> <body BACKGROUND= "image.jpg"> <H1>Bonjour</H1> </body> </Html> Figure III- 6 : Insertion d'une image comme arrire plan
Constatations :
Pour insrer une image comme arrire plan dune page Web, on utilise la proprit BACKGROUND de la balise body : <BODY BACKGROUND="Adresse">
Page 43
Fascicule TIC
Limage darrire plan dune page est utilise avec leffet de mosaque (limage est duplique autant de fois que ncessaire afin de couvrir la totalit de la fentre de navigation). Au niveau de la balise <BODY> on peut aussi retrouver les proprits suivantes : BGCOLOR : permettant d'appliquer une couleur unie pour le fond dune page Web. BACKGROUND : permettant d'insrer une image d'arrire plan pour une page WEB.
IV. Les listes

Les spcifications du langage HTML offrent la possibilit de crer des listes dlments.
IN NF FO O I
Activit !
a. Dans votre dossier de travail, crer un nouveau fichier tp7.Html. b. Ouvrir ce fichier. c. A laide de votre navigateur, accder la fentre ddition du code source de la
page. d. Saisir le code HTML donn ci-dessous, enregistrer et tester de nouveau.
Page 44
Fascicule TIC
<HTML> <HEAD> <TITLE> Les listes </TITLE> </HEAD><BODY> <H4> Les types scalaires</H4> <UL> <LI>Entier</LI> <LI>Caractre</LI> <LI>Boolen</LI> <LI>le type numr</LI> </UL> <H4>les fonctions pour un type numr </H4> <OL> <LI>Ord</LI> <LI>Succ</LI> <LI>Pred</LI> </OL> <H4>Lexique</H4> <DL> <DT>A</DT> <DD>Array Abs Access </DD> <DT>B</DT> <DD> Bit Byte Boolean</DD> <DT>C</DT> <DD>Com cos chr char</DD> </DL> </BODY></HTML> Figure III- 7 : La dfinition des listes dans le langage HTML
Constatations :
On distingue 3 types de listes : o Les listes numratives ( puces) qui se dfinissent avec la balise <UL></UL> o Les listes numrotes qui se dfinissent avec la balise <OL></OL> o Les listes de dfinitions qui se dfinissent avec la balise <DL></DL> Les listes numratives et numrotes sont formes par des lignes d'o l'utilisation des balises <LI></LI> tandis que les listes des dfinitions sont formes par des termes <DT></DT> et leurs dfinitions <DD></DD>. La proprit type de la balise <OL> peut avoir les valeurs suivantes : o A : Lettres majuscules. o a : lettres minuscules. o I : chiffres romains majuscules. o i : chiffres romains minuscules. o 1 : chiffres arabes (valeur par dfaut)
Page 45
Fascicule TIC
La proprit type de la balise <UL> peut avoir les valeurs suivantes : o square : puces carres. o circle : puces circulaires. o disc : puces circulaires pleines (valeur par dfaut) IN NF FO OS S I
a. b. c.
Il est possible d'imbriquer des listes mme si elles ne sont pas de mme nature. La balise <LI> admet une proprit type, qui est prioritaire sur lattribut type de <OL> ou <UL>.
V. Les tableaux
Dans le langage HTML, les tableaux sont dune importance capitale, en effet leur utilisation ne se limite pas aux donnes tabulaires, mais sont aussi utiliss pour la mise en forme des pages Web.
Activit "
Dans votre dossier de travail, crer un nouveau fichier tp8.Html. Ouvrir ce fichier. A laide de votre navigateur, accder la fentre ddition du code source de la page. d. Saisir le code HTML donn ci-dessous, enregistrer et tester de nouveau <HTML> <HEAD> <TITLE>Les tableaux</TITLE> </HEAD> <BODY> <TABLE border="3" width="40%" cellspacing="5" cellpadding="4"> <TR> <TD align="center" colspan="4" bgcolor="#FF00FF"> <b>Les moyennes trimestrielles</b> </TD> </TR> <TR> <TD width="34%" align="left"><b>Les matires</b></TD> <TD width="61" align="center" bgcolor="#00FF00"><b>Trim 1</b></TD> <TD width="24%" align="center" bgcolor="#00FF00"><b>Trim 2</b></TD> <TD width="19%" align="center" bgcolor="#00FF00"><b>Trim 3</b></TD> </TR> <TR> <TD width="34%" align="left" bgcolor="#FFFF00"><b>Algorithmiques</b></TD> <TD width="61" align="center"><b>12</b></TD> <TD width="24%" align="center"><b>13</b></TD> <TD width="19%" align="center"><b>15</b></TD> </TR>
Page 46
Fascicule TIC
<TR> <TD width="34%" align="left" bgcolor="#FFFF00"><b>Bases de donnes</b></TD> <TD width="61" align="center"><b>10</b></TD> <TD width="24%" align="center"><b>11</b></TD> <TD width="19%" align="center"><b>14</b></TD> </TR> <TR> <TD width="34%" align="left" bgcolor="#FFFF00"><b>T. I. C</b></TD> <TD width="61" align="center"><b>11</b></TD> <TD width="24%" align="center"><b>12</b></TD> <TD width="19%" align="center"><b>12</b></TD> </TR> </TABLE> </BODY> </HTML>
Figure III- 8 : La dfinition des tableaux avec le langage HTML
Constatations :
En HTML un tableau est conu sous forme dun ensemble de lignes, o chaque ligne est forme dun ensemble de cellules. Au niveau des cellules on dfinit le contenu afficher. Syntaxiquement, le HTML prvu pour les tableaux trois balises : La dfinition d'un tableau : <TABLE></TABLE> La dfinition d'une ligne : <TR></TR> La dfinition dune cellule : <TD></TD> Entre <TABLE> et </TABLE>, on doit retrouver que des blocs < TR > et </TR>, et entre <TR> et </TR> on ne doit retrouver que des blocs <TD> et </TD>, alors que entre <TD> et </TD> on peut retrouver nimporte quel contenu, y compris <TABLE> et </ TABLE> (des tableaux imbriqus)
Page 47
Fascicule TIC
Les proprits de la balise <TABLE> concernent tout le tableau alors que les proprits de la balise <TR> concernent les diffrentes cellules dune mme ligne, tandis que celles de la balise <TD> concernent uniquement une cellule. Dans ce qui suit, nous donnons la liste de ces proprits rparties par balises de rattachement.
Les proprits de la balise <TABLE>
Attributs
cellspacing cellpading border width height align bgcolor
Description
Dfinit l'espace entre les cellules (en pixel). Reprsente l'espace entre le contenu de la cellule et le bord extrieur de la cellule (en pixel). Dfinit lpaisseur de bordure (en pixel). La largeur du tableau en pixel ou en pourcentage par rapport la largeur de la fentre. La hauteur du tableau en pixel ou en pourcentage par rapport la hauteur de la fentre. Lalignement du tableau par rapport au conteneur. La couleur darrire plan du tableau.
Les proprits de la balise <TR>
Attributs
align valign bgcolor height
Description
Lalignement horizontal des diffrents contenus des cellules dune mme ligne (les valeurs possibles : left, right et center). Lalignement vertical des diffrents contenus des cellules dune mme ligne (les valeurs possibles : bottom, top et middle). La couleur darrire plan des diffrentes cellules dune ligne. La hauteur dune ligne en pixel ou en pourcentage par rapport la hauteur du tableau.
Les proprits de la balise <TD>
Attributs
align valign width height bgcolor rowspan colspan
Description
Lalignement horizontal du contenu dune cellule (les valeurs possibles :left, right et center). Lalignement vertical du contenu dune cellule (les valeurs possibles :bottom, top et middle). La largeur dune cellule en pixel ou en pourcentage par rapport la largeur du tableau. La hauteur dune cellule en pixel ou en pourcentage par rapport la hauteur dune ligne. La couleur darrire plan dune cellule. Fusion des cellules horizontalement. Fusion des cellules verticalement.
Page 48
Fascicule TIC
La valeur de la proprit BORDER de la balise <TABLE> par dfaut est gale 0. On obtient une grille invisible dont lintrt principal est de permettre lalignement dun ensemble dlments dans une page. En absence de WIDTH et HEIGHT, le navigateur calcule automatiquement les dimensions des lignes et des colonnes en fonction du contenu et de la taille de la fentre daffichage, cest ce quon appelle un tableau ajust par rapport son contenu. Il est noter que lattribut WIDTH de <TR> na aucun effet puisque toutes les lignes dun tableau ont la mme largeur : celle du tableau.
VI. Les liens hypertextes

Le langage HTML permet de transformer les objets textes et les images en liens cliquables pour nous amener vers dautres emplacements que ce soit dans la mme page ou vers une autre page : cest la notion de lien hypertexte. Conceptuellement, les liens peuvent tre rpartis en deux catgories : Lien externe : cest tout lien permettant dappeler une page HTML partir dune autre page HTML. Lien interne : cest tout lien permettant de pointer un endroit prcis, dans la page, partir dun autre endroit de la mme page HTML.
IN NF FO OS S I
Activit #
a. Dans votre dossier de travail, crer un nouveau fichier tp9.Html. b. Ouvrir ce fichier. c. A laide de votre navigateur, accder la fentre ddition du code source de la
page. d. Saisir le code HTML donn ci-dessous, enregistrer et tester de nouveau <HTML> <HEAD> <TITLE>Lien hypertexte</TITLE> </HEAD> <BODY> <H3>Activer le lien convenable</H3> <TABLE width="480" border="2" > <TR> <TD>Rechercher avec Google</TD> <TD><A href="http://www.google.fr">WWW.Google.fr</A></TD> </TR> <TR> <TD>Accder l'annuaire Yahoo</TD> <TD><A href="http://www.yahoo.fr">WWW.Yahoo.fr</A></TD> </TR> <TR> <TD>Envoyer un Email</TD> <TD><A href="mailto:contact@Edunet.tn">Nous contacter</A></TD> </TR>
Page 49
Fascicule TIC
<TR> <TD>Ouvrir un fichier Html</TD> <TD><A href="file://C:/tp Html/Tp4.Html"> une page Web dans le disque dur</A></TD> </TR> <TR> <TD>tlcharger un fichier</TD> <TD><a href="ftp://ftp.commentcamarche.net/docs/Html.zip">un fichier Html compress</A></TD></TR> </TABLE> </BODY> </HTML>
Constatations :
Les zones sensibles aux clics sont des liens hypertextes cres avec la balise suivante : <A href= " adresse cible ">texte </A> Pour chaque adresse cible correspond un protocole, comme le montre le tableau suivant :
Syntaxe
Description
<A href="adresse"> Protocole par dfaut : http <A href="#position"> Lien interne, protocole http <A href="http://adresse Web"> Protocole http <A href="ftp://adresse ftp"> Protocole FTP pour le transfert de fichiers <A href="mailto:adresse email"> Protocole SMTP pour le courrier lectronique <A href="file://adresse fichier"> Adressage local sur un poste non - distant IN NF FO OS S I
a. b. c.
Par dfaut la couleur du texte d'un lien non activ est bleu et d'un lien activ est violet. On peut appliquer un lien un texte ou une image.
Activit 1$
Dans votre dossier de travail, crer un nouveau fichier tp10.Html. Ouvrir ce fichier. A laide de votre navigateur, accder la fentre ddition du code source de la page. d. Saisir le code HTML donn ci-dessous, enregistrer et tester la page.
Page 50
Fascicule TIC
<HTML> <HEAD> <TITLE>Lien hypertexte bis</TITLE> </HEAD> <BODY> <H1><A name="Haut">Voila une page trs longue</A></H1> <A href="#Bas">bas de la page</A> <HR> <IMG src="image1.jpg" width="550" height="800"> <HR> <H2><A name="Bas">Bas de la page</A></H2> <A href="#Haut">Remonter</A> </BODY> </Html>
Constatations :
On visualise une page Web trs longue mais la navigation dans cette mme page est facile avec lexistence de deux liens internes (Bas) et (Haut) permettant respectivement de descendre vers le bas de la page et de remonter vers le haut de la page. La cration dun lien interne se fait en deux tapes : o La cration dun signet (ou ancre) : lendroit o le lien interne doit pointer, travers la balise : <a name= " nom du signet "> texte </a> o La cration du lien interne : <A HREF= " # nom du signet ">texte </a> Avec la balise <A> on peut utiliser La proprit TARGET qui permet de spcifier la fentre d'affichage du lien. Cette proprit peut avoir les valeurs suivantes : "_blank" : une nouvelle fentre, "_self " : la mme fentre, "_parent" ou nom du cadre : voir la partie du cours sur les cadres On peut avoir un lien mixte qui pointe vers un signet dans une autre page HTML en utilisant la balise suivante : <A HREF= " adresse document#signet> texte </A>
VII. Les formulaires

Jusqu' prsent, toutes les pages dveloppes fonctionnent en mode consultation o la seule interactivit entre le visiteur et le site est le systme de lien hypertexte. Les pages Web formulaires offrent une interactivit beaucoup plus riche, en proposant aux visiteurs divers objets graphiques de saisie, de slection et de choix.
IN NF FO OS S I
Page 51
Fascicule TIC
Activit 11
Dans votre dossier de travail, crer un fichier HTML nomm sauvegarder.Html contenant le texte : "Merci pour votre visite". b. Dans votre dossier de travail, crer un nouveau fichier tp11.Html. c. Ouvrir ce fichier et y saisir le code HTML donn ci-dessous, enregistrer et tester de nouveau. <HTML> <HEAD> <TITLE>Les Formulaires</TITLE> </HEAD> <BODY> <CENTER><H1>Inscription</H1></CENTER> <FORM action="sauvegarder.Html" name="f"> <H2> <P>Votre Nom: <INPUT name="nom" type="text" size="20" maxlength="30"> </P><P>Votre Prnom:<INPUT name="Prenom" type="text" size="20" maxlength="20"> </P><P>Votre Adresse:<BR> <TEXTAREA name="Adresse" cols="25" rows="3"></TEXTAREA> </P><P>Votre Bac:<BR> <SELECT name="bac" size="6"> <OPTION value="SI" Selected>Sc - Info</OPTION> <OPTION value="M">Math</OPTION> <OPTION value="SE">Sc - Exp</OPTION> <OPTION value="ST">Sc - Tech</OPTION> <OPTION value="L">Lettres</OPTION> <OPTION value="EG">Eco - Eco</OPTION> </SELECT> </P><P>Donnez votre 2me langue:</P><P> <INPUT type="RADIO" name="langue" value="Franais"> Franais<BR> <INPUT type="RADIO" name="langue" value="Anglais"> Anglais<BR> <INPUT type="RADIO" name="langue" value="Allemand"> Allemand<BR> </P><P>Vos options:</P><P> <INPUT type="CHECKBOX" name="option" value="Musique"> Musique<BR> <INPUT type="CHECKBOX" name="option" value="Thatre"> Thatre<BR> <INPUT type="CHECKBOX" name="option" value="Dessin"> Dessin</BR> </P><P> Votre Photo jpg, png, bmp...:<BR> <INPUT name="fichier" type="FILE" size="35"> </P> <INPUT type="submit" value=" Envoyer "> <INPUT type="RESET" value=" Annuler"> </H2> </FORM> </BODY> </HTML>
a.
Page 52
Fascicule TIC
Constatations :
La page Web cre comporte un formulaire remplir pour s'inscrire dans une institution universitaire. Ce formulaire comporte plusieurs contrles savoir : zones de saisie, liste droulante, boutons, cases cocher, boutons radio, etc. Les diffrents objets graphiques se trouvent entre <FORM> et </FORM>. Cette balise possde les attributs suivants : o ACTION : Permet dindiquer laction entreprendre lorsque le bouton de validation est activ. o NAME : Le nom attribu au formulaire. o METHOD : Permet de spcifier la mthode denvoi des donnes au serveur (deux mthodes possibles : POST ou GET). IN NF FO O I TARGET : Permet dindiquer la fentre daffichage du fichier dfini comme valeur de la proprit ACTION.
Un formulaire peut comporter plusieurs lments graphiques ou contrles.
1. La zone de saisie
La dfinition du contrle zone de saisie se fait l'aide de la balise suivante :
<INPUT TYPE="TEXT" NAME="nom" SIZE="taille" MAXLENGTH="taille maximale">
Proprit
name size maxlength IN NF FO O I
Description
Indique le nom du contrle. La dimension de lobjet texte (en nombre de caractres). La taille maximale de lobjet texte (en nombre de caractres).
Pour les zones de saisies cryptes (type mot de passe), on utilise INPUT TYPE="password"
2. La zone de saisie plusieurs lignes

La dfinition d'une zone de texte plusieurs lignes se fait l'aide de la balise suivante :
<TEXTAREA NAME="nom" ROWS="NL" COLS="NC">texte par defaut </TEXTAREA>
O NL reprsente le nombre de lignes et NC reprsente le nombre de caractres par ligne.
3. Les cases doptions

La dfinition du contrle cases d'options (bouton radio) se fait l'aide de la balise suivante : <INPUT TYPE="RADIO" NAME="nom" VALUE="valeur" > Les boutons radio sont utiliss pour faire un et un seul choix, parmi un ensemble de propositions.
Page 53
Fascicule TIC
Proprit Description
name value Indique le nom du contrle. Tous les boutons, composant un mme groupe, portent le mme nom. Linformation retourner si la case est coche.
4. Les cases cocher

La dfinition du contrle cases cocher (checkbox) se fait l'aide de la balise suivante : <INPUT TYPE="CHECKBOX " NAME="nom" VALUE="valeur" > Les cases cocher sont utiliss pour faire un ou plusieurs choix parmi un ensemble de propositions.
Proprit Description
name value Indique le nom du contrle. Toutes les cases cocher portent obligatoirement des noms diffrents. Indique la valeur de l'lment case cocher.
5. La liste de slection
La dfinition du contrle Liste de slection se fait l'aide de la balise suivante :
<SELECT NAME="nom" size=x> <OPTION [SELECTED] Value="Valeur1">Elment 1 </OPTION> <OPTION Value="Valeur2">Elment 2 </OPTION> . . . <OPTION Value="Valeurn">Elment n </OPTION> </SELECT>
Proprit Description
name size selected Indique le nom du contrle. Indique la taille d'affichage de la liste. Indique la valeur slectionne par dfaut.
Le contrle liste de slection vous permet de proposer diverses options sous la forme d'une liste droulante dans laquelle l'utilisateur peut cliquer pour faire son choix. Ce choix reste alors affich. La boite de la liste est cre par la balise <SELECT> et les lments de la liste par un ou plusieurs tags <OPTION> et pour chaque option on doit dfinir une valeur avec la proprit VALUE. Dans le cas ou la proprit SIZE est > 1, on peut ajouter la balise SELECT l'attribut MULTIPLE, qui permet d'autoriser la slection multiple de plusieurs lments dans une zone de liste. IN NF FO O I
Page 54
Fascicule TIC
6. Le contrle Annuler
Le contrle RESET permet d'annuler les modifications apportes aux contrles d'un formulaire et de restaurer les valeurs par dfaut. La dfinition du contrle Annuler (RESET) se fait l'aide de la balise suivante : <INPUT TYPE="RESET" NAME="nom" VALUE= "texte"> O VALUE dfinit le texte affich au dessus du bouton.
7. Le contrle Submit
Ce contrle a la tche spcifique de transmettre toutes les informations contenues dans le formulaire l'adresse URL dsigne dans l'attribut ACTION de la balise <FORM>. Ce contrle se dfinit l'aide de la balise suivante : <INPUT TYPE="SUBMIT" NAME="nom" VALUE ="texte"> O VALUE dfinit le texte affich au dessus du bouton.
8. Le contrle button
Lors d'un clic, un bouton peut excuter une action ou un programme (crit laide dun langage autre que le langage Html , tel que le javascript, le PHP ou autre), accder un site Web, accder une boite email, etc. Ce contrle se dfinit l'aide de la balise suivante :
<INPUT TYPE="BUTTON" NAME="lien" VALUE="texte">
9. Le contrle File:
C'est un contrle qui permet de transmettre un fichier, il s'applique avec l'aide de la balise suivante: <INPUT NAME="nom" TYPE="FILE" SIZE="nombre de caractres">
VIII. Les cadres

Le systme de cadres est une fonctionnalit du HTML qui permet de subdiviser la fentre de navigation en plusieurs parties indpendantes. Chacune de ces parties peut alors contenir une page HTML qui peut changer au fil de la navigation. Un exemple classique est un dcoupage en deux parties gauche et droite, dans lequel la partie gauche joue le rle dun index (sommaire) et la partie droite sert despace daffichage. Dans une telle disposition, le visiteur a en permanence accs la liste des liens gauche et chaque lien change la page affiche dans la partie de droite. Pour crer une page dcoupe en plusieurs cadres, il faut crer : Une page dfinissant la structure du dcoupage : lignes, colonnes, dimensions, Cest cette page qui devra tre affiche dans le navigateur pour retrouver le systme de cadres. Autant de pages Web que de cadres : chaque cadre contient initialement une page, qui peut changer par la suite au cours de la navigation.
Page 55
Fascicule TIC
Activit 12
Dans votre dossier de travail, crer trois nouveaux fichiers Cadreg.Html, Cadred.Html et tp12.Html. b. Saisir les codes HTML donn ci-dessous, dans les diffrents fichiers et ce conformment au tableau suivant :
a.
Le fichier tp12.Html <HTML> <HEAD> <TITLE>Les cadres</TITLE> </HEAD> <FRAMESET cols="250,*"> <FRAME src="SOMMAIRE.HTML" name="G"> <FRAME src="CONTENU.HTML" name="D"> </FRAMESET> </HTML> Le fichier Cadred.Html <HTML> <HEAD> <TITLE>Accueil</TITLE> </HEAD>2 <BODY bgcolor="#FFF0C0" > <H1>Bienvenue</H1> Choisissez un lien gauche! </BODY></HTML> Le fichier Cadreg.Html <HTML> <HEAD> <TITLE>sommaire de liens</TITLE> </HEAD> <BODY bgcolor="#E0C0FF" > <H1>Navigation</H1> <A href="tp4.Html" target="D"><B>Les images</B></A><BR> <A href="tp7.Html" target="D"><B>Les tableaux</B></A><BR> <A href="tp6.Html" target="D"><B>Les listes</B></A><BR> <A href="tp5.Html" target="D"><B>Les titres</B></A><BR> </BODY> </HTML>
Page 56
Fascicule TIC
Figure III- 9 : Utilisation des cadres en HTML
Constatations :
On observe une page Web divise en deux zones : une premire zone gauche qui comporte un sommaire de liens hypertextes et une zone droite comportant soit une page d'accueil, soit la destination de chacun des liens. La cration dun systme de cadres compos de n cadres (avec n>=2) ncessite n+1 fichiers HTML spars : les n premiers fichiers HTML pour dfinir le contenu des n cadres alors que le (n+1)eme fichier sert dfinir la structure des cadres et appeler les autres fichiers. La balise <FRAMESET COLS="250, *> permet de dfinir deux cadres verticaux (rows: horizontaux) de largeur respectivement 250 pixels pour la premire colonne et le reste de la fentre pour la deuxime colonne (*). La balise <FRAME SRC="Cadreg.Html" name="G"> permet de dfinir un cadre en spcifiant le fichier contenir: "Cadreg.Html" et son nom : "G". Le nom d'un cadre est trs utile lorsqu'il y a des liens hypertextes entre les cadres. La balise <FRAMESET>..</FRAMESET> remplace la balise <BODY></BODY> IN NF FO O I
Un jeu de cadre peut comporter plusieurs cadres (2 ou plus)
Page 57
Fascicule TIC
RETENONS
a. Les pages Web sont crites avec un langage de marquage nomm HTML
(HyperText Markup Language); ce langage permet aussi la description de contenu et de structure.

b. Le langage HTML comporte un ensemble de balises (tags). Une balise est
un lment spcial qui indique une action concernant la mise en page, la mise en forme ou la structure logique dun document etc.
c. Un fichier Html comporte deux parties; un entte et un corps; l'entte peut
comporter le titre du fichier crer alors que le corps comporte le contenu qui doit exister dans la page Web crer.
d. Vous pouvez crer des fichiers HTML avec n'importe quel diteur de texte
qui peut sauvegarder les donnes comme des purs fichiers texte; Exemple le Bloc note (Notepad)
e. Avec HTML, il est possible d'insrer et de paramtrer des images, des
tableaux, des listes, des titres, des liens hypertextes, des formulaires, des cadres etc.
Page 58
Fascicule TIC
EXERCICES
Exercice 1 a. Dfinir un tableau une seule case contenant un texte quelconque. b. Modifier la couleur du fond de ce tableau, ainsi que la couleur du contenu, sa taille et la police utilise. c. Dcider de la meilleure apparence de ce tableau, cela en ajustant : l'espace entre le contenu de la case et la limite du tableau, l'paisseur des bords du tableau (ventuellement nulle), la taille du tableau, l'alignement du contenu dans la case. Exercice 2 a. Raliser un tableau deux colonnes contenant l'ensemble d'un document : la colonne de gauche contiendra le menu permettant d'aller sur d'autres pages, celle de droite prsentera le contenu du document lui-mme. b. Quels sont les inconvnients de ce type de navigation ? Exercice 3 Dans cet exercice, le but est de construire et de mettre en page un formulaire en HTML. a. Choisir un thme et dfinir quelques questions sur ce thme. Il ne s'agit pas dans ce cas de proposer des questions pertinentes mais simplement d'utiliser tous les types contrles connus de HTML : zone de texte simple et multiple, boutons ( choix unique ou multiple), listes, etc. b. crire dans une page HTML correspondant ce questionnaire. c. Mette en forme le formulaire en utilisant un tableau HTML. d. Lier le questionnaire un programme de traitement des rponses Exercice 5 Donner le code dun fichier HTML contenant un tableau, conformment limprime cran donn cidessous
Page 59
Fascicule TIC
Exercice 6 Donner le code HTML utiliser pour crer un formulaire avec les objets dcris cidessous. Une clique sur le bouton valider devrait appeler un fichier nomm test1.php.
Exercice 7 Donner le code dun fichier HTML appel sommaire.Html contenant une arborescence de puces et de numros dont la structure est donne dans limprime cran ci-dessous :
Il faut veiller ce que les chapitres saffichent en gras et avec la couleur rouge, les paragraphes en italique et avec la couleur bleu, pour les sections on se contentera des proprits de mise en forme par dfaut.
Page 60

Fascicule1 TIC 3 SI VF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Fascicule1 TIC 3 SI VF

Enviado por

Direitos autorais:

Formatos disponíveis

Chapitre 1 : Les outils de collaboration

Chapitre 1 : Les outils de collaboration

Chapitre 1 : Les outils de collaboration

II. Applications dans un rseau local

Chapitre 1 : Les outils de collaboration

III. Les forums

1. Qu'est ce qu'un forum ?

Figure I.1 : Exemple de thmes proposs par un forum

2. Principes d'un forum

Chapitre 1 : Les outils de collaboration

Chapitre 1 : Les outils de collaboration

Figure I.5 : Exemple de forums

Chapitre 1 : Les outils de collaboration

1. Qu'est ce que la visioconfrence ?

3. Modes d'utilisation de la visioconfrence

Chapitre 1 : Les outils de collaboration

Figure I.6 : Architecture gnrale de la visioconfrence hybride

Chapitre 1 : Les outils de collaboration

5. Outils matriels et logiciels

Chapitre 1 : Les outils de collaboration

Figure I.8 : Exemples de meubles de visioconfrence

Chapitre 1 : Les outils de collaboration

Produit CU-SeeMe IVS FreeVue Network Vido

Chapitre 1 : Les outils de collaboration

Chapitre 2 : Les animations

Chapitre 2 : Les animations

Chapitre 2 : Les animations

II. Prsentation de linterface de Flash

Figure II.1 : Prsentation de linterface du Macromedia Flash

Chapitre 2 : Les animations

III. lments daffichage

Chapitre 2 : Les animations

Figure II.2 : La dfinition des proprits de la grille

Chapitre 2 : Les animations

IV. Les lments dune animation flash

Figure II.3 : Les lments dune animation

Chapitre 2 : Les animations

1. Les proprits du document

Figure II.4 : Les proprits dun document

Chapitre 2 : Les animations

Figure II.5 : Le panneau Squence

Figure II.6 : La liste des squences

Chapitre 2 : Les animations

Figure II.7 : Les calques du scnario Trois

Figure II.8 : Les diffrents types dimages

Chapitre 2 : Les animations

5. Utilisation d'images dans le scnario

Chapitre 2 : Les animations

remplir par une couleur verte,

inclinaison de 60par rapport la verticale.

Figure II.9 : La manipulation des formes

VI. Les groupes

Chapitre 2 : Les animations

Figure II. 10 : La cration des groupes

VII. Les textes

crire le texte "Animation" Appliquer les proprits suivantes :

Couleur Style Taille Espacement

Chapitre 2 : Les animations

Figure : II.11 La manipulation des textes

VIII. Limportation des mdias

Chapitre 2 : Les animations

Figure II.12 : Limportation dune image bitmap et dun fichier sonore

Chapitre 2 : Les animations