...

Formation Créer un site Web, de la maquette Photoshop à l'intégration HTML/CSS


Objectifs
  • Apprendre à utiliser Photoshop pour la découpe et l'optimisation des images
  • Etre capable de mettre en place une méthodologie d'intégration
  • Pouvoir réaliser une intégration HTML en respectant la sémantique
  • Restituer le design d'un site avec les styles CSS en respectant les recommandations du W3C
  • Aborder la mise en oeuvre de la bibliothèque JavaScript jQuery
Participants
  • Graphiste
  • Intégrateur
Approche Pédagogique
  • Cas pratiques
  • Remise d’outils
  • Echanges d’expériences
  • Durée : 3 jours
  • Réf. : WEB68

Dates de Formations

08 au 10 Mai 2019

17 au 19 Juil. 2019

11 au 13 Sept. 2019

13 au 15 Nov. 2019

Programme
  • 1/ Organisation du projet
    • • Analyse du fichier Photoshop PSD. Le zoning
    • • Choix des outils de développement
    • • L'environnement de développement
    • • Méthodologie. Prise en compte des contraintes
    • • Exercice
  • 2/ La découpe dans Photoshop
    • • Bien penser sa découpe
    • • Les calques
    • • L'outil tranche
    • • L'optimisation d'images
    • • Le choix de format des images
    • • Fusion de tranches. Export de tranches
    • • Les dangers de l'export HTML dans Photoshop
    • • Exercice
  • 3/ L'intégration XHTML
    • • Rappel de la syntaxe HTML. Choix du Doctype
    • • Les principales balises HTML
    • • Utiliser les bonnes balises. Valider son code
    • • Exercice
  • 4/ Le design avec CSS
    • • Les navigateurs ciblés. Localisation du CSS
    • • Les principaux sélecteurs CSS
    • • Les principales propriétés
    • • Le flux CSS. La notion de boîtes. Les fusions de marges. La notion de conteneur
    • • Priorité des sélecteurs. Les balises block et inline
    • • Le commentaire conditionnel
    • • Exercice
  • 5/ Bonnes pratiques
    • • Le respect des normes de développement en CSS
    • • Bien cibler les éléments HTML
    • • La syntaxe raccourcie
    • • Le regroupement des sélecteurs
    • • Valider son code CSS. Commenter son code
    • • Convention d'écriture du code CSS
    • • Exercice
  • 6/ Carousel jQuery
    • • Installation de jQuery
    • • Installation de jquery.jcarousel.pack
    • • Intégration d'un slider au site
    • • Exercice