Rappels
- L'architecture client/serveur. Les navigateurs.
- Les langages côté client XML, (X)HTML, CSS, JavaScript.
- Le Web sémantique. L'accessibilité. L'encoding.
La base des CSS
- Les avantages des feuilles de style.
- Les différentes versions de CSS (CSS1, CSS2, CSS3).
- La cascade CSS. Le stockage des feuilles CSS.
- Le support par les navigateurs.
- Les types de sélecteurs (id, class et balises).
- L'ordre de priorité. Les propriétés.
- Les unités de mesure (em, px, pt...).
- Les couleurs (RVB versus de base).
Travaux pratiques
Création et gestion de styles. Gestion des unités relatives. Adaptation aux types de médias.
Les boîtes et blocs
- Les balises de bloc versus en ligne.
- Le flux CSS. Les marges (margin, padding).
- Positionnement dans le flux (relatif, flottant), positionnement hors flux (absolu, fixe).
- Le z-index (altitude). La propriété box-sizing. Les contextes de formatage.
- Fonds et bordures (couleurs, transparence, coins arrondis, ombres portées).
- Le contenu (déroulement/scrolling).
- Cas particulier des tableaux.
Travaux pratiques
Création d'un squelette de page (positionnement par div).
Les styles textuels
- Modification des fontes (tailles, polices, couleurs...).
- Alignement du texte.
- Les pseudo-classes.
- Les effets visuels (clignotement...).
- Listes et menus horizontaux et verticaux.
Travaux pratiques
Formatage des menus horizontaux/verticaux. Effets visuels : transparence, ombres portées...
Les images
- De contenu (img) versus d'apparence (background).
- Redimensionnement. Rollover.
- Liens et images.
Travaux pratiques
Intégration d'images.
Les formulaires
- Design de champs de saisie, liste de sélection, zone de texte, case à cocher...
- Mise en forme des étiquettes (labels), des légendes, groupes de champs (fieldset)...
Travaux pratiques
Réalisation de formulaires.
Modifications des CSS en JavaScript
- Modification des styles en JavaScript (les interfaces style et className).
- Effets : apparition, cliqué-glissé, menu déroulant...
Travaux pratiques
Utilisation conjointe de CSS et de JavaScript (menu glissant, effets dans le formulaire...).