Design Web avec CSS3

Formation offerte en collaboration avec Emploi-Québec

Cours HYB19407

Plateforme Macintosh / Windows

Durée 21 heures

Non offert présentement

M'aviser lorsqu'un groupe sera ouvert

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.

Approche pédagogique

  • Présentation des concepts et des outils CSS
  • Démonstration des concepts à l'ordinateur
  • Exercices à l'ordinateur supervisés par le formateur
  • Aide individuelle lors des exercices

Attestation délivrée en fin de cours

Une attestation de participation est remise aux personnes ayant assisté à plus de 80 % des heures de formation

Matériel pédagogique

Matériel didactique

Autres particularités

Afin d'atteindre un bon niveau de maîtrise, le participant devrait compléter le cours par la pratique personnelle

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

College de Maisonneuve | Formation continue