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

Objectifs

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

Participants

Graphistes, intégrateurs débutants ou toute personne désirant s'initier à l'intégration Web.

Pré-requis

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

Moyens pédagogiques

1 poste par participant - 1 Vidéo projecteur - Support de cours fourni à chaque participant – Formation présentielle

Durée

3 jours

Les sessions inter-entreprises

Date Session
Ce plan de cours est établi à titre indicatif. Son contenu peut être adapté à chaque formation Télécharger la fiche pdfDemander un devis

Code

CREWEB-PHOTOHTMLCSS

Description détaillée

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.
 
 
 
 
 

Les dernières places disponibles

Aucune annonce pour le moment
Une erreur est survenue
Une erreur est survenue, l'administrateur a été contacté
Revenir à la première page