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

Assurer la concordance des couleurs

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
La gestion de la couleur s'est améliorée grâce aux dernières recommandations de l'organisme W3C. L'outil de définition de couleur de Dreamweaver a également évolué et vous permet de travailler aussi bien dans le code qu'avec CSS Designer.
05:39

Transcription

Gérer la couleur devient quelque chose de très puissant aujourd'hui avec les css, puisqu'on a accès à plusieurs modes. On a accès au mode non seulement hexadécimal et RVB mais on a aussi accès au mode RGB, RGBA, HSL, HSLA, les couleurs du W3C, les couleurs des palettes, bref on a une pléthore de possibilité, de réglages de ces couleurs. Alors que l'on travaille dans le css designer ici au niveau de la couleur ou que l'on travaille directement au niveau du code, on aura toujours accès à ces puits de couleur ici qui vont nous offrir plusieurs paramètres. Alors prenons quelques instants pour regarder ensemble ces éléments. Ici on va pouvoir ajouter les couleurs directement dans ces couleurs préselectionnées on va dire, qui nous permettront d'avoir des accès rapides et surtout identitques à chaque fois sur des couleurs déterminées pour notre site. On a la possibilité également de pouvoir régler les couleurs au travers de ces paramètres. Ici de ces curseurs c'est-à-dire ici la teinte. Ici la luminosité et enfin la couche alpha de la couleur. Donc on travaille quelque part en hsla que l'on demande à travailler sur du RGB sur de l'héxadécimal, sur du hsl. On a toujours la possibilité de prendre la pipette et de venir avec ponctionner des éléments directement sur l'interface et ce, quelque soit l'écran. On peut très bien aller sur plusieurs parties par exemple sur un photoshop qui serait à l'extérieur. Alors vous prenez la pipette, seulement une fois que vous avez pris la pipette, ici vous allez pouvoir venir ponctionner la couleur et en cliquant sur la couleur sélectionnée, elle va venir se mémoriser ici si vous ajoutez le petit plus. Vous allez la mettre en mémoire directement dans cet élément-là. Une fois que la couleur ne vous convient plus, il vous suffit de la sélectionner ici, et puis de la glisser à l'extérieur du panneau pour pouvoir la retirer. Voilà, donc un outil qui va vous permettre de pouvoir définir avec précisions l'ensemble des couleurs. Une fois les couleurs définies, vous pouvez accéder directement depuis le code ici en survolant la couleur en se mettant sur ce contexte un petit aperçu de cette couleur qui va vous permettre, non seulement, de voir la transparence, vous voyez le petit damier autour de la couleur, mais en plus d'avoir un aperçu global de la teinte qui est utilisée. Si toutefois vous êtes dans la partie de la couleur et que vous voulez la modifier une fois que vous êtes positionné à l'intérieur, vous validez par Ctrl E, Commande E sous Macintosh et à ce moment-là vous allez invoquer l'éditeur rapide de code. Vous faites un clic droit et rapidement vous avez le même raccourci clavier qui apparait et vous pouvez à ce moment-là, obtenir encore l'édieur de couleur et modifier votre couleur directement. Une fois que vous l'avez modifié, vous pouvez valider et la nouvelle teinte va être mise en application directement. D'autres possibilités vont être sur l'écriture de code. Maintenant si vous validez le code, vous avez donc soit accès au sélecteur de couleur ici, vous pouvez accéder également à toutes les couleurs qui sont remises en place dans la bibliothèque cc ici. Si je vais dans la bibliothèque cc, vous voyez que sur la partie Dreamweaver, j'ai un certain nombre de couleurs qui ont été définies. Donc cette palette, cette bibliothèque creative cloud est partagée avec toutes les applications du creative cloud, y compris les applications de création comme illustrator, photoshop. Donc je vais pouvoir venir ici utiliser directement des couleurs qui seront propres à Dreamweaver. Si je valide Dreamweaver, je bascule à l'intérieur de toutes les couleurs accessibles sur Dreamweaver. Si je rebascule maintenant dans changer de bibliothèque, je vais prendre par exemple html 5. A ce moment-là, j'ai toutes les couleurs qui ont été mémorisées dans html5 et je vais pouvoir venir les récupérer directement pour pouvoir les appliquer. Vous avez encore une autre possibilité qu'on voit ici. Si je descends en dessous des parties de sélection de couleurs, j'ai toutes les couleurs qui sont définies, on va dire, par une constante et je vais pouvoir, si je commence à taper par exemple gray accéder directement à toutes les teitnes qui utilisent le mot gray comem ça et je vais pouvoir sélectionner avec un petit aperçu la couleur qui me correspond et que je souhaite appliquer. Il existe encore d'autres possibilités qui vont être de passer cette fois-ci par le puits de peinture. Donc dès l'instant où je vais utiliser une partie quelconque, si je viens dans le body par exemple ici, je vais accéder à la propriété directement de couleur et je vais pouvoir depuis ce puits de couleur venir redéfinir mais faites attention on se trouve dans l'onglet css ici donc assurez vous quand même de bien attraper la feuille de style et qu'elle corresponde à ce puits de couleur. Clair, si vous êtes ici sur cet élément A je suis inérite, si je modifie ici je vais modifier la couleur de la propriété A mais si elle est inerite, c'est que la couleur vient déjà de quelque part. Donc si je vais remonter dans l'arborescence, est-ce que la couleur vient du li ? Non, est-ce qu'elle vient du ul ? Il se peut que la couleur vienne directement du header ici et une fois que je vais être dans la partie header, c'est ici qu'on va pouvoir venir régler la couleur directement. Voilà, background color, color. Faites bien attention à ces imbrications quand vous utilisez l'inspecteur de propirétés. Maintenant, vous pouvez sélectionner à tout moment un élément et retrouver cet élément directement dans la feuile de style pour pouvoir venir soit en sélectionnant, la couleur, la propriété, utiliser le css designer, soit utiliser la partie de code pour modifier précisément la couleur ad hoc que vous souhaitez atteindre.

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 !