Plan de cours

Généralités

• Historique
• Ce qu’il faut savoir sur les sites web
• Mise en page
• Surface utile d’une pageRègles d’encombremement et de lisibilité
• Composition d’une page
• Frames/Calques
• Liens entre les pages
• Plan du site
• Charte graphique
• Convention de nommage
• Arborescence

Charte graphique

• Description d’une charte graphique
• Analyse de l’existant
• Les éléments constitutifs de la charte
• La maquette
• Le système de navigation

Optimisation des images

• Calibrage des couleurs
• Valeurs et contrastes
• Résolution des images
• Profondeur de bit
• Règles de numérisation
• Formats d’enregistrement
• Gestion des couleurs web

Principes rédactionnels pour le web

• Comment lit l’internaute
• Capacités de lecture et de mémorisation
• Les 4 modes de lecture
• La pyramide inversée
• Les 5w
• Les cas particuliers

Principe de référencement

• Pourquoi se faire référencer
• Comment se faire référencer
• Les moteurs et les annuaires
• Le pré-référencement
• Préparation du site
• Se faire connaître

Démonstrations

• Logiciels de création de site
  • Dreamweaver
• Logiciels de création d’images
  • Photoshop
• Les navigateurs
  • Internet Explorer – Firefox…
• Logiciels d’animation
  • Flash
• Logiciels de traitement du son
  • Audacity
• Logiciel de traitement de la vidéo
  • Gamme AVS4You
• Les « Gratuits » : polices, images, sons…
• Les technologies pour les sites statiques
• Les technologies pour les sites marchands

Plan de cours

Initiation

1/ Explication de l’environnement     

• La fenêtre du document
• La palette d’objets : Commun – Cadres – Caractères – En-tête – Formulaires –Invisibles
• Le lanceur
• L’inspecteur de propriétés
• Taille des fenêtres pour différents types d’écran
• La barre d’état
• La palette d’Historique
• Les menus contextuels
• Paramétrage des navigateurs
• Raccourcis claviers

2/ Le traitement de texte

• Récupération de texte
• Caractères spéciaux
• Styles
• Alignements
• Orthographe
• Rechercher/Remplacer
• Listes
• Indexations
• Saut de ligne
• Les propriétés de la page
• Les couleurs : pipette web-safe – gomme et palette
• Création de groupes de caractères
• Définir la palette de couleurs

3/ Placement d’image et de gif animé

• Insertion d’images et paramétrage
• Chemin absolu et chemin relatif
• Alignement avec le texte
• Zones cliquables
• Habillage et alignement
• Les bibliothèques

4/ Les différents types de liens

• Lien vers une page à partir d’un texte
• Lien vers une page à partir d’une image
• Lien vers une adresse e-mail
• Lien vers un site
• Lien vers une ancre dans le document
• Lien vers une ancre d’un autre document
• Menu de reroutage pour une liste de pages
• Personnaliser un lien dans la barre d'état

5/ Les tableaux

• Fenêtre des propriétés
• Différents modes de sélection
• Modification du tableau et des cellules
• Imbrication/Fractionnement des cellules
• Insertion de données tabulaires
• Mise en couleur
• Duplication de cellules
• Tri dans un tableau simple
• Mode de mise en forme

6/ Construction du site

• Carte du site : choisir la page d’accueil et paramétrer l’aspect du site
• Modifier l’aspect de la carte du site
• Renommer les pages
• Gestion des liens
• Afficher/Masquer des fichiers dans la carte du site
• Créer un fichier image de la carte du site
• Nettoyer le code HTML et le code HTML Word
• Création de rapport
• Publier le site

7/Configuration des pages

• Affichage des règles
• Affichage de la grille et paramétrage
• Les éléments invisibles
• L’historique des tâches – Automatisation des actions

8/ Autres insertions

• Lignes
• Bloc espace
• Rupture de ligne

9/ Le langage HTML       

• Les 3 affichages
• Explication des codes
• Rechercher rapidement dans le code
• Quick Tag Editor
• Valider le code en fonction des navigateurs
• Nettoyer le code source d’un document

10/ Les cadres

• Création et choix des propriétés
• Fractionnement d’un jeu de cadres
• Création de cadres imbriqués
• Mise en forme des cadres
• Définition des liens

11/ Les feuilles de style

• Styles HTML : modification et création
• Styles CSS : les 3 types : création – modification – application
• Récupération des styles dans le site en cours

12/ Eléments dynamiques HTML

• Date
• Animation Flash
• Composants
• Image survolée ou rollover
• Les barres de navigation

13/ Les modèles

• Création et application à un document
• Modification d’un modèle

14/ Les calques

• 2 types de calques (DIV/SPA et Layer/Ilayer)
• Propriétés des calques
• Alignements
• Ordre de superposition
• Masquer/Afficher un calque
• Les calques imbriqués
• Déplacement de calques
• Modification d’un calque en tableau et inversement
• Tracé d’image en vue de la construction de la page

15/ Création d’animation

• Créer des dynamic HTML
• Animer un calque en trajectoire droite et courbe
• Modifier une animation
• Utilisation de calques multiples
• Copier/Coller une animation d’une page à l’autre
• Associer un comportement à une animation

16/ Balises d’en-têtes

• Zones de recherche
• Mots clefs
• Eléments spéciaux
• Description de la page

17/ Les éléments multimédia

• Insertion d’animations Flash
• Traitement des vidéos

18/ Les comportements

• Changer les propriétés d’un objet
• Remplacer une image par une autre
• Vérifier les plug-ins
• Faire apparaître un message
• Ouvrir une fenêtre du navigateur
• Contrôler une animation Flash
• Comportements associés aux calques

19/ Les formulaires

• Création et ajout d’objets : zone de saisir – cases à cocher – boutons radio - menu déroulant – liste déroulée – champ caché

20/ Divers

• Conversion de fichiers vers Navigateurs version 3
• Préférences de Dreamweaver
• Mettre des fichiers en téléchargement
• Les outils invisibles : commentaires

Plan de cours

1/ Conception de site

• Pré-requis à la constitution d’un site
• Les différentes phases du projet
• La maquette et ses éléments constitutifs
• Qu’est-ce qu’une charte graphique
• Création de pages à partir d’un assistant

2/ L’environnement de FrontPage

• Les menus déroulants
• Les icônes
• Les modes de travail
• Les onglets
• Les propriétés de la page
• Les assistants de FrontPage

3/ Le traitement de texte

• Récupération de texte
• Utilisation de mise en forme standard
• Rechercher/Remplacer
• Caractères spéciaux
• Styles prédéfinis, modification
• Alignements
• Orthographe
• Listes
• Indexations
• Saut de ligne
• Les couleurs : couleurs web et couleurs personnalisées

4/ Insertion d’image et de gif animé

• Insertion d’images
• Chemin absolu et chemin relatif
• Les propriétés d’une image : redimensionnement, transparence, recadrage…
• Alignement d’image avec le texte
• Création de texte sur une image
• Zones cliquables
• Utilisation d’images dans des listes à puces

5/ Les différents types de liens

• Lien vers une page à partir d’un texte
• Lien vers une page à partir d’une image
• Lien vers une adresse e-mail
• Lien vers un site
• Lien vers une ancre dans le document
• Lien vers une ancre d’un autre document

6/ Les tableaux

• Les propriétés du tableau
• Les propriétés d’une cellule
• Modification du tableau
• Imbrication/Fractionnement des cellules
• Modification de la largeur des cellules
• Insertion de données tabulaires
• Mise en couleur des cellules de tableau
• Duplication de cellules
• Conversion d’un tableau en texte

7/ Environnement du site

• Mode Navigation ; construction de l’architecture des pages
• Modifier l’aspect de la carte du site
• Renommer les pages
• Afficher/Masquer des fichiers dans la carte du site

8/ Autres insertions

• Lignes
• Bloc espace
• Rupture de ligne…

9/ Le langage HTML       

• La fenêtre HTML
• Explication des codes de base
• Rechercher rapidement dans le code
• Nettoyer le code source d’un document

10/ Les cadres : système de navigation

• Création et choix des propriétés
• Fractionnement d’un jeu de cadres
• Création de cadres imbriqués
• Mise en forme des cadres
• Définition des liens dans les pages de cadre

11/ Eléments dynamiques HTML

• Placement d’éléments dynamiques :
• Date
• Compteur
• Animation Flash
• Bouton sensitif
• Texte défilant
• Images temporaires
• Enchaînement d’images
• Image survolée ou rollover
• Création d’un sommaire

12/ Composants FrontPage

• Les barres de navigation
• Les bordures partagées
• Les thèmes

13/ Les feuilles de style

• Création de feuilles de style et application
• Modification des attributs des feuilles de style
• Classes de style
• Utilisation de la feuille de style dans les pages du site

14/ Les modèles

• Création
• Les zones modifiables et non modifiables
• Application d’un modèle à un document
• Modification d’un modèle et mise à jour des pages l’utilisant
  

15/ Balises d’en-têtes

• Les contraintes du référencement
• Zones de titre
• Zone de description
• Ajout de mots clefs
• Eléments spéciaux

16/ Les insertions Multimédia

• Sons
• Vidéos

17/ Les formulaires

• Création et ajout d’objets : cases – pastilles – champ de texte…
• Modification et vérification du formulaire

18/ Gestion du site

• Gestion des liens
• Nettoyer le code HTML et le code HTML Word
• Le serveur web Microsoft
• Publication du site

19/ Les rapports

• Les fichiers
• Le contenu partagé
• Les problèmes
• Le flux de travail
• Les statistiques

20/ Les comportements

• Atteindre une URL
• Placer un son
• Message contextuel
• Ouvrir une fenêtre
• Précharger des images
• Vérifier le navigateur

Plan de cours

Jour 1

Positionnement du logiciel Flash

• Interactions avec les produits de la gamme Adobe
• Lien avec le navigateur Bridge

Explication de l’environnement         

• Les différents panneaux
• Les barres d’outils
• Paramétrage de l’animation
• La palette de scénario
• La scène
• Configurer l’environnement de travail
• Historique des tâches
• Les raccourcis clavier

Les outils

• Outils de sélection
• Flèche – Sous-sélection - Lasso
• Outils de dessin -
• Trait – Ovale – Rectangle – Plume – Crayon
• Les primitives
• Outils de remplissage
• Pinceau* – Encrier – Pot de peinture
• Mettre une image bitmap en fond texturé
• Transformer une ligne pleine en ligne dégradée
• Outils annexes
• Pipette – Gomme
• Outil texte

Les outils complexes*

• Le pulvérisateur de symboles
• L’outil décoration
• L’outil Rotation 3D = 2,5 D
• L’outil segment

Effets sur les objets

• Les attributs fond/contour
• Les options des outils de dessin
• Combiner des formes simples*
• Les différents plans
• Le groupage
• Les alignements et les répartitions
  
• Les transformations
• Homothétie – Pivot – Miroir – Déformation* – Enveloppe*Création de dégradés de couleur*
• Placage de textures*
• Effets sur les objets : ombres portées et flous
• Mémorisation des effets
• Tracer des images bitmap*
• Créer des effets d’ombre*

Les calques

• Création - Déplacement
• Le verrouillage
• les calques de masquage

Jour 2

Travail sur le texte

• Les 3 types de texte
• Création et modification
• Menu Caractère
• Menu Paragraphe
• Les options de texte
• Vérification orthographique
• Création de liens vers le web

Enregistrement et exportation

• Le format .fla, .swf, .exe, .gif

Importation

• En provenance des logiciels vectoriels
• En provenance des logiciels bitmap
• En provenance de PDF

Les bibliothèques

• Bibliothèque du fichier et communes
• Les attributs des symboles
• Clips
• Boutons
• Graphiques

Création d’animation

• Utilisation de la scène et du scénario
• Animations image par image*
• 3D
• Animations par interpolation de mouvement*
• Mouvement de voiture - de chien - Ecriture en mouvement
• Animation par interpolation de couleur*
• Animation avec masque de calque*
• Globe – drapeau – focus sur une image
• Boutons réactifs*
• Movie-clips*
• Les animations par présélection de mouvement*
• Morphing : animations par interpolation de forme*
• Morphing sur une lettre* -

Publication des animations

• Paramétrages de publication
• Exportation de l’animation
• Création d’un projecteur

Jour 3

Diaporama

• Création et modification
• Intégration de boutons réactifs

Les séquences

• Création d’une séquence
• Contrôle de la navigation
• Retour d’une séquence vers l’autre

Contrôle d’une animation

• Les évènements souris
• L’action Stop
• L’action Go and Play
• Le movie-clip et la syntaxe des Actions Script
• Arrêter une animation
• Les actions de boutons

Les liens

• Lien vers une page web
• Lien vers un e-mail
• Lien URL sur du texte

Intégration de son

• Musique en continu
• Son selon un évènement

Intégration de vidéo

• Transformer une vidéo en FlashVideoEncodeur
• Créer une interface vidéo avec composants
• Transformer une animation Flash en vidéo
• Enregistrement et exploitation