Forfait 

Feuilles de style  

6 jours
2450 € HT
Feuilles de style (CSS) : niveau 1
+
Feuilles de style (CSS) : niveau 2

PUBLIC CONCERNÉ

Graphistes, webmestres, toute personne ayant déjà réalisé des sites avec un éditeur HTML.

PRÉ-REQUIS

Une bonne connaissance du code HTML ou XHTML est indispensable ainsi qu'une expérience de création de pages web.

Module 1 ( module seul : 3 jours - 1 300 €)

Feuilles de style (CSS)
niveau 1

Prochaines sessions
filet
27 septembre 2010
filet
03 novembre 2010
filet
22 novembre 2010
filet
17 janvier 2011
filet
14 février 2011
filet
18 avril 2011
filet
04 mai 2011
filet
11 juillet 2011
filet
29 août 2011
filet
05 octobre 2011
filet
02 novembre 2011
filet
Quelques rappels
• Standards du Web, accessibilité
• Doctype, les normes HTML4, XHTML, HTML5, CSS1, CSS2, CSS3

Méthodologie pour construire des CSS efficaces
• Structure des pages
• Conception graphique
• Cahier des charges techniques (standards, accessibilité, navigateurs, OS)
• Analyse des structures de sites avec la barre Webdevelopper

Maîtriser la notion de cascade
• Feuilles de style internes, externes, intégrées
• Héritage des styles en cascade, sélecteurs css, classes, id, pseudo-classes…
• Principes de nomenclature pour les styles

Grammaire avancée
• L’architecture du HTML et des CSS
• Structure et sémantique : balises sémantiques, balises inline et bloc
• Utilisation efficace de l’héritage (éviter la “classite” et la “divite”)
• Pseudo-éléments et propriétés avancées

Le positionnement (CSSP)
• Modèles de boîtes CSS
• Flux et positionnements (relatif, absolu, fixe, flottant)
• La gestion des clear

Optimisation et rendus : technique et méthodologie
• CSS et navigateurs
• Maîtrise des rendus sur les différents navigateurs
• Outils de validation

Mise en oeuvre et étude de cas
• Conception de gabarits de base (multicolonnes, centré, fluide / fixe)
• Conception de menus horizontaux, verticaux et à onglets avec les listes
• Conception d’une galerie photos
• Conception d’un formulaire

Exercices, trucs et astuces
• La technique des portes coulissantes
• Designer une zone à contenus variables
• Les sprites
• Les techniques de centrage

Module 2 ( module seul : 3 jours - 1 300 €)

Feuilles de style (CSS)
niveau 2

Prochaines sessions
filet
29 novembre 2010
filet
13 décembre 2010
filet
21 mars 2011
filet
30 mai 2011
filet
14 septembre 2011
filet
12 décembre 2011
filet
Organisation du travail et bonnes pratiques CSS
• Architecture des feuilles de style :
- arborescence des fichiers et répertoires
- nomenclature
- organisation des règles de style
• Présentation des frameworks CSS et des feuilles resets CSS : conseils et comparatifs
• Modes d’écriture et organisation des propriétés
• La cascade, les règles hiérarchiques, les conflits d’héritage (calcul des spécificités des sélecteurs)
• Utilisation des outils d’analyse

Outils de debuggage
• Quirks mode et Doctype
• Les modèles de boîtes CSS : rappel
• Le facteur IE : quelques bugs connus
- solutions : hacks et contournements
• Bien utiliser les flottants pour les maquettes
• La problématique du zoom des navigateurs
- unités em ou % ?
- astuces et utilisation du convertisseur pixels / em

Interopérabilité : les feuilles de style spécifiques et l’avenir du Web
• Les CSS dans un contexte CMS
• Les CSS pour les newsletters
• Les feuilles de style pour différents rendus
(résolution, impression, PDA...)
• L’avenir du Web : HTML5 et CSS3
• Les nouveautés HTML5 (header, nav, section, footer, caption...)
• Nouveaux sélecteurs et propriétés CSS3 : images de fonds multiples, taille des images de fond, coins arrondis, displays...)

Exercices pratiques
• Exemples de structure de maquette
• Analyse comparative de sites
• Analyse d’un prototype de développement
• Personnalisation : choix d’habillage en fonction de l’utilisateur
• Faire un “style switcher” en vue de l’accessibilité
• Ajustement d’un gabarit à différentes résolutions