L'essentiel de Dreamweaver CC 2017

Gérer les styles depuis la palette

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Manipulez les déclarations et les règles en souplesse grâce à l'utilisation conjointe de diverses palettes de Dreamweaver, comme CSS Designer, le mode d'inspection et l'aperçu du code.
04:16

Transcription

En travaillant et en faisant évoluer le site, il arrive qu'on ai besoin de pouvoir cloner des feuilles de style, de les réorganiser eccetera. On va voir que le css designer nous aide bien à ce genre d'opération et de manipulation. Premièrement ici si je sélectionne une règle, je vais pouvoir déplacer cette règle ici pour réorganiser ma feuille de style encore faut-il que je ne sois pas dans toutes les sources mais dans une feuille de style ad hoc. Vous voyez qu'ici le petit trait vert va m'aider à repositionner le sélecteur au sein, directement, de la feuille de style. Donc pensez bien à venir sélectionner la feuille de style en question et vous allez pouvoir manipuler ces éléments. Avec un clic droit ici sur la partie droite, vous allez pouvoir directement atteindre le code et donc vous retrouver directement dans la feuille de style qui vous convient. Très intéressant regardez. Si je sélectionne la partie h1 ici je lui fais atteindre le code pour être bien dans cette partie-là vous voyez les 2 blocs ont été sélectionnés. Si je viens ici je vais pouvoir copier tous les styles. Donc je vais copier intégralement toutes les déclarations plutôt que tous les styles. Mais si je viens ici et que je fais copier tous les styles, là il me dit attention style de mise en forme, de texte ou d'arrière plan, qu'est-ce que tu veux ? Je vais pouvoir utiliser par exemple copier tous les styles de texte. Une fois que je les aurais copiés je vais pouvoir venir ici coller les styles que j'aurais récupéré et regarder dans la partie li ici ce que je vais venir coller ici ce n'est que la partie du texte indent puisque c'était la seule partie qui corespondait dans les styles de texte, ce que j'avais copié. Donc c'est assez sympa ce genre d'élément-là parce que ça permet de vraiment pouvoir travailler de manière très précise sur les clonages, sur les duplications qu'on va pouvoir utiliser. On va pouvoir aussi dupliquer une règle. regardez si je duplique cette règle il me dit attention comment veux-tu la renommer puisqu'elle se nomme pareillement donc je vais pouvoir utiliser tout le selecteur, redéfinir le sélecteur autrement par exemple je pourrai l'appeler header h2 parce que je voulais utiliser un maximum de propriétés de cet élément. Je vais le récupéer ici, je vais le repositionner à ce niveau-là, et maintenant je vais pouvoir atteindre le code ici et venir modifier ce que j'ai besoin dans ma partie ici donc c'est très rapide, très souple à utiliser très simple à mettre en place. Regardez aussi un élément qui est très intéressant ici, si je reviens dans cette partie-là, et que je récupère un élément, je clique vous voyez ici ce qui est sélectionné dans la partie visible c'est que les A, si je sélectionne là c'est les li. Regardez la petite distinction qu'il y a, vous voyez les petites marges, les petites bordures qu'on a, qu'on a pas dans l'oeil et qu'on a dans l'autre. Ici j'ai le ul. Ici j'ai que le h1. Ici j'ai tout le header. Donc c'est très souple parce que quand on est sur un élément de sélecteur ici, on pointe cet élément directement dans l'interface de rendu. Si je viens ici je vais pouvoir venir inspecter cet élément et si je suis en mode d'inspection, je vais pouvoir voir toutes les marges simplement en travaillant sur la partie des documents css sur lesquels je vais venir oeuvrer. Alors, si vous êtes en mode calculer, ici c'est-à-dire que ça va donner la restitution globale qui est fabriquée par le navigateur pour pouvoir afficher le style avec toutes les notions d'héritage et de cascades. Maintenant, vous pouvez sortir de cet élément-là, donc ici je serai dans le header et je vais pouvoir venir modifier chacun des éléments un par un pour mieux les capter en fonction de l'emplacement où je me situais. C'est lui qui va swaper, qui va permuter en disant ça c'est le header que tu as dans la feuille de style numéro 2 et ça c'est le header que tu as dans la feuille de style numéro 1. Voilà les valeurs que tu as et tu vas pouvoir venir agir sur ces valeurs-là directement en temps réel pour mieux les calculer. Donc ici si je suis sur du 100%, ça va pas trop différencier puisqu'on va être sur une pleine largeur, mais si je viens sur des histoires de marging ici, ici regardez j'ai ma marging et si je viens sur un padding maintenant j'ai un padding et vous voyez puisque je suis en mode d'inspection automatiquement toutes les valeurs vont être restituées. Travailler avec des styles qui sont déjà créés pour pouvoir les cloner, les dupliquer, les adapter, les modifier, reste pas un jeu d'enfant je vais dire mais reste une tâche vraiment assouplie grâce à la jonction de toutes ces parties de l'interface de Dreamweaver.

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 !