Objectifs
Être apte à concevoir des pages Web esthétiques et lisibles en respectant la cohérence graphique globale définie pour le site et les contraintes inhérentes au web.
Prérequis
Maîtriser à la perfection des outils de programmation et graphiques.
Savoir Utiliser des logiciels informatiques (Photoshop, Illustrator, Flash, XML, HTML).
Contenu du programme
Cursus Métier et Ergonomie
L'ergonomie d'un site Web :
- Les temps d'attente
- Le système de navigation
- La navigation en 3 clics
- La navigation libre
- La navigation dirigée
La lisibilité :
- Hiérarchiser l'information
- La typographie pour le web
- L'intégration des visuels
- Les animations et les liens
L'apparence d'un site Web :
- La charte graphique
- Le choix des couleurs
- L'analyse visuelle des pages
- La dimension des pages
- La grille modulaire du site
La page d'accueil :
- Le rôle de la page d'accueil
- Son organisation
- Son ergonomie
Analyses de design :
- Les secteurs d'activité
- Les designs par secteurs
- Vérifier ses liens
- Normes WC3
Exportation des tranches
Apprendre XHTML et CSS
Premier Contact avec HTML et CSS :
- Qu’est-ce qu’une page Web ?
- A quoi servent les feuilles de style ?
- HTML : Du contenu et des balises
- Les Principales balises HTML pour le texte
- Les Commentaires en HTML
- Styles CSS : attribut style et élément style, sélecteur d’éléments
- Styles CSS : Utiliser des classes et identifiants
- Des images pour les pages web
Introduction à la mise en page en CSS :
- Eléments de type bloc et éléments de type en ligne
- Le modèle de boite CSS :
- Hauteur et largeur
- Les Marges
- Bordures et Padding
- Le positionnement absolu
- Le positionnement flottant
Standards et validité :
- Validité du code XHTML
- Les standards XHTML et CSS : spécifications et références
Mise en page d’un design simple :
- Présentation de l’exercice : Réalisation d’un site Web complet
- Mise en place du projet
- Mise en forme de l’entête du site
- Analyse de design et création de blocs conteneurs (Eléments DIV)
- Positionnement des principaux blocs
- Un point sur les couleurs pour le Web (Couleurs en CSS, outils pratiques)
- Décorer un bloc avec des images de fond (Propriété background)
Des Menus de navigations en HTML et CSS :
- Qu’est-ce qu’un menu de navigation ?
- Analyse du design du menu principal d’un site web
- Styles CSS du menu principal
L’encodage des caractères :
- Qu’est ce qu’un encodage de caractères ?
- Quel encodage choisir ?
- Comment bien déclarer l’encodage d’une page ?
- Les entités HTML
Mise en forme du contenu :
- Mise en forme des contenus de l’accueil : Boites pour le texte
- Mise en forme des contenus de l’accueil : Styles du texte
- Récapitulatifs des propriétés CSS pour le texte
Tableaux et formulaires en HTML et CSS :
- Construire et mettre en forme un tableau
- Créer un formulaire simple en HTML
- Mise en forme du formulaire
Photoshop pour le Web
Interface de Photoshop :
- Explorateur de fichiers
- Options et formes d’outils
- Utilisation des calques
- Création et utilisation des calques
- Masques de fusion, masques vectoriels
- Transformation par souris
- Export
- Optimisation pour le Web
- Tranches
Gifs animés :
- Sélection et détourage
- Méthodes de détourage, détourage par tracés
- Réglages des images RVB et couleurs
- Réglages automatiques
- Réglages par niveaux
- Utilisation des calques
- Création et gestion des calques
- Transparences
- Effets de calques
- Optimisation Web : enjeux généraux et contraintes
- Rappel des notions générales de taille, de définition, de colorimétrie et de format d’image
- Techniques et contraintes de mise en page Web : tableaux, balise, CSS
- Production
Création de tranche :
- Modification des tranches
- Insertion de liens (URL)
- Préparation pour l’exportation
- Automatisation
- Création et utilisation de scripts
Traitement par lot :
- Création de galerie (mini-sites) Web
- Exportation
- Optimisation des images pour le Web (taille, définition, GIF, JPEG, PNG)
- Paramètres d’exportation (HTML, XHTML, CSS)