L'essentiel de Dreamweaver CC 2017

Tirer parti de la palette des bibliothèques

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
La palette de la bibliothèque Creative Cloud est tout aussi importante pour la gestion des médias. Voyez en quoi elle vous sera utile et comment elle vous permettra d'améliorer votre flux de production.
06:55

Transcription

Enfin une fonctionalité qui permet aussi de rassembler l'intégralité des applications Creative Cloud avec lesquelles on travaille, et la production sur Dreamweaver, c'est la bibliothèque du Creative Cloud, ici. Donc on peut avoir dans la bibliothèque, plusieurs bibliothèques qui peuvent se partager l'espace, ici. Donc là je vais travailler dans la bibliothèque qui partage l'espace Dreamweaver. Attention, rappelez-vous bien, ce n'est pas le logiciel Dreamweaver, c'est la formation sur Dreamweaver, donc ici c'est le nom de la bibliothèque de cette formation. Donc ici, on voit que dans photoshop, j'ai pu sauvegarder des images PSD, qui sont utilisées et qui peuvent être donc distribuées directement dans dreamweaver. Alors pour pouvoir la distribuer, le plus simple c'est de faire glisser/déposer directement, ou du code. Donc on va voir la première partie qui va être sur le glisser/déposer, là je vais donner un tantinet plus d'espace ici, et puis ici je vais ouvrir la palette du dôme pour avoir beaucoup plus de précisions. Je vais prendre la première, qui est Eric Galtes Eric Galtes c'est le premier élément, donc je dois le déposer sur l'image. Je pourrai très bien venir ici directement et avoir les mêmes indices de positionnement, vous voyez que ce qu'on a eu par les autres outils, mais ici, je peux aussi venir directement sur le dôme et bénéficier de la même précision. Et si je me positionne sur l'image SRC, quand je vais lacher, forcément on me dit : << Attention! C'est une image photoshop! Vous avez vu, vous avez l'icône, ici, en haut à droite qui me dit c'est du PSD. Donc comment souhaites-tu enregistrer cette image? Et donc ici, je vais pouvoir venir l'enregistrer de manière distincte, donc je peux l'enregistrer directement sur le dossier ../image qui va être le dossier par défaut de mes images, mais je peux venir également, venir les enregistrer, ici, sur la partie de mon disc dur qui m'importe. Alors ici, si je prends cette image ici, je la glisse là dessus, je lâche, et je vais dire, je vais l'enregistrer comme, ici, -1 pour du png. Alors est-ce que je veux du png 32? Non, png 24 me suffira largement. Je peux la garder liée, etc. Je peux redimensionner l'image à ce niveau là, et là je vais dire, ici je valide et je veux intégrer cette image. Et quand je vais dire OK, le media est extrait et repositionné ici. Alors même petit problème que ce qu'on a eu tout à l'heure c'est-à-dire que, puisque les dimensions sont placées ici, automatiquement, ça m'empêche l'aspect responsive d'agir. Deuxième possibilité d'agir, ici je suis dans la source, et quand je suis dans la source, je vais faire <, < vous voyez, pour pouvoir venir chercher quelque chose. Alors soit je parcours, comme on a fait sur le disc dur, tout à l'heure, soit je dis : < et là je vais venir chercher mes images. Alors c'est vrai que mes images n'ont pas de noms, donc c'est pas très parlant pour moi. Mais regardez si je prends simpement le survol de l'image, je me dis : << C'est celle-ci << Ah non, c'est pas celle-là, celle-là? Oui c'est celle-là. Et là dès que je valide, même topos que tout à l'heure, il me dit : << Attention, ça vient du Cloud, comment souhaites-tu l'appeler? Même utilisation que tout à l'heure, ce que je vais faire, c'est directement renommer mon image. Alors ici, je vais prendre mon -2, je veux du PNG 24 pour la même manière, et là je valide OK. Il me fait l'extraction du fichier, et m'importe mon image directement dans mon élément, comme souhaité. Là, si je clique sur l'image maintenant, celle-ci, ou celle-ci, il me dit : << Attention, c'est une image du Cloud, c'est une image qui n'est pas une image vraiment intégrée normale, elle vient de ta bibliothèque. Si je clique sur ce cloud, comme ça je vais pouvoir réexporter mon image. C'est-à-dire que je vais pouvoir lui donner un autre nom, par exemple, je pourrais dire qu'elle va s'appeller 3 cette fois-ci, et que je veux du JPEG, par exemple. Et là je vais pouvoir refaire, rééchantillon de moi à mon image, et cette fois-ci, il me dit : < << Oui, je le mets à jour. etc. Là, j'ai mon image numéro 3 maintenant, mais si je regarde dans le code C du jpeg, et si je regarde du côté de mes fichiers maintenant ici, on voit bien que j'ai mes 3 images ici. Alors l'image n°2 a été retirée puisqu'on allait plus l'utiliser, donc c'est vraiment propre, c'est vraiment nettoyé, cette fois-ci j'ai mon image qui est en JPEG. Et si d'aventure, j'avais besoin de remodifier cette image, je peux revenir. On peut aller encore un peu plus loin que ça, c'est-à-dire que regardez ici, il y a Rita Chock, et son nouvel album, ici, je vois une petite balise qui n'a rien à voir, Voilà. Ca a été écrit d'une couleur grise, si je viens dans les CSS, ici, je m'aperçois que c'est écrit un lightgray. Bon parfait, je peux avoir le bon lightgray. Mais ici, dans ma bibliothèque, alors je vais fermer le dôme ici, j'ai le vrai gris qui est ici. Et je peux cliquer ici, et demander de le copier dans le presse-papier, voilà, parfait. Et quand je vais revenir ici, je peux faire un Ctrl+V maintenant et avoir la bonne couleur qui sera la vraie couleur d'écriture, tout simplement parce que l'équipe qui travaille, l'équipe de designers a mis au point cet élément là en définissant les couleurs utiles pour notre site. Maintenant, je vais pouvoir les récupérer et les placer dans le site. Et on peut aller encore un tantinet plus loin, c'est que ici, j'ai la dernière image qui est l'image ouverte du concert, ici, la scène publique, donc tout est prêt pour ça, mais je n'ai pas mon image, je ne la trouve pas, j'ai pas reçu l'image. Je vais venir dans la bibliothèque, et lui demander de rechercher dans Adobe Stock toutes les images de concert. Et ici, ce sont des images, donc, non libres de droit, on va dire, qui peuvent être achetées, vous voyez ici, et je vais chercher l'image qui correspond à celle que je souhaite. Cette image me convient bien, je vais la récupérer. Elle se charge dans ma bibliothèque, et maintenant je vais pouvoir venir ici, depuis ma bibliothèque, pareillement, revenir dire , Je veux aller dans Dreamweaver, je vais récupérer la photo qui convient, je la valide, je la garde dans ce nom là, je garde toutes les informations nécessaires. Par contre j'aimerais la rééchantillonner à 590 pixels par 394, très bien. Alors c'était 595 qui m'allait très bien. Voilà. Je garde la taille de montessi. J'aurais pu ne pas garder le montessi et taper une autre valeur de hauteur, non, moi ce qui me convient, c'est la largeur, Je dis:<< OK et je récupère cette image. Sauf que cette image quand elle va arriver sur mon ordinateur, ici, ne va pas être une image libre de droit. D'accord? C'est une image qui est toujours une propriété d'AdobeStck. Donc, ça je le vois, c'est une image de prévisualisation, par contre à tout moment je peux venir sur cette image là, et ici, si je fais appliquer une licence à l'image, je vais forcément repartir sur mon compte CreativeCloud, pour pouvoir acheter l'image, la rendre donc libre de droit, et la réinjecter de manière automatique dans l'utilisation de mon site. Ca ne m'a pas bloquer, je n'ai pas eu besoin de sortir pour aller acheter cette image, j'ai pas eu besoin de faire quoi que ce soit là-dessus. Tout a été vraiment transparent au niveau de l'integration de mon image jusqu'au moment oùje vais l'acheter. Si des fois, d'aventure, cette image ne me convenait pas, libre à moi de pouvoir revenir sur cette image, de récupérer sur le Cloud, de changer d'image, etc. Donc vous voyez que l'utilisation de la bibliothèque, si vous utilisez d'autres logiciels du Creative Cloud, et si vous êtes en équipe partagée ou pas, peut vous apporter énormément de souplesse pour pouvoir maintenir et gérer le développement de vos sites.

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 !