Programme
Module 1 : Photoshop pour le web (3Jrs – 21H)
Module 2 : WordPress (5Jrs – 35H)
Module 3 : HTML 5 CSS 3 – Initiation (3Jrs – 21H)
Module 1 : Photoshop pour le web
1-NOTIONS DE BASE
- La couleur
- L’image numérique
- Image bitmap et image vectorielle
- Les principaux formats d’image bitmap
- Définition et résolution d’image
2- L’INTERFACE DU LOGICIEL
- Les différents éléments constituant l’interface du logiciel
- La barre d’outils
- La barre d’options
- Le jeu des palettes flottantes
- Les espaces de travail prédéfinis
- Personnaliser son propre espace de travail
- Présentation du sélecteur
3 – RECADRER UNE IMAGE
- L’outil recadrage
- Correction de l’objectif d’une image
4- LES OUTILS DE SÉLECTION
- Les différents outils de sélection
- Le rectangle et l’ellipse de sélection
- Créer un contour progressif
- La baguette magique
- Les différents lassos
- Transformation manuelle
- L’enregistrement d’une sélection
- La combinaison d’outils de sélection
- L’outil de sélection rapide
5- LA RETOUCHE D’IMAGE
- L’outil tampon de duplication
- L’outil correcteur localisé
- L’outil pièce
- L’outil œil rouge
- L’outil correcteur localisé
- Correction d’une image avec analyse du contenu
6- PHOTOMONTAGE ET GESTION DE CALQUES
- Le principe des calques et du photomontage
- Les types de calque
- Gestion d’un photomontage
- Les masques de fusion
- Peindre un masque de fusion
- Créer un masque de fusion à partir d’une sélection
7- DETOURAGE
- Détourer avec les outils de sélection et les masques de fusion
- Dupliquer un calque d’un fichier à un autre
- Sélectionner et détourer avec un masque de fusion
- Transformation manuelle sur un calque comportant un masque de fusion
- Gestion d’un groupe de calques
8- LA GESTION DES COULEURS
- Les différents calques de réglages
- Le calque de réglage luminosité/contraste
- Le calque de réglage balance des couleurs
- Le calque de réglage teinte/saturation
- Modifier la couleur d’un élément
9- TEXTE
- Texte linéaire et bloc de texte
- Mise en forme du texte: les palettes caractère et paragraphe
10- FORMES VECTORIELLES
- Les outils vectoriels de Photoshop
- Créer un bouton web
- Les styles de calques
- Les masques d’écrêtage
11- PREPARATION DE FICHIERS POUR LE WEB
- Les principaux formats de fichiers pour le Web
- Les spécificités des différents formats
- Le redimensionnement et le recadrage des photos au format Web
- Optimisation des fichiers pour le web
12- CREER LE WEBDESIGN D’UN SITE WEB
- Méthodologie pour créer un webdesign
- Les cinq zones standards d’un site Web
- Présentation des wireframes et des grilles modulaires
- Personnalisation des préférences du logiciel pour le Web
- La mise en place d’une grille de composition
- Gestion des calques et des zones prédéfinies
- Gestion des groupes de calques et mise en couleur
- Exportation et optimisation des images : enregistrer pour le Web
Module 2 : WordPress
1. Les prérequis à l’utilisation de WordPress
- Internet, le web quésaco ?
- Comment fonctionne un site web ?
- Qu’est-ce que WordPress ?
- Quelles sont les étapes de création d’un site WordPress ?
- De quoi a-t-on besoin pour créer un site WordPress ?
- Quelques conseils avant de démarrer
2. Installer WordPress sur son ordinateur avec Local by Flywheel
- Pourquoi réaliser un site dans un environnement de travail local ?
- Comment installer et déployer WordPress avec Local by Flywheel ?
3. Comprendre l’administration de WordPress
- Quelle est la différence entre le back office et le front office de WordPress ?
- Comment se présente le back office ?
- Quels sont les fichiers qui composent un site WordPress ?
4. Effectuer les réglages de base d’un site WordPress
- Définir les règles d’utilisation du site web
- Personnaliser son profil d’administrateur
- Administrer les utilisateurs du site web
5. Créer un site simple à l’aide des fonctionnalités de base de WordPress
- Importer des contenus multimédia dans la bibliothèque
- Définir des catégories et des sous catégories d’articles
- Créer et publier des articles
- Créer et publier des pages
- Créer et organiser un menu de navigation
- Créer des liens hypertexte
- Les bases de la personnalisation graphique
- Enregistrer son site et le partager à l’aide de Local by Flywheel
6. Créer un site complexe en utilisant un thème et des plugins
- Créer un nouveau site WordPress à partir d’un blueprint Local by Flywheel
- Installer un thème WordPress
- Personnaliser la page d’accueil de son thème
- Personnaliser les autres pages du site
- Installer des extensions (lightbox, formulaire, pop-up, boutons de partage sur les réseaux sociaux)
- Présentation de l’outil de code CSS additionnel
- Tester son site WordPress
7. Publier un site WordPress sur le web
- S’inscrire à un service d’hébergement web (ex : OVH)
- Transférer un site web d’un serveur local à un serveur web avec All-In-One WP Migration
- Vérifier que la migration s’est bien déroulée
- Obtenir un certificat SSL
- Rendre le site visible auprès des moteurs de recherche
8. Ressources pour améliorer son site
- Les meilleurs plugins du moment
- Les sites indispensables
9. Installer et manipuler les fichiers de WordPress manuellement
- De quoi a-t-on besoin pour installer un site WordPress manuellement ?
- Installer WordPress manuellement sur son ordinateur
- Migrer son site vers un serveur web
10. Aller plus loin
- Conseils pour entretenir son site
- Conseils pour progresser
Module 3 : HTML 5 CSS 3 – Initiation
Initiation au HTML5 CSS3
- Une petite histoire du web (Les acronymes web)
- Les spécifications du HTML5
- Les éditeurs : Sublim-text ou Notepad++
- Installation de EMMET (Zencoding google)
- Les balises et leurs attributs
- Structure de base d’une page HTML5
- L’enregistrement des fichiers et création de la racine des pages
- URL relatif ou absolu
- Doctypes et normes W3C
- Balises de type in line et block
- Balises de structuration HTML 5
- Compatibilité entre les navigateurs (Librairie js : Modernizr)
- Nouvelles balises HTML5
- Exercices de rappel
Organiser les éléments texte
- Les titres
- Les paragraphes
- La mise en valeurs
- Les liens hypertext
- Affichages des sources image
- Créer des listes et son usage (UL, OL, LI et DL, DT, DD)
- Faire un tableau
- Les balises génériques : div, span et leur usage
- (balises TABLE, TR, TD, TBODY, THEAD, TH, attributs colspan et rowspan)
- Les formulaires en html 5 : nouveaux attributs pour les inputs
Les règles CSS2 et CSS3
- Notion de feuille de style en cascades
- Où écrit-on le CSS ? : link,style type et style scoped
- Les sélecteurs html
- Les différents types de sélecteur css : classe, id et pseudo-classe
- Attributs de sélecteur
- Préfixe pour les navigateurs.
- Importation de la police et les possibilités de compatibilité css3 (@font-face)
- Framework : font-squirrel pour l’optimisation d’affichage de la police importé
- Introduction aux différentes unités : px, pt, %, em et rem
- La notion de boite et présentation du modèle de boite
- Gestion des couleurs : notion exadécimal, rgb et rgba
- Utilisation du Framework : Flat-Ui et google material design, colorZilla
- Propriété supplémentaire css : les border, padding, margin et box-sizing
- Float, clear left, right et both
- Background, background-image, background-color et background-size
- Framework font-awesome pour l’application des icônes codés en css
- Exercices pratique de rappel
Le Responsive Design avec HTML5 CSS 3
- Le concept de responsive design
- Adaptation de la page à la largeur des appareils : portable, tablette et pc
- Les Media queris et les meta viewport
- Rappel des unités de mesure px,%, em, rem
- Exercices de mise en pratique
Mis à jour le 7 avril 2020