PUBLIC CONCERNÉ
Ce stage s’adresse à des graphistes Web ou des webmestres ayant déjà réalisé des sites Web avec Dreamweaver ou un autre éditeur HTML.
PRÉ-REQUIS
Une bonne connaissance du code HTML est indispensable ainsi qu'une expérience de création de pages web.
PROGRAMME
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
