L'essentiel de Dreamweaver CC 2017

Découvrir Emmet

Testez gratuitement nos 1246 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Emmet fait partie intégrante de Dreamweaver. Lorsque vous aurez pris goût à ses abréviations, le gain de temps vous semblera évident, aussi bien en HTML qu'en CSS.
04:37

Transcription

Par défaut, Dreamweaver propose Emmet activé. Vous pouvez, si besoin était, le désactiver. C'est ici, dans les formats de code, vous pouvez venir décocher la case qui prend en compte Emmet. Mais bon, une fois qu'on a goûté à Emmet, c'est quelque chose d'assez sympa au niveau du code, en HTML comme en CSS. Pour donner un exemple, si vous ne connaissez pas Emmet, voyez, ici j'ai un élément div, ul, et quatre li à l'intérieur. Si je veux réécrire ça en HTML, ça me prend quelques secondes, quand-même. En Emmet, il suffit d'écrire div supérieur donc ici ul li fois 4 et on valide, et voilà, c'est réglé, c'est fait. Donc ça peut aller beaucoup plus loin que ça. On peut écrire des règles beaucoup plus sophistiquées. Comme par exemple pour mettre en place une barre de navigation un peu complexe. Alors regardez, ici je vais revenir, je vais commenter cette partie-là pour la préserver. Je ferai des commentaires HTML par la suite. Vous pouvez avoir par exemple ici header h1 nav ul li a fois 5, etc, et vous voyez, vous mettez très rapidement en place une telle fonctionnalité. Alors là je vais en profiter quand-même pour mettre le commentaire HTML à dock, voilà, ici. Et on va continuer à venir explorer quelques requêtes qui peuvent être sympa, des choses qui vont nous aider très rapidement. Donc ça, vous pouvez le mémoriser sous forme de snippet de code, et savoir que lorsque vous développez, par exemple pour le site que l'on voyait tout à l'heure sur lequel on travaillait, le site de musique, cette partie-là, ici, si je veux travailler sur la partie main, qui partirait d'ici en imbriquant un premier article, puis une série de cinq articles, puis un formulaire, avec des titres, des sous-titres chaque fois mis en place, si on veut faire une pré-maquette de ça, ça va prendre un certain temps. Alors qu'en Emmet, il suffit d'écrire cette ligne. On voit bien qu'on a une balise main qui va contenir article a img h1 h2 p six fois, plus un formulaire, et bingo, c'est réglé, c'est fait. Ça prend pas de temps, c'est même assez rapide. Et puis ça permet de faire des fonctionnalités sympas. On peut aussi faire des trucs du style si j'ai besoin d'avoir trois paragraphes qui contiennent un contenu factice, alors on pourrait très bien avoir aussi se dire, voilà, je veux un article, et cet article contiendrait par exemple un titre h1 qui aurait comme texte « Titre » et puis on va mettre dollar dollar comme ça, on va fermer le paragraphe, et ça je lui dis, je veux trois articles, voyez, Donc c'est quelque chose qui va permettre de générer trois faux articles. Alors là, c'est vrai que j'ai rentré directement le titre dans ce sens-là. Je vais mettre un plus à ce niveau-là, et là, voilà. Donc ça devient très rapide à mettre en place, un peu gardez ça sous le coude, et puis le réutiliser quand besoin est, voilà. Donc Emmet ne s'adresse pas qu'au HTML, Emmet s'adresse également au CSS. Si par exemple ici j'ai une marge de 10 pixels, il suffit d'écrire « m10 » on valide, on a marge 10 pixels. Si on veut travailler une hauteur de 10, plus une largeur de 20 pixels, il suffit de valider et voyez, ça va très vite pour pouvoir écrire ces éléments-là. Et puis, il suffit d'écrire des fois des éléments, voyez, des lettres qui font partie du mot, comme back ground, et là si je valide, je vais pouvoir le récupérer. Alors il faut valider par la touche Entrée paradoxalement dans ce cas-là, pour pouvoir intégrer. C'est à dire que des fois, l'éditeur d'aide d'écriture de Dreamweaver rentre quelque part en conflit avec les auto-écritures que pourrait proposer Emmet. Mais vous voyez que dans la majeure partie c'est vachement sympa, parce que ça permet d'écrire très rapidement du code. Certaines règles d'écriture aussi, comme le @ font face on va pouvoir valider et rapidement rentrer dans la source d'écriture. Donc, je vous invite à explorer les diverses possibilités que offre Emmet, et pour ça, rien de mieux que d'aller sur le cheatsheet de Emmet directement sur le site, vous avez toutes les syntaxes qui vont pouvoir être exploitées, explorées, que ça soit des écritures pures au HTML que ça soit des écritures pures au CSS, alors vous voyez que cela ne manque pas, ici on est passés dans la partie CSS. Et vous avez aussi les parties pour XSL, qui peuvent être récupérées si des fois vous avez besoin d'écrire ça. Mais vraiment venez travailler avec cet outil, Emmet c'est quelque chose qu'il est vraiment utile de garder sous le coude placé en Evernote, ou en fragment de code dans Dreamweaver pour vous permettre de rapidement réexploiter vos chaines et vos abréviations.

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 !