1

1. Production électronique avancée
Objectifs :
Chapitre II
•Réaliser des animations
•Créer des sites Web statiques et dynamiques
•Échanger des données à distance à travers une page Web
Plan du chapitre :
Partie A : Animations
Partie B : Pages Web Statiques
Partie C : Pages Web dynamiques

2. Partie A Animations
Partie A : Animations
Objectifs :
- Créer des animations
- Insérer des objets dans une animation
- Exporter des animations
I.Introduction :
On trouve souvent dans les pages web des éléments animés qui ont subi un mouvement et/ou une
déformation.
Flash est un logiciel créateur d'animations.
Présentation du logiciel Macromedia Flash :
Thabet CHOKRI

3. La barre des menus La boite à outils
La barre d'outils principale La zone du travail
Les panneaux affichés Le calque actif
Le scénario La tête de lecture
Le document La barre d'édition
L'inspecteur des propriétés La ligne du temps
LEGENDE

4. Partie A Animations
II. Espaces de travail et outils :
1.La règle et les grilles :
Activité 1:
2.Les propriétés du document :
Activité 2 :
3.Les Formes et les groupes :
Activité 3 :
4.Les textes :
Activité 4 :
5.Les calques :
Activité 5 :
6.L’importation des médias :
Activité 6 :
7.Les symboles graphiques :
Activité 7 :
8.Les séquences
Activité 8 :
•Les images du scénario :
Activité 9 :
4. Ouvrir le fichier D:4SIballon.fla.
5. A partir du scénario, déduisez les différents types d'images utilisées.
6. Déterminer comment insérer ou supprimer les différents types d'images.
Thabet CHOKRI

5. Partie A Animations
III. Les types des animations :
1. L'animation image par image
2. L'animation interpolée
a. L'interpolation de forme
b. L'interpolation de mouvement
c. L'interpolation de mouvement avec guide
IV. Les boutons :
1. L’insertion d’un bouton :
2. L'action à un bouton :
IV. Le langage Actions Script :
V. La publication:
Thabet CHOKRI

6. Partie B Pages Web Statiques
I. Rappel :
1. Une page web : est un document multimédia.
2. Un site Web : est un ensemble de pages Web liées entre elles grâce à des liens hypertexte.
3. lien hypertexte : texte souligné, il peut être :
Thabet CHOKRI
I. lien externe : permet d’atteindre un fichier
II. lien Interne : permet d’atteindre un endroit spécifique dans une page Web.
Un lien hypermédia : peut être une image, clip vidéo, séquence permettant d’atteindre une page web
2. Signet : emplacement dans un fichier afin d’y faire référence.
Le Logiciel ……………………. permet de créer des pages web
2. Gestion des tableaux :
1. L'insertion d'un tableau.
1. Menu tableau
2. Insérer
3. Tableau
2. Propriétés : bordure, couleur de cellule, alignement, arrière plan
1. Tableau
2. Propriété de tableau, tableau ou cellule
3. L'insertion des liens hypertextes externes
3. Sélectionner la source du lien.
4. Menu "Insertion", "lien hypertexte" .
5. [choisir "Fichier" ou page Web existante(e)".]
6. Sélectionner la page cible.
7. Valider.

7. Partie B Pages Web Statiques
7. Liens internes :
• L'insertion d'un signet
 menu "Insertion", "Signet"
 Saisir le nom du signet.
 Valider.
• La création d'un lien vers un signet
 Sélectionner la source du lien.
 Menu "Insertion", "lien hypertexte"
 Choisir "Signet"
 Sélectionner le nom du signet.
 Valider.
8. Formulaire :
• un formulaire est un espace de saisie dans l'interface utilisateur, pouvant comporter plusieurs
zones : saisir du texte, cocher des cases, effectuer un choix dans une liste de termes prédéfinis,
appuyer sur des boutons, etc.
 Insérer un formulaire
 Insérer les autres options (cases à cocher, listes,…..)
Thabet CHOKRI

8. Partie B Pages Web Statiques
9. Page de cadres :
 Création d’une page de cadres :
• Menu Fichier, Nouveau.
• Autres modèles de pages.
• Onglet Cadres.
• Choisir le modèle.
• OK
 Pour afficher une page déjà créée :
• Cliquez sur Choisir la page initiale, puis sélectionnez la page à afficher.
 Pour créer une page dans un cadre
• Cliquez sur Nouvelle page.
 Propriétés des cadres :
Thabet CHOKRI

9. Partie B Pages Web Statiques
II. Le langage HTML (Hyper Text Markup Language) :
1. Introduction :
Activité : tp1
Le langage HTML est le langage utilisé pour la création de pages web.
Le langage HTML est composé d’un ensemble de balises (tags).
Le document HTML peut contenir un ensemble de balises tels que <HEAD>, <BODY>, <TITLE>, <HTML>...
Syntaxiquement, les balises rencontrées peuvent être reparties en quatre catégories:
♦ Des balises composées d'une partie ouvrante et d'une partie fermente, tel que <BODY>….</BODY>,
♦ Des balises composées d'une seule partie ouvrante tel que : <BR>
♦ Des balises composées d'une partie ouvrante et d'une partie fermante avec des propriétés, tel que :
<FONT SIZE="5"COLOR="blue">...</FONT>,
♦ Des balises composées d'une partie ouvrante avec des propriétés, tel que :
<IMG SRC="image1.jpg" WIDTH="80" HEIGHT="78" >
Thabet CHOKRI

10. Partie B Pages Web Statiques
2. Structure d’un document HTML :
Thabet CHOKRI

11. Partie B Pages Web Statiques
III. Les balises du langage HTML :
1. Les textes et les paragraphes :
Tableau : balise propriété rôle
Activité :
Le texte défini entre <BODY> et </BODY> sans balises, sera repris par le navigateur.
• La balise <BR> permet un retour à la ligne
• La balise <P> provoque un passage à la ligne (Nouveau paragraphe.)
2. Les titres :
Thabet CHOKRI
la propriété ALIGN définit …………….. "CENTER"
• La balise <FONT> change la police, la couleur et la taille du texte.
• Les styles d'écriture : la balise <B> (BOLD=Gras),
<I> (ITALIC)
<U> (UNDERLINE).
• La balise <CENTER> alignement centré.
• La balise <HR> insérer une ligne horizontale.
• la balise <HR>, la propriété width permet de définir la largeur de la ligne horizontale.
•la balise <Hn>…</Hn> titre de niveau n

12. Partie B Pages Web Statiques
3. Les images :
Activité :
•<IMG> l'insertion d'une image la propriété
• SRC="adresse" : définit l'adresse absolue ou relative de l'image à afficher.
• WIDTH="largeur" et HEIGHT="hauteur" : définissent la largeur et la hauteur de l'image en pixels.
• ALT="texte" : permet de définir le texte de l'info bulle de l'image
• BORDER="taille" : définit la largeur de la bordure autour de l'image.
• ALIGN="alignement" permet de définir l'alignement de l'image ("left", "center", "right").
4. L’ arrière plan :
Activité :
• <BODY BACKGROUND="Adresse"> : mettre une image comme arrière plan
5. Les listes
Activité :
•la balise <UL>…</UL> Les listes à puces,
•la balise <OL>…</OL> Les listes numérotées
•la balise <DL>…</DL> Les listes de définitions
•Les balises <LI>…</LI> permet la numérotation
Thabet CHOKRI

13. Partie B Pages Web Statiques
6. Les tableaux :
Activité :
•La définition d'un tableau : <TABLE>…</TABLE>
•❖ La définition d'une ligne : <TR>…</TR>
•❖ La définition d'une cellule <TD>…</TD>
7. Les liens hypertextes:
Activité :
• <A href= " adresse cible ">texte </A> des liens hypertextes
Thabet CHOKRI

14. Partie B Pages Web Statiques
8.Les formulaires HTML :
Les différents objets graphiques se trouvent entre <FORM> et </FORM>.
Cette balise possède les attributs suivants :
•ACTION : Spécifie l'adresse URL qui va recevoir les informations entrées dans le formulaire.
•NAME : Le nom attribué au formulaire.
•METHOD : Permet de spécifier la méthode d'envoi des données au serveur (POST ou GET).
a - La zone de saisie :
Pour les zones de saisies cryptées (type mot de passe), on utilise INPUT TYPE="password’’
b - La zone de saisie à plusieurs lignes
La définition d'une zone de texte à plusieurs lignes se fait à l'aide de la syntaxe suivante :
<TEXTAREA NAME="nom" ROWS="NL" COLS="NC">texte par défaut </TEXTAREA>
Où NL représente le nombre de lignes et NC représente le nombre de caractères par ligne.
c- Les cases d'options :
La définition du contrôle cases d'options (bouton radio) se fait à l'aide de la balise suivante :
<INPUT TYPE="RADIO" NAME="nom" VALUE="valeur1" >
•Les Propriétés :
• NAME : Indique le nom du contrô le. Tous les boutons, composant un même groupe,
Thabet CHOKRI
portent le même nom.
• VALUE : L'information à retourner si la case est cochée.

15. Partie B Pages Web Statiques
d - Les cases à cocher :
La définition du contrôle cases à cocher (checkbox) se fait à l'aide de la balise suivante :
<INPUT TYPE="CHECKBOX " NAME="nom" VALUE="valeur1" >
Les Propriétés :
• NAME : Indique le nom du contrôle. Tous les boutons, composant un même groupe,
Thabet CHOKRI
portent le même nom.
• VALUE : L'information à retourner si la case est cochée.
e- La liste de sélection :
<OPTION [SELECTED] >valeur 1 </OPTION>
SELECTED : Indique la valeur sélectionnée par défaut.
f- Le contrôle button :
Lors d'un clic, un bouton peut exécuter une action ou un programme (écrit à l'aide d'un langage autre
que le langage HTML, tel que le JavaScript, le PHP ….)…..
g - Le contrôle File
C'est un contrôle qui permet de transmettre un fichier, il s'applique avec la syntaxe suivante :
<INPUT NAME="FICHIER" TYPE="FILE" SIZE="nombre de caractères" >

16. Révision et récapitulation
image par image de forme
type
1. Pour créer une animation on doit savoir son ……… : …………..............……ou interpolation……...........….
Interpolation de mouvement
ou …………………………..……..
arrière plan calque
2. Décider s’il y a un …………………….. pour créer un nouveau …………….
d’images
a. Si l’animation est : image par image , déterminer le nombre ………………. et commencer par créer la
image image clé image
1ère …………… puis insérer une ………..…………pour créer la 2ème………….. et ainsi de suite…
Interpolation de forme forme finale
b. Si l’animation est ………………………….. déterminer la 1ère …………… et la forme ………………
• Créer dans l’image1 la 1ère …………. et insérer dans une autre position une ……………….. pour
la forme finale
une interpolation de forme
créer la ……………. ….
forme image clé
• Appliquer ………………………….
c. Si l’animation est ……………………………………..., Interpolation de mouvement créer un …………………………………
symbole graphique
• Dans l’image 1 …………………………………….
insérer le symbole
• dans une autre position insérer une ………………. image clé pour déplacer le ………… symbole à sa position ………..
finale
• Créer éventuellement un calque………… guide et dessiner la ……………….
trajectoire
• Appliquer …………………………………………..
Interpolation de mouvement
Enregistrer publication
3. ……………… l’animation sous le nom demandé et faire la ……………………….