CATALOGUE Design et Infographie Formation Photoshop Apprendre Photoshop CC pour le Web - Photoshop orienté Web et mobile

Guide Pratique pour Intégrer des Styles CSS de Photoshop à Dreamweaver

Retour à la formation
Chapitre 13 Leçon 3
Précédent
Suivant

Apprenez à utiliser Photoshop pour copier des styles CSS et les intégrer dans Dreamweaver pour améliorer vos projets HTML.

Détails de la leçon

Description de la leçon

Cette leçon vous guide à travers le processus d'utilisation de Photoshop pour copier des styles CSS et les appliquer dans votre projet HTML via Dreamweaver. Nous commençons par analyser les blocs existants dans le fichier HTML et identifions comment les styles sont définis dans l'en-tête de votre code.

Ensuite, nous passons à Photoshop pour copier les propriétés CSS de chaque bloc individuellement. Cela inclut des éléments cruciaux comme les bordures, les contours, et les dimensions des blocs. Une attention particulière est portée sur l'ajustement de la largeur et de la hauteur des blocs pour compenser l'épaisseur des contours. Nous illustrons également comment arrondir ces valeurs pour obtenir une mise en page plus cohérente.

Enfin, nous revenons dans Dreamweaver pour remplacer les styles précédents par les nouveaux directement dans le fichier CSS et validons les transformations dans la vue d'aperçu. Vous apprendrez aussi comment gérer les particularités des propriétés de CSS selon différents navigateurs.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de vous enseigner comment copier des styles CSS depuis Photoshop, ajuster ces styles dans Dreamweaver, et valider les ajustements graphiques dans divers navigateurs.

Prérequis pour cette leçon

Pour suivre cette vidéo, vous devez avoir des connaissances de base en HTML, CSS et savoir utiliser les logiciels Photoshop et Dreamweaver.

Métiers concernés

Les concepts abordés ici sont utiles pour les web designers, les développeurs front-end, et les intégrateurs web qui manipulent régulièrement des styles CSS et des mises en page HTML.

Alternatives et ressources

Comme alternatives, vous pouvez utiliser des éditeurs de code tels que Visual Studio Code ou Sublime Text, et des logiciels de graphisme comme GIMP pour la manipulation d'images.

Questions & Réponses

Il est important de soustraire l'épaisseur du contour pour que le bloc conserve ses dimensions initiales telles que prévues dans le design.
Les logiciels utilisés sont Photoshop pour copier les styles CSS et Dreamweaver pour les intégrer dans les fichiers HTML.
Vous pouvez valider les transformations en utilisant la vue d'aperçu de Dreamweaver et en testant les résultats dans différents navigateurs.