Intégrer les éléments dans Dreamweaver depuis Photoshop CC

Dans ce tuto Photoshop, le formateur va intégrer les styles des calques copiés dans une page HTML5.

Il crée un nouveau document HTML et l'enregistre en tant que index.html. Il fait son bloc de style et il colle le code. Il va maintenant placer les différentes balises dans l'aperçu. Dans la fenêtre insertion, il y a le menu structure qui donne en plus de la balise div, toutes les nouvelles balises de l'HTML5. Il va d'abord créer l'en-tête, il colle dessus le style IMG_header. L'en-tête étant lié à une image, il faut aller copier l'image à partir de Photoshop. Il sélectionne l'image et retourne dans Dreamweaver pour coller l'image. Il place le lien de l'image dans le CSS. Il va maintenant placer le menu dans le bloc header, il rajoute alors une balise nav. Il va maintenant créer la balise main.

Temporairement, il va utiliser le div car le main n'est pas disponible dans la fenêtre d'insertion. Il va coller à la balise le style pour la main. Il remplace la balise par main. A la suite du main, il place le pied de page avec le style footer. Comme pour le header, il faut aller sélectionner et copier l'image pour la coller dans Dreamweaver.