Utilisez Dreamweaver avec Adobe Online services qui comprend BrowserLab et Business Catalyst InContext Editing.

Les services en ligne Adobe sont des applications web hébergées qui s’utilisent comme des outils de bureau traditionnels. Néanmoins, le principal avantage des services en ligne est qu’ils sont toujours actualisés, car ils sont hébergés sur le web et non sur votre ordinateur.

Dreamweaver s’intègre directement à Adobe® BrowserLab et à Adobe® Business Catalyst InContext Editing. Vous trouverez des informations sur l’utilisation de ces services dans les sections Aide qui suivent.

Dreamweaver s’intègre également aux services en ligne Adobe® CS Live (qui comprennent BrowserLab). Pour plus d’informations sur l’utilisation de CS Live, consultez la section Utilisation d’Adobe CS Live.

Pour plus d’informations sur la gestion des services en ligne Adobe, consultez le site web d’Adobe à l’adresse www.adobe.com/go/learn_creativeservices_fr.

BrowserLab

Adobe BrowserLab permet de consulter un aperçu du contenu web local depuis Dreamweaver, sans devoir au préalable le publier sur un serveur accessible publiquement. Vous pouvez consulter un aperçu des fichiers depuis votre site Dreamweaver local ou depuis un serveur distant ou d’évaluation.

Pour plus d’informations sur l’utilisation du service en ligne BrowserLab, ainsi que des renseignements sur l’utilisation de BrowserLab avec Dreamweaver, consultez www.adobe.com/go/lr_abl_fr.

Business Catalyst InContext Editing

Business Catalyst InContext Editing

Adobe Business Catalyst InContext Editing est un composant d’édition d’Adobe Business Catalyst qui permet aux utilisateurs d’apporter des modifications de contenu simples dans un navigateur web. Pour modifier une page web, il suffit à l’utilisateur d’accéder à celle-ci, de se connecter au InContext Editing et d’apporter les modifications désirées. Les options d’édition sont simples et élégantes; leur utilisation n’exige aucune connaissance préalable du code HTML ou de l’édition web.

Avant d’autoriser des utilisateurs à apporter des modifications en direct sur Internet, toutefois, vous allez utiliser Dreamweaver pour rendre vos pages HTML modifiables. Pour ce faire, définissez des régions, sur la page, dont vous autoriserez la modification par les utilisateurs. Par exemple, supposons que vous ayez défini une page d’actualité reprenant des titres et des notices qui annoncent les articles. Vous pouvez sélectionner ce contenu et le transformer en région modifiable InContext Editing, de sorte que quand un utilisateur se connecte au InContext Editing, il puisse modifier directement les titres et les notices dans son navigateur.

Dans cette , vous apprendrez comment utiliser les régions modifiables InContext Editing sous Dreamweaver. Toutefois, Adobe fournit également d’autres ressources qui vous aideront à travailler dans InContext Editing :

Pour plus d’informations sur Adobe Business Catalyst, consultez www.businesscatalyst.com.

Remarque :

Adobe AIR n’est pas compatible avec Adobe Business Catalyst InContext Editing. Si vous utilisez l’extension AIR pour Dreamweaver afin d’exporter une application contenant des régions InContext Editing, la fonctionnalité InContext Editing ne fonctionnera pas.

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 (Édition > 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.

Création d’une région répétée InContext Editing

Une région répétée InContext Editing est une paire de balises HTML dont la balise d’ouverture contient l’attribut ice:repeating. La région répétée définit une zone de la page qu’un utilisateur peut « répéter » et à laquelle il peut ajouter du contenu lorsqu’il la modifie dans un navigateur. Par exemple, si vous avez défini un titre suivi d’un paragraphe, vous pouvez transformer ces éléments en une région répétée, que l’utilisateur pourra ensuite dupliquer sur la page.

Régions répétées affichées dans une fenêtre de navigateur InContext Editing modifiable.
Régions répétées affichées dans une fenêtre de navigateur InContext Editing modifiable. La région inférieure est sélectionnée et peut être à nouveau dupliquée, supprimée ou déplacée vers le haut ou vers le bas.

L’utilisateur peut ajouter des régions répétées basées sur la région d’origine, mais vous pouvez aussi lui laisser la possibilité d’en supprimer, d’ajouter des régions tout à fait inédites (non basées sur le contenu de la région d’origine) et d’en déplacer vers le haut ou vers le bas.

Lorsque vous créez une région répétée, Dreamweaver l’entoure d’un autre conteneur, baptisé « groupe de régions répétées ». Ce conteneur (une balise div dont la balise d’ouverture comprend l’attribut ice:repeatinggroup) fait office de conteneur de toutes les régions répétées modifiables qu’un utilisateur peut ajouter au groupe. Il est impossible de déplacer des régions répétées en dehors de leurs conteneurs de groupes de régions répétées. Il est en outre déconseillé d’ajouter manuellement des balises de groupes de régions répétées à votre page. Dreamweaver les ajoute automatiquement en cas de besoin.

Remarque :

Lorsque vous créez une région répétée à partir d’une ligne de tableau (tr tag), Dreamweaver applique l’attribut du groupe de régions répétées à la balise parente (par exemple, la balise table) et n’insère pas de balise div.

Si vous travaillez sur une page contenant déjà un groupe de régions répétées et que vous tentez d’ajouter une région répétée juste après le groupe existant, Dreamweaver détecte qu’un groupe de régions répétées précède la région que vous voulez ajouter, et vous donne la possibilité d’ajouter la nouvelle région au groupe existant. Vous pouvez décider d’ajouter la nouvelle région répétée au groupe existant ou de créer un nouveau groupe de régions répétées.

Remarque :

Si vous ajoutez une région répétée InContext Editing à une page basée sur un modèle Dreamweaver, la nouvelle région répétée InContext Editing doit se trouver à l’intérieur d’une région qui est déjà modifiable.

Pour créer une région répétée sous Dreamweaver, procédez comme suit :

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

    • Sélectionnez la balise que vous voulez transformer en région répétée. Vous pouvez choisir de nombreuses balises : a, abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul, ou encore var.

    Remarque :

    Seules les balises div peuvent posséder simultanément l’attribut de région modifiable et l’attribut de région répétée.

    • Placez le point d’insertion où vous voulez insérer une nouvelle région répétée sur la page.
    • Sélectionnez précisément une région répétée dans un modèle Dreamweaver (fichier DWT).
    • Sélectionnez tout autre contenu de la page que vous voulez rendre répétée (par exemple un bloc de texte).
  2. Choisissez Insertion > InContext Editing > Créer une région répétée.

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

    • Si vous avez sélectionné une balise transformable, Dreamweaver la transforme en région répétée sans autres opérations.

    • Si vous insérez une nouvelle région répétée vierge, effectuez l’une des actions suivantes :

      • Choisissez Insérer une nouvelle région répétée au point d’insertion actuel puis cliquez sur OK.

      • Choisissez Transformer la balise parente en région répétée 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 : a, abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul et var.

    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 répétée d’un modèle Dreamweaver, cliquez sur OK dans la boîte de dialogue Créer une région répétée. Dreamweaver entoure la région répétée du modèle d’une balise div qui fait office de conteneur pour la nouvelle région répétée InContext Editing.
    • Si vous avez sélectionné un autre contenu à rendre répétable, 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 répétée. La balise div dont Dreamweaver entoure le contenu fait office de conteneur pour la région répétée.
      • Choisissez Transformer la balise parente en région répétée si vous voulez que Dreamweaver fasse de la balise parente de la sélection le conteneur de la région répétée. Seules certaines balises HTML sont transformables : a, abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul et var.
  4. En mode Création, cliquez sur l’onglet bleu de la région répétée afin de la sélectionner, si ce n’est pas déjà fait. Notez que Dreamweaver vous force en fait à sélectionner l’onglet du groupe de régions répétées. En effet, toutes les régions répétées existent dans un groupe de régions répétées, et vous devez définir les options de ces régions pour le groupe tout entier.

  5. Activez ou désactivez des options dans l’inspecteur Propriétés Groupe de régions répétées. Deux options sont disponibles : Réorganiser et Ajouter/Supprimer. Si vous activez Réorganiser, les utilisateurs pourront déplacer les régions répétées vers le haut ou vers le bas lorsqu’ils y apporteront des modifications dans un navigateur. Si vous activez Ajouter/Supprimer, les utilisateurs pourront ajouter ou supprimer des régions répétées. Les deux options sont activées par défaut, et une des deux doit toujours être activée.

  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.

Suppression d’une région

La meilleure façon de supprimer une région consiste à utiliser son inspecteur Propriétés. Vous êtes ainsi assuré de supprimer tout le code associé à la région.

  1. Sélectionnez une région modifiable, une région répétée ou un groupe de régions répétées.

  2. Dans l’inspecteur Propriétés de la région, cliquez sur le bouton Supprimer la région.

Définition de classes CSS pour le formatage

La fonctionnalité Gestion des classes CSS disponibles d’InContext Editing est obsolète depuis Dreamweaver CS5.

Messages d’erreur d’InContext Editing

Impossible d’appliquer InContext Editing aux balises contenant des balises de script ou des blocs de code côté serveur.

Si votre sélection contient du code côté serveur, Dreamweaver ne vous autorise pas à la transformer en région modifiable ou répétée. Ce problème est lié à la manière dont InContext Editing enregistre les pages modifiables lorsque l’utilisateur travaille dans le navigateur. Lorsqu’un utilisateur enregistre la page après l’avoir modifiée, InContext Editing supprime le code côté serveur de la région.

La sélection actuelle ne peut pas être transformée ou entourée d’une balise DIV, car le nœud parent n’autorise pas DIV comme balise enfant.

Lorsqu’il est impossible de transformer directement la sélection que vous voulez transformer sur votre page, Dreamweaver doit entourer cette sélection de balises div qui feront office de conteneur pour votre nouvelle région modifiable ou répétée. C’est la raison pour laquelle les balises parentes de ce que vous voulez transformer doivent accepter les balises div comme enfants. Si la balise parente de la balise que vous tentez de transformer n’accepte pas les balises div enfants, Dreamweaver ne vous autorise pas à exécuter la transformation.

La sélection actuelle contient déjà une région modifiable ou se trouve à l’intérieur d’une telle région. Les régions modifiables imbriquées ne sont pas autorisées.

Si votre sélection se trouve dans une région modifiable, ou si une région modifiable se trouve à l’intérieur de la sélection, Dreamweaver ne vous autorise pas à exécuter la transformation. InContext Editing ne prend pas en charge les régions modifiables imbriquées.

Les régions modifiables ne doivent pas contenir de régions répétées ou de groupes de régions répétées.

Les régions modifiables InContext Editing ne peuvent pas contenir d’autres fonctionnalités InContext Editing. Si vous tentez d’ajouter une région répétée ou un groupe de régions répétées à une région modifiable, Dreamweaver ne vous autorise pas à exécuter la transformation.

Les régions répétées ne doivent pas se trouver dans des régions modifiables ou contenir des groupes de régions répétées.

Les régions modifiables InContext Editing ne peuvent pas contenir d’autres fonctionnalités InContext Editing. Si vous tentez d’ajouter une région répétée ou un groupe de régions répétées à une région modifiable, Dreamweaver ne vous autorise pas à exécuter la transformation. En outre, Dreamweaver ne transforme pas un élément en région modifiable ou répétée s’il contient déjà un groupe de régions répétées.

La sélection actuelle contient déjà une région répétée ou se trouve à l’intérieur d’une telle région. Les régions répétées imbriquées ne sont pas autorisées.

Si votre sélection se trouve dans une région répétée, ou si une région répétée se trouve à l’intérieur de la sélection, Dreamweaver ne vous autorise pas à exécuter la transformation. InContext Editing ne prend pas en charge les régions répétées imbriquées.

La sélection doit contenir précisément une région modifiable/répétée de modèle Dreamweaver ou se trouver dans n’importe quelle région modifiable/répétée de modèle Dreamweaver.

Lorsque vous travaillez avec des fichiers de modèle Dreamweaver (fichiers .dwt), vous devez respecter certaines règles. Pour transformer une région modifiable/répétée d’un modèle en une région modifiable/répétée InContext Editing, vous devez sélectionner précisément une région modifiable/répétée Dreamweaver sur la page puis la transformer. Pour transformer une autre sélection sur la page (par exemple un bloc de texte), la sélection doit se trouver à l’intérieur d’une région modifiable de modèle Dreamweaver.

Les fonctionnalités Région modifiable et Région répétée ne peuvent être appliquées simultanément qu’aux balises DIV.

Si votre sélection n’est pas une balise div, et si un attribut de région répétée lui est déjà appliqué, Dreamweaver ne vous autorisera pas à lui appliquer également l’attribut de région modifiable. Seules les balises div peuvent posséder simultanément l’attribut de région modifiable et l’attribut de région répétée.

Dreamweaver a détecté qu’une balise de groupe de régions répétées précédait la région répétée.

Toutes les régions répétées InContext Editing doivent se trouve dans un groupe de régions répétées. Lorsque vous ajoutez une nouvelle région répétée à une page, Dreamweaver détecte si elle est déjà précédée par un groupe de régions répétées. Si c’est le cas, Dreamweaver vous propose d’ajouter la nouvelle région répétée au groupe existant ou de créer un nouveau groupe de régions répétées qui contiendra la nouvelle région.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne