Cursus métier : Web Designer
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.
Durée
- 48 Heures
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
Conception 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.
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).
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.