Création d'une région modifiable InContext Editing

Une région modifiable InContext Editing est une paire de balises HTML dont la balise d'ouverture contient l'attribut ice:editable. La région modifiable définit une zone de la page qu'un utilisateur peut modifier directement dans un navigateur.
Remarque : Si vous ajoutez une région modifiable InContext Editing à une page basée sur un modèle Dreamweaver, la nouvelle région modifiable InContext Editing doit se trouver à l'intérieur d'une région qui est déjà modifiable.

  1. Effectuez l'une des opérations suivantes :

    • Sélectionnez une balise div, th ou td que vous voulez transformer en région modifiable.

    • Placez le point d'insertion où vous voulez insérer une nouvelle région modifiable sur la page.

    • Sélectionnez précisément une région modifiable dans un modèle Dreamweaver (fichier DWT).

    • Sélectionnez tout autre contenu de la page que vous voulez rendre modifiable (par exemple un bloc de texte).

  2. Choisissez Insertion > InContext Editing > Créer une région modifiable.

  3. Les options à votre disposition varient en fonction de votre sélection.

    • Si vous avez sélectionné une balise div, th ou td, Dreamweaver la transforme en région modifiable sans autres opérations.

    • Si vous insérez une nouvelle région modifiable vierge, effectuez l'une des actions suivantes :

      • Choisissez Insérer une nouvelle région modifiable au point d'insertion actuel, puis cliquez sur OK. Dreamweaver insère une balise div dans votre code, en ajoutant l'attribut ice:editable à la balise d'ouverture.

      • Choisissez Transformer la balise parente en région modifiable si vous voulez que Dreamweaver fasse de la balise parente de la sélection le conteneur de la région. Seules certaines balises HTML sont transformables : div, th et td.

        Remarque : Cette seconde option n'est disponible que lorsque le nœud parent répond précisément aux critères de transformation. Par exemple, il doit s'agit d'une des balises transformables indiquées, et elle ne doit pas être confrontée à l'une des erreurs répertoriées dans la section Messages d'erreur d'InContext Editing.

    • Si vous avez sélectionné une région modifiable d'un modèle Dreamweaver, cliquez sur OK dans la boîte de dialogue Créer une région modifiable. Dreamweaver entoure la région modifiable du modèle d'une balise div qui fait office de conteneur pour la nouvelle région modifiable InContext Editing.

    • Si vous avez sélectionné un autre contenu à rendre modifiable, effectuez l'une des opérations suivantes :

      • Choisissez Entourer la sélection actuelle d'une balise DIV puis la transformer si vous voulez entourer votre sélection d'une balise div puis la transformer en région modifiable. La balise div dont Dreamweaver entoure le contenu fait office de conteneur pour la région modifiable.
        Remarque : L'ajout de balises div aux pages peut modifier le rendu de ces pages et les effets des règles CSS. Par exemple, si une règle CSS applique un cadre rouge autour des balises div, vous verrez un cadre rouge autour de votre sélection actuelle lorsque Dreamweaver l'entoure d'une balise div et la transforme. Pour éviter ce type de conflit, vous pouvez réécrire les règles CSS qui influent sur la sélection actuelle, ou annuler la transformation (Edition > Annuler), puis sélectionner et transformer une balise compatible que Dreamweaver ne doit pas entourer d'une balise div.

      • Choisissez Transformer la balise parente en région modifiable si vous voulez que Dreamweaver fasse de la balise parente de la sélection le conteneur de la région modifiable. Seules certaines balises HTML sont transformables : div, th et td.

  4. En mode Création, cliquez sur l'onglet bleu de la région modifiable afin de la sélectionner, si ce n'est pas déjà fait.
    Remarque : Si vous travaillez dans un modèle Dreamweaver, veillez à sélectionner la région modifiable InContext Editing (la région conteneur), et pas la région modifiable du modèle Dreamweaver.

  5. Activez ou désactivez des options dans l'inspecteur Propriétés Région modifiable. Ces options seront accessibles aux utilisateurs qui modifieront le contenu de la région modifiable dans un navigateur. Par exemple, si vous choisissez l'option Gras, l'utilisateur pourra mettre le texte en gras. Si vous choisissez Liste numérotée et Liste à puces, l'utilisateur pourra créer des listes numérotées et des listes à puces. Si vous choisissez Liens, l'utilisateur pourra créer des liens, et ainsi de suite. Laissez le pointeur de la souris au-dessus d'une option pour afficher une infobulle qui explique sa fonction.

  6. Enregistrez la page.

    Si c'est la première fois que vous ajoutez la fonctionnalité InContext Editing à une page, Dreamweaver vous informe qu'il ajoute des fichiers de support InContext Editing à votre site: ice.conf.js, ice.js et ide.html. N'oubliez pas de charger ces fichiers sur le serveur lors de l'envoi de la page, faute de quoi la fonctionnalité InContext Editing ne sera pas utilisable dans un navigateur.