Stage pratique de 3 jour(s)

Rf : TOX

Participants

Crer un site Web, de la maquette Photoshop

l'intgration HTML/CSS

Graphistes, intgrateurs
dbutants ou toute personne
dsirant s'initier l'intgration
Web.

Ce stage vous apprendra crer un site Web depuis la livraison d'un fichier Photoshop PSD jusqu' la
construction de sa structure et de ses pages modles ct client. Vous concevrez le site en utilisant les
standards HTML/CSS et l'agrmenterez de fonctionnalits issues de la bibliothque JavaScript jQuery.

Pr-requis

OBJECTIFS PEDAGOGIQUES

Bonne pratique de l'internet.

Connaissances de base en
HTML. Notions de design et
connaissances de base de
l'interface de Photoshop.

Utiliser Photoshop pour la dcoupe et l'optimisation des images

Mettre en place une mthodologie d'intgration
Raliser une intgration HTML en respectant la smantique
Restituer le design d'un site avec les styles CSS en respectant les recommandations du W3C
Aborder la mise en oeuvre de la bibliothque JavaScript jQuery

Prix 2016 : 1920 HT

Ce cours fait l'objet d'un
accompagnement vido

Dates des sessions

Paris
11 avr. 2016, 27 juin 2016
26 sep. 2016, 14 nov. 2016

1) Organisation du projet
2) La dcoupe dans Photoshop
3) L'intgration XHTML

4) Le design avec CSS

5) Bonnes pratiques
6) Carousel jQuery

Mthodes pdagogiques
Ralisation d'un site simple dans un diteur d'aprs une maquette graphique. Apprhension des points
thoriques fondamentaux chaque tape du projet.
Exercice
Ralisation de l'intgration d'un site simple.

1) Organisation du projet
- Analyse du fichier Photoshop PSD. Le zoning.
- Choix des outils de dveloppement.
- L'environnement de dveloppement.
- Mthodologie. Prise en compte des contraintes.
Exercice
Edition du fichier PSD fourni. Exploration des calques. Ralisation du zoning. Dtermination du nombre de
modles de pages.

2) La dcoupe dans Photoshop

- Bien penser sa dcoupe.
- 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
Organisation de la dcoupe. Ralisation de la dcoupe dans Photoshop. Optimisation des images.

3) L'intgration XHTML
- Rappel de la syntaxe HTML. Choix du Doctype.
- Les principales balises HTML.
- Utiliser les bonnes balises. Valider son code.
Exercice
Construction de la structure HTML du site en fonction du zoning effectu prcdemment. Dcouverte du
validateur WC3.

4) Le design avec CSS

- Les navigateurs cibls. Localisation du CSS.
- Les principaux slecteurs CSS.
- Les principales proprits.
- Le flux CSS. La notion de botes. Les fusions de marges. La notion de conteneur.
- Priorit des slecteurs. Les balises block et inline.
- Le commentaire conditionnel.
Exercice
Construction de la feuille de style externe du site. Dcouverte ou rappel de la syntaxe CSS : les slecteurs et
les proprits. Inspection du code CSS avec Firebug ou Chrome. CSS et le menu du site.

ORSYS, La Grande Arche, Paroi Nord, 92044 Paris La Dfense cedex. Tl : +33 (0)1 49 07 73 73. Fax : +33(0)1 49 07 73 78

page 1

5) Bonnes pratiques
- Le respect des normes de dveloppement en CSS.
- Bien cibler les lments HTML.
- La syntaxe raccourcie.
- Le regroupement des slecteurs.
- Valider son code CSS. Commenter son code.
- Convention d'criture du code CSS.
Exercice
Aperu de la page dans diffrents navigateurs. Correction du code. Mise en pratique des conventions
d'criture CSS. Dcouverte du validateur CSS. Construction d'une feuille de style pour IE.

6) Carousel jQuery
- Installation de jQuery.
- Installation de jquery.jcarousel.pack.
- Intgration d'un slider au site.
Exercice
Installation de jQuery et jquery.jcaroussel.pack. Dcouverte de la syntaxe. Intgration d'un slider. Modification
du CSS et du script JavaScript.

ORSYS, La Grande Arche, Paroi Nord, 92044 Paris La Dfense cedex. Tl : +33 (0)1 49 07 73 73. Fax : +33(0)1 49 07 73 78

page 2