Fascicule 3SI-TIC - Version Finale

SOMMAIRE
Chapitre 1 : Les outils de collaboration
Page 1
Fascicule TIC
I
II
III
IV
Page 2
Fascicule TIC
I.
Fascicule TIC
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.
Page 4
Fascicule TIC
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.
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
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
Page 5
Fascicule TIC
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.
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
IV.
Fascicule TIC
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.)
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 TlIngnierie, 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.
Figure I.8 : Exemples de meubles de visioconfrence

Page 9
Fascicule TIC
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 :
Produit
Plate-forme
licence
CU-SeeMe
Windows /MacOs Gratuite
IVS
Linux
Gratuite
FreeVue
Windows
Gratuite
Network Vido
Windows
Gratuite
PictureWindow Windows
Payante
ShowMe
Windows
Payante
VidoVu
Windows
Payante
NetMeeting
Windows
Gratuite
Gnomemeeting
MacOS/ Linux
Gratuite
Page 10
Fascicule TIC
Application 3
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
II
III
IV
VI
VII
VIII
IX
Page 14
I.
Fascicule TIC
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.
Page 15
Fascicule TIC
Figure II.1 : Prsentation de linterface du Macromedia Flash
LGENDE
1
2
3
4
5
6
La barre des menus

La barre doutils principale
Les panneaux affichs
Le scnario
Le document
Linspecteur des proprits
7
8
9
10
11
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.

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.
lments daffichage
III.
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
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 Alpha
Mlangeur
de llment slectionn.
Affiche la palette des couleurs afin den choisir une couleur pour lappliquer
Nuancier
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 (Symbole,
Bibliothque
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
Info
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."
Les lments dune animation flash
IV.
Activit 2
A partir de l'imprime cran suivant, dterminer les lments qui forment
lanimation active :
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 :

Slectionner le groupe Scnario,
Choisir la sous commande Calque.
Pour changer les proprits dun calque :
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.
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 6
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.
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,
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,
Choisir la commande Supprimer les images.
Pour supprimer une image cl
Choisir dans le scnario limage supprimer,

Choisir la commande Supprimer l'image cl.
Page 22
Fascicule TIC
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 7
Dessiner un cercle de remplissage bleu et de contour noir,
Modifier sa couleur de remplissage en rouge, et sa couleur de contour en bleu,
Modifier sa taille L=100 et H=100 et ses coordonnes X= 50 et Y= 50,
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.
a.
b.
c.
d.
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 8
a. Crer trois formes, un rectangle, une ellipse un triangle
Page 23
Fascicule TIC
b. Transformer chaque forme (Contour et remplissage) en un groupe.

c. Superposer les trois formes en mettant le rectangle au premier plan, le triangle au
deuxime plan et l'ellipse au dernier plan.
Solution
Pour grouper des formes :
Slectionner les formes grouper,
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 9
a. crire le texte "Animation"
b. Appliquer les proprits suivantes :
Police
Monotype Corsiva
Couleur Style Taille Espacement

Bleu
Gras
c. Sparer ce texte.
d. Dplacer les lettres de ce texte.
e. Convertir ces lettres en des formes.
Page 24
96
10
Fascicule TIC
Solution
tant donn qu'un texte est considr comme un groupe, pour sparer ses caractres :
Slectionner le texte sparer,
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
Activit10
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
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.
Page 26
Fascicule TIC
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.
Solution
Figure II. 14 : La cration dun graphique
Page 27
Fascicule TIC
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.
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
Page 28
Fascicule TIC
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.
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.
d. 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.
Page 29
Fascicule TIC
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.)
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 langage HTML
Page 33
Fascicule TIC
II
III
IV
VI
VII
VIII
IX
Page 34
Fascicule TIC
I.
Fascicule TIC
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
a. 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).
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.
Activit 2
a. Dans le dossier de travail, crer un nouveau fichier tp2.Html.
b. 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).
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
II.
Fascicule TIC
La Structure dun document HTML

<HTML>
<HEAD>
Titre du
document
HTML
Entte du
document HTML
<TITLE>
.
.
</ TITLE>
</HEAD>
<BODY>
.
.
</ BODY>
</HTML>
Corps 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.
Page 37
Fascicule TIC
La gestion des textes

Activit 3
a. Dans votre dossier de travail, crer un nouveau fichier tp3.Html.
b. Double cliquer sur 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.
<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>
Figure III- 3 : La gestion du texte avec le langage HTML

Page 38
Fascicule TIC
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.
Fonction
Gras
Italique
Soulig
Mise en forme
de
Caractre
Exposant
Indice
Retour la
ligne
Balise
Exemple de code
<B>...</B>
<I>...</I>
<U>....</U>
<SUP></SUP>
<SUB></SUB>
<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
<BR>
HTML<BR>Web
<FONT
SIZE="**"
COLOR="#****"
FACE="****"> </FONT>
Ligne de
sparation
<HR SIZE="**"
HTML
COLOR="#******" WIDTH="***"
<HR color="blue">
ALIGN="CENTER/LEFT/RIGHT"
Web
>
Centrage
<CENTER></CENTER>
<DIV
ALIGN="CENTER/LEFT/RIGHT"
> ...</DIV>
<P>...</P>
Dfinition et
alignement d'un <P ALIGN="******">...</P>
paragraphe
Alignement
d'un lment
Commentaire
<center> Tunisie
</center>
<div align="right">
Tunisie</div>
<p align="right">
Tunisie </p>


Page 39
Rsultat
Tunisie
Tunisie
Tunisie
Tunisie
X2
H2O
HTML
Web
HTML
Web
Tunisie
Tunisie
Tunisie
Fascicule TIC
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 é
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
page.
d. Saisir le code HTML donn ci-dessous, enregistrer et tester.
<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>
</BODY></HTML>
Page 40
Fascicule TIC
Figure III- 4 : La dfinition des titres avec le langage HTML
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
b. Crer un sous dossier dans votre dossier de travail, avec le nom images.
c. 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>
<IMG src="i1.jpg" width="200" height="150">
<IMG border="2" src="i2.jpg" width="200" height="150" align="right" alt="image insre">
</BODY></HTML>
Page 41
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).
Activit 6
page.
d. Saisir le code HTML donn ci-dessous, enregistrer et tester de nouveau
Page 42
Fascicule TIC
<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">
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.
Activit 7
b. Ouvrir ce fichier.
page.
d. Saisir le code HTML donn ci-dessous, enregistrer et tester de nouveau.
Page 43
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 44
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)
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 8
page.
<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>
Page 45
Fascicule TIC

</TR>
<TR>
<TD width="34%" align="left" bgcolor="#FFFF00"><b>Bases de donnes</b></TD>
</TR>
<TR>
<TD width="34%" align="left" bgcolor="#FFFF00"><b>T. I. C</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>
Page 46
Fascicule TIC
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)
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 47
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.
Activit 9
page.
<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 48
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
compress</A></TD></TR>
</TABLE>
</BODY>
</HTML>
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
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 10
page.
d. Saisir le code HTML donn ci-dessous, enregistrer et tester la page.
Page 49
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.
Page 50
Fascicule TIC
Activit 11
a. 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>
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.
Page 51
Fascicule TIC
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).
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
Description
name
size
maxlength
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.
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.
Page 52
Fascicule TIC
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.
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 :
Page 53
Fascicule TIC
<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.
Activit 12
a. 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 :
Page 54
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>
Figure III- 9 : Utilisation des cadres en HTML

Page 55
Fascicule TIC
Fascicule TIC
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>
Un jeu de cadre peut comporter plusieurs cadres (2 ou plus)
Page 56
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 57
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 58
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 59

Fascicule 3SI-TIC - Version Finale

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Fascicule 3SI-TIC - Version Finale

Transféré par

Droits d'auteur :

Formats disponibles

SOMMAIRE

Chapitre 1 : Les outils de collaboration

Chapitre 1 : Les outils de collaboration

Chapitre 1 : Les outils de collaboration

Applications dans un rseau local

Chapitre 1 : Les outils de collaboration

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

Figure I.2 : Exemple d'enregistrement un forum

Figure I.3 : Exemple de rgles respecter

Le service associ aux forums est le USENET, le protocole utilis au dessus de

Chapitre 1 : Les outils de collaboration

Figure I.4 : Exemple de sites permettant la cration gratuite d'un forum

Figure I.5 : Exemple de forums

Chapitre 1 : Les outils de collaboration

1. Qu'est ce que la visioconfrence ?

Dans la littrature, on trouve parfois le terme vidoconfrence au lieu du terme

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

Figure I.7 : Exemple d'appareil de visioconfrence

UN CODEC est un dispositif assurant :

Figure I.8 : Exemples de meubles de visioconfrence

Chapitre 1 : Les outils de collaboration

Figure I.9 : Exemples de salle de visioconfrence

Figure I.10 : Exemple de visioconfrence utilisant Internet et une Webcam

Windows /MacOs Gratuite

Chapitre 1 : Les outils de collaboration

Chapitre 1 : Les outils de collaboration

Chapitre 2 : Les animations

Chapitre 2 : Les animations

Chapitre 2 : Les animations

Prsentation de linterface de Flash

Chapitre 2 : Les animations

Figure II.1 : Prsentation de linterface du Macromedia Flash

La barre des menus

Pour masquer le scnario, il suffit de cliquer dessus.

Pour paramtrer la grille :

Chapitre 2 : Les animations

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

Afficher et modifier les dimensions et les coordonnes de llment

Chapitre 2 : Les animations

Il est possible de grouper plusieurs panneaux ensemble.

Le panneau Bibliothque commune comporte des objets prts lusage "Boutons,

Les lments dune animation flash

Figure II.3 : Les lments dune animation

Le nom de lanimation courante est "activit2"

Chapitre 2 : Les animations

1. Les proprits du document

a. Crer une nouvelle animation.

Figure II.4 : Les proprits dun document

Crer un nouveau document flash.

Chapitre 2 : Les animations

Figure II.5 : Le panneau Squence

Figure II.6 : La liste des squences

Dans la squence "Trois" cre dans l'activit 4, insrer deux calques,

Chapitre 2 : Les animations

Figure II.7 : Les calques du scnario Trois

Pour insrer un calque :

On peut dplacer un calque laide dun glissement par la souris.