PDF (adobe.com)

Utilisation des indicateurs de code



Les indicateurs de code vous permettent d'insérer et de modifier le code rapidement et sans erreur de saisie. A mesure que vous tapez des caractères en mode Code, une liste de suggestions s'affiche et vous aide à compléter votre saisie. Par exemple, lorsque vous tapez les premiers caractères du nom d'une balise, d'un attribut ou d'une propriété CSS, une liste d'options dont le nom commence par ces caractères s'affiche. Cette fonctionnalité facilite l'insertion et la modification de code. Vous pouvez également l'utiliser pour consulter les attributs disponibles pour une balise, les paramètres d'une fonction ou les méthodes d'un objet.

Les indicateurs de code sont disponibles pour différents types de code. Lorsque vous tapez le premier caractère d'un type de code précis, une liste de suggestions s'affiche. Par exemple, pour afficher la liste des indicateurs de code pour les noms de balises HTML, tapez un crochet ouvrant (<). De même, pour afficher des indicateurs de code pour JavaScript, tapez un point après un objet.

Pour exploiter pleinement cette fonctionnalité, en particulier lorsque vous l'utilisez pour des fonctions et des objets, définissez l'option Délai de la boîte de dialogue Préférences d'indicateurs de code sur 0 seconde.

La fonctionnalité d'indicateurs de code reconnaît également les classes JavaScript personnalisées qui ne sont pas intégrées à ce langage. Vous pouvez rédiger ces classes personnalisées ou les ajouter par l'intermédiaire de bibliothèques de fournisseurs tiers, comme Prototype.

Pour faire disparaître la liste des indicateurs de code, appuyez sur la touche Retour arrière (Windows) ou Arrière (Macintosh).

Vous trouverez un didacticiel vidéo sur les conseils de code à l'adresse www.adobe.com/go/lrvid4048_dw_fr.

Langages et technologies pris en charge

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

  • HTML

  • CSS

  • DOM (Document Object Model)

  • JavaScript (avec indicateurs de code pour les classes personnalisées)

  • Ajax

  • Spry

  • Adobe ColdFusion

  • JSP

  • PHP MySQL

  • ASP JavaScript

  • ASP VBScript

  • ASP.NET C#

  • ASP.NET VB

Affichage d'un menu d'indicateurs de code

Le menu d'indicateurs de code s'affiche automatiquement lorsque vous tapez en mode Code. Vous pouvez également l'afficher manuellement, sans taper.

  1. En mode Code (Fenêtre > Code), placez le point d'insertion à l'intérieur d'une balise.
  2. Appuyez sur Ctrl + Barre d'espace.

Insertion de code à l'aide des indicateurs en mode Code

  1. Saisissez le premier caractère du segment de code. Par exemple, pour insérer une balise, tapez un crochet ouvrant (<). Pour insérer un attribut, placez le point d'insertion juste après le nom de la balise, puis appuyez sur la barre d'espace.

    Une liste d'éléments (par exemple les noms des différentes balises ou des différents attributs) s'affiche.

    Vous pouvez fermer cette liste à tout moment en appuyant sur la touche Echap.
  2. Faites défiler les éléments de la liste à l'aide de la barre de défilement ou des touches fléchées vers le haut et vers le bas.
  3. Double-cliquez sur l'un des éléments de cette liste pour l'insérer ; vous pouvez également le sélectionner, puis appuyer sur la touche Entrée (Windows) ou Retour (Macintosh).
    Si vous avez créé un style CSS et que celui-ci ne figure pas dans la liste des indicateurs de code correspondant aux styles CSS, cliquez sur Actualiser la liste des styles. Si le mode Création est visible, il peut arriver que du code non valide s'y affiche provisoirement lorsque vous cliquez sur Actualiser la liste des styles. Pour faire disparaître ce code non valide du mode Création, appuyez sur F5 afin d'actualiser l'affichage après l'insertion du style.
  4. Pour insérer une balise de fin, tapez </ (barre oblique).
    Remarque : Par défaut, Dreamweaver détermine le moment où une balise de fermeture est requise et l'insère automatiquement. Vous pouvez modifier ce comportement par défaut, de façon à ce que Dreamweaver insère une balise de fermeture lorsque vous avez tapé le crochet fermant (>) final de la balise d'ouverture. Alternativement, le comportement par défaut peut consister à ne pas insérer la moindre balise de fermeture. Sélectionnez Edition > Préférences > Indicateurs de code, puis sélectionnez l'une des options de Balises de fermeture.

Modification d'une balise à l'aide des indicateurs de code

  • Pour remplacer un attribut par un autre, supprimez l'attribut concerné et sa valeur, puis ajoutez le nouvel attribut et la valeur associée en suivant la procédure ci-avant.

  • Pour modifier une valeur, supprimez la valeur concernée, puis ajoutez une nouvelle valeur en suivant la procédure ci-avant.

Actualisation des indicateurs de code JavaScript

Dreamweaver actualise automatiquement la liste des indicateurs de code disponibles lorsque vous travaillez dans un fichier JavaScript. Par exemple, supposons que vous travailliez dans un fichier HTML principal et que vous passiez à un fichier JavaScript afin d'y apporter une modification. Cette modification se répercute dans la liste des indicateurs de code lorsque vous revenez au fichier HTML principal. Toutefois, la mise à jour automatique ne fonctionne que si vous modifiez vos fichiers JavaScript dans Dreamweaver.

Si vous les modifiez en dehors de Dreamweaver, appuyez sur CTRL+point pour actualiser les indicateurs de code JavaScript.

Indicateurs de code et erreurs de syntaxe

Il peut arriver que les indicateurs de code ne fonctionnent pas correctement si Dreamweaver détecte des erreurs de syntaxe dans votre code. Dreamweaver signale les erreurs de syntaxe en affichant des informations à leur sujet dans une barre en haut de la page. La barre d'informations sur les erreurs de syntaxe affiche la première ligne du code où Dreamweaver a rencontré l'erreur. Lorsque vous avez corrigé les erreurs, Dreamweaver continue à afficher celles qui surviennent par la suite.

Dreamweaver fournit une assistance supplémentaire en mettant en rouge les numéros des lignes où des erreurs de syntaxe se sont produites. Cette mise en évidence est visible dans le mode Code du fichier contenant l'erreur.

Dreamweaver affiche non seulement les erreurs de syntaxe pour la page actuelle, mais aussi pour les pages associées. Supposons par exemple que vous travailliez sur une page HTML utilisant un fichier JavaScript inclus. Si le fichier inclus contient une erreur, Dreamweaver affiche également une alerte pour celui-ci. Vous pouvez aisément ouvrir le fichier associé contenant l'erreur en cliquant sur son nom dans le haut du document.

Vous pouvez désactiver la barre d'informations sur les erreurs de syntaxe. Pour ce faire, cliquez sur le bouton Alertes d'erreurs de syntaxe dans la barre d'outils de codage.

Définition des préférences d'indicateurs de code

Vous pouvez modifier les paramètres par défaut des indicateurs de code. Par exemple, si vous ne voulez pas afficher les noms des propriétés CSS ou les indicateurs de code Spry, vous pouvez les désactiver parmi les préférences des indicateurs de code. Vous pouvez également définir des préférences relatives au délai d'affichage des indicateurs de code et aux balises de fermeture.

Même si l'affichage des indicateurs de code est désactivé, vous pouvez afficher un indicateur en mode Code en appuyant sur les touches Ctrl+Barre d'espace.
  1. Choisissez Edition > Préférences.
  2. Sélectionnez la catégorie Indicateurs de code dans la liste de gauche.
  3. Parmi les options suivantes, définissez celles de votre choix :
    Balises de fermeture
    Permet de spécifier le mode d'insertion des balises de fermeture par Dreamweaver. Par défaut, Dreamweaver insère la balise de fermeture automatiquement lorsque vous tapez les caractères </. Vous pouvez modifier ce comportement par défaut, de façon à ce que Dreamweaver insère une balise de fermeture suite au crochet fermant (>) de la balise d'ouverture, ou de façon à omettre les balises de fin.

    Activer les indicateurs de code
    Entraîne l'affichage des indicateurs de code lorsque vous entrez du code en mode Code. Réglez le curseur Délai pour définir le délai (en secondes) qui s'écoule avant l'apparition des indicateurs appropriés.

    Menus
    Définit précisément le type d'indicateurs de code à afficher pendant la saisie. Libre à vous d'utiliser tous les menus ou une partie seulement.