> Formations > Compétences métiers > PAO, CAO, vidéo et graphisme > Création Web > Formation Créer un site Web, de la maquette Photoshop à l'intégration HTML/CSS > Formations > Compétences métiers > Formation Créer un site Web, de la maquette Photoshop à l'intégration HTML/CSS
Vous avez déjà un compte client ORSYS
Se connecter
Vous êtes nouveau chez ORSYS
Créer un compte
Vous ne souhaitez pas créer de compte
Poursuivre sans me connecter

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

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




vous apprendrez à créer un site Web depuis la livraison d'un fichier Photoshop PSD jusqu'à la construction de sa structure et de ses pages modèles côté client. Vous concevrez le site en utilisant les standards HTML/CSS et l'agrémenterez de fonctionnalités issues de la bibliothèque JavaScript jQuery.


INTER
INTRA
SUR MESURE

Cours pratique en présentiel ou à distance
Disponible en anglais, à la demande

Réf. TOX
  3j - 21h00
Prix : 2030 € H.T.
Pauses-café et
déjeuners offerts

Télécharger le programme

Partager cette formation




vous apprendrez à créer un site Web depuis la livraison d'un fichier Photoshop PSD jusqu'à la construction de sa structure et de ses pages modèles côté client. Vous concevrez le site en utilisant les standards HTML/CSS et l'agrémenterez de fonctionnalités issues de la bibliothèque JavaScript jQuery.


Objectifs pédagogiques
À l’issue de la formation, le participant sera en mesure de :
Utiliser Photoshop pour la découpe et l'optimisation des images
Mettre en place une méthodologie d'intégration
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 œuvre de la bibliothèque JavaScript jQuery

Public concerné
Graphistes et intégrateurs.

Prérequis
Bonne pratique de l'Internet. Connaissances de base en HTML. Notions de design et connaissances de base de l'interface de Photoshop.
Vérifiez que vous avez les prérequis nécessaires pour profiter pleinement de cette formation en faisant  ce test.

Méthodes et moyens pédagogiques
Exercice
Réalisation de l'intégration d'un site simple.
Méthodes pédagogiques
Réalisation d'un site simple dans un éditeur d'après une maquette graphique. Appréhension des points théoriques fondamentaux à chaque étape du projet.

Modalités d'évaluation
Le formateur évalue la progression pédagogique du participant tout au long de la formation au moyen de QCM, mises en situation, travaux pratiques…
Le participant complète également un test de positionnement en amont et en aval pour valider les compétences acquises.

Programme de la formation

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
Edition du fichier PSD fourni. Exploration des calques. Réalisation du zoning. Détermination du nombre de modèles de pages.

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
Organisation de la découpe. Réalisation de la découpe dans Photoshop. Optimisation des images.

L'intégration 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é précédemment. Découverte du validateur WC3.

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
Construction de la feuille de style externe du site. Découverte ou rappel de la syntaxe CSS : les sélecteurs et les propriétés. Inspection du code CSS avec Firebug ou Chrome. CSS et le menu du site.

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
Aperçu de la page dans différents navigateurs. Correction du code. Mise en pratique des conventions d'écriture CSS. Découverte du validateur CSS. Construction d'une feuille de style pour IE.

Carousel jQuery

  • Installation de jQuery.
  • Installation de jquery.jcarousel.pack.
  • Intégration d'un slider au site.
Exercice
Installation de jQuery et jquery.jcaroussel.pack. Découverte de la syntaxe. Intégration d'un slider. Modification du CSS et du script JavaScript.
Solutions de financement
Plusieurs solutions existent pour financer votre formation et dépendent de votre situation professionnelle.
Découvrez-les sur notre page Comment financer sa formation ou contactez votre conseiller formation.

Horaires
les cours ont lieu de 9h à 12h30 et de 14h à 17h30.
Les participants sont accueillis à partir de 8h45. Les pauses et déjeuners sont offerts.
Pour les stages pratiques de 4 ou 5 jours, quelle que soit la modalité, les sessions se terminent à 16h le dernier jour.

Dates et lieux
Sélectionnez votre lieu ou optez pour la classe à distance puis choisissez votre date.
Classe à distance

Dernières places
Date garantie en présentiel ou à distance
Session garantie