Guide d'utilisation Annuler

Conseils et remplissage de code

 

 

Utilisez les fonctions de conseils et de remplissage de code de Dreamweaver pour minimiser le temps de codage.

Les fonctions de conseils et de remplissage de code de Dreamweaver vous permettent d’insérer et de modifier le code rapidement en réduisant les erreurs typographiques et d’autres erreurs fréquentes.

Vous pouvez également utiliser cette fonction pour identifier :

  • Les attributs disponibles pour une balise ;
  • Les paramètres disponibles pour une fonction ou ;
  • Les méthodes disponibles pour un objet.

Technologies et langages pris en charge

Dreamweaver prend en charge les conseils de code pour les technologies et langages suivants :

Lisez la suite pour comprendre comment fonctionnent les conseils et le remplissage de code pour ces langages.

Activation des conseils de code

Pour activer les conseils de code, cliquez sur Édition > PReferences > Conseils de code, puis sélectionnez l'option Activer les conseils de code. Pour désactiver les conseils de code, désélectionnez l'option Activer les conseils de code.

PReferences de conseils de code
PReferences de conseils de code

Pour activer l'insertion automatique des accolades et des guillemets, sélectionnez Insertion automatique d'accolades et Insertion automatique de guillemets, respectivement.

Pour activer les descriptions dans les conseils de code, sélectionnez l’option Activer les infobulles descriptives. Ainsi, vous pouvez voir les descriptions avec les conseils de code.

Conseils de code HTML

Les types de conseils de code suivants sont disponibles pour HTML :

  • Indicateurs de balise
  • Conseils de nom d’attribut
  • Conseils de valeur d’attribut

Indicateurs de balise

Appuyez sur la touche < du clavier pour commencer à saisir votre code. À mesure que vous tapez, Dreamweaver affiche les balises HTML valides. Si la chaîne que vous tapez apparaît dans le menu, sélectionnez-la et appuyez sur Entrée ou Retour pour compléter votre saisie.

Si vous tapez <, par exemple, un menu contextuel affiche une liste des noms de balises. Plutôt que de taper le reste du nom de la balise, vous pouvez la sélectionner dans le menu pour l’inclure à votre texte.

Conseils de code HTML de base
Conseils de code HTML de base

Ces indicateurs de balise HTML proposent également une brève description de la balise, le cas échéant.

Conseils de nom d’attribut

Dreamweaver affiche les attributs appropriés des balises lors du codage dans Dreamweaver. Saisissez un nom de balise et appuyez sur la barre d’espace pour afficher les noms d’attribut valides que vous pouvez utiliser.

Conseils de code de nom d’attribut
Conseils de code de nom d’attribut

Conseils de valeur d’attribut

Le texte de conseil de valeur d’attribut peut être statique ou dynamique (comme dans les valeurs d’affichage des conseils de code en fonction de ce qui est présent dans les fichiers associés).
 

La plupart des conseils de valeur d’attribut sont statiques. Prenez par exemple la valeur d’attribut cible, qui est en soi statique, et par conséquent, les conseils sont également statiques. 

Exemple de conseils de valeur d’attribut statiques
Exemple de conseils de valeur d’attribut statiques

Dreamweaver affiche les conseils de code dynamiques pour les valeurs d’attribut qui l’exigent, tels que les attributs id, target, src, href et class.

Voici quelques exemples de conseils de code affichés de façon dynamique. 

Conseils de code dynamiques pour l’attribut src

Dans cet exemple, lorsque vous rédigez l’attribut src, des valeurs d’attribut valides vous sont présentées. Quand vous sélectionnez des images, Dreamweaver affiche les images valides réelles qui se trouvent dans votre dossier Images. Vous pouvez alors effectuer un défilement vers le bas et choisir celle que vous souhaitez.

Conseils de code dynamiques pour l’attribut src
Conseils de code dynamiques pour l’attribut src

Si vous disposez d’actifs dans les bibliothèques CC, ceux-ci apparaissent également quand vous rédigez l’attribut src. Ces actifs de bibliothèques CC sont indiqués à l’aide d’une icône en forme de nuage.

Quand vous choisissez un actif de bibliothèque CC, un menu contextuel s’affiche vous permettant de rééchantillonner la taille de l’image et de modifier le format de l’image.

Notamment un actif de bibliothèque CC dans votre code
Notamment un actif de bibliothèque CC dans votre code

Remarque :

Seuls 50 actifs de bibliothèque CC peuvent être affichés dans les conseils de code. Ces conseils apparaissent par ordre alphabétique.

Remarque :

L’inclusion des actifs de bibliothèque CC à distance en code Dreamweaver n’est pas prise en charge.

Conseils de code dynamiques pour l’attribut href

Lorsque vous rédigez l’attribut href, Dreamweaver affiche une liste des fichiers de votre dossier, tout en vous permettant de parcourir et sélectionner le fichier avec lequel vous souhaitez créer un lien.

Conseils de code dynamiques pour l’attribut href
Conseils de code dynamiques pour l’attribut href

Conseils de code dynamiques pour les attributs id et style

Si vous avez défini des identificateurs dans vos fichiers CSS, quand vous saisissez l’identificateur dans vos fichiers HTML, Dreamweaver affiche tous les identificateurs disponibles.

Conseils de code dynamiques pour l’attribut id
Conseils de code dynamiques pour l’attribut id

De même, si vous avez défini des styles CSS, quand vous saisissez le style dans vos fichiers HTML, Dreamweaver affiche tous les styles disponibles.

Conseils de code dynamiques pour l’attribut style
Conseils de code dynamiques pour l’attribut style

Conseils de code CSS

Les conseils de code sont disponibles pour les différents types de CSS suivants :

  • @rules
  • Propriétés
  • Pseudo-sélecteurs et pseudo-éléments
  • Forme courte

Outre les conseils de code, des astuces sont également proposées pour les propriétés CSS.

Conseils de code pour @rules CSS

Dreamweaver affiche des conseils de code pour tous les @rules avec une description de la règle CSS comme indiqué ici.

Conseils de code CSS pour @rule
Conseils de code CSS pour @rule

Conseils pour les propriétés CSS

Lorsque vous saisissez du texte dans les propriétés CSS, lorsque vous saisissez les deux-points, des conseils de code s’affichent pour vous aider à choisir une valeur valide.

Dans l’exemple de code suivant, lorsque font-family: est saisi, des polices valides s’affichent.

Vous pouvez choisir l’une des polices, ou vous pouvez ouvrir la boîte de dialogue Gérer les polices depuis ces conseils et définir vos polices favorites. 

Conseils de code et aide pour les propriétés CSS
Conseils de code et aide pour les propriétés CSS

Les conseils de code sont, par exemple, également utiles lorsque vous travaillez avec de la couleur dans CSS. Lorsque vous saisissez du texte dans n’importe quelle propriété associée à de la couleur (telle que la couleur de la bordure ou la couleur d’arrière-plan), lorsque vous appuyez sur les deux-points, des conseils de code affichent une liste de couleurs. Vous pouvez sélectionnez une couleur de la liste, ou vous pouvez ouvrir le Sélecteur de couleurs depuis les conseils de code et définir une couleur favorite.

Conseils de code CSS pour les couleurs
Conseils de code CSS pour les couleurs

Si vous avez des nuanciers dans vos bibliothèques CC, les conseils de code affichent aussi ces nuanciers.

Les nuanciers des bibliothèques CC sont indiqués par l’icône en forme de nuage.
Les nuanciers des bibliothèques CC sont indiqués par l’icône en forme de nuage.

Remarque :

Seuls 50 actifs de bibliothèque CC peuvent être affichés dans les conseils de code. Ces conseils apparaissent par ordre alphabétique.

Conseils pour les pseudo-sélecteurs et pseudo-éléments

Vous pouvez ajouter un pseudo-sélecteur CSS à un sélecteur pour définir un état spécifique de l’élément. Par exemple, quand vous utilisez :hover, le style est appliqué dès que l’utilisateur passe la souris sur l’élément spécifié par le sélecteur.

Quand vous tapez « : », Dreamweaver affiche une liste de pseudo-sélecteurs valides si le curseur se trouve dans le contexte approprié.

Conseils de code pour les pseudo-sélecteurs
Conseils de code pour les pseudo-sélecteurs

Quand vous tapez « :: », Dreamweaver affiche une liste de pseudo-éléments valides (permettant d’appliquer un style aux parties désignées d’un élément) si le curseur se trouve dans le contexte approprié.

Conseils de code pour les pseudo-éléments
Conseils de code pour les pseudo-éléments

Conseils pour la forme courte CSS

Les propriétés en forme courte sont des propriétés CSS qui permettent de définir les valeurs de plusieurs autres propriétés CSS simultanément. Parmi les exemples de propriétés CSS en forme courte, on peut citer les propriétés d’arrière-plan et de police.

Comme illustré dans l’exemple ci-après, si vous tapez une propriété CSS en forme courte (un arrière-plan, par exemple) après avoir entré un espace, Dreamweaver affiche :

  • Les valeurs de propriété adéquates par ordre de pertinence
  • Les valeurs obligatoires qui doivent être utilisées (par exemple, si vous utilisez la propriété font, les propriétés font-size et font-family sont obligatoires)
  • La forme développée du navigateur pour cette propriété
Conseils de code pour la propriété CSS d’arrière-plan
Conseils de code pour la propriété CSS d’arrière-plan

Lorsque les propriétés CSS en forme courte sont complétées, les conseils de code affichent également les valeurs de propriété que vous avez saisies.

Astuces de code CSS

Pour certaines propriétés CSS (telles que box-shadow ou text-shadow), Dreamweaver affiche des astuces qui dévoilent les valeurs à indiquer ; il signale également les valeurs obligatoires au moyen d’un astérisque. 

Vous pouvez également voir comment le navigateur interprète le CSS.

Astuces qui s’affichent concernant les propriétés CSS
Astuces qui s’affichent concernant les propriétés CSS

Conseils de code JavaScript

Dans les fichiers JavaScript, Dreamweaver fournit des conseils de code pour les variables et les paramètres de fonction. 

Dans l’exemple ci-dessous, le fragment de code indique le type.

Conseils de code JavaScript
Conseils de code JavaScript

Dreamweaver actualise automatiquement la liste des conseils de code disponibles lorsque vous travaillez dans des fichiers JavaScript. Par exemple, si vous travaillez dans un fichier HTML principal et que vous passez à un fichier JavaScript afin d’y apporter une modification, cette modification apportée au fichier JavaScript se répercute dans la liste des conseils de code lorsque vous revenez au fichier HTML principal. 

Remarque :

Cette mise à jour automatique ne fonctionne que si vous modifiez vos fichiers JavaScript sous Dreamweaver.

Inspection d’objet en direct

Dreamweaver actualise automatiquement les conseils de code de type JavaScript.

Par exemple, si vous avez défini une variable sous forme de nombre, Dreamweaver mémorise cette information. Par la suite, lorsque vous faites référence à cette variable dans votre code, il indique son type.

Si vous changez le type de la variable (en chaîne, par exemple), les conseils de code de Dreamweaver indiquent automatiquement que la variable est une chaîne.

Conseil de code indiquant le type de variable
Conseil de code indiquant le type de variable

Intégration dynamique de la documentation

Si vous avez ajouté des commentaires concernant une fonction spécifique, dès que cette fonction fait l’objet d’un conseil, Dreamweaver affiche également les informations connexes à son sujet. 

Conseils de code PHP

Dreamweaver prend en charge les conseils de code pour les versions 5.6 et 7.1 de PHP. Ces conseils de code PHP sont spécifiques au site et couvrent toutes les fonctions, classes et constantes de base.

Pour plus d’informations sur PHP 5.6 et 7.1, consultez le Manuel PHP.

Pour plus d’informations sur les conseils de code spécifiques au site, consultez la section Conseils de code spécifiques au site.

Une fonctionnalité utile des conseils de code PHP est l’auto-complétion des variables.

Lorsque vous saisissez le signe dollar ($), une liste de toutes les variables dans votre script actif s’affiche. Choisissez celle qui vous intéresse, puis appuyez sur la touche Entrée/Retour. Les variables des fichiers associés sont également répertoriées, ce qui permet d’éviter de réutiliser la même variable dans un autre but.

Lorsque PHP 7.1 est défini comme code par défaut, Dreamweaver affiche des conseils de code spécifiques à PHP 7.1.

Conseils de code PHP 7
Conseils de code PHP 7

Exemple de conseils de code d’objet PHP
Exemple de conseils de code d’objet PHP

Modification des paramètres de délai pour les conseils de code PHP

Pour améliorer les performances de saisie du code dans des fichiers .php, Dreamweaver 2017.5 et versions ultérieures présente un délai supplémentaire pour les conseils de code PHP. Lorsque vous saisissez du code PHP, Dreamweaver affiche les conseils après un délai de 400 ms. Si vous souhaitez modifier les paramètres de délai pour le code PHP, suivez cette procédure : 

  1. Quittez Dreamweaver.

  2. Ouvrez brackets.json à partir de l’emplacement suivant, à l’aide d’un éditeur de texte :

    • Win : %appdata%\Adobe\Dreamweaver CC 2017\<locale>\Configuration\Brackets\
    • macOS : ~/Library/Application Support/Adobe/Dreamweaver CC 2017/<locale>/Configuration/Brackets/
  3. Cliquez sur le bouton Enregistrer la structure dans l’angle supérieur droit de la boîte de dialogue.

    Dans le fichier JSON, ajoutez une virgule après la paire nom/valeur.

    Ajoutez la ligne suivante avec votre délai préféré en millisecondes : "delayInPHPHint": <délai en millisecondes>. Par exemple, "delayInPHPHint": 200.

  4. Enregistrez le fichier et lancez Dreamweaver.

Conseils de code spécifiques au site

Dreamweaver permet aux développeurs qui emploient Joomla, Drupal, Wordpress ou d’autres cadres de visualiser les conseils de code PHP lorsqu’ils écrivent en mode Code. Pour afficher ces conseils de code, vous devez tout d’abord créer un fichier de configuration à l’aide de la boîte de dialogue Conseils de code spécifiques au site. La configuration indique où Dreamweaver doit rechercher les conseils de code spécifiques à votre site.

Vous trouverez un tutoriel vidéo sur l’utilisation des conseils de code spécifiques au site à l’adresse www.adobe.com/go/learn_dw_comm13_fr.

Création du fichier de configuration

La boîte de dialogue Conseils de code spécifiques au site permet de créer le fichier de configuration requis pour afficher les conseils de code dans Dreamweaver.

Par défaut, Dreamweaver place le fichier de configuration dans le répertoire Adobe Dreamweaver CS5\configuration\Shared\Dinamico\Presets.

Remarque :

Les conseils de code que vous créez sont spécifiques au site sélectionné dans le panneau Fichiers de Dreamweaver. Pour que les conseils de code puissent être affichés, la page sur laquelle vous travaillez doit se trouver dans le site actuellement sélectionné.

  1. Sélectionnez Site > Options du site > Conseils de code spécifiques au site.

    Par défaut, la fonctionnalité Conseils de code spécifiques au site analyse votre site afin de déterminer quel cadre CMS (système de gestion du contenu) vous employez. Par défaut, Dreamweaver prend en charge trois cadres : Drupal, Joomla et Wordpress.

    Les quatre boutons à droite du menu Structure permettent d’importer, enregistrer, renommer ou supprimer des structures de cadre.

    Remarque :

    Il est impossible de supprimer ou de renommer les structures de cadre par défaut existantes.

  2. Dans la zone Sous-racine, définissez le dossier de sous-racine où vous stockez les fichiers de votre cadre. Vous pouvez cliquer sur l’icône de dossier en regard de la zone de texte pour rechercher l’emplacement des fichiers de cadre.

    Dreamweaver affiche l’arborescence des dossiers contenant les fichiers de votre cadre. Si les dossiers et les fichiers à analyser sont tous affichés, cliquez sur OK pour exécuter l’analyse. Si vous voulez personnaliser l’analyse, passez aux étapes suivantes.

  3. Cliquez sur le bouton Plus (+) dans le haut de la fenêtre Fichiers afin de sélectionner un fichier ou un dossier à ajouter à l’analyse. Dans la boîte de dialogue Ajouter fichier/dossier, vous pouvez spécifier les extensions de nom de fichier spécifiques que vous souhaitez inclure.

    Remarque :

    Spécifiez une extension de nom de fichier spécifique pour accélérer le processus d’analyse.

  4. Pour retirer des fichiers de l’analyse, sélectionnez-les puis cliquez sur le bouton Moins (-) dans le haut de la fenêtre Fichiers.

    Remarque :

    Si vous avez sélectionné le cadre Drupal ou Joomla, la boîte de dialogue Conseils de code spécifiques au site affiche un chemin d’accès supplémentaire vers un fichier dans votre dossier de configuration de Dreamweaver.

    Ne le supprimez pas, car il est nécessaire en cas d’emploi de ces cadres.

  5. Pour personnaliser la façon dont la fonctionnalité Conseils de code spécifiques au site traite un fichier ou un dossier précis, sélectionnez-le dans la liste et effectuez l’une des actions suivantes :

    • Choisissez Analyser ce dossier pour inclure le dossier sélectionné dans l’analyse.
    • Sélectionnez Récursif pour inclure tous les fichiers et dossiers du répertoire sélectionné.
    • Cliquez sur le bouton Extensions pour ouvrir la boîte de dialogue Rechercher des extensions, où vous pouvez préciser les extensions de nom de fichier à inclure dans l’analyse pour un fichier ou un dossier déterminé.

Enregistrement de la structure du site

Vous pouvez enregistrer la structure de site personnalisée que vous avez créée dans la boîte de dialogue Conseils de code spécifiques au site.

  1. Quittez Dreamweaver.

  2. Texte de l’étape
  3. Créez la structure des fichiers et des dossiers désirée, en ajoutant et supprimant des fichiers et dossiers selon vos besoins.

  4. Donnez un nom à la structure du site, puis cliquez sur Enregistrer.

Remarque :

Si le nom que vous indiquez est déjà utilisé, Dreamweaver vous invite à entrer un autre nom ou à confirmer que vous souhaitez écraser la structure portant ce même nom. Il est impossible d’écraser les structures de cadre par défaut.

Modification du nom d’une structure de site

Lorsque vous renommez la structure de votre site, n’oubliez pas que vous ne pouvez pas utiliser les noms d’une des trois structures de cadre de site par défaut, ni le mot « custom » (personnalisé).

  1. Affichez la structure à renommer.

  2. Cliquez sur l’icône Renommer la structure dans le coin supérieur droit de la boîte de dialogue.

  3. Entrez le nouveau nom de la structure, puis cliquez sur Renommer.

Remarque :

Si le nom que vous indiquez est déjà utilisé, Dreamweaver vous invite à entrer un nom différent ou à confirmer que vous voulez écraser la structure portant ce même nom. Il est impossible d’écraser les structures de cadre par défaut.

Ajout de fichiers ou de dossiers à la structure d’un site

Vous pouvez ajouter n’importe quel fichier ou dossier associé à votre cadre. Après avoir ajouté des fichiers ou des dossiers, vous pouvez alors indiquer les extensions de nom de fichier des fichiers que vous souhaitez analyser. 

  1. Cliquez sur le bouton Plus (+) dans le haut de la fenêtre Fichiers pour ouvrir la boîte de dialogue Ajouter fichier/dossier.

  2. Dans la zone Ajouter fichier/dossier, entrez le chemin d’accès au fichier ou au dossier à ajouter. Vous pouvez également cliquer sur l’icône de dossier à côté de la zone de texte pour rechercher un fichier ou un dossier.

  3. Cliquez sur le bouton Plus (+) dans le haut de la fenêtre Extensions pour préciser les extensions de nom de fichier à analyser.

    Remarque :

    Spécifiez une extension de nom de fichier spécifique pour accélérer le processus d’analyse.

  4. Cliquez sur Ajouter.

Recherche d’extensions de nom de fichier dans un site

Utilisez la boîte de dialogue Rechercher des extensions pour afficher et modifier les extensions de nom de fichier incluses dans la structure du site.

  1. Dans la boîte de dialogue Conseils de code spécifiques au site, cliquez sur le bouton Extensions.

    La boîte de dialogue Rechercher des extensions affiche les extensions pouvant être analysées pour l’instant.

  2. Pour ajouter une autre extension à la liste, cliquez sur le bouton Plus (+) dans le haut de la fenêtre Extensions.

  3. Pour supprimer une extension de la liste, cliquez sur le bouton Moins (-).

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?