article(s) dans votre panier VOIR

Identifier les spécificités HTML5 de chaque type de conteneur Photoshop CC dans Dreamweaver

  • Vidéo 50 sur 81
  • 6h09 de formation
  • 81 leçons

Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

Pour accéder à la suite de cette formation, vous devez vous abonner.
previous
summary
resume
next
play
Identifier les spécificités HTML5 de chaque type de conteneur Photoshop dans Dreamweaver
00:00 / 21:43
HD
fullscreen
Je m’abonne
à partir de 16,6 € / mois
  • Visionnage en ligne
  • Accès illimité à toutes nos formations
OU
J'achète uniquement
la formation
49,90€
  • Téléchargement + VOD à vie
  • Exercice / Validation des acquis
  • Accès uniquement à cette formation

Sommaire de la formation

Détails de la formation

Dans ce tuto Photoshop, le formateur va nous apprendre à gérer l'export des feuilles de style et des balises HTML pour Dreamweaver.

Il est possible dans Photoshop de copier les styles des calques en faisant clique droit, copier CSS. Le style prend la caractéristique de calques (position, couleur...). Ceci n'est par contre pas disponible pour les calques dynamiques. On peut aussi copier le CSS d'un groupe, qui va copier l'ensemble des styles des calques. Plutôt que de copier chaque style individuellement, nous allons créer un groupe principal que l'on va nommer body dans lequel vont se trouver tous les calques et tous les groupes. On peut alors sur body copier le style CSS ce qui va prendre tous les calques. On peut ouvrir Dreamweaver et créer une page que nous allons directement enregistrer en index.html. Dans le code, ont créé la page de style dans lequel on colle les styles CSS. On voit apparaitre le style pour le groupe, pour les formes dans le group et pour les formes individuelles. Les styles des calques dynamiques n'ont pas été pris en compte, car comme vu précédemment, on ne peut les copier. On pourra tout de même les récupérer plus tard. Nous allons maintenant dans le body pour créer des div. En cliquant sur div, on peut choisir le style, ici GROUPE et on valide. Même si le groupe ne démarre que dans la partie inférieure, le CSS prend toute l'image. Nous allons maintenant dans groupe, insérer les éléments qui se trouvent dans le groupe. On insère donc deux autres balises div. On remarque que le style bitmap n'intègre pas les graphiques, car il n'a pas de couleurs au contraire du vectoriel. Donc pour récupérer l'image bitmap, dans Photoshop, vous sélectionner le calque, vous faites une sélection de ce calque, vous le copier et à la place du texte dans la balise div, vous collez le bitmap et vous choisissez le format. Nous faisons maintenant la même manœuvre pour le bitmap hors du groupe.

Maintenant la balise div pour le calque vectoriel en dehors du groupe. Maintenant, nous voulons récupérer le contenu des blocs dynamiques pour cela, il va falloir éditer leur contenu. Nous commençons avec celui à droite et nous allons dans modifier le contenu et sur le calque on copie le style CSS. On retourne dans la feuille de style et on colle le style du calque dynamique. Le calque dynamique va se superposer en haut à gauche car il est compté comme à l'origine, il faut donc le déplacer manuellement avec left et top. Le calque dynamique contient aussi du bitmap, il va falloir effectuer la même manœuvre que pour les deux calques bitmap. Il fait la même chose pour le calque dynamique dans le groupe.