L'essentiel de Dreamweaver CC 2017

Utiliser l'inspecteur de propriétés

Testez gratuitement nos 1271 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
L'inspecteur de propriétés agit de manière contextuelle et dynamique, c'est-à-dire qu'il s'adapte à l'objet sélectionné. Grâce à lui, vous accéderez aisément à l'ensemble des propriétés des éléments.
04:48

Transcription

Une des fenêtres qui ne s'installe pas par défaut dans l'interface, comme il le fut par le passé, dans les vieilles versions de Dreamweaver, c'est la palette d'inspecteur de propriétés. L'inspecteur de propriétés est devenu maintenant une fenêtre à part entière ici. Elle possède toujours le même raccourci clavier, mais elle n'est pas ouverte ni ancrée dès le départ sur l'interface. Donc vous pouvez venir comme ça, la réancrer et la positionner à l'intérieur de la partie basse, parce que c'est quand-même une palette qui est beaucoup plus horizontale que verticale, si vous le souhaitez. La palette fonctionne exactement pareil, avec son petit menu contextuel et surtout une partie double ici. Il est possible de pouvoir ouvrir ou fermer cette partie double. Donc je vous conseille, à moins que vous ayez un écran 13" sur portable en TGV, mais sinon de garder cette partie toujours ouverte, parce qu'il y a un grand nombre d'informations qui sont utiles ici dans la partie basse. La partie du titre de la page, que l'on peut donner à chaque page HTML, était par le passé dans la partie haute ici du document. Elle a été reléguée directement à la partie de l'inspecteur des propriétés parce que c'est beaucoup plus simple, beaucoup plus ergonomique et ça prend moins de place que dans la partie haute. Voilà, vous pouvez aussi également le rechercher depuis directement le menu des propriétés de la page ici, qui va vous permettre dans la partie Titre/codage également de pouvoir venir modifier non seulement le titre, mais toutes les autres parties concernant le document. L'inspecteur de propriétés est contextuel. C'est à dire que dès lors que vous avez sélectionné un élément, cet élément va refléter toutes les propriétés qui vous sont accessibles ici dans la partie basse. La partie va être distinguée en deux éléments, en fonction du noeud qui va être sélectionné. Si vous êtes sur un noeud de type noeud, c'est à dire la balise div ici vous allez avoir que des informations sur la balise div. Si je prends la balise h1 ici, je vais avoir des informations que sur la balise h1, bien que celle-ci contienne du texte. Par contre, dès lors où je vais être dans la partie textuelle, à ce moment-là je vais pouvoir distinguer la partie HTML dans la partie structurelle elle-même de la partie visuelle par rapport au CSS. Faites bien attention quand vous jonglez avec ces parties-là, de voir si vous affectez la bonne feuille de style dans le cas où il y ait plusieurs feuilles de style affectées à l'élément sélectionné. L'inspecteur de propriétés parle de lui-même, possède un certain nombre de survols qui vont vous donner des informations sur la nature de l'élément. Mais surtout, vous allez avoir des outils comme, par exemple si ici je sélectionne une image, je vais pouvoir d'une part avoir le rendu de cette image ici. Je vais pouvoir venir sélectionner ici l'image directement en cliquant sur le panneau dossier, qui va me permettre de pouvoir venir sélectionner l'image à afficher depuis une boite de dialogue classique. Mais je vais pouvoir également utiliser si par exemple ici j'ai toute une série d'images utiliser ce petit outil ici, qui est une cible, qui va me permettre de pointer directement vers l'image en question que je souhaiterais afficher. Voilà donc on va pouvoir comme ça changer, modifier l'image par directement ce qu'on appelle le pointeur ou le pick whip. Enfin, l'inspecteur de propriétés va pouvoir permettre d'apporter une panoplie d'outils en fonction de l'élément sélectionné. C'est à dire que ici j'ai une image qui est sélectionnée. Ça me donne des accès directs à l'image Photoshop, à des réglages, à des paramétrages, et en fonction de certains critères d'image, je vais pouvoir agir sur la luminosité, la netteté, le recadrage, ou le redimensionnement de certains types d'images. On peut également générer ce qu'on appelle des cartes image, c'est à dire de pouvoir venir dessiner directement avec des outils sur une image, pour pouvoir définir des zones d'interaction ou des zones d'activité. Et enfin, l'inspecteur de propriétés est suppléé par un tout petit outil ici qui va nous permettre, en fonction de l'élément sélectionné, de pouvoir accéder à des propriétés très précises et très rapides de l'élément. Ici, par exemple, quand je sélectionne une image, j'ai un petit menu ici qui va me permettre d'accéder à la source de l'élément. S'il y a un lien, le lien alternatif que je vais pouvoir avoir la largeur, la hauteur, et le fameux lien qui va pouvoir être réglé. Ici pareil, on a accès directement à des outils qui vont nous permettre de rapidement modifier les propriétés. La touche d'échappement me permet de sortit de cette boite de dialogue, et ici vous avez la possibilité d'ajouter des classes directement qui vont être présentes déjà dans les fichiers CSS. Donc on reviendra plus en détail sur cet élément-là et donc les classes peuvent être ajoutées depuis cette partie-là ou depuis cette partie-là ici, depuis l'inspecteur de propriétés. Donc les deux ne sont pas en conflit, les deux sont tout à fait complémentaires, et vont nous permettre d'accéder rapidement à la modification des attributs ou des paramètres des éléments qui sont en cours de sélection.

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 !