Tel: 06 71 50 20 17 Email: info@cmbp.info

Formation

Accueil / Formation / Web / Serveur / programmation client

Formation C.S.S.

MAITRISER L'EMPLOI DES CSS POUR LA MISE EN PAGE WEB

Par 07-09-2016 programmation client

L'évolution générale du web (internet / intranet) va dans le sens d'un redécoupage des applications (données / présentation) dans le but d'en améliorer l'évolutivité et la
maintenabilité.
Si au début du web l'aspect graphique des pages web était géré par le Html, l'évolution vers le XHtml découple totalement les données et la mise en page, qui est maintenant gérée par CSS.
STOP A LA BIDOUILLE ET AUX A-PEU-PRES !
Ce cours CSS apprend à utiliser la puissance des Cascading Style Sheets pour une mise en page rationelle et professionnelle des documents HTML, dans le respect d'une charte graphique imposée, afin de les intégrer dans les architectures multi-couches actuelles (frameworks MVC etc.).
Après une étude des bases du CSS, les stagiaires étudieront la mise en forme des
formulaires, les navigations par listes et la mise en page avancée (multi-colonnes fixes ou liquides).

Les bonnes pratiques, les conventions de codage ainsi que les propriétés abrégées sont aussi abordées, avec un très fort accent mis sur la pratique (partir des captures écran fournies par le graphiste pour arriver à une intégration totale, indépendante de la structure des données)

Contenu de cette formation CSS
Durée de la formation "CSS"

4 jours.

Objectifs de la formation "CSS"
  • Comprendre les apports du CSS.
  • Eviter l'utilisation des balises et proporiétés déconseillées.
  • Apprendre la syntaxe CSS.
  • Apprendre à utiliser <div> et <span> de façon pertinente.
  • Apprendre toutes les principales propriétés et leurs valeurs.
  • Apprendre à créer des curseurs personnalisés CSS.
  • Apprendre à styler les liens ("boutons CSS").
  • Apprendre à travailler avec border, margin, et padding (box).
  • Apprendre à styler les tableaux avec CSS.
  • Apprendre à positionner les éléments avec CSS.
  • Apprendre les techniques avancées de mise en page CSS.
  • Apprendre à utiliser les notations abrégées.
  • Apprendre à utiliser les images de fond en CSS.
  • Apprendre à présenter les formulaires sans tableaux.
  • Apprendre à créer des menus de navigation hiérarchiques par CSS.
  • Apprendre à organiser son code CSS.
  • Apprendre à maîtriser les incompatibilités de navigateurs.
Participants à cette formation "CSS"

webmasters, intégrateurs html, graphistes web.

Pré-requis de cette formation "CSS"

Connaissance du web et du html (formation php webmaster).

Travaux pratiques de cette formation "CSS"

Les exercices et les démonstrations de ce cours sont basés sur la crétion complète des css d'un site, à partir des fichiers graphiques fournis (analyse, découpage, optimisation, intégration). Les problématiques liées au refactoring d'un site d'ancienne génération sont aussi étudiées.


Programme de cette formation "CSS"

Les bases du CSS / Html

  • Avantages des Cascading Style Sheets
  • Règles CSS
  • Selecteurs
  • Priorité des Sélecteurs
  • La Cascade
  • Feuille de Style embarquée
  • Feuille de Style externe
  • Styles en ligne
  • Types de Medias
  • Divs et Spans
  • Unités de Mesure
  • Héritage
  • @import
retour au sommaire "Formation CSS Pro"

CSS Font

  • Font
  • Font-family
  • Font-size
  • Font Family et Font Size
  • Font-style
  • Font-variant
  • Font-weight
  • Font Style, Font Variant et Font Weight
retour au sommaire "Formation CSS Pro"

css text

  • Letter-spacing
  • Word-spacing
  • Line-height
  • Text-align
  • Text-decoration
  • Text-indent
  • Text-transform
  • Vertical-align
  • White-space
  • Propriétés de Text
retour au sommaire "Formation CSS Pro"

Couleurs et Backgrounds

  • Les codes de couleur
  • Color
  • Background-color
  • Background-image
  • Colors et Backgrounds
retour au sommaire "Formation CSS Pro"

Curseurs

  • Styles de Curseurs
  • Curseurs personnalisés
  • Utiliser des Curseurs personnalisés
retour au sommaire "Formation CSS Pro"

CSS et Liens

  • Pseudo-classes
  • Liens "Bouton CSS"
  • Modifier les Liens
retour au sommaire "Formation CSS Pro"

Borders, Margins et Padding

  • Principe
  • Borders
  • Margin
  • Padding
  • Borders, Margin et Padding
retour au sommaire "Formation CSS Pro"

Styler les Tables en CSS

  • Syntaxe HTML Table
  • Styler une table
retour au sommaire "Formation CSS Pro"

Position et Visibilité

  • Flux d'éléments
  • Position
  • Positionner
  • Z-index
  • Display
  • Visibility
  • Float
  • Clear
retour au sommaire "Formation CSS Pro"

Mise en page CSS avancée

  • Redéfinir les Styles
  • Pleine largeur
    1. 2-colonnes
    2. 3-colonnes
  • Positionner les titres
  • Largeur Fixe
    1. 2-colonnes
    2. 3-colonnes
  • Recommendations sur le positionnement
  • Autres méthodes
  • Bien utiliser Float pour la mise en page.
retour au sommaire "Formation CSS Pro"

CSS : propriétés abrégées

  • pourquoi les P.A. ?
  • Liste des P.A. CSS
  • Margins et Padding
  • Border et Outline
  • Backgrounds
  • Fonts
  • Lists
  • Utiliser les P.A.
retour au sommaire "Formation CSS Pro"

Les listes CSS pour la Navigation (Menus)

  • Navigation Verticale
  • Listes imbriquées pour la Navigation
  • Navigation Horizontale
  • Drop-Down & Fly-Out
  • Créer un Menu de Navigation
retour au sommaire "Formation CSS Pro"

CSS Background

  • Boîtes à coins arrondis
  • Boîtes à coins arrondis de largeur fixe
  • Boîtes à coins arrondis de largeur relative
  • technique "Mountaintop"
  • Navigation tabulée
  • Ombres portées
  • Remplacer du texte par une image
  • Utiliser les Backgrounds
retour au sommaire "Formation CSS Pro"

Présentation des formulaires en CSS

  • Ergonomie
  • Création du formulaire
  • Reset
  • Styler le Formulaire
  • Agrandir le Formulaire
retour au sommaire "Formation CSS Pro"

CSS : les bonnes pratiques

retour au sommaire "Formation CSS Pro"

Compatibilité Navigateurs

  • Quirks Mode
  • Internet Explorer : instructions conditionnelles
  • Les soucis habituels & leurs solutions
  • Bug du modèle Box
retour au sommaire "Formation CSS Pro"

Application de Synthèse

  • Présentation du site BDPhilia, version 1 (frames / tables)
  • Refactoring DOM (MVC)
  • Définition d'une stratégie de découpage
  • Regroupements / Mutualisation
  • Découpage / Création des éléments graphiques
  • Implémentation V2
  • Validation
  • CSS Accessibilité / Print
  • Création d'une V3
retour au sommaire "Formation CSS Pro"

2 Commentaires

Me. Kobayashi

La nouvelle version du site CMBP est vraiment plus agréable à consulter, il faut que je pense à faire évoluer mon propore site en RWD !

Tomi B.

c'est super, mais où sont passés les tutoriel css ?

Laisser un commentaire