Bonjour.
Si vous écrivez régulièrement des lignes de code identiques ou similaires pour vos projets web, vous allez adorer les fragments de code dans Dreamweaver CC.
Ces fragments prédéfinis et réutilisables peuvent être ajoutés dans n'importe quel projet web.
Pour afficher le panneau correspondant, cliquez sur Fenêtre, puis sur Fragments de code.
Différents fragments sont disponibles : Bootstrap, CSS, responsive design...
Les HTML sont ceux que j'utilise le plus.
Leur nom s'affiche dans la liste.
Certains sont trop longs et s'affichent partiellement.
Si je les survole, une info-bulle indique leur nom complet.
Je vais maintenant ajouter un fragment de code, qui s'appelle Adding a Mailto Link.
J'utilise cette ligne de code très souvent.
Elle crée un lien permettant d'envoyer un e-mail.
Je ne me souviens pas toujours du code.
Il y a « mailto » dedans, deux-points, peut-être un point d'interrogation... je ne sais plus.
C'est là que les fragments de code s'avèrent utiles.
Ici, dans le pied de page, je vais ajouter « mailto » entre les balises p.
Le curseur est bien placé, je double-clique sur le fragment.
Et voilà.
Dreamweaver a même ajouté un commentaire pour me rappeler de remplacer l'adresse e-mail.
Super.
Je vais donc modifier cette adresse.
En mode En direct, le bouton Email Us s'affiche.
Voilà comment ajouter un fragment de code.
Je peux aussi modifier des fragments déjà présents, par exemple une redirection de page.
Plusieurs pages doivent pointer vers un autre site ou une autre page.
Je sélectionne le fragment, puis je clique sur l'icône Modifier le fragment de code.
Ce fragment renvoie vers http://website.com/, une adresse fictive.
Je la remplace par http://adobe.com/.
Tant que j'y suis, comme je dois faire la même chose pour plusieurs pages, je vais utiliser une touche de déclenchement, bref un raccourci.
J'ai donc créé une touche de déclenchement que je vais nommer redirect.
Je clique ensuite sur OK.
La touche de déclenchement a été ajoutée dans le panneau.
Dans la section head en haut du code, avant le chargement de la page, j'ajoute une redirection vers une autre page.
J'appuie sur Tab.
Si l'ajout de fragments est rapide, celui de touches de déclenchement l'est encore plus, surtout pour les fragments qu'on utilise souvent.
Je vais maintenant créer mes propres fragments de code.
En tant que développeur web, j'utilise régulièrement certains éléments de code.
De plus, certains clients exigent des couleurs et groupes de polices spécifiques.
Je les utilise donc régulièrement.
Pour gagner du temps, je vais créer mon propre groupe en cliquant sur l'icône de dossier en bas à droite.
Je le nomme « My Snippet ».
Le dossier se trouve dans la catégorie HTML.
Je le déplace tout en bas par glisser-déposer.
Le voilà tout seul en bas.
Je réduis le dossier HTML_Snippets.
Le nouveau dossier étant sélectionné, je clique sur l'icône Nouveau fragment de code.
Je vais nommer le fragment.
Celui-ci est très simple, il s'agit du vert de ma société que j'utilise souvent dans CSS.
Je saisis le code dans le champ en bas, puis je clique sur OK.
J'accède au CSS pour trouver l'emplacement souhaité.
Ici, pour le texte d'introduction.
Je veux utiliser ce vert.
Je cherche le sélecteur correspondant.
Le voici.
Je double-clique sur Corporate Green, et voilà !
Les fragments sont encore plus utiles lorsque le code est long.
Voici ma balise header.
Je sélectionne toute cette partie, car je l'utilise comme en-tête pour démarrer presque tous mes projets web.
Je la sélectionne entièrement, puis je clique sur l'icône Nouveau fragment de code.
Le code étant sélectionné, il a été copié dans le champ Insérer code.
Je nomme le fragment et je lui attribue un déclencheur.
Je vais éviter nav car ce raccourci est utilisé par Emmet.
Mieux vaut éviter d'utiliser des noms d'élément HTML pour les déclencheurs.
Privilégiez les noms originaux.
Je vais utiliser « mynav ».
Je clique sur OK.
Désormais, quand je crée un document, sous body, je tape « mynav », puis j'appuie sur Tab.
J'ai inséré la structure HTML prête à l'emploi en tapant cinq lettres et en appuyant sur Tab.
Les fragments de code sont vraiment très pratiques, qu'ils soient prédéfinis, modifiés ou personnalisés, comme dans le dernier exemple.
Quand vous créez les vôtres, pensez à activer la synchronisation des paramètres via l'icône en haut à droite.
Ainsi, vos fragments seront synchronisés dans vos clouds et accessibles si vous devez réinstaller Dreamweaver ou que vous l'utilisez sur plusieurs machines.
Pour conclure, vive les fragments de code et Dreamweaver CC, et merci de votre attention.
Il existe d'autres tutoriels pour vous aider à maîtriser Dreamweaver CC.
Je vous les recommande.
