Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel de Dreamweaver CC 2017

Travailler avec le panneau d'extraction

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Si vous disposez d'une maquette au format PSD, la palette d'extraction vous permet de récupérer directement les médias ou les CSS indispensables aux documents HTML.
04:24

Transcription

Si vous avez travaillé une maquette générale de l'aperçu de votre site au sein de Photoshop, ici vous pourriez avoir l'intégralité des médias, en qualité optimale, directement dans la maquette. On peut depuis Dreamweaver venir extirper les médias, les couleurs, tout ce dont on a besoin et qui fait partie de cette maquette. Pour cela, on va se rendre dans Dreamweaver, on a préparé un format de fichier qui va recevoir une image : Le trio des trois, et il va nous falloir importer cette image qui n'existe pas pour l'instant dans notre dossier, ni dans notre dossier image. La seule chose qui existe, c'est ce fichier .psd Pour cela, on va utiliser la palette d'extraction depuis le menu Fenêtre Extract. Cette palette d'extraction va nécessiter dans un premier temps le dépôt du format original du .psd sur notre compte créatif Cloud. C'est chose qui a été faite. C'est un format qui est un peu lourd, qui prend un certain temps quand même à s'exporter. L'intégralité des médias que vous avez importés projet par projet, va pouvoir se retrouver sur cette interface là. Dès l'instant où vous avez le document du fichier qui est sur l'interface, vous n'avez plus qu'à le sélectionner, le charger dans votre palette d'extraction et maintenant on va pouvoir venir visualiser et explorer élément par élément. Ce qui est intéressant ici, c'est que vous avez la partie des calques et la partie des styles. Si vous prenez tous les styles utilisés à l'intérieur de ce document photoshop, ils sont récupérés. qu'il s'agisse de typo par exemple ici avec les différentes tailles qui ont été récupérées, les couleurs, les dégradés, etc. Tout sera présent dans l'interface. Les calques également. Vous allez pouvoir voir les calques photoshop intégralement. Et vous allez pouvoir accéder à l'intérieur de ces calques, c'est-à-dire que si vous prenez le calque articles, vous double-cliquez dessus, vous avez l'intégralité des médias qui sont présents dans le calque. Si vous continuez à chaque fois à voir un dossier, vous pourrez comme ça creuser, continuer à voir les textes, à voir les images, à voir tous les éléments. Nous ce qui nous intéresse, c'est le média gros plan qui est ici. Vous pouvez récupérer sa largeur et sa hauteur sous forme de style CSS directement en cliquant là-dessus. Soit vous pouvez venir récupérer l'intégralité du bitmap en cliquant également là-dessus. L'intérêt ici maintenant, c'est que vous allez pouvoir définir le dossier de destination. Ce dossier de destination je le veux dans l'exercice 3 du chapitre 8 je sélectionne le dossier. Le format de fichier c'est .PNG. Par défaut il prend gros plan qui est le titre du calque. Je peux venir le renommer bien sûr : trio-des-trois. Est-ce que je veux le format PNG 8 ou PNG 32 ? Pourquoi ne me propose-t-il pas de PNG 24 ? Parce qu'il y a de l'alpha : cette image a une opacité. Soit je prends du 32 et je garde l'opacité, soit je prends du PNG 8 pour optimiser et je garde toujours cette opacité, soit je prends du JPG. Mais si je prends du JPG, forcément je vais aplatir cette transparence. Si ce n'est pas gênant, ok je peux la récupérer. Mais sachez que vous avez cette problématique qui va être liée. Soit vous voulez directement extraire l'actif par rapport à facteur, soit vous extrayez pour du rétina, du 2x ou du 3x soit vous dîtes je veux enregistrer plusieurs éléments et à ce moment là vous allez extraire en qualité normales, x2 et x3 vous allez extraire ces trois qualités pour pouvoir les gérer depuis un attribut src. Pour l'instant, je vais simplement enregistrer ici à ce format jpg avec une optimisation de 80 Ici vous n'avez pas d'aperçu qui va se matérialiser pour vous permettre de voir mais vous savez qu'en gros, une compression de 80 reste limite déjà sur du jpg. On va faire Enregistrer ici. Si vous surveillez votre téléchargement, si vous actualisez la page, vous devriez avoir, au bout d'un certain temps, l'élément qui apparaît ici dans le document. On peut terminer avec la palette d'extraction mais maintenant il me suffit d'utiliser cette image peu importe le moyen au niveau du src ici. Je vais prendre par exemple Ctrl+Espace, je vais valider directement, ou prendre par la partie html Parcourir... On va pouvoir venir chercher trio-des-trois.jpg et là l'image s'est intégrée. Bien sûr, il faut rajouter une feuille de style pour pouvoir gérer cette image maintenant et la réintégrer à 100%. Mais vous voyez déjà que l'on a pu intégrer, depuis la maquette de travail Photoshop, notre image directement au sein de notre document.

L'essentiel de Dreamweaver CC 2017

Prenez en main l’environnement de travail de Dreamweaver. Créez des documents, utilisez les CSS, gérez les liens hypertexte, les fichiers multimédia, les formulaires, etc.

7h28 (98 vidéos)
Aucun commentaire n´est disponible actuellement
 
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :30 janv. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !