Voici la suite suite du tutoriel Photoshop en vidéo Créer la maquette graphique d’un blog avec Photoshop où nous allons apprendre à intégrer le template Photoshop d’un blog responsive.

Nous déclinerons les pages index.html et single.html afin de préparer au mieux nos fichiers HTML pour une intégration avec WordPress lors du prochain cours.

Mockup IPAD

Mockup iPhone

Mockup macbook

Programme du tuto intégration d’un blog responsive

  • Convertir une police de caractère non standard aux formats otf, woff, eot, svg…
  • Déclarer une police dans une feuille de style CSS avec @font-face
  • Adapter un menu minifié sur tous les d’écrans (ordinateurs, tablettes, mobiles)
  • Créer des transitions avec CSS3
  • Jouer avec l’opacité des d’images grâce au CSS
  • Animer des boutons au rollover (changement de couleur de fond, rotation des icônes…)
  • Utilisation de la class last-child
  • Utilisation des balises HTML5
  • Utilisation des rôles afin d’ajouter du contexte aux éléments de la sémantique
  • Gérer les media queries et diminuer le logo en fonction de la résolution d’écran
  • Afficher / Masquer des éléments en fonction du terminal (écrans / tablettes / mobiles…)

Cette formation intégration d’un blog responsive est destinée à un public intermédiaire. Il est nécessaire d’avoir quelques bases en HTML / CSS et avoir déjà utilisé Bootstrap.

Dreamweaver n’est pas obligatoire pour suivre ce tutoriel. Vous pourrez utiliser votre éditeur HTML préféré.