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 choisis ma session

PARIS

3 jours / 21 heures
1 100 euros HT

Objectifs

› Localiser les CSS dans le code d‘une page› Réaliser et modifier une maquette Web avec sa feuille de style› Habiller un ensemble de pages avec une feuille de style externe› Développer des mises en pages optimisées avec des trucs et astuces de pro

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

Écrire pour le web

Formation

Les internautes ont une manière bien à eux de découvrir des contenus sur le web : la navigation, les codes, la mise en forme sont différentes. Il est donc nécessaire d’adapter votre contenu éditorial aux spécificités du web afin d’en optimiser la lecture et le partage.