Conseils et remplissage de code

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.

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

• HTML
• CSS
• JavaScript 
• PHP

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.

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.

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

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.

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.

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

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

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.

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

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é.

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 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é

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.

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.

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. 

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.

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.

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 : 

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.

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.

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

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. 

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.