Modification de code en mode Création.

Dernière mise à jour le 27 avr. 2021

Utilisez cette rubrique pour savoir comment utiliser l’inspecteur Propriétés pour modifier le code en mode Création sous Adobe Dreamweaver.

Dreamweaver vous permet de créer et de modifier visuellement des pages web sans vous préoccuper du code source sous-jacent, mais il arrive parfois que vous deviez modifier le code pour un contrôle plus précis ou pour dépanner votre page web.Dreamweaver vous permet de modifier du code tout en travaillant en mode Création.

Cette section est conçue pour les personnes qui préfèrent travailler en mode Création, mais qui souhaitent également un accès rapide au code.

Sélection de balises enfants en mode Création

Si vous sélectionnez un objet en mode Création qui contient des balises enfant (par exemple, un tableau HTML), vous pouvez rapidement sélectionner la première balise enfant de cet objet en choisissant Édition > Sélectionner l'enfant.

Annotation

Cette commande est disponible uniquement en mode Création.

Par exemple, la balise <table> a normalement des balises enfant <tr>. Si vous sélectionnez une balise <table> dans le sélecteur de balises, vous pouvez sélectionner la première ligne du tableau en choisissant Édition > Sélectionner l'enfant. Dreamweaver sélectionne la première balise <tr> dans le sélecteur de balises. Étant donné que la balise <tr> a elle-même des balises enfant, à savoir des balises <td>, choisir Édition > Sélectionner l'enfant à nouveau sélectionne la première cellule du tableau.

Modification de code avec l’inspecteur Propriétés

Vous pouvez utiliser l'inspecteur de propriétés pour inspecter et modifier les attributs du texte ou des objets sur votre page. Les propriétés affichées dans l'inspecteur de propriétés correspondent généralement aux attributs des balises ; modifier une propriété dans l'inspecteur de propriétés a généralement le même effet que de modifier l'attribut correspondant en mode Code.

Annotation

L'inspecteur de balises et l'inspecteur de propriétés vous permettent tous deux d'afficher et de modifier les attributs d'une balise. L'inspecteur de balises vous permet d'afficher et de modifier tous les attributs associés à une balise donnée. L'inspecteur de propriétés affiche uniquement les attributs les plus courants, mais fournit un ensemble plus riche de contrôles pour modifier les valeurs de ces attributs, et vous permet de modifier certains objets (comme les colonnes de tableau) qui ne correspondent pas à des balises spécifiques.

Cliquez sur le texte ou sélectionnez un objet dans la page.

L'inspecteur de propriétés pour le texte ou l'objet apparaît sous la fenêtre de document. Si l'inspecteur de propriétés n'est pas visible, sélectionnez Fenêtre > Propriétés.

Utilisez l’inspecteur Propriétés pour modifier vos attributs.

Modification de code CFML avec l’inspecteur Propriétés

Utilisez l'inspecteur de propriétés pour inspecter et modifier le balisage ColdFusion en mode Création.

Dans l'inspecteur de propriétés, cliquez sur le bouton Attributs pour modifier les attributs de la balise ou pour en ajouter de nouveaux.
Si la balise contient du contenu entre ses balises d'ouverture et de fermeture, cliquez sur le bouton Contenu pour modifier le contenu.

Le bouton Contenu apparaît uniquement si la balise sélectionnée n'est pas une balise vide (c'est-à-dire si elle a à la fois une balise d'ouverture et de fermeture).

Si la balise contient une expression conditionnelle, apportez les modifications à celle-ci dans la zone Expression.

Présentation de Quick Tag Editor

Vous utilisez l'éditeur de balises rapide pour inspecter, insérer et modifier rapidement des balises HTML sans quitter le mode Création.

Si vous saisissez du HTML non valide dans l'éditeur de balises rapide, Dreamweaver tente de le corriger pour vous en insérant des guillemets fermants et des crochets angulaires fermants là où c'est nécessaire.

Pour définir les options de l'éditeur de balises rapide, ouvrez l'éditeur de balises rapide en appuyant sur Contrôle+T (Windows) ou Commande+T (Macintosh).

Quick Tag Editor comporte trois modes :

  • Insérer HTML, qui permet d’insérer de nouveaux éléments de code HTML ;
  • Modifier la balise, qui permet de modifier une balise existante ;
  • Insérer HTML, qui permet d'insérer de nouveaux éléments de code HTML ;

  • Modifier la balise, qui permet de modifier une balise existante ;

  • Envelopper avec balise, qui permet d'insérer une nouvelle balise de part et d'autre d'une sélection.

Annotation

Le mode dans lequel s'ouvre Quick Tag Editor dépend de la sélection en cours en mode Création.

Dans les trois modes, le fonctionnement de base de Quick Tag Editor reste le même : ouvrez l’éditeur, saisissez ou modifiez des balises et des attributs, puis fermez l’éditeur.

Lorsque Quick Tag Editor est actif, vous pouvez passer d’un mode à l’autre en appuyant sur Ctrl+T (Windows) ou Cmd+T (Macintosh).  

Modification de code avec Quick Tag Editor

Utilisez Quick Tag Editor ( Modifier > Quick Tag Editor) pour insérer et modifier rapidement des balises HTML sans quitter le mode Création.

Insertion d’une balise HTML

En vue Création, cliquez dans la page pour placer le point d'insertion à l'endroit où vous souhaitez insérer du code.
Appuyez sur Ctrl+T (Windows) ou Cmd+T (Macintosh).

Quick Tag Editor s’ouvre en mode Insérer HTML.

Quick Tag Editor en mode Insérer HTML.
Quick Tag Editor en mode Insérer HTML.

Saisissez la balise HTML, puis appuyez sur Entrée.

La balise est insérée dans votre code, avec une balise de fermeture correspondante le cas échéant.

Appuyez sur la touche Echap pour quitter Quick Tag Editor sans apporter aucun changement.

Modification d’une balise HTML

Sélectionnez un objet en mode Création.

Vous pouvez également sélectionner la balise que vous souhaitez modifier à partir du sélecteur de balise au bas de la fenêtre Document. Pour plus d'informations, consultez Modifier le code avec le sélecteur de balise.

Appuyez sur Ctrl+T (Windows) ou Cmd+T (Macintosh).

Quick Tag Editor s’ouvre en mode Modifier la balise.

Entrez de nouveaux attributs, modifiez les attributs existants ou modifiez le nom de la balise.
Appuyez sur Tab pour passer d'un attribut au suivant ; appuyez sur Maj+Tab pour revenir en arrière.
Annotation

Par défaut, les modifications sont appliquées au document lorsque vous appuyez sur Tab ou Maj+Tab.

Pour fermer l'Éditeur de balise rapide et appliquer toutes les modifications, appuyez sur Entrée.
Pour quitter Quick Tag Editor sans apporter d’autres changements, appuyez sur Echap.

Entourer la sélection actuelle de balises HTML

Sélectionnez du texte non formaté ou un objet en mode Création.
Annotation

Si vous sélectionnez une chaîne de texte ou un objet comportant une balise HTML d’ouverture ou de fermeture, Quick Tag Editor s’affiche en mode Modifier la balise et non en mode de balise enveloppante.

Appuyez sur Ctrl+T (Windows) ou Cmd+T (Macintosh), ou cliquez sur le bouton Éditeur de balise rapide dans l'Inspecteur Propriétés.

Quick Tag Editor s’ouvre en mode Envelopper avec balise.

Entrez une seule balise ouvrante, telle que strong, et appuyez sur Entrée (Windows) ou Retour (Macintosh).

La balise est insérée au début de la sélection actuelle, et une balise fermante correspondante est insérée à la fin.

Pour quitter Quick Tag Editor sans apporter de changements, appuyez sur Echap.

Utiliser le menu des conseils dans l'Éditeur de balise rapide

L'Éditeur de balise rapide inclut un menu de conseil d'attributs qui répertorie tous les attributs valides de la balise que vous modifiez ou insérez.

Vous pouvez également désactiver le menu des conseils ou ajuster le délai avant l'apparition du menu dans l'Éditeur de balise rapide.

Pour voir un menu de conseils qui répertorie les attributs valides pour une balise, marquez une pause brève lors de la modification d'un nom d'attribut dans l'Éditeur de balise rapide. Un menu de conseils apparaît, répertoriant tous les attributs valides pour la balise que vous modifiez.

De même, pour voir un menu de conseils répertoriant les noms de balises valides, marquez une pause brève lors de la saisie ou de la modification d'un nom de balise dans l'Éditeur de balise rapide.

Annotation

Les préférences de conseil de code de l'Éditeur de balise rapide sont contrôlées par les préférences normales de conseil de code. Pour plus d'informations, consultez Définir les préférences d'aide au code.

Effectuez l’une des tâches suivantes :
  • Commencez la saisie d'une balise ou d'un attribut. La sélection dans le menu d'aide à la saisie de code passe au premier élément qui commence par les lettres que vous avez saisies.

  • Appuyez sur les touches fléchées Haut et Bas de votre clavier pour sélectionner un élément.

  • Recherchez un élément à l'aide de la barre de défilement.

Appuyez sur Entrée pour insérer l'élément sélectionné, ou double-cliquez sur un élément pour l'insérer.
Pour fermer le menu des conseils sans insérer d'élément, appuyez sur Échap ou continuez à taper.

Désactiver le menu des conseils ou modifier le délai avant qu'il apparaisse

Sélectionnez Édition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh) et sélectionnez Conseils de code.

La boîte de dialogue Préférences de conseil de code s’affiche.

Pour désactiver le menu des conseils, désélectionnez l'option Activer les conseils de code.

Modification de code à l’aide du sélecteur de balises

Vous pouvez utiliser le sélecteur de balises pour sélectionner, modifier ou supprimer les balises sans quitter le mode Création. Le sélecteur de balises se trouve dans la barre d'état en bas de la fenêtre de document, et présente une série de balises.

Modification ou suppression d’une balise

Cliquez dans le document.

Les balises qui s'appliquent au point d'insertion apparaissent dans le sélecteur de balises.

Cliquez avec le bouton droit de la souris (Windows) ou cliquez en maintenant la touche Contrôle enfoncée (Macintosh) sur une balise dans le sélecteur de balises.
Pour modifier une balise, choisissez Modifier la balise dans le menu. Apportez vos modifications dans l'éditeur de balises rapide. Pour plus d'informations, consultez Modifier le code avec l'éditeur de balises rapide.
Pour supprimer une balise, choisissez Supprimer la balise dans le menu.

Sélectionner un objet correspondant à une balise

Cliquez dans le document.

Les balises qui s'appliquent au point d'insertion apparaissent dans le sélecteur de balises.

Cliquez sur une balise dans le sélecteur de balises.

L’objet représenté par la balise est sélectionné sur la page.

Annotation

Utilisez cette technique pour sélectionner des lignes de tableau individuelles (balises tr) ou des cellules (balises td).

Écrire et modifier des scripts en mode Création

Vous pouvez utiliser des scripts JavaScript et VBScript côté client dans les modes Code et Création, des façons suivantes :

  • Écrire un script JavaScript ou VBScript pour votre page sans quitter le mode Création.

  • Créer un lien dans votre document vers un fichier de script externe sans quitter le mode Création.

  • Modifier un script sans quitter le mode Création.

    Avant de commencer, sélectionnez Affichage > Aides visuelles > Éléments invisibles pour vous assurer que les marqueurs de script apparaissent sur la page.

Rédaction d’un script côté client

Placez le point d'insertion à l'endroit où vous souhaitez insérer le script.

Sélectionnez Insérer > HTML > Script.

Sélectionnez le script dans la fenêtre de sélection de fichiers.

Annotation

Vous n'avez pas besoin d'inclure les balises de script d'ouverture et de fermeture.

La balise de script pour le fichier sélectionné est insérée dans le document.

Modification d’un script

Sélectionnez le marqueur de script.
Dans l’inspecteur Propriétés, cliquez sur le bouton Édition.

Le script s’affiche dans la boîte de dialogue Propriétés du script.

Si vous avez créé un lien vers un fichier de script externe, le fichier s'ouvre en mode Code, où vous pouvez apporter vos modifications.

Annotation

S'il y a du code entre les balises de script, la boîte de dialogue Propriétés du script s'ouvre même s'il y a également un lien vers un fichier de script externe.

Dans la zone Langue, spécifiez JavaScript ou VBScript en tant que langage du script.
Dans le menu déroulant Type, spécifiez le type de script, soit côté client, soit côté serveur.
(Facultatif) Dans la zone Source, spécifiez un fichier de script lié en externe.

Cliquez sur l’icône de dossier ou sur le bouton Parcourir pour rechercher le fichier, ou entrez le chemin d’accès.

Modifiez le script, puis cliquez sur OK.

Modifier des scripts ASP côté serveur en mode Création

Utilisez l'inspecteur de propriétés de script ASP pour inspecter et modifier des scripts ASP côté serveur en mode Création.

En mode Création, sélectionnez l'icône visuelle de la balise server-language.
Dans l'inspecteur de propriétés de script ASP, cliquez sur le bouton Modifier.
Modifiez le script ASP côté serveur, puis cliquez sur OK.

Modifier des scripts sur la page en utilisant l'inspecteur de propriétés

Dans l'inspecteur de propriétés, sélectionnez le langage de scripting dans le menu contextuel Langue, ou saisissez un nom de langue dans la zone Langue.
Annotation

Si vous utilisez JavaScript et n'êtes pas sûr de la version, sélectionnez JavaScript plutôt que JavaScript1.1 ou JavaScript1.2.

Dans le menu contextuel Type, spécifiez le type de Script, soit côté client soit côté serveur.

(Facultatif) Dans la zone Source, indiquez un fichier de script externe lié. Tapez le chemin d’accès ou cliquez sur l’icône du dossier pour sélectionner le fichier.

Cliquez sur Modifier pour modifier le script.

Utilisation de comportements JavaScript

Vous pouvez facilement associer des comportements JavaScript (côté client) aux éléments de page en utilisant l'onglet Comportements de l'inspecteur de balises.Pour plus d'informations, consultez Application de comportements JavaScript intégrés Dreamweaver.