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