Dreamweaver, depuis la version MX, propose un panneau Fragments de code, qui n’est autre qu’une bibliothèque de code, personnalisable et éditable à volonté, avec l’intérêt de ne pas réinventer la roue et d’être utilisable dans chaque document.
On pourrait penser que ce module fait double-emploi avec celui des Bibliothèques. Il n’en est rien et voici quelques différences entre ces deux fonctionnalités de DMX.
| - | Fragments de Code | Bibliothèques |
| Disponibilité dans les sites définis dans DMX | Tous les sites | Un seul site |
| Mise à jour dans les documents | Non | Oui |
| Indicateur visuel dans le document (couleur de surbrillance par exemple) |
Non | Oui |
| Indicateur du type de fragment de code (Bloc ou Enveloppe de sélection) |
Non | Sans objet |
Les Bibliothèques restent surtout et avant tout un outil indispensable de productivité et de gestion globale de site.
Les Fragments de Code sont surtout des outils purement « Utilisateur », et avant de créer un snippet, on aura tout intérêt à réfléchir à deux fois et à se demander si il ne vaudrait pas mieux créer un élement de bilbliothèque à la place, en fonction des besoins ultérieurs de ce code.
Nous allons voir comment créer nos propres fragments de cod
Panneau Fragment de code
Avant toute chose, vous devriez vous créer un ou des dossiers personnels dans ce panneau afin d’y stocker vos futurs codes (Voir les deux copies d’écran qui suivent). Par défaut ce panneau est assez « envahi » par les codes fournis par Macromedia.
 |
| On peut adopter l’approche minimaliste, consistant à fourrer tout le bazar Macromedia dans un dossier, ce qui éclaircit nettement la place… |
Il existe plusieurs façons différentes d’accéder à l’interface de création des fragments de code, par exemple via le panneau Fragments de code lui-même.
A partir du panneau Fragments de code
Menu contextuel Fragment de code
Mais aussi via le menu contextuel dans le panneau « Fragment de code ».
A noter que dans le cas présent le nouveau fragment de code sera placé dans le dossier ouvert, en l’occurrence le dossier JavaScript, il est bien sur possible de le déplacer plus tard dans un nouveau dossier par simple glisser-déposer ou de renommer ce même dossier.
A partir du menu contextuel « Fragment de code
Sélection et mode Visuel
On peut aussi sélectionner le code voulu dans le document en mode Création et via le menu contextuel accéder à la création du fragment de code.
Sélection du code en mode Création et menu contextuel
Notez pour cette méthode, ainsi que pour la suivante, de faire attention, AVANT de créer le fragment de code, de vérifier DANS le panneau des Fragments de code où DMX va le placer ! En effet celui-ci a une fâcheuse tendance à les mettre dans le premier dossier venu…Prenez donc garde de sélectionner auparavant un dossier de destination.
Sélection et mode Code source
Ou bien encore en sélectionnant le code en mode Code et via le menu contextuel.
Sélection du code en mode Code et menu contextuel{mospagebreak}
Editeur de Fragment de code
La première information est le nom de notre fragment de code, à noter que c’est ce nom qui sera utilisé par Dreamweaver pour générer le fichier de fragment de code, qui est un fichier XML ayant pour extension .csn, se trouvant dans le dossier Configuration/Snippets de Dreamweaver. Notez que tous les fragments de code que vous créez se placent dans votre profil Utilisateur.
Puis une brève description du fragment de code, description qui apparaît dans le panneau, à la suite du nom de notre fragment de code.
Le Type de fragment de code nous permet de choisir la façon dont va être inséré le fragment de code dans la page, soit d’un seul bloc, soit en plaçant la première partie du fragment avant la sélection et la seconde partie du fragment de code après la sélection, ce qui nous permet par exemple (c’est le cas présent) de créer des liens.
Type d’aperçu : Création
Pour cette capture d’écran le type d’aperçu est en mode Création et le type de fragment de code en Insérer le bloc, le texte faisant partie du fragment de code, en appliquant le fragment de code c’est tout le bloc qui sera appliqué, y compris le texte, ceci étant plus utile pour un code ne devant pas être édité.
Vous remarquerez le commentaire à la suite du nom du fragment de code.
Type d’aperçu : Code
Dans cette capture d’écran le type d’aperçu est en mode Code et le type de fragment de code en Envelopper la sélection, en sélectionnant un texte dans la page courante et en appliquant le fragment de code, notre lien va s’insérer autour du texte.
