Passer au contenu
21 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