Revenir à la liste

ORSYS — CSS, donner du style à vos pages Web

Publié le 14/11/2016 — Produit n° 001148

: MEDIAS NUMERIQUESCONCEPTION REALISATION MEDIAS NUME RIQUESMEDIAS NUMERIQUES CREATION GESTION FEUILLES DE STYLE: CSS

Le langage CSS est devenu le langage de référence pour la mise en page des sites Web. Durant ce cours, vous apprendrez à élaborer des feuilles de style permettant de gérer l'apparence et la disposition des éléments de vos pages web. Vous découvrirez également comment utiliser CSS conjointement avec Javascript.

Informations générales

Profil professionnel des stagiaires

:
AUDIOVISUEL, CINÉMA, DIVERS, ÉDITION, SPORT, GOLF, HOTELLERIE DE PLEIN AIR, PRESSE, LOISIRS, AGENCE DE MANNEQUINS, ORGANISME DE TOURISME, PUBLICITÉ, SPECTACLE, TELECOM, CASINO

:

Connaissances de base en HTML.

Identification du stage

:

Contenu
• Rappels
• La base des CSS
• Les boîtes et blocs
• Les styles textuels
• Les images
• Les formulaires
• Modifications des CSS en JavaScript

Durée de la formation en centre : 14 heures
Durée de la formation : Durée du stage : 14 heures
stagiaires

Lieu de réalisation


Marine Briel — 01 49 07 88 19
mbriel@orsys.fr
www.orsys.fr

Informations pédagogiques

Programme pédagogique

» 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 vs 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 vs 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) vs 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...).

Informations complémentaires (méthodologie, ...)

Cette formation alternera théorique et mise en pratique.

Supports et ressources fournis aux stagiaires

Un support pédagogique sera remis à chaque participant avec les éléments théoriques et pratiques.

Niveau visé après la formation

AUTRE