Guide d'utilisation Annuler

Rédaction et modification de code

Rechercher

Dernière mise à jour le 1 mai 2021

Découvrez comment travailler en mode Code et tirer le meilleur parti des fonctions de programmation de Dreamweaver.

Vous pouvez rédiger du code de diverses façons dans Dreamweaver.

Vous pouvez ouvrir un nouveau fichier de code avec la boîte de dialogue Nouveau document et commencer à rédiger votre code.

Création d’un fichier de code dans Dreamweaver

Les conseils de code s’affichent à mesure que vous tapez pour vous aider à choisir le code et à éviter les erreurs typographiques. Obtenez de l’aide sur CSS lorsque vous en avez besoin avec la fonction pratique de Documentation rapide 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.

S’il vous arrive souvent de copier-coller les mêmes lignes de code, vous pourrez gagner du temps avec les fonctions suivantes :

Le panneau Fragments de code est un outil très utile pour créer et insérer des fragments de code prédéfinis dans votre code.
L’utilisation de Plusieurs curseurs vous permet de créer et de modifier plusieurs lignes de code en une seule opération.

Dreamweaver fournit également un ensemble d’outils d’édition qui vous permettent de parcourir le code et de le modifier de la manière la plus fluide.

Utilisez la fonction Rechercher et remplacer de Dreamweaver pour rechercher des balises, des attributs ou du texte dans votre 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. Ce n’est pas tout, la fonction Édition rapide vous permet de modifier le code dans des fichiers associés sans même ouvrir les fichiers en question dans un nouvel onglet.
Cliquez avec le bouton droit de la souris sur le code pour faire apparaître un menu contextuel simple et pertinent qui vous permet d’éditer directement le code.
Utilisez Envelopper avec balise pour envelopper le texte dans des balises.

Lisez la suite de cet article pour obtenir plus d’informations sur toutes ces fonctions de code.

Insertion de code à l’aide du panneau Insertion

Positionnez le point d’insertion dans le code.
Sélectionnez la catégorie appropriée du panneau Insertion.
Cliquez sur un bouton du panneau Insertion ou sélectionnez un élément de l’un des menus de ce panneau.

Lorsque vous cliquez sur une icône, le code apparaît immédiatement dans la page ou une boîte de dialogue vous demande de spécifier des informations supplémentaires pour terminer 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 sont développées dans des pages CSS, LESS, Sass, SCSS ou à l’intérieur de la balise de style dans une page HTML.

Voici quelques exemples illustrant l’utilisation des abréviations Emmet en mode Code. Pour plus d’informations et de références, consultez la documentation Emmet.

Remarque :

Actuellement, Dreamweaver prend en charge les abréviations Emmet 1.2.2.

Exemple 1 : insertion de code HTML à l’aide d’Emmet

Pour ajouter rapidement le code HTML correspondant à une liste non ordonnée de trois éléments, ouvrez le fichier HTML et tapez l’abréviation Emmet suivante en mode Code, entre les balises <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 et appuyer sur Entrée.

L’abréviation est développée pour afficher le code suivant :

<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 à l’aide d’Emmet

Pour insérer du code CSS afin de créer un rayon de bordure avec des préfixes fournisseur, ouvrez votre fichier CSS et saisissez l’abréviation Emmet suivante au sein d’une classe :

-bdrs

Lorsque vous appuyez sur la touche Tabulation, l’abréviation est développée pour afficher le 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 alors placer votre curseur au niveau du point d’insertion et cliquer sur l’icône Insérer de la barre d’outils afin d’ouvrir le sous-menu Appliquer commentaire.

Vous pouvez également sélectionner le texte et le transformer en commentaire. Le texte sélectionné est enveloppé dans un bloc de commentaire.

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 du commentaire.

Vous pouvez également employer les raccourcis clavier Ctrl + / (sous Windows), ou Cmd + / (sous 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 le texte et utilisez le raccourci clavier, le commentaire s’applique 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 employer les raccourcis clavier Ctrl - / (sous Windows), ou Cmd - / (sous Mac) pour supprimer des commentaires.

Activation/désactivation des commentaires de code

Pour alterner entre l’affichage et le masquage des commentaires en mode Code, il vous suffit d’utiliser le raccourci clavier Ctrl + / sous Windows ou Cmd + /sous Mac pour la ligne ou le commentaire sélectionné.

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.

Remarque :

Les opérations de copier-coller et de rechercher-remplacer ne fonctionnent pas avec les curseurs ou sélections multiples.

Ajout de plusieurs curseurs ou sélections

Vous pouvez ajouter plusieurs curseurs de différentes façons selon vos besoins.

Ajoutez plusieurs curseurs si vous souhaitez ajouter le même texte à plusieurs endroits sans remplacer le texte existant.

Si vous souhaitez remplacer le texte existant, vous pouvez effectuer des sélections multiples. Vous pouvez sélectionner des lignes de texte continues, discontinues, ou les deux, puis leur ajouter des curseurs.

Pour ajouter plusieurs curseurs ou sélections au niveau de 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 la souris verticalement, des curseurs sont ajoutés à chaque ligne que vous sélectionnez par glissement.

Texte ajouté aux curseurs sur plusieurs lignes

Pour sélectionner des lignes de texte continues, appuyez sur la touche Alt et faites glisser le curseur en diagonale. Lorsque vous faites glisser la souris en diagonale, Dreamweaver sélectionne un bloc de texte rectangulaire dans cette sélection.

Sélection et mise à jour simultanées de plusieurs lignes de texte

Remarque :

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 le texte sélectionné) à plusieurs endroits, vous pouvez commencer à saisir votre texte.

Si vous disposez de plusieurs curseurs, le nouveau texte est ajouté.

Si vous avez sélectionné du contenu dans plusieurs lignes de texte, le texte sélectionné est remplacé par le nouveau texte que vous saisissez.

Pour ajouter plusieurs curseurs au niveau de différentes colonnes sur plusieurs lignes :

Pour ajouter des curseurs à des lignes de texte discontinues, appuyez simplement sur la touche Ctrl, puis cliquez sur les différentes lignes où vous souhaitez placer le curseur.

Ajout de curseurs à plusieurs lignes de texte discontinues

Pour sélectionner des lignes de texte discontinues, sélectionnez du texte, puis appuyez sur la touche Ctrl (Windows) ou Cmd (Mac) et continuez avec les autres sélections.

Pour ajouter des curseurs au début/à la fin de chaque ligne :

Sélectionnez plusieurs lignes de texte, puis appuyez sur les touches fléchées Gauche ou Droite.

Pour ajouter des curseurs dans les lignes précédentes ou suivantes d’une sélection :

Utilisez le raccourci clavier Maj + Alt + touche Haut/Bas et appuyez ensuite sur la touche fléchée Droite.

Pour sélectionner des lignes de texte continues et discontinues :

Vous pouvez combiner ces techniques de manière à sélectionner à la fois des lignes de texte continues et discontinues dans une même sélection.

Commencez par sélectionner les lignes de texte discontinues, puis appuyez sur les touches Ctrl-Alt (sous Windows) ou Cmd-Alt (sous Mac) et faites-les glisser pour étendre un ensemble de lignes à plusieurs sélections existantes.

Sélection de lignes de texte continues et discontinues

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 obtenir rapidement plus d’informations sur les propriétés ou les valeurs CSS.

Placez votre curseur dans une propriété ou une valeur et appuyez sur Ctrl + K, Dreamweaver ouvre alors la documentation provenant du projet Web Platform Docs.

Vous pouvez ouvrir simultanément plusieurs éditeurs en ligne et les visionneuses de document.

Pour fermer une instance de visionneuse de document ou d’éditeur intégré, cliquez sur la croix « X » dans l’angle supérieur gauche ou appuyez sur la touche Echap lorsque la Documentation rapide est activée.

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.

Analyse du code

Dreamweaver prend en charge l’analyse Linting (analyse du code à la recherche d’erreurs potentielles) pour les langages HTML, CSS et JavaScript.

Le panneau Sortie répertorie les erreurs et les avertissements détectés grâce à l’analyse Linting. Pour plus d’informations, 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 est indiqué en rouge pour indiquer la présence d’erreurs et, quand vous passez dessus avec le curseur, 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éation ou En direct, vous pouvez utiliser cette fonction pour envelopper les objets avec une balise.

Sélectionnez le texte (en mode Code) ou un objet (en mode Création), puis appuyez sur Ctrl + T.

La fenêtre qui s’affiche vous permet de sélectionner une balise parmi un grand nombre de 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éation ou En direct, l’objet sélectionné est enveloppé avec la balise.

Modification de code à l’aide du menu 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, voir Édition rapide.

Couper, Copier, Coller

Cliquez sur ces options pour couper, copier et coller du texte rapidement sans avoir à accéder au menu Edition.

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é

Cliquez avec le bouton droit de la souris sur une balise link/script et cliquez sur Ouvrir le fichier associé pour ouvrir le fichier.

Attacher une feuille de style

Ajoute une feuille de style CSS existante à votre page.

Sélection

Le sous-menu Sélection comprend diverses options d’édition de code que vous pouvez utiliser dans un segment de code sélectionné, telles que l’activation et la désactivation des commentaires de ligne et de bloc, le développement et la réduction de la sélection, la conversion de code CSS intégré en règles, le déplacement des règles CSS et l’impression du 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

Avec le sous-menu Outils Conseils de code, vous disposez d’un sélecteur de couleurs, d’un navigateur d’URL et d’outils de liste de polices à portée de main.

Mise en retrait des blocs de code

Lorsque vous rédigez et modifiez votre code en mode Code ou dans l’Inspecteur de code, vous pouvez corriger le niveau de mise en retrait de la ligne ou du bloc de code sélectionnés, en les déplaçant d’une tabulation vers la gauche ou vers la droite.

Mise en retrait du bloc de code sélectionné

Appuyez sur la touche de tabulation ou
Appuyez sur les touches Ctrl + ] ou
Sélectionnez Edition > Indentation du code.

Annulation de la mise en retrait du bloc de code sélectionné

Appuyez sur Maj + Tab ou
Appuyez sur les touches 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 à la fenêtre Navigation dans le code depuis les modes Création, Code et Fractionné, ainsi qu’à partir de l’Inspecteur de code.

Vous trouverez un tutoriel vidéo sur l’utilisation du navigateur de code, réalisé par l’équipe de Dreamweaver, à l’adresse http://www.adobe.com/go/dw10codenav.

Vous trouverez un tutoriel vidéo relatif à l’utilisation du mode En direct, aux fichiers associés et à la fenêtre Navigation dans le code à l’adresse www.adobe.com/go/lrvid4044_dw.

Ouverture de la fenêtre Navigation dans le code

Tout en maintenant la touche ALT (Windows) ou les touches Cmd+Option (Macintosh) enfoncées, cliquez n’importe où sur la page. La fenêtre Navigation dans le code affiche des liens vers le code qui s’applique à la zone sur laquelle vous venez de cliquer.

Cliquez en dehors de la fenêtre Navigation dans le code pour la fermer.

Remarque :

Vous pouvez également ouvrir la fenêtre Navigation dans le code en cliquant sur l’icône . Cette icône s’affiche à proximité du point d’insertion sur la page si la souris reste inactive pendant 2 secondes.

Navigation vers le code à l’aide de la fenêtre Navigation dans le code

Ouvrez la fenêtre Navigation dans le code à partir de la zone qui vous intéresse.
Cliquez sur l’élément de code auquel vous souhaitez 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.

Remarque :

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 infobulles peuvent vous aider à distinguer des règles qui partagent un même 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 activer de nouveau l’icône Navigation dans le code, cliquez tout en maintenant la touche ALT (Windows) ou les touches Cmd+Option (Macintosh) enfoncées, afin d’ouvrir la fenêtre Navigation dans le code, puis désactivez l’option Désactiver l’indicateur.

Accès à une fonction JavaScript ou VBScript

En mode Code et dans l’Inspecteur de code, vous pouvez afficher la liste de toutes les fonctions JavaScript ou VBScript de votre code et passer ainsi directement à l’une de ces dernières.

Affichez le document en mode Code (Affichage > Code) ou l’inspecteur de code (Fenêtre > Inspecteur de code).
Effectuez l’une des opérations 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.
Remarque :

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.

Remarque :

Pour afficher ces fonctions par ordre alphabétique, cliquez avec le bouton droit 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 dans le code ({ }) de la barre d’outils.
Sélectionnez un nom de fonction pour atteindre cette dernière.

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.

Avant d’utiliser JavaScript Extractor, nous attirons votre attention sur les limitations suivantes :

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().

Un tutoriel vidéo sur la prise en charge de JavaScript sous Dreamweaver, réalisé par l’équipe de Dreamweaver, est disponible à l’adresse www.adobe.com/go/dw10javascript.

Pour utiliser JavaScript Extractor :

Ouvrez une page qui contient du code JavaScript.
Cliquez sur Outils > Externaliser le code JavaScript.
Dans la boîte de dialogue Externaliser le code JavaScript, modifiez éventuellement les options par défaut.
- Choisissez Externaliser le code JavaScript uniquement si vous souhaitez que Dreamweaver déplace le code JavaScript dans un fichier externe et qu’il y fasse référence dans le document actuel. Cette option laisse les gestionnaires d’événements tels que onclick et onload dans le document et conserve les comportements visibles dans le panneau Comportements.
- Choisissez Externaliser le code JavaScript et associer de manière transparente si vous souhaitez que Dreamweaver 1) déplace le code JavaScript vers un fichier externe et y fasse référence dans le document actuel, et 2) supprime les gestionnaires d’événements du code HTML et les insère en cours d’exécution à l’aide de JavaScript. Lorsque vous sélectionnez cette option, vous ne pouvez plus modifier les comportements dans le panneau Comportements.
- Dans la colonne Modifier, désactivez les modifications que vous ne souhaitez pas apporter, ou activez celles que Dreamweaver n’a pas sélectionnées par défaut.
  Par défaut, Dreamweaver présente mais ne sélectionne pas les modifications suivantes :
  
  Les blocs de script dans l’en-tête du document qui contiennent des appels document.write() ou document.writeln().
  
  Les blocs de script dans l’en-tête du document qui contiennent des signatures de fonction associées au code de gestion EOLAS, qui utilise document.write().
  
  Les blocs de script dans le corps du document, sauf s’ils contiennent uniquement un widget Spry ou des constructeurs d’ensembles de données Spry.
- Dreamweaver attribue automatiquement des ID aux éléments qui n’en possèdent pas encore. Si ces ID ne vous conviennent pas, vous pouvez les modifier dans les zones de texte ID.
Cliquez sur OK.

La boîte de dialogue de synthèse récapitule les 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 Édition rapide de Dreamweaver place le code pertinent et les outils spécifiques au contexte directement dans le code pour vous permettre d’accéder rapidement à la section de code dont vous avez besoin.

Vous pouvez passer en mode Édition rapide de la façon suivante :

Cliquez avec le bouton droit de la souris sur un fragment de code, puis sélectionnez Édition 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 dans le code, sans quitter le contexte du fichier HTML.

Si plusieurs règles correspondantes sont affichées, vous pouvez naviguer entre elles au moyen de la liste sur la droite (ou du raccourci Alt + Haut/Bas).

Pour créer une règle CSS directement à partir de l’éditeur intégré, cliquez sur Nouvelle règle ou appuyez sur Ctrl + Alt + N (sous Windows) ou Cmd + Alt + 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. La fonction Édition rapide indique le corps de la fonction, même s’il est présent dans d’autres fichiers référencés par une déclaration require().

Utilisation du mode Édition rapide avec des fichiers CSS, SCSS et LESS

Lorsque vous appelez la fonction Édition rapide avec votre curseur placé 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.

Accès au sélecteur de couleurs dans un fichier CSS

Dans un fichier CSS/LESS/SCSS, placez le curseur sur une fonction de chronométrage d’étapes steps() ou cubic-bezier() et la fonction Édition rapide affiche un éditeur de transition basé sur une courbe graphique.

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.

Manipulation d’une courbe de Bézier avec la fonction Édition rapide

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.

Le remaniement JavaScript permet de renommer des fonctions et de définir la portée d’une variable de manière à pouvoir l’appeler depuis un bloc de code dans lequel elle est définie.

Remarque :

Le remaniement de code est désormais disponible uniquement dans les fichiers .js.

Remaniement JavaScript

Vous pouvez remanier du code dans des documents de type html, php et javascript. Lorsque vous cliquez avec le bouton droit de la souris sur la zone de code dans Dreamweaver, l’option Remanier apparaît dans le menu déroulant. Le remaniement comporte 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 connaître les fonctionnalités de chaque option de remaniement, 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. Pour procéder à son remaniement, il n’est pas nécessaire de sélectionner une variable en cliquant dessus et en la faisant glisser.

Pour renommer une variable dans JavaScript, procédez comme suit :

Mettez le texte en évidence ou placez le curseur dessus dans le code à modifier.
Cliquez avec le bouton droit de la souris sur le texte sélectionné, puis sélectionnez Remanier > Renommer. Pour effectuer cette opération, vous pouvez également utiliser le raccourci clavier Ctrl + Alt + R (Windows) ou Commande + option + R (macOS).
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. Confirmez le nom unique de la variable ou de la fonction pour remplacer le nom actuel.

Avant : Renommer

Après : Renommer

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 les touches Ctrl + Alt + V (Windows) ou Commande + Alt + V (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. Il est possible d’initialiser la valeur par défaut du nouveau paramètre dans le corps de la fonction ou de la transmettre par des appels de fonction.

Pour réaliser un remaniement avec l’option Extraire vers fonction, procédez comme suit :

Sélectionnez une ou plusieurs expressions en JavaScript.

Sélection d’une expression
Cliquez avec le bouton droit de la souris et sélectionnez Remanier > Extraire vers fonction. Vous pouvez également utiliser les touches Ctrl + Alt + M sous Windows OS ou Cmd + Alt + M sous Mac OS.
Sélectionnez la portée cible pour extraire la fonction dans le menu contextuel qui apparaît à l’écran.

Types de portée
Le résultat varie en fonction de la portée cible sélectionnée. Par exemple, la portée cible peut être une fonction constructeur, la classe sélectionnée, ou encore une fonction globale.

Les caractéristiques de l’option Extraire vers fonction sont les suivantes :
- Elle identifie les paramètres à transmettre d’après les identifiants qui se trouvent dans la sélection ou dans la portée extraite.
- Elle identifie les paramètres de retour à renvoyer par la fonction d’après les identifiants dont la valeur est modifiée dans la sélection.
- Elle crée également une fonction avec un nom unique.
Les copies d’écran suivantes montrent le résultat obtenu en fonction de la portée cible respective sélectionnée.
Constructeur

Classe

Globale

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 exception pendant l’exécution du programme.

Sélectionnez le code ou placez le curseur dessus, cliquez avec le bouton droit de la souris et sélectionnez Remanier > Envelopper dans Try Catch. Si vous placez le curseur sur une certaine position, l’option recherche les instructions environnantes ou vérifie si le code en comporte ou pas. Si des instructions sont présentes, le code est enveloppé dans un bloc Try Catch.

Envelopper dans Condition

Utilisez la fonction Envelopper dans Condition pour une expression qui se trouve dans un code afin de compiler uniquement une condition donnée.

Sélectionnez une expression dans le code, cliquez avec le bouton droit de la souris et sélectionnez Remanier > Envelopper dans Condition.

Convertir en fonction de flèche

Une fonction de flèche est une expression qui ne dispose pas de ses propres expressions de fonction, telles que this, arguments, super, ou new.target. Ces expressions de fonction sont destinées aux expressions sans méthode et ne peuvent pas être utilisées comme constructeurs.

Placez le curseur dans une fonction, cliquez avec le bouton droit de la souris et sélectionnez Remanier > Convertir en fonction flèche.

Remarque :

Si l’instruction sélectionnée dispose d’un paramètre, alors la structure de ce paramètre apparaît sous la forme param => {instructions}.
Si l’instruction sélectionnée ne dispose d’aucun paramètre ou en a plusieurs, tels que param (param1, param2), alors la structure de ces paramètres apparaît sous la forme param (param1, param2) => {instructions}.

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é. Il n’est pas possible de créer un Setter pour une propriété qui dispose d’une valeur.

Placez le curseur sur un membre d’une expression d’objet, cliquez avec le bouton droit de la souris et sélectionnez Remanier > Créer Getters/Setters.

Conseils de dépannage

Le tableau qui suit fournit des conseils de dépannage pour les messages d’erreur qui s’affichent à l’écran suite à une sélection de code incorrecte :

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 remplacement de Dreamweaver pour rechercher tout type de texte, code ou espace blanc 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

Une fois que vous avez inséré le code approprié pour les images et couleurs, vous pouvez le prévisualiser directement en mode Code.

Aperçu des images

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 qui sont référencées comme suit :

url();
data-uri()
Valeur d’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 de fichiers distants, il indique le message « Impossible de charger l’image ».

Vous pouvez prévisualiser les types d’image 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. Voici les formats pris en charge :

Valeurs de couleurs hexadécimales à 3 et 6 chiffres : #ff0000;
RVB : rvb(0, 0, 0) ;
RVBA : rvba(0, 255, 228,0.5) ;
TSI : tsi(120, 100%, 50%) ;
TSLA : tsla(120, 60%, 70%, 0.3) ;
Noms de couleurs prédéfinis, tels que Vert olive, Bleu sarcelle, rouge.

L’aperçu des couleurs est disponible dans tous les types de documents pour les formats de couleur indiqués ci-dessus.

Cliquez avec le bouton droit sur une valeur et sélectionnez Édition rapide pour ouvrir le sélecteur de couleurs et sélectionner une autre couleur.

Remarque :

Pour désactiver les aperçus des images et des couleurs, désactivez l’option Affichage > Options du mode Code > Aperçu de l’élément.

Impression de code

Vous pouvez imprimer le code que vous avez rédigé pour le consulter, l’archiver 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 sur Imprimer (Macintosh).

Adobe

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?