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.