L'essentiel de Dreamweaver CC 2017

Tirer parti du Quick Tag Editor

Testez gratuitement nos 1299 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Pour envelopper plusieurs balises, ou bien redéfinir les balises et les attributs, il existe un petit outil bien pratique. Grâce au Quick Tag Editor, en mode de rendu comme en mode code, vous pourrez intervenir sur la structure du document.
03:19

Transcription

Une fois que notre document HTML est structuré de manière linéaire, on va voir besoin de venir le découper en bloc c'est-à-dire de pouvoir rentrer le header, le footer, les aside, le main eccetera. Pour cela, on va utiliser le quick tag editor. Quand vous êtes en mode code dans l'inspecteur de propriété vous n'avez aucune fonctionnalité qui apparaît ici mais dès que vous passez dans le mode de rendu ici vous avez un petit outil qui s'appelle le quick tag editor donc qui apparaît ici manifesté par ce petit icône. Si vous le cliquez vous voyez, vous pouvez modifier la balise ici et vous pouvez intervenir directement sur le regroupement des balises. Alors vous pouvez l'utiliser, certes, dans la partie visuelle ici, il suffit de électionner un élément et de venir cliquer sur cette partie-là ou d'utiliser le raccourci clavier Ctrl T qui va l'ouvrir galement directement à l'emplacement où vous vous situez. Maintenant des fois il est préférable de passer dans la partie code parce qu'on va pouvoir englober plusieurs balises et en utilisant le même raccourci clavier c'est-à-dire Ctrl T, on va ouvrir directement cet éditeur. Là je vais pouvoir placer la balise header et valider directement. donc je vais rajouter cette balise header autour de mon groupement de balises ici. Ici si je prends la partie la musique dans tous ses états jusqu'à la partie de la fin de ce paragraphe ici, pareil si je fais un Ctrl T, je vais pouivoir utiliser une balise div et je pourrai utiliser, rajouter l'attribut class slider par exemple et en validant ici je vais pouvoir rajouter directement tous ces éléments autour de l'imbrication de mon code. On va pouvoir continuer comme ça à rentrer tous les éléments jusqu'au footer. Donc soit vous passez par la partie visuelle, soit vous passez directement en mode code c'est beacoup plus rapide des fois. Vous pouvez également aller dans l'inspecteur des préférences. On reviendra sur ce réglage un peu plus tard dans une étape dédiée. Mais ici vous voyez je vais pouvoir passer sur du plus petit. Ici du plus petit et là, du plus petit également. Je l'applique, fermé. Ce qui me donne plus d'espace au niveau du code ici donc beaucoup plus de facilité d'englober rapidement un certain nombre de balises. Donc ici reservez vos places en ligne jusqu'à LinkedIn ici. Pareil, ça va être un Ctrl T. Voilà Ctrl T On va pouvoir placer également un div avec une class égal social pour définir les réseaux sociaux. Il suffit de valider. ensuite dans la partie info ici jusqu'à cette partie-là, on va pouvoir mettre une balise aside directement. Ce sont toutes les infos complémentaires. La partie ici globale jusqu'à la fin de ces éléments-là, on va dire que cette partie-là ça va être le main et la partie du bas complètement, le footer, voilà. On va pouvoir valider de cette manière-là et une fois que tout est terminé le code n'est pas forcément joli. Je vous invite à venir directement dans le menu édition ici, partie code, appliquer le format source et là le code va se reformater, se restructurer de façon à reprendre une certaine lisibilité, à reprendre une certaine structure on va dire.

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 !