Guide d'utilisation Annuler

Définition des préférences de codage

 

 

Comment définir des préférences de codage, des thèmes de code, des formats et des préférences de correction de code sous Dreamweaver.

Vous pouvez définir des préférences de codage, par exemple le formatage ou la coloration du code, en fonction de vos besoins.

Remarque :
  • Pour définir les préférences avancées, utilisez l’éditeur de la bibliothèque de balises (voir la section Gestion des bibliothèques de balises).
  • Dreamweaver prend en charge le formatage des types de fichiers CSS, JS et PHP. Pour plus d’informations sur la personnalisation du formatage de code PHP, CSS et JS, consultez la section Formatage du code.

Définition de l’apparence du code

Le menu Affichage > Options d’affichage de code permet de configurer le renvoi à la ligne des mots, l’affichage du numéro des lignes de code, la coloration de la syntaxe des éléments de code, la mise en retrait du code, ainsi que l’affichage des caractères masqués.

  1. Affichez le document en mode Code ou dans l’Inspecteur de code.
  2. Choisissez Affichage > Options d’affichage du code.

  3. Activez ou désactivez l’une des options suivantes :

    Renvoi à la ligne

    Renvoie le code à la ligne pour le rendre visible sans qu’il soit nécessaire de le faire défiler horizontalement. Cette option n’insère aucun saut de ligne ; elle a pour seule fonction de simplifier la consultation du code.

    Numéros de lignes

    Affiche le numéro des lignes de code sur le côté.

    Caractères masqués

    Permet d’afficher les caractères spéciaux au lieu d’un simple espace blanc. Par exemple, un point apparaît pour masquer chaque espace, un double chevron remplace chaque tabulation, et une marque de paragraphe remplace chaque saut de ligne.

    Remarque :

    Les retours à la ligne contextuels que Dreamweaver utilise pour le renvoi du texte à la ligne ne sont pas symbolisés par une marque de paragraphe.

    Coloration de la syntaxe

    Active ou désactive la mise en couleurs du code. Pour plus d’informations sur la modification des couleurs à appliquer, consultez la section Définition des couleurs du code.

    Retrait auto

    Automatise la mise en retrait du code lorsque vous appuyez sur la touche Entrée pendant la rédaction du code. La nouvelle ligne de code s’aligne au même niveau que la ligne qui la précède. Pour plus d’informations sur la modification de l’espacement du retrait, consultez l’option Taille de tabulation dans Définition du format du code.

Modification du format du code

Vous pouvez modifier l’aspect de votre code en définissant des préférences de formatage telles que la mise en retrait, la longueur de ligne et la casse des noms de balises et d’attributs.

Toutes les options de formatage du code, à l’exception de l’option Remplacer la casse de, ne s’appliquent automatiquement qu’aux nouveaux documents et aux ajouts à des documents que vous créez par la suite.

Pour modifier le formatage d’un document HTML existant, ouvrez ce document puis cliquez sur Edition > Code > Appliquer le format source.

  1. Cliquez sur Edition > Préférences.
  2. Sélectionnez la catégorie Format du code dans la liste de gauche.
  3. Parmi les options suivantes, définissez celles de votre choix :

    Retrait

    Indique si le code généré par Dreamweaver doit être mis en retrait (en conformité avec les règles de retrait définies dans ces préférences).

    Remarque :

    La majorité des options de retrait de cette boîte de dialogue ne s’appliquent qu’au code généré par Dreamweaver et non au code entré par vos soins. Pour que chaque nouvelle ligne entrée s’aligne au même niveau que la précédente, sélectionnez Afficher > Option d’affichage de code, option Retrait auto. Pour plus d’informations, consultez la section Définition de l’apparence du code.

    Avec

    (Zone de texte ou menu contextuel) Spécifie le nombre d’espaces ou de tabulations que Dreamweaver doit utiliser afin de mettre en retrait le code généré. Par exemple, si vous tapez 3 dans la zone de texte et que vous sélectionnez Tabulations dans le menu contextuel, le code généré par Dreamweaver sera mis en retrait de trois tabulations à chaque niveau de mise en retrait.

    Taille de la tabulation

    Détermine la taille, en caractères, de chaque tabulation en mode Code. Par exemple, si cette taille est définie sur 4, chaque tabulation s’affiche en mode Code sous la forme d’un espace long de 4 caractères. De plus, si la taille du retrait est définie sur 3 et que les caractères utilisés sont des tabulations, le code généré par Dreamweaver est mis en retrait de trois tabulations par niveau de mise en retrait, ce qui correspond à un espace de 12 caractères en mode Code.

    Remarque :

    Dreamweaver effectue les mises en retrait à l’aide de tabulations ou d’espaces mais ne convertit pas une série d’espaces en tabulation lors de l’insertion de code.

    Emmet

    Sélectionnez cette option si vous prévoyez d’utiliser des abréviations Emmet dans votre code. Cette option garantit que lorsque vous appuyez sur la touche de tabulation, Dreamweaver convertit l’abréviation Emmet en code HTML ou CSS complet. Pour plus d’informations sur l’utilisation d’Emmet, consultez la section Utilisation du kit de ressources Emmet avec Dreamweaver.

    Type de saut de ligne

    Permet d’indiquer le type de serveur distant (Windows, Macintosh ou UNIX) qui hébergera votre site. Le choix du type de caractères de saut de ligne approprié (CR, CR/LF, LF) garantit que votre code source HTML s’affiche correctement lorsqu’il est affiché à partir du serveur distant. Ce paramètre est également utile lorsque vous travaillez avec un éditeur de texte externe qui ne reconnaît que certains types de retours de chariot. Par exemple, utilisez CR/LF (Windows), si votre éditeur de texte est le Bloc-notes de Windows, et CR (Mac) s’il s’agit de SimpleText.

    Remarque :

    Pour les serveurs auxquels vous vous connectez via FTP, cette option ne s’applique qu’en mode de transfert binaire ; le mode de transfert ASCII de Dreamweaver ignore cette option. Si vous téléchargez (en réception) des fichiers en mode ASCII, Dreamweaver définit les sauts de ligne en fonction du système d’exploitation de votre ordinateur ; si vous transférez des fichiers en mode ASCII, les sauts de ligne sont toujours définis comme CR/LF.

    Balise TD : Ne pas inclure de saut de ligne dans la balise TD

    Résout un problème de rendu qui se rencontre dans certains anciens navigateurs, si un espace blanc ou des sauts de ligne sont placés immédiatement après une balise <td> ou juste avant une balise </td>. Si vous activez cette option, Dreamweaver ne place pas de saut de ligne après une balise <td> ou avant une balise </td>, même si le formatage de la bibliothèque de balises indique qu’un saut de ligne devrait être inséré.

    Formatage avancé

    Permet de définir des options de mise en forme pour les différents attributs et balises dans la boîte de dialogue Éditeur de la bibliothèque de balises.

    Espace blanc

    (Version japonaise uniquement) Permet de sélectionner un espace insécable (&nbsp;) ou un espace Zenkaku pour votre code HTML. L’espace blanc sélectionné avec cette option est utilisé pour les balises vides lors de la création d’un tableau et lorsque l’option « Autoriser plusieurs espaces consécutifs » est activée dans les pages de codage japonaises.

    Taille minimale de pliage de code

    La taille de pliage de code par défaut est deux lignes. Avec ce paramètre par défaut, tous les fragments de code qui contiennent au moins deux lignes de code peuvent être réduits. Les fragments de code qui sont inférieurs à deux lignes peuvent uniquement être réduits en sélectionnant le code. Pour plus d’informations sur le pliage de code, consultez la section Réduction et développement du code.

Définition des préférences de correction de code

Les préférences de correction de code permettent de spécifier les préférences de modification de code par Dreamweaver lors de l’ouverture de documents, lorsque vous copiez et collez des éléments de formulaires ou que vous entrez des valeurs et adresses URL à l’aide des outils (par exemple, l’inspecteur Propriétés). Ces préférences sont sans effet lorsque vous modifiez du code HTML ou des scripts en mode Code.

Si vous désactivez ces options de correction, les éléments de marquage non valides sont affichés dans la fenêtre de document pour le code HTML qu’il aurait corrigé.

  1. Cliquez sur Edition > Préférences (Windows) ou Dreamweaver > Préférences (Mac).
  2. Sélectionnez la catégorie Correction du code dans la liste de gauche.
  3. Parmi les options suivantes, définissez celles de votre choix :

    Corriger les balises incorrectement imbriquées et non fermées

    Corrige les balises qui se chevauchent. Par exemple, <b><i>texte</b></i> est réécrit en tant que <b><i>texte</i></b>. Cette option insère également des guillemets et des crochets de fermeture s’ils sont absents.

    Renommer les éléments de formulaire lors du collage

    Garantit l’absence de noms d’objets de formulaire en double. Cette option est activée par défaut.

    Remarque :

    Contrairement à d’autres options de cette boîte de dialogue de préférences, cette option ne s’applique pas à l’ouverture d’un document, mais uniquement lorsque vous copiez et collez un élément de formulaire.

    Supprimer les balises de fermeture superflues

    Supprime les balises de fermeture auxquelles ne correspond aucune balise d’ouverture.

    M’avertir lors de la correction ou de la suppression de balises

    Affiche un récapitulatif des codes HTML techniquement non valides que Dreamweaver a tenté de corriger. Ce récapitulatif indique l’emplacement du problème (à l’aide des numéros de ligne et de colonne), pour vous permettre de vérifier la correction et veiller à ce qu’elle produise l’effet voulu.

    Ne jamais corriger le code : Dans les fichiers avec extensions

    Permet d’empêcher Dreamweaver de corriger le code dans les fichiers portant les extensions indiquées. Cette option est particulièrement utile pour les fichiers contenant des balises propriétaires.

    Coder <, >, & et &#34; dans les valeurs d’attributs à l’aide de &

    Garantit que les valeurs d’attribut entrées ou modifiées à l’aide des outils Dreamweaver (par exemple, l’inspecteur Propriétés) ne contiennent que des caractères autorisés. Cette option est activée par défaut.

    Remarque :

    Cette option et les options suivantes ne s’appliquent pas aux adresses URL entrées en mode Code. De plus, ces options n’entraînent pas de modification dans le code déjà présent dans un fichier.

    Ne pas coder les caractères spéciaux

    Empêche toute modification des adresses URL par Dreamweaver en vue de n’utiliser que des caractères autorisés. Cette option est activée par défaut.

    Coder caractères spéciaux dans les URL à l’aide de &#

    Garantit que, lorsque vous entrez ou modifiez des adresses URL à l’aide des outils Dreamweaver (par exemple, l’inspecteur Propriétés), ces URL ne contiennent que des caractères autorisés.

    Coder caractères spéciaux dans les URL à l’aide de %

    Fonctionne de façon identique à l’option ci-dessus, mais utilise une autre méthode pour coder les caractères spéciaux. Cette méthode de codage (à l’aide du signe %) offre une meilleure compatibilité avec les navigateurs plus anciens, mais ne se montre pas aussi efficace avec les caractères utilisés dans certaines langues.

Définition des préférences de conseils de code

Utilisez les préférences relatives aux conseils de code pour configurer la manière dont vous souhaitez que ces conseils de code s’affichent pour vous. 

  1. Cliquez sur Edition > Préférences (Windows) ou Dreamweaver > Préférences (Mac).

    Définition des préférences de conseils de code

  2. Sélectionnez la catégorie Conseils de code dans la liste de gauche.

  3. Parmi les options suivantes, définissez celles de votre choix :

    Balises de fermeture

    Indiquez la façon dont vous souhaitez que Dreamweaver ferme les balises.

    • Après avoir tapé "</" - 
    • Après avoir tapé le signe « > » de la balise d’ouverture - Sélectionnez cette option si vous voulez que Dreamweaver ajoute automatiquement une balise de fermeture lorsque vous fermez la balise d’ouverture.
    • Jamais - Définissez cette option si vous ne souhaitez pas que Dreamweaver ajoute automatiquement des balises de fermeture.

    Activation des conseils de code

    Sélectionnez cette option pour activer ou désactiver les conseils ou le remplissage de code dans Dreamweaver. Pour plus d’informations sur les fonctions de conseils et de remplissage de code de Dreamweaver, consultez la section Conseils et remplissage de code.

    Activer les infobulles descriptives

    Sélectionnez cette option pour que des descriptions apparaissent avec les conseils de code. Ces descriptions fournissent des informations supplémentaires sur le code que vous rédigez.

    Insertion automatique des accolades  Lorsque cette option est sélectionnée, une accolade fermante est automatiquement ajoutée dans le code lorsque vous insérez une accolade ouvrante. Lorsque la case n’est pas cochée, aucune accolade fermante n’est insérée si vous saisissez une accolade ouvrante. Cette option s’applique à tous les types d’accolades et de fichiers (html, php, css, js).

    Insertion automatique des guillemets  Lorsque cette option est sélectionnée, des guillemets fermants sont automatiquement ajoutés dans le code lorsque vous insérez des guillemets ouvrants. Lorsque la case n’est pas cochée, les guillemets fermants se s’insèrent pas automatiquement si vous saisissez des guillemets ouvrants. Cette option s’applique aux guillemets simples et doubles pour tous les types de fichiers (html, php, css, js).

Définition de préférence pour remplissage automatique de codes

Vous pouvez activer et désactiver la fermeture automatique de crochets et guillemets en procédant comme suit :

  1. Ouvrez le fichier brackets.json à partir de l’emplacement suivant :

    • Win : %appdata%\Adobe\Dreamweaver CC 2018\en_US\Configuration\Brackets\
    • Mac : ~/Library/Application Support/Adobe/Dreamweaver CC 2018/en_US/Configuration/Brackets/
       
  2. Pour désactiver la fermeture automatique de crochets et parenthèses, définissez autoCloseBraces sur False.

  3. Pour désactiver l’insertion automatique des guillemets correspondants, définissez autoCloseQuotes sur False.

    Si vous souhaitez activer la fermeture automatique des crochets et des guillemets correspondants, définissez les valeurs mentionnées ci-dessus sur True.

    Définition de préférence pour remplissage automatique de code dans Dreamweaver
    Définition de préférence pour remplissage automatique de code dans Dreamweaver

  4. Enregistrez le fichier .json et lancez Dreamweaver.

Définition de préférences PHP

Vous pouvez définir l’environnement de développement du codage PHP dans lequel vous souhaitez travailler. Vous pouvez le faire sur une base spécifique au site pour différents sites sur lesquels vous travaillez, ou sur une base générale pour tous les fichiers PHP enregistrés en dehors des sites Dreamweaver.

Dreamweaver configure les conseils de code et les contrôles d’analyse Linting pour la version sélectionnée du langage PHP.

Pour définir des préférences de version de code PHP pour des fichiers non spécifiques à un site, procédez comme suit :

  1. Choisissez Édition > Préférences (Windows) ou Dreamweaver > Préférences (Mac).

  2. Définissez le langage PHP dans la liste des catégories à gauche.

  3. Choisissez une version PHP dans la liste déroulante Version PHP, puis cliquez sur Appliquer.

Pour définir la version PHP pour un site spécifique, effectuez les étapes suivantes :

  1. Dans la boîte de dialogue Configuration du site, sous Paramètres avancés, sélectionnez PHP.

  2. Choisissez une version PHP dans la liste déroulante Version PHP, puis cliquez sur Enregistrer.

    Définition des préférences PHP sur une base spécifique au site
    Définition des préférences PHP sur une base spécifique au site

Définition de thèmes de couleur et thèmes de code

En fonction de vos préférences, vous pouvez sélectionner un thème de couleur au démarrage de Dreamweaver. Cette préférence peut être modifiée à tout moment.

  1. Cliquez sur Edition > Préférences (Windows) ou Dreamweaver > Préférences (Mac).
  2. Sélectionnez la catégorie Interface dans la liste de gauche.

  3. Choisissez un thème de couleur dans la liste. 

  4. Une fois le thème de l’interface choisi, définissez le thème du code.

    Vous avez le choix entre un thème sombre ou clair.

  5. Cliquez sur Appliquer pour enregistrer les modifications.

    Vous pouvez décider de personnaliser davantage la coloration du code en fonction de vos besoins. Pour plus d’informations, consultez la section Personnalisation de la coloration du code.

Utilisation d’un éditeur externe

Vous pouvez spécifier un éditeur externe à utiliser pour l’édition de fichiers possédant des extensions précises. Par exemple, vous pouvez lancer un éditeur de texte comme BBEdit, le Bloc-notes ou TextEdit à partir de Dreamweaver pour modifier les fichiers JavaScript (JS).

Vous pouvez attribuer différents éditeurs externes pour différentes extensions de nom de fichier.

Définition d’un éditeur externe pour un type de fichier

  1. Cliquez sur Edition > Préférences.
  2. Sélectionnez la catégorie Types de fichiers/Editeurs dans la liste de gauche, puis cliquez sur OK.

    Ouvrir en mode Code

    Précise les extensions de noms de fichiers à ouvrir automatiquement en mode Code sous Dreamweaver.

    Recharger les fichiers modifiés

    Permet d’indiquer ce que Dreamweaver doit faire lorsqu’il détecte que des changements ont été apportés de l’extérieur à un document déjà ouvert sous Dreamweaver.

    Enregistrer au démarrage

    Permet d’indiquer si Dreamweaver doit systématiquement enregistrer le document actif avant de lancer l’éditeur, ne jamais enregistrer le document ou vous demander s’il doit l’enregistrer ou non à chaque lancement de l’éditeur externe.

    Fireworks

    Vous pouvez associer Fireworks à Dreamweaver en indiquant ici le chemin d’accès à l’application.

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?