36 h
Web
Design Web avec CSS3
Préalables
Posséder une bonne connaissance de HTML.
Objectifs
À la fin de l’atelier, le participant pourra utiliser CSS3 pour structurer et designer un site Web.
Contenu du cours
Introduction:
- Raison de l’utilisation de CSS3
- Séparation de la forme du contenu
- Feuilles de styles multiples
- Compatibilité multiplateforme
- Raison d’éviter l’utilisation de la balise « table »
- Règles d’accessibilités
CSS3 en perspective:
- Structure d’une règle
- Types de règles
- Propriétés des règles
- Éléments qui peuvent être affectés par CSS3
- Définition d’un style CSS3
Fondements:
- Principe d’héritage
- Types de sélecteurs
- Universel
- Type element
- Class, ID
- Pseudo-element, pseudo-class
- Descendant, parent-enfant
- Adjacent, attribut, regroupement
- Unité de mesure
- Valeur absolue, relative
Design de site Web avec CSS3:
- Avantages de CSS3 pour designer un site
- Augmentation du contrôle sur le style du site
- Centralisation de l’information de contrôle pour le Design
- Amélioration du contenu sémantique
- Amélioration de l’accessibilité
- Exemple de site optimisant l’utilisation de CSS3
Modèle de boîte:
- Propriété display
- Différence entre les valeurs display et inline
- Propriétés :
- margin
- border
- padding
- Problèmes de compatibilité
Couleurs et CSS3:
- Contrôle des couleurs
- Sélection et combinaison
- Transparence, opacité, recouvrement
- Coloration alternative de cellules d’un tableau
Polices de caractères:
- Propriété : font-family
- Propriété : font-size
- Différences entre les navigateurs
- Grandeur absolue ou relative
- Autres propriétés sur les polices
- font-style
- font-variant
- font-weight
- Spécification d’une liste de polices
Positionnement:
- Propriété position
- Types de positionnement :
- Static, Absolute, Relative,
- Contexte de positionnement
Création du squelette:
- Deux colonnes
- Trois colonnes
- Structure statique
- Structure fluide
- Zones d’une page :
- Entête, menu, contenu, pied de page
- Propriété float
- Propriété clear
- Propriété z-index
- Contrôle des images
- Optimisation de la structure en cascade
- Analyse d’une feuille de style optimisé
Animation:
- Propriété transition
- Delay, duration, property, timing-function
- Propriété animation
- Keyframes, name, duration, delay, direction
- Animation des propriétés
- Width, height, opacity, rotation, scale, font-size
- Réalisation de plusieurs animations interactives utiles