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