Positionnez le point d’insertion dans le code.
Dernière mise à jour le
27 avr. 2021
Découvrez comment travailler en mode Code et tirer le meilleur parti des fonctions de programmation de Dreamweaver.
Il existe plusieurs façons de travailler avec du code dans Dreamweaver.
Vous pouvez ouvrir un nouveau fichier de code à l'aide de la boîte de dialogue Nouveau document et commencer à saisir le code.
Les conseils de code s’affichent à mesure que vous tapez pour vous aider à choisir le code et à éviter les erreurs typographiques. Bénéficiez d'une aide sur le CSS grâce aux Quick Docs de Dreamweaver.
Vous pouvez également insérer du code à l'aide du panneau Insertion ou utiliser des raccourcis de codage tels que les abréviations Emmet.
Si vous vous retrouvez à copier et coller le même morceau de code plusieurs fois, essayez ces fonctionnalités qui font gagner du temps :
- Le panneau Fragments est inestimable pour créer rapidement et insérer des fragments de code préformatés dans votre code.
- Les curseurs multiples vous permettent de créer et de modifier plusieurs lignes de code en même temps.
Dreamweaver fournit également un ensemble d'outils d'édition puissants qui permettent de naviguer dans votre code et d'y apporter des modifications en toute fluidité.
- Utilisez la fonctionnalité rechercher et remplacer de Dreamweaver pour rechercher des balises, des attributs ou du texte dans le code.
- Utilisez la fonction Navigation dans le code pour accéder au code associé aussi bien à l’intérieur qu’à l’extérieur du fichier actif. Mieux encore, utilisez la fonctionnalité Modification rapide pour modifier le code dans les fichiers associés sans même ouvrir le fichier dans un nouvel onglet.
- Cliquez avec le bouton droit sur le code pour afficher un menu contextuel simple et pertinent qui vous permet de modifier le code directement.
- Utilisez Baliser pour encapsuler du texte dans des balises.
Lisez la suite pour obtenir plus d'informations sur toutes ces fonctionnalités de code.
Insertion de code à l’aide du panneau Insertion
Sélectionnez la catégorie appropriée du panneau Insertion.
Cliquez sur un bouton dans le panneau Insertion ou sélectionnez un élément dans un menu contextuel du panneau Insertion.
Lorsque vous cliquez sur une icône, le code apparaît immédiatement dans votre page, ou une boîte de dialogue apparaît demandant plus d'informations pour compléter le code.
Le nombre et le type des boutons du panneau Insertion varient selon la nature du document affiché et selon que le mode Code ou Création est actif.
Utilisation du kit de ressources Emmet avec Dreamweaver
Emmet est un plug-in qui permet un codage à grande vitesse et la génération de code HTML et CSS.
Utilisez des abréviations Emmet en mode Code ou Inspecteur de code sous Dreamweaver et appuyez sur la touche de tabulation pour développer ces abréviations en balises HTML ou en code CSS.
Les abréviations HTML sont développées dans des pages HTML et PHP. Les abréviations CSS se développent dans les pages CSS, LESS, SASS, SCSS, ou dans la balise style d'une page HTML.
Voici quelques exemples illustrant l’utilisation des abréviations Emmet en mode Code. Pour des informations détaillées et des références, consultez la documentation Emmet.
Annotation
Dreamweaver prend actuellement en charge les abréviations Emmet 1.2.2.
Exemple 1 : Insertion de code HTML à l'aide d'Emmet
Pour ajouter rapidement du code HTML pour une liste non ordonnée avec trois éléments, ouvrez le fichier HTML et saisissez l'abréviation Emmet suivante en vue Code dans <body></body> :
div>(ul>li*3>{Lorem Ipsum})+p*4>lorem
Vérifiez ensuite que le curseur est placé directement après l’abréviation Emmet et appuyez sur la touche Tabulation pour développer l’abréviation. Vous pouvez également sélectionner l'abréviation entière puis appuyer sur Entrée.
L'abréviation se développe en ce code :
<div>
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, voluptatum, perferendis ad impedit iste assumenda et laborum doloribus optio molestiae perspiciatis modi quaerat corrupti velit cupiditate eligendi tempora temporibus vel.</p>
<p>Ipsa, distinctio, eveniet ad numquam libero quam doloremque culpa illo ex possimus eligendi amet nesciunt provident inventore rerum facere ea veritatis itaque ? Suscipit rem asperiores excepturi sapiente enim architecto esse.</p>
<p>Harum, ad porro molestiae corporis natus aut non fugit. Recusandae, reprehenderit, voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione eaque ad illum porro dignissimos sit eos.</p>
<p>Dignissimos, molestiae, quis ducimus ratione temporibus sed accusamus libero consequuntur ex velit maiores illum repudiandae cum ! Dolorum, dolore, pariatur, incidunt in saepe laudantium consequatur provident totam vero velit nobis accusantium !</p>
</div>
Exemple 2 : Insertion de code CSS avec Emmet
Pour insérer du code CSS permettant de créer un rayon de bordure avec des préfixes de fournisseurs, ouvrez votre fichier CSS et tapez l'abréviation Emmet suivante dans une classe :
-bdrs
Lorsque vous appuyez sur Tab, l'abréviation se développe en code suivant :
-webkit-border-radius: ;
-moz-border-radius: ;
border-radius: ;
Utilisation des commentaires de code
Un commentaire est un texte descriptif inséré dans le code HTML pour expliciter le code ou fournir d’autres informations. Le commentaire apparaît uniquement en mode Code ; il ne s’affiche pas dans un navigateur.
Ajout de commentaires à votre code
Pour ajouter des commentaires, saisissez tout d’abord le texte du commentaire. Vous pouvez ensuite placer votre curseur au point d'insertion et cliquer sur l'icône Insérer dans la barre d'outils pour ouvrir le sous-menu Appliquer le commentaire.
Vous pouvez également sélectionner le texte et le transformer en commentaire. Le texte sélectionné est placé dans un bloc de commentaires.
Vous pouvez ajouter des commentaires à l’aide de différentes options de syntaxe. Sélectionnez la syntaxe appropriée et Dreamweaver insère automatiquement les balises pour vous. Il vous suffit de saisir le texte de votre commentaire.
Vous pouvez également utiliser les raccourcis clavier Ctrl+/ (sous Windows) ou Cmd+/ (sur Mac) pour ajouter des commentaires.
Si vous utilisez le raccourci clavier sans sélectionner de texte, le commentaire s’applique à la ligne active. Si vous sélectionnez du texte et utilisez le raccourci clavier, le commentaire est appliqué au texte sélectionné.
Suppression de commentaires du code
Pour supprimer des commentaires du code, sélectionnez le code, puis cliquez sur l’icône Supprimer commentaire dans la barre d’outils. Vous pouvez également utiliser les raccourcis clavier Ctrl-/ (sous Windows) ou Cmd-/ (sur Mac) pour supprimer les commentaires.
Activation/désactivation des commentaires de code
Pour basculer entre l'affichage et le masquage des commentaires en mode Code, appuyez simplement sur Ctrl+/ sous Windows ou Cmd+/ sur Mac pour le commentaire ou la ligne sélectionnés.
Utilisation de plusieurs curseurs pour ajouter ou modifier du texte à plusieurs endroits
Ajoutez des curseurs à plusieurs endroits ou sélectionnez plusieurs sections de code et modifiez-les simultanément à l’aide de la fonction de curseurs multiples de Dreamweaver.
Annotation
Les opérations copier-coller et rechercher-remplacer ne fonctionnent pas avec plusieurs curseurs ou plusieurs sélections.
Ajout de plusieurs curseurs ou sélections
Vous pouvez ajouter plusieurs curseurs de différentes manières selon vos besoins.
Si vous souhaitez ajouter le même texte à plusieurs endroits sans remplacer le texte existant, ajoutez plusieurs curseurs.
Si vous souhaitez remplacer le texte existant, vous pouvez effectuer des sélections multiples. Vous pouvez sélectionner des lignes de texte continues ou discontinues, ou les deux, et y ajouter des curseurs.
Pour ajouter plusieurs Curseur ou plusieurs sélections sur la même colonne sur des lignes continues :
Tout en maintenant la touche Alt enfoncée, cliquez sur le code et faites glisser la souris verticalement. Lorsque vous faites glisser verticalement, des curseurs sont ajoutés à chaque ligne que vous parcourez.
Pour sélectionner des lignes de texte continues, appuyez sur la touche Alt et faites glisser le curseur en diagonale. Lorsque vous faites glisser en diagonal, Dreamweaver sélectionne un bloc rectangulaire de texte dans cette sélection.
Annotation
Pour ajouter rapidement des curseurs ou inclure plusieurs lignes dans une sélection, utilisez le raccourci clavier Maj+Alt+Haut ou Bas.
Une fois que vous avez ajouté les curseurs (ou sélectionné du texte) à plusieurs endroits, commencez à saisir.
Si vous avez plusieurs curseurs, le nouveau texte est ajouté.
Si vous avez sélectionné du contenu sur plusieurs lignes de texte, le texte sélectionné est remplacé par le nouveau texte que vous saisissez.
Pour ajouter plusieurs curseurs dans différentes colonnes sur plusieurs lignes :
Pour ajouter des curseurs à des lignes de texte discontinues, appuyez simplement sur la touche Ctrl et cliquez sur les différentes lignes où vous souhaitez placer le curseur.
Pour sélectionner des lignes de texte discontinues, sélectionnez du texte, puis appuyez sur la touche Ctrl (Windows) ou Cmd (Mac) et continuez à effectuer d'autres sélections.
Pour ajouter des curseurs au début/à la fin de chaque ligne :
Sélectionnez plusieurs lignes de texte et appuyez sur les touches fléchées gauche ou droite.
Pour ajouter des Curseur dans les lignes précédentes ou suivantes pour une sélection :
Appuyez sur les touches Maj+Alt+Haut/Bas, puis appuyez sur la touche fléchée droite.
Pour sélectionner des lignes de texte continues et discontinues :
Vous pouvez combiner ces techniques pour sélectionner à la fois des lignes de texte continues et séparées dans une seule sélection.
Sélectionnez d'abord les lignes de texte discontinues, puis appuyez sur Ctrl+Alt (sur Windows) ou Cmd+Alt (sur Mac) et faites glisser pour ajouter un ensemble de lignes aux sélections multiples existantes.
Obtenir de l’aide sur CSS dans Dreamweaver avec la fonction Documentation rapide
Lorsque vous travaillez avec des fichiers CSS, LESS ou SCSS dans Dreamweaver, vous pouvez rapidement obtenir plus d'informations sur les Propriétés CSS ou les valeurs.
Placez votre Curseur dans une propriété ou une Valeur et appuyez sur Ctrl + K, Dreamweaver ouvre la documentation du Projet Web Platform Docs.
Vous pouvez ouvrir simultanément plusieurs éditeurs en ligne et les visionneuses de document.
Pour fermer un seul éditeur en ligne ou une visionneuse de document, cliquez sur le « X » en haut à gauche ou appuyez sur Échap lorsque Quick Docs est actif.
Pour fermer l’ensemble des documents et éditeurs en ligne, placez le curseur sur l’éditeur de code externe principal et appuyez sur la touche Echap.
Analyser le code
Dreamweaver prend en charge le linting (analyse du code pour détecter les erreurs potentielles) pour HTML, CSS et JavaScript.
Le panneau Sortie répertorie les erreurs et les avertissements détectés grâce à l’analyse Linting. Pour en savoir plus, consultez la section Analyse du code (Linting).
Dreamweaver affiche également un aperçu rapide des erreurs dans la colonne de la ligne incorrecte. Le numéro de ligne s'affiche en rouge pour indiquer qu'il contient des erreurs, et lorsque vous le survolez, une brève description de l'erreur s'affiche.
Remarque : seule la première erreur de la ligne est visible. Si la ligne contient uniquement un avertissement, la description de ce dernier s’affiche. Si la ligne contient un avertissement et une erreur, seule la description de l’erreur s’affiche.
Envelopper le texte du code à l’aide de la fonction Envelopper avec balise
Utilisez la fonction Envelopper avec balise en mode Code pour envelopper des lignes de texte spécifiques avec une balise. En mode Créateur ou Live, vous pouvez utiliser cette fonctionnalité pour encapsuler des objets avec une balise.
Sélectionnez du texte en mode Code ou un objet en mode Créateur, et appuyez sur Ctrl+T sur votre clavier.
Un pop-up s'affiche, vous permettant de sélectionner parmi plusieurs balises HTML.
Sélectionnez une balise dans le menu.
Si vous travaillez en mode Code, le texte sélectionné est enveloppé avec la balise. Si vous travaillez en mode Créateur ou Live, l'objet sélectionné est encapsulé avec la balise.
Modifier le code avec le menu contextuel de codage
Utilisez le menu contextuel de Dreamweaver pour apporter des modifications rapides à votre code.
Pour accéder au menu contextuel, cliquez avec le bouton droit de la souris (sous Windows) ou cliquez en maintenant la touche Commande enfoncée (sous Mac). Les options suivantes sont disponibles :
Édition rapide
Cliquez sur cette option pour passer en mode Édition rapide. Dans ce mode, Dreamweaver fournit du code et des outils intégrés basés sur le contexte qui vous permettent d’accéder rapidement à la section de code dont vous avez besoin. Pour plus d'informations, consultez Modification rapide.
Couper, Copier, Coller
Cliquez sur ces options pour couper, copier et coller rapidement du texte sans avoir à accéder au menu Édition.
Rechercher et remplacer, Rechercher suivant, Rechercher précédent
Cliquez sur ces options pour rechercher et remplacer rapidement du texte sans avoir à accéder au menu Rechercher.
Créer un fragment de code
Utilisez cette option pour créer des fragments de code que vous pouvez enregistrer pour une utilisation ultérieure. Sélectionnez du code, puis cliquez sur Créer un fragment de code pour créer un fragment à partir du code sélectionné. Pour plus d’informations, consultez la section Manipulation de fragments de code.
Ouvrir le fichier associé
Effectuez un clic droit sur un lien/une balise de script et cliquez sur ouvrir le fichier associé pour ouvrir le fichier.
Attacher une feuille de style
Attachez une feuille de style CSS existante à votre page.
Sélection
Le sous-menu Sélection comprend diverses options de modification du code que vous pouvez utiliser sur un fragment de code sélectionné, comme basculer les commentaires de ligne et de bloc, développer et réduire la sélection, convertir le CSS intégré en règles, déplacer les règles CSS et imprimer le code.
Navigation dans le code
Cliquez sur cette option pour naviguer vers les codes source apparentés, comme des règles CSS internes et externes, des inclusions côté serveur, des fichiers JavaScript externes, des fichiers de modèles parents, des fichiers de bibliothèque et des fichiers source iframe. Pour plus d’informations, consultez la rubrique Navigation vers le code apparenté.
Outils de la fonction Conseils de code
Le sous-menu Outils de conseil de code met à portée de main le sélecteur de couleurs, le navigateur d'URL et les outils de liste de polices.
Mise en retrait des blocs de code
Pendant que vous écrivez et modifiez du code en mode Code ou dans l'inspecteur de code, vous pouvez modifier le niveau de mise en retrait d'un bloc ou d'une ligne de code sélectionné, en le décalant vers la droite ou la gauche d'une tabulation.
Mise en retrait du bloc de code sélectionné
- Appuyez sur Tab, ou
- Appuyez sur Ctrl+], ou
- Sélectionnez Edition > Indentation du code.
Annuler l'indentation du bloc de code sélectionné
- Appuyez sur Shift+Tab, ou
- Appuyez sur Ctrl+[, ou
- Sélectionnez Edition > Indentation négative du code.
Navigation vers le code associé
La fenêtre Navigation dans le code affiche une liste de codes source apparentés à une sélection spécifique sur votre page. Vous pouvez l’utiliser pour naviguer vers les codes source apparentés, comme des règles CSS internes et externes, des inclusions côté serveur, des fichiers JavaScript externes, des fichiers de modèles parents, des fichiers de bibliothèque et des fichiers source iframe. Lorsque vous cliquez sur un lien dans la fenêtre Navigation dans le code, Dreamweaver ouvre le fichier contenant le code concerné. Ce fichier s’affiche dans la section des fichiers associés, pour autant que cette fonctionnalité soit activée. Si elle n'est pas activée, Dreamweaver ouvre le fichier sélectionné dans un document séparé, dans la fenêtre de document.
Si vous cliquez sur une règle CSS dans la fenêtre Navigation dans le code, Dreamweaver accède directement à cette règle. S’il s’agit d’une règle interne du fichier, Dreamweaver l’affiche en mode fractionné. Si la règle est un fichier CSS externe, Dreamweaver ouvre ce dernier et affiche la règle dans la section des fichiers associés, au-dessus du document principal.
Vous pouvez accéder au navigateur de code depuis les modes Créateur, Code et Fractionné, ainsi que depuis l'inspecteur de code.
Pour un aperçu vidéo de l'équipe de développement Dreamweaver sur l'utilisation du navigateur de code, consultez www.adobe.com/go/dw10codenav.
Pour un tutoriel vidéo sur l'utilisation de l'affichage en direct, des fichiers associés et du navigateur de code, consultez www.adobe.com/go/lrvid4044_dw.
Ouverture de la fenêtre Navigation dans le code
Alt+clic (Windows) ou Commande+Option+clic (Macintosh) n'importe où sur la page. Le navigateur de code affiche les liens vers le code affectant la zone sur laquelle vous avez cliqué.
Cliquez en dehors de la fenêtre Navigation dans le code pour la fermer.
Annotation
Vous pouvez également ouvrir le navigateur de code en cliquant sur l'indicateur du navigateur de code 
. Cet indicateur apparaît près du point d'insertion sur votre page lorsque la souris a été inactive pendant 2 secondes.
Naviguez vers le code avec le navigateur de code
Ouvrez le navigateur de code à partir de la zone de la page qui vous intéresse.
Clique sur l'élément de code auquel vous voulez accéder.
La fenêtre Navigation dans le code regroupe les sources de code apparentées par fichier et énumère les fichiers dans l'ordre alphabétique. Par exemple, supposons que des règles CSS de trois fichiers externes influent sur la sélection dans votre document. Dans ce cas, la fenêtre Navigation dans le code présente la liste de ces trois fichiers, ainsi que des règles CSS relatives à la sélection. Pour le code CSS relatif à une sélection précise, la fenêtre Navigation dans le code fonctionne de façon similaire au panneau Styles CSS du mode Actuel.
Annotation
Lorsque vous maintenez le pointeur de la souris au-dessus d'une règle CSS, la fenêtre Navigation dans le code affiche, dans une infobulle, les propriétés de cette règle. Ces conseils d'outils sont utiles lorsque vous souhaitez distinguer entre plusieurs règles qui partagent un nom.
Désactivation de l’icône Navigation dans le code
Ouvrez la fenêtre Navigation dans le code.
Cliquez sur Désactiver l'indicateur dans le coin inférieur droit de la fenêtre.
Cliquez en dehors de la fenêtre Navigation dans le code pour la fermer.
Pour réactiver l'indicateur du navigateur de code, Alt+clic (Windows) ou Commande+Option+clic (Macintosh) pour ouvrir le navigateur de code et désélectionnez l'option Désactiver l'indicateur.
Accédez à une fonction JavaScript ou VBScript
Dans la vue Code et l'inspecteur de code, vous pouvez afficher une liste de toutes les fonctions JavaScript ou VBScript dans votre code et accéder directement à n'importe laquelle d'entre elles.
Affichez le document en mode Code (Affichage >
Code) ou dans l'inspecteur de code (Fenêtre > Inspecteur de code).
Effectuez l’une des tâches suivantes :
En mode Code, cliquez du bouton droit (Windows) ou tout en appuyant sur Contrôle (Macintosh) dans la fenêtre Code, puis sélectionnez le sous-menu Fonctions dans le menu contextuel.
Annotation
Le sous-menu Fonctions ne s'affiche pas en mode Création.
Si votre code contient des fonctions JavaScript ou VBScript, elles apparaissent dans le sous-menu.
Annotation
Pour afficher ces fonctions dans l'ordre alphabétique, cliquez avec le bouton droit de la souris tout en appuyant sur la touche Ctrl (Windows) ou en maintenant les touches Ctrl et Option enfoncées (Macintosh) en mode Code, puis sélectionnez le sous-menu Fonctions.
- Dans l'inspecteur de code, cliquez sur le bouton de navigation de code ({ }) dans la barre d'outils.
Sélectionnez un nom de fonction pour accéder à la fonction dans votre
code.
Extraction de JavaScript
JavaScript Extractor (JSE) supprime tout le code JavaScript (ou la plupart de celui-ci) de votre document Dreamweaver, l’exporte dans un fichier externe et lie ce fichier à votre document. JSE peut également supprimer des gestionnaires d’événements tels que onclick et onmouseover de votre code puis joindre à votre document, de manière transparente, le code JavaScript associé à ces gestionnaires.
Notez les limitations suivantes de l'extracteur JavaScript avant de l'utiliser :
JSE n’extrait pas les balises de script du corps du document (sauf dans le cas de widgets Spry). Il se pourrait que l’externalisation de ces scripts donne des résultats inattendus. Par défaut, Dreamweaver affiche la liste de ces scripts dans la boîte de dialogue Externaliser le code JavaScript, mais ne les sélectionne pas pour extraction. Si vous le souhaitez, vous pouvez les sélectionner manuellement.
JSE n'extrait pas le code JavaScript des régions modifiables de fichiers .dwt (modèle Dreamweaver), de régions non modifiables d'instances de modèles ou d'éléments de bibliothèque Dreamweaver.
Lorsque vous avez extrait le code JavaScript à l’aide de l’option Externaliser le code JavaScript et associer de manière transparente, vous ne pouvez plus modifier les comportements Dreamweaver dans le panneau Comportements. Dreamweaver ne peut pas inspecter et compléter le panneau Comportements à l’aide de comportements qu’il a associés de manière transparente.
Il est impossible d’annuler vos modifications après avoir fermé la page. Vous pouvez par contre annuler les modifications tant que vous restez dans la même session d’édition. Pour annuler, choisissez Edition > Annuler Externaliser le code JavaScript.
Il se peut que certaines pages complexes ne fonctionnent pas comme prévu. Faites preuve de prudence lors de l’extraction de code JavaScript de pages dont le corps et les variables globales contiennent document.write().
Pour un aperçu vidéo de l'équipe de développement Dreamweaver sur la prise en charge JavaScript dans Dreamweaver, consultez www.adobe.com/go/dw10javascript.
Pour utiliser JavaScript Extractor :
Ouvrez une page qui contient du JavaScript.
Cliquez sur Outils > Externaliser JavaScript.
Dans la boîte de dialogue Externaliser JavaScript, modifiez les sélections par défaut si nécessaire.
Sélectionnez Externaliser JavaScript uniquement si vous souhaitez que Dreamweaver déplace tout JavaScript vers un fichier externe, et fasse référence à ce fichier dans le document actuel. Cette option laisse les gestionnaires d'événements tels que onclick et onload dans le document, et laisse les comportements visibles dans le panneau Comportements.
Sélectionnez Externaliser JavaScript et attacher discrètement si vous souhaitez que Dreamweaver 1) déplace JavaScript vers un fichier externe et y fasse référence dans le document actuel, et 2) supprime les gestionnaires d'événements du HTML et les insère au moment de l'exécution en utilisant JavaScript. Lorsque vous sélectionnez cette option, vous ne pouvez plus modifier les comportements dans le panneau Comportements.
Dans la colonne Modifier, désélectionnez les modifications que vous ne souhaitez pas effectuer ou sélectionnez les modifications que Dreamweaver n'a pas sélectionnées par défaut.
Par défaut, Dreamweaver répertorie mais ne sélectionne pas les modifications suivantes :
Blocs de script dans l'en-tête du document qui contiennent des appels à document.write() ou document.writeln().
Blocs de script dans l'en-tête du document qui contiennent des signatures de fonction liées au code de gestion EOLAS, connu pour utiliser document.write().
Blocs de Script dans le corps du document, sauf si les blocs contiennent uniquement des constructeurs de widget Spry ou d'ensemble de données Spry.
Dreamweaver attribue automatiquement des ID aux éléments qui n'ont pas encore d'ID. Si ces ID ne vous conviennent pas, vous pouvez les modifier en éditant les zones de texte ID.
Cliquez sur OK.
La boîte de dialogue de synthèse affiche un récapitulatif des extractions.Passez ces extractions en revue puis cliquez sur OK.
Enregistrez la page.
Dreamweaver crée un fichier SpryDOMUtils.js, ainsi qu’un autre fichier contenant le code JavaScript extrait. Dreamweaver enregistre le fichier SpryDOMUtils.js dans un dossier SpryAssets de votre site. L’autre fichier est enregistré au même niveau que la page à partir de laquelle vous avez extrait le code JavaScript. N’oubliez pas de charger ces deux fichiers dépendants sur votre serveur web lorsque vous enverrez la page d’origine.
Édition rapide
Au lieu d'encombrer votre environnement de codage avec de nombreux panneaux et icônes, le mode Modification rapide dans Dreamweaver place le code et les outils spécifiques au contexte en ligne, vous permettant d'accéder rapidement à la section de code dont vous avez besoin.
Vous pouvez entrer en mode Modification rapide en :
- Effectuant un clic droit sur un extrait de code et sélectionnez Modification rapide dans le menu contextuel qui s'affiche
- Appuyez sur Ctrl+E (sous Windows) ou Cmd+E (sous Mac)
Utilisation du mode Édition rapide avec des fichiers HTML
Dans un fichier HTML, placez le curseur à l’intérieur d’une classe ou d’un attribut d’ID (nom ou valeur) ou dans le nom d’une balise. La fonction Édition rapide vous indique toutes les règles CSS, SCSS et LESS correspondantes de votre projet. Vous pouvez modifier ces règles directement en ligne, sans jamais quitter le contexte du fichier HTML.
Lorsque plusieurs règles correspondent, naviguez entre elles à l'aide de la liste du côté droit (ou utilisez Alt+Haut/Bas).
Pour créer une règle CSS directement depuis l'éditeur en ligne, cliquez sur Nouvelle règle ou appuyez sur Ctrl+Alt+N (sous Windows) ou Cmd+Opt+N (sous Mac).
Utilisation du mode Édition rapide avec des fichiers JavaScript
Dans un fichier JavaScript, placez le curseur sur le nom d’une fonction. L'édition rapide vous affiche le corps de la fonction (même si elle est présente dans d'autres fichiers référencés par une instruction require()).
Utilisation du mode Édition rapide avec les fichiers CSS, SCSS ou LESS
Lorsque vous ouvrez Quick Edit avec votre curseur dans une valeur de couleur, vous pouvez accéder au sélecteur de couleurs et modifier rapidement les couleurs utilisées dans votre code CSS.
Dans un fichier CSS, LESS ou SCSS, placez le curseur sur une fonction de temporisation de transition cubic-bezier() ou steps() et l'édition rapide affiche un éditeur graphique de courbe de transition.
Les fonctions de chronométrage prédéfinies ease, ease-in, ease-out, ease-in-out, step-start et step-end sont des points de départ valides.
Remaniement de code
Le remaniement de code correspond au processus de restructuration du code existant d’un ordinateur, sans modifier son comportement externe, afin qu’il soit plus facile à lire, à mettre à jour, à comprendre et à déboguer. Cette technique est utilisée en cas de duplication de code, de méthodes longues ou de présence de classes volumineuses dans le code. Le débogage de code permet de gagner du temps car il s’agit de fonctions non essentielles et de remplacements précis.
Avec la refactorisation JavaScript, vous pouvez renommer les fonctions et définir la portée d'une variable afin de pouvoir l'appeler depuis un bloc de code dans lequel elle est définie.
Annotation
La refactorisation de code n'est désormais disponible que dans les fichiers .js.
Remaniement JavaScript
Vous pouvez remanier du code dans des documents de type html, php et javascript. Lorsque vous effectuez un clic droit sur la zone de code dans Dreamweaver, l'option Refactor apparaît dans le menu déroulant.La refactorisation comprend les options suivantes :
- Renommer
- Extraire vers variable
- Extraire vers fonction
- Envelopper dans Try Catch
- Envelopper dans Condition
- Convertir en fonction de flèche
- Créer Getters/Setters
Pour comprendre la fonctionnalité de chaque option de refactorisation, reportez-vous aux sections suivantes :
Renommer
L’option Renommer permet de modifier toutes les occurrences du nom d’une variable ou d’une fonction dans un code JavaScript. La sélection d'une Variable par cliquer-glisser n'est pas nécessaire pour la refactorisation.
Effectuez les étapes suivantes pour renommer dans JavaScript :
Sélectionnez ou placez le curseur de texte dans le code qui nécessite une modification.
Faites un clic droit sur le texte sélectionné, puis sélectionnez Refactor > Rename. Vous pouvez également utiliser les raccourcis clavier Ctrl + Alt + R sous Windows, ou Command + Option + R sous macOS pour renommer.
Une fenêtre avec plusieurs curseurs s’ouvre, dans laquelle vous pouvez modifier toutes les occurrences de la variable. Les améliorations des curseurs multiples permettent de sélectionner l’occurrence suivante dans la sélection en cours. Retype un nom de Variable ou de fonction unique pour remplacer le nom actuel.
Extraire vers variable
Utilisez l’option Extraire vers variable pour remplacer une expression par une variable, une variable locale ou des constantes dans JavaScript. Pour ce faire, sélectionnez une expression et cliquez dessus avec le bouton droit de la souris. Sélectionnez ensuite Remanier > Extraire vers variable. Vous pouvez également utiliser Ctrl + Alt + V sous Windows et Cmd + Alt + V sous macOS.
Extraire vers fonction
Utilisez l’option Extraire vers fonction pour remplacer une expression dans les appels d’une fonction au sein d’un paramètre. La valeur par défaut du nouveau paramètre peut être initialisée à l'intérieur du corps de la fonction ou transmise par des appels de fonction.
Effectuez les étapes suivantes pour refactoriser en utilisant Extract to Function :
Sélectionnez n'importe quelle expression ou un ensemble d'expressions dans JavaScript.
Faites un clic droit et sélectionnez Refactor > Extract to Function. Vous pouvez également utiliser Ctrl + Alt + M sous Windows ou Cmd + Alt + M sous Mac OS.
Sélectionnez la portée de destination pour extraire la fonction depuis le menu pop-up qui s'affiche à l'écran.
Le résultat varie en fonction de la portée cible sélectionnée. Par exemple, la portée de destination peut être un constructeur, la classe sélectionnée ou une fonction globale.
Les caractéristiques de Extract to function sont :
- Elle identifie les paramètres à transmettre en fonction des identifiants disponibles dans la sélection ou dans la portée extraite.
- Elle identifie les paramètres de retour à renvoyer depuis la fonction en fonction des identifiants dont les valeurs sont modifiées dans la sélection.
- Elle crée également une fonction avec un nom unique.
Les copies d'écran suivantes affichent le résultat basé sur la portée de destination respective sélectionnée.
Envelopper dans Try Catch
Utilisez la fonction Envelopper dans Try Catch pour une exception qui se trouve dans un bloc de code apparaissant comme une erreur après compilation du programme. Cette fonction permet d’envelopper le bloc de code dans un bloc Try Catch. Ce bloc de code est marqué comme une exception lors de l'exécution du programme.
Sélectionnez ou placez le curseur sur le code, faites un clic droit et sélectionnez Refactor > Wrap in Try Catch. Si vous placez le curseur à une position, alors il trouve les instructions environnantes, sinon il vérifie si le code contient des instructions ou non.S'il y a des instructions, alors il encapsule le code dans un bloc Try Catch.
Envelopper dans Condition
Utilisez Wrap in Condition pour une expression dans un code afin de compiler uniquement pour une condition spécifique.
Sélectionnez une expression dans le code, faites un clic droit et sélectionnez Refactor > Wrap in Condition.
Convertir en fonction de flèche
Une fonction fléchée est une expression qui ne possède pas ses propres expressions de fonction telles que this, arguments, super ou new.target. Ces expressions de fonction sont destinées aux expressions non-méthodes et ne peuvent pas être utilisées comme constructeur.
Placez le curseur dans une fonction, effectuez un clic droit et sélectionnez Refactor > Convertir en fonction fléchée.
Annotation
- Si l'instruction sélectionnée possède un paramètre, la structure du paramètre apparaît sous la forme param => {statements}.
- Si l'instruction sélectionnée possède zéro ou plusieurs paramètres tels que param (param1, param2), la structure du paramètre apparaît sous la forme param (param1, param2) => {statements}.
Créer Getters/Setters
En JavaScript, un Setter permet d’exécuter une fonction lorsqu’une propriété donnée nécessite une modification. Les Setters sont généralement utilisés avec des Getters, pour créer un type de pseudo propriété. Vous ne pouvez pas créer un setter pour une propriété qui possède une valeur réelle.
Placez le curseur sur un membre d'une expression d'objet, effectuez un clic droit et sélectionnez Refactoriser > Créer des getters/setters.
Conseils de dépannage
Le tableau suivant fournit des conseils de dépannage pour les messages d'erreur correspondants qui s'affichent à l'écran en raison d'une sélection incorrecte du code :
|
Nom de la fonction |
Message d’erreur |
Conseil de dépannage |
|---|---|---|
|
Renommer |
Aucune expression à la position donnée |
Placez le curseur sur ou avant le nom d’une variable ou d’une fonction. |
|
Extraire vers variable |
La sélection ne forme pas une expression |
Sélectionnez une expression dans le code avant de procéder au remaniement du code. |
|
Extraire vers fonction |
Le bloc sélectionné doit représenter un ensemble d’instructions ou une expression |
Assurez-vous de sélectionner le bloc comprenant un ensemble d’instructions ou une expression. |
|
Envelopper dans Try Catch |
Sélectionner un code valide à envelopper dans un bloc Try/Catch |
Assurez-vous de sélectionner un code avant d’appliquer l’option de remaniement Try Catch. |
|
Envelopper dans Condition |
Sélectionner un code valide à envelopper dans un bloc Condition |
Assurez-vous de sélectionner une expression avant d’appliquer l’option de remaniement Envelopper dans Condition. |
|
Convertir en fonction de flèche |
Placer le curseur à l’intérieur d’une expression de fonction |
Assurez-vous de placer le curseur dans une expression de fonction avant d’appliquer l’option de remaniement. |
|
Créer Getters/Setters |
Placer le curseur au niveau d’un membre d’une expression d’objet |
Assurez-vous de placer le curseur sur un membre d’une expression d’objet avant d’appliquer l’option de remaniement Créer Getters/Setters. |
Recherche et remplacement de texte
Vous pouvez utiliser les fonctionnalités de recherche et de remplacement de Dreamweaver pour rechercher tout type de texte, de code ou d'espace dans votre site ou dossier.
Vous pouvez rechercher le balisage entier, ou vous pouvez limiter la recherche uniquement au rendu du texte en mode Création ou seulement au code.
Vous pouvez également utiliser de puissants algorithmes de mise en correspondance (expressions régulières) pour des opérations de recherche et remplacement sophistiquées.
Une fois le texte trouvé, vous pouvez choisir de le remplacer par votre texte, code ou espace blanc spécifié.
Pour plus d’informations, consultez la section Recherche et remplacement de texte.
Aperçu des images et des couleurs en mode Code
Après avoir inséré le code approprié pour les images et les couleurs, vous pouvez les prévisualiser directement dans le mode Code.
Aperçu de l'image
Passez votre curseur sur l’URL d’une image pour afficher un aperçu de cette dernière en mode Code. Vous pouvez prévisualiser les images référencées de l'une des façons suivantes :
- url();
- data-uri()
- Valeur de l'attribut src de la balise img
Dreamweaver affiche également l’aperçu des images hébergées à distance.
Si Dreamweaver ne parvient pas à afficher l'aperçu pour les chemins d'accès distants, il affiche un message « Impossible de charger l'image ».
Vous pouvez prévisualiser les types d'images suivants :
- JPEG
- JPG
- PNG
- GIF
- SVG
Aperçu des couleurs
Passez votre curseur sur des valeurs de couleurs souris pour afficher un aperçu de ces couleurs en mode Code. Formats pris en charge :
- Valeurs de couleur hexadécimales à 3 et 6 chiffres : #ff0000;
- RGB : rgb(0, 0, 0);
- RGBA : rgba(0, 255, 228, 0.5);
- TSL : hsl(120, 100%, 50%);
- HSLA : hsla(120, 60%, 70%, 0.3);
- Noms de couleurs prédéfinis, tels qu'Olive, Teal, rouge.
L'aperçu des couleurs est disponible dans tous les types de document pour les formats de couleur ci-dessus.
Cliquez avec le bouton droit sur une valeur et sélectionnez Modification rapide pour ouvrir le sélecteur de couleurs et sélectionner une couleur différente.
Annotation
Pour désactiver les aperçus pour les images et les couleurs, décochez l'option Affichage > Options d'affichage du code > Aperçu des ressources.
Impression de code
Vous pouvez imprimer votre code pour le modifier hors ligne, l'archive ou le distribuer.
Ouvrez une page en mode Code.
Sélectionnez Fichier > Imprimer le code.
Spécifiez les options d'impression, puis cliquez sur OK (Windows)
ou Imprimer (Macintosh).
Créez de magnifiques sites web dans Dreamweaver
Concevez, codez et gérez des sites web dynamiques dans un puissant outil tout-en-un.
