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

Exportation des CSS et balises HTML de Photoshop vers Dreamweaver

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

Apprenez comment exporter efficacement les styles CSS et balises HTML de Photoshop à Dreamweaver pour créer des pages web optimisées.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous allons explorer comment gérer l'export des feuilles de style et des balises HTML de Photoshop vers Dreamweaver. Vous découvrirez comment copier les styles CSS directement à partir des calques dans Photoshop, y compris la gestion des bitmaps et des formes vectorielles. Nous aborderons également les processus permettant de créer une page HTML dans Dreamweaver et d'y importer ces styles, en examinant les particularités des objets dynamiques et la manière de les intégrer correctement. Au travers d'exemples pratiques, vous apprendrez à surmonter les défis liés à la position et aux dimensions des blocs importés et à optimiser votre workflow pour une intégration fluide et efficace.

Objectifs de cette leçon

Les objectifs de cette vidéo sont :
- Comprendre comment récupérer et exporter les styles CSS depuis Photoshop.
- Maîtriser l'intégration de ces styles dans une page HTML via Dreamweaver.
- Apprendre à gérer les particularités des objets dynamiques et des calques groupés.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé d'avoir des connaissances de base en HTML, CSS et Dreamweaver, ainsi qu'une familiarité avec Photoshop.

Métiers concernés

Les professionnels concernés peuvent inclure les web designers, développeurs front-end, ainsi que les UI/UX designers utilisant Photoshop et Dreamweaver dans leurs projets quotidiens.

Alternatives et ressources

Des logiciels ou solutions alternatives incluent Adobe XD pour le design d'interface et exportation, ou Sketch et Figma pour des workflows similaires.

Questions & Réponses

Utiliser un groupe principal nommé 'Body' permet de copier l'ensemble des styles des éléments contenus en une seule opération, facilitant ainsi leur importation dans Dreamweaver.
Les objets dynamiques ne conservent pas bien leur position relative dans une page web, nécessitant souvent des ajustements manuels pour un positionnement correct.
Dreamweaver peut gérer les bitmaps importés en tant qu'images et les formes vectorielles en adaptant leurs styles CSS, y compris les contours et propriétés de formes enrichies.