L’exigence des internautes en matière de design vous permet de rester à jour des tendances, de minimiser votre taux de rebond, et d’être à jour sur les bonnes pratiques du Web : flat design, site responsif, compatibilité d’affichage sur différents navigateurs.

Formation

Je veux plus d'informations
 
3 jours / 21 heures
1 500 euros HT

Objectifs

* Créer, modifier des feuilles de styles CSS (interne, externe) * Comprendre la syntaxe et la grammaire CSS (sélecteurs, propriétés, valeurs, unités) * Découvrir les possibilités graphiques des CSS * Connaître les contraintes des navigateurs

Public concerné

Graphistes, webdesigners ou toute personne travaillant sur des CMS (WordPress, Drupal)?

Programme

Quelques rappels

  • Standards du Web, accessibilité, compatibilités
  • Doctype, les normes HTML4, XHTML, HTML5, CSS1, CSS2, CSS3

Checklist pour concevoir des feuilles de style efficaces

  • Cahier des charges technique (standards, accessibilité, navigateurs)
  • La structure d’une page, la bonne sémantique, le DOM
  • Analyse technique de sites avec la barre Web Developer

Bien cibler les éléments de la page : les sélecteurs

  • Les sélecteurs d’éléments, de classes, d’identifiants, multiples, hiérarchiques, pseudo-éléments
  • Les sélecteurs CSS2.1, CSS3
  • Choisir une bonne nomenclature pour ses règles

Comprendre la cascade

  • Feuilles de style navigateurs, utilisateurs, internes, intégrées, externes
  • La cascade et l’héritage : priorités et organisation des sélecteurs, éviter la “classite” et la “divite”

Les propriétés CSS

  • Les différents types de balises : inline, block, remplacées
  • Les propriétés du modèle de boîte CSS : margin, padding, width, height, border
  • La gestion des images de fond (background-color, background-image, background-repeat, background-position)
  • Les techniques des sprites et des portes coulissantes
  • Le formatage du texte
  • Le formatage des différents états de liens
  • L’habillage des listes (menus verticaux, horizontaux)

Panorama des modèles de positionnement CSS

  • Les flottants
  • La gestion des clear
  • Les positionnements relatif, fixe, absolute

Optimisation et rendus

  • Maîtrise des rendus sur les différents navigateurs
  • Outils de débuggage et de validation

Mise en œuvre et études de cas

  • Conception de gabarits de base (multicolonne, centré, fluide / fixe / élastique)
  • Conception de menus de navigation avec les listes (verticaux, horizontaux, à onglets)
  • Réalisation d’une galerie photos
  • Réalisation d’un template HTML / CSS complet

Dans le même domaine