L'essentiel de Dreamweaver CC 2017

Inspecter le document

Testez gratuitement nos 1250 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Grâce à la fonction d'inspection intégrée au mode d'aperçu direct, vous positionnerez les éléments entre eux avec une plus grande précision. De plus, vous comprendrez mieux certains comportements de positionnement.
02:55

Transcription

A l'instar des navigateurs, il est possible de pouvoir utiliser une fenêtre d'inspection qui va nous aider à inspecter le document en temps réel. Donc ici il suffit de, soit de faire un clic droit dans l'interface de la prévisualisation et de choisir inspecter soit de réaliser le raccourci clavier qui lui est affecté en fonction de vos plateformes. Et puis, vous pouvez également sélectionner un des éléments et passer en mode d'inspection également. Dès que vous allez inspecter le document, Vous allez avoir un petit cadre bleu qui va vous englober l'intégralité du document et après il suffit de survoler élément par élément ce que vous souhaitez. Donc ici si je survole le lien, la balise A on me dit ses dimensions. On m'informe de 58 pixels par 17 pixels. Voilà. Et si je continue à naviguer dans ce sens-là, j'ai toujours rien cliquer pour l'instant, c'est que du survole. Là on me montre que je suis sur l'élément ul. On me donne ses dimensions en pixels et puis par des petits rectangles colorés ici je peux voir le padding, donc aucun padding dans la partie haute ni basse mais par contre, j'ai 20 pixels sur la droite et sur la gauche. Et en couleur orangée j'ai la partie des marges qui est de 40 pixels tout le tour. Comme ça, on va pouvoir inspecter tous les éléments afin de pouvoir les visualiser. Si je reprends la partie ul ici voilà et je clique. Quand ma souris s'en va, j'ai cliqué donc je reste en prévisualisation de cet élément et si maintenant je me rends dans la partie code dans la partie CSS designer de n'importe quelle autre palette d'interface qui va intéragir avec le document exceptée cette partie-là puisque je suis cliqué, je suis en pause quelque part sur mon mode d'inspection. Je vais pouvoir venir par exemple ici me dire non je ne veux pas zéro je veux, par exemple, 50 pixels et dès l'instant où je vais placer 50 pixels vous voyez que interactivement, l'écran se réajuste automatiquement pour refléter ma modification. Donc si je repasse en zéro ici, il suffit que je sorte de l'élément pour que ce soit pris en compte et que ça se réadapte automatiquement au niveau de l'aperçu en temps réel de l'interface. Donc vous avez cette possibilité-là et si vous regardez vous avez des petits éléments qui vous retracent dans des règles qui sont apparues en fonction du mode d'inspection et qui vont vous permettre de caler au pixel près et d'avoir des indications sur ces largeurs, ces positionnements, eccetera. Par ailleurs, mais on reviendra, une étape dédiée sur l'utilisation des CSS c'est que dès lors où je commence à modifier les paramètres, vous avez, puisque là j'ai une écriture courte qui me dit padding tout court, donc je gère à la fois la hauteur, la largeur, droite et gauche. Vous avez les valeurs affectées à cette écriture courte comme si je l'avais écris en écriture longue de façon à pouvoir bien intervenir le cas échéant, sur l'affinage dont il serait nécessaire.

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 !