Découvrez comment créer, modifier et prévisualiser vos pages web en mode En direct. Réorganisez ou insérez des éléments, appliquez des sélecteurs, modifiez des attributs d’image, insérez, modifiez et formatez du texte sans avoir à passer en mode Code.

Le mode En direct utilise un moteur de rendu basé sur Chromium, de sorte que votre contenu s’affiche exactement de la même manière dans Dreamweaver et dans vos navigateurs préférés. Pendant le développement, vous pouvez passer en mode En direct pour prévisualiser rapidement la page. En outre, pour ne pas avoir à basculer entre les différente vues (modes Code et Création), vous pouvez modifier les éléments HTML directement en mode En direct.

Le mode En direct s’actualise instantanément de manière à afficher les modifications sur la page.

Pour modifier la page en mode En direct, vous pouvez utiliser les composants suivants :

  • Panneau DOM : (Fenêtre > DOM) affiche la structure HTML du document et permet de copier-coller, dupliquer, supprimer et réorganiser les éléments dans la vue. Pour plus d’informations, voir Panneau DOM.
  • Affichage d’élément : s’affiche au dessus de l’élément HTML sélectionné en mode En direct. La vue Affichage d’élément permet d’associer des éléments HTML à des classes et des ID. Pour plus d’informations, consultez la page Association d’éléments HTML à des classes et des ID.
  • Inspecteur Propriétés rapide : s’affiche lorsque vous cliquez sur l’icône sandwich dans la vue Affichage d’élément ou lorsque vous sélectionnez du texte. L’Inspecteur Propriétés rapide permet de modifier les attributs d’image et la mise en forme du texte en mode En direct. Pour plus d’informations, consultez la page Inspecteur Propriétés rapide.
  • Inspecteur Propriétés du mode En direct : s’affiche sous la fenêtre Document et permet de modifier différentes propriétés HTML et CSS en mode En direct. Pour plus d’informations, consultez la page Inspecteur Propriétés du mode En direct.
  • Panneau Insertion : (Fenêtre > Insérer) permet de faire glisser les éléments du panneau directement en mode En direct. Pour plus d’informations, consultez la page Insertion d’éléments directement en mode En direct.

Remarque :

Si votre page change de manière dynamique (en raison des scripts) ou si la fonctionnalité Metarefresh est activée, les modifications apportées en mode En direct peuvent être perdues.

Conseils :

  • Si le mode En direct devient blanc lorsque vous modifiez la page, désactivez le mode En direct et réactivez-le.
  • Si les modifications ne sont pas reflétées sur la page, cliquez sur le bouton Actualiser en mode En direct.

Le contenu rendu dynamiquement par les bases de données ou JavaScript et les régions non modifiables dans les modèles ne peuvent pas être modifiés en mode En direct. Lorsque vous cliquez sur ces éléments en mode En direct, une bordure grise s’affiche autour afin d’indiquer que les éléments ne peuvent pas être modifiés.

Un élément doté d’une bordure grise en mode En direct ne peut pas être modifié
Un élément doté d’une bordure grise en mode En direct ne peut pas être modifié

Remarque :

En mode En direct, seules les options applicables pour l’élément sélectionné sont accessibles dans le menu principal. Les options qui ne s’appliquent pas sont grisées lorsque l’élément est sélectionné.

Affichage d’élément

Avec la vue Affichage d’élément, vous pouvez associer des éléments HTML à des classes et des ID directement en mode En direct. La vue Affichage d’élément donne des conseils concernant les classes et les ID disponibles, afin de vous aider à afficher et à choisir rapidement l’option requise. 

Elle permet également de mettre en forme des tableaux. Pour plus d’informations, consultez ce lien.

Association d’éléments HTML à des classes et des ID

Cliquez sur l’élément requis en mode En direct. La vue Affichage d’élément apparaît et affiche la classe et l’ID actuellement associés.

Lorsque vous êtes en mode En direct, vous pouvez également cliquer sur l’élément HTML dans le panneau DOM pour faire apparaître la vue Affichage d’élément associée à l’élément concerné.

Vue Affichage d’élément pour l’élément
Vue Affichage d’élément pour l’élément

  • Pour dissocier l’élément HTML d’une classe ou d’un ID, cliquez sur la croix « x » en regard de la classe ou de l’ID.
  • Pour modifier la classe ou l’ID associé à l’élément HTML, cliquez dans la case. Une liste des classes et des ID disponibles s’affiche. Cliquez sur l’option requise.
  • Pour ajouter une classe ou un ID et l’appliquer à l’élément, cliquez sur le signe « + » et entrez le nom. Pour enregistrer les modifications, cliquez sur le signe « + » ou appuyez sur Entrée.

Vous pouvez ensuite utiliser CSS Designer pour définir un sélecteur contenant cette classe ou cet ID. Pour plus d’informations, voir Mise en forme de pages avec CSS Designer.

Remarque :

La vue Affichage d’élément des éléments transitoires ne se déplace pas avec les éléments lorsque la transition est déclenchée. Toutefois, les modifications apportées avec la vue Affichage d’élément prennent effet même si ce n’est pas dans le même emplacement que l’élément provisoire. 

Inspecteur Propriétés rapide

Inspecteur Propriétés rapide pour les images

L’Inspecteur Propriétés rapide s’affiche juste au dessus des éléments sélectionnés en mode En direct. À l’aide de cet Inspecteur Propriétés, vous pouvez modifier des attributs ou formater du texte en mode En direct.

Inspecteur Propriétés rapide apparaissant juste au dessus des éléments de page en mode En direct
Inspecteur Propriétés rapide apparaissant juste au dessus des éléments de page en mode En direct

Pour afficher ou masquer l’Inspecteur Propriétés rapide, appuyez sur Ctrl+Alt+H (Win)/CMD+Ctrl+H (Mac).

Remarque :

L’icône de navigation dans le code n’est pas affichée en mode En direct lorsque vous utilisez l’Inspecteur Propriétés rapide.

Dans des documents Bootstrap, l’Inspecteur Propriétés rapide inclut également des options permettant de personnaliser les images.

Inspecteur Propriétés rapide pour les images dans des documents Bootstrap
Inspecteur Propriétés rapide pour les images dans des documents Bootstrap

  • Ecrêter selon la forme : cliquez pour écrêter les coins d’une image en leur appliquant une forme circulaire ou arrondie, ou bien pour la transformer en vignette.
  • Rendre les images réactives : cliquez pour rendre vos images réactives afin qu’elles s’adaptent à différentes tailles d’écran.

Inspecteur Propriétés rapide pour le texte

En mode En direct, l’Inspecteur Propriétés rapide pour le texte permet d’appliquer rapidement des mises en forme, des retraits et des hyperliens au texte. L’Inspecteur Propriétés rapide pour le texte s’affiche lorsque vous cliquez sur l’icône en forme de sandwich pour les éléments texte h1-h6, pre et p.

Inspecteur Propriétés rapide pour le texte
Inspecteur Propriétés rapide pour le texte

  • L’option de mise en forme permet de remplacer rapidement la balise de l’élément par l’une des balises suivantes : h1-h6, p et pre. 
  • L’option de lien permet d’appliquer un hyperlien à l’élément de texte. 
  • Les icônes Gras et Italique permettent d’ajouter des balises <strong> et <em> à l’élément de texte.
  • Les icônes de retrait permettent d’ajouter ou de supprimer des retraits dans le texte. La balise <blockquote> est ajoutée au code ou supprimée en conséquence.

Dans les documents Bootstrap, l’Inspecteur Propriétés rapide pour le texte permet également d’aligner et de transformer des éléments de texte.

  • Alignement : alignez les éléments de texte Bootstrap à gauche, au centre, à droite ou de manière justifiée en leur appliquant les classes correspondantes.
  • Transformation : modifiez la casse du texte d’un élément à l’aide de classes pour lui appliquer des majuscules, des minuscules ou une majuscule au début de chaque mot.

Inspecteur Propriétés du mode En direct

L’Inspecteur Propriétés du mode En direct est l’Inspecteur Propriétés traditionnel disponible sous la fenêtre Document.

L’Inspecteur Propriétés en mode En direct permet d’examiner et de modifier les propriétés les plus fréquentes de l’élément de la page sélectionnée, tel que le texte ou un objet inséré. Le contenu de l’Inspecteur Propriétés du mode En direct varie en fonction de l’élément sélectionné.

Remarque :

L’Inspecteur Propriétés du mode En direct n’est pas disponible dans les pages à grille fluide.

Pour accéder à l’aide pour un Inspecteur Propriétés donné, cliquez sur le bouton Aide dans le coin supérieur droit de l’Inspecteur Propriétés. Vous pouvez également sélectionner Aide dans le menu Options d’un Inspecteur Propriétés.

Les éléments suivants peuvent être modifiés à l’aide de l’Inspecteur Propriétés du mode En direct :

  • HTML
  • CSS
  • Image
  • Table
  • Media – Uniquement audio HTML5 et vidéo HTML5
  • Anchor
  • Form
  • FormButton
  • FormTextArea
  • FormSubmitButton
  • FormRange
  • FormRadioButton
  • FormList
  • FormImage
  • FormFile
  • FormCheckBox
  • FormColor
  • FormDate
  • FormDateTime
  • FormDateTimeLocal
  • FormMonth
  • FormTime
  • FormWeek
  • FormNumber
  • FormLabel
  • FormHidden
  • FormGeneric

Remarque :

L’interface utilisateur jQuery et les propriétés associées au modèle ne sont pas modifiables dans l’Inspecteur Propriétés du mode En direct.

Modification d’attributs HTML

En mode En direct, vous pouvez rapidement ajouter, modifier ou supprimer des attributs HTML d’images à l’aide de l’Inspecteur Propriétés rapide.

L’Inspecteur Propriétés rapide pour les images apparaît lorsque vous cliquez sur l’icône sandwich . En fonction de l’espace disponible, l’Inspecteur Propriétés s’affiche sur la droite, sur la gauche, en haut, en bas ou au-dessus de l’image. Vous pouvez déplacer l’Inspecteur Propriétés et le positionner où vous le souhaitez. 

Inspecteur Propriétés rapide pour la modification d’attributs
Inspecteur Propriétés rapide pour la modification d’attributs

Pour modifier les attributs, cliquez sur l’icône sandwich dans l’Inspecteur Propriétés rapide. Vous pouvez modifier la source de l’image tout comme d’autres attributs, tels que les attributs « titre » et « alt » ; les modifications sont instantanément répercutées. De même, vous pouvez ajuster la largeur et la hauteur de l’image en mode En direct.

Les modifications apportées sont enregistrées lorsque vous :

  • Cliquez n’importe où en dehors de l’Inspecteur Propriétés
  • Appuyez sur Entrée
  • Appuyez sur la touche de tabulation pour modifier un autre attribut dans l’Inspecteur Propriétés
  • Enregistrez le fichier

Lorsque des images sont chargées dynamiquement, vous pouvez utiliser l’Inspecteur Propriétés rapide de l’image pour contrôler rapidement les attributs définis pour celle-ci. 

Modification du texte directement en mode En direct

Vous pouvez désormais modifier des éléments de texte directement en mode En direct. Vous pouvez simplement double-cliquer sur l’élément de texte pour le modifier. Ou vous pouvez cliquer sur l’élément de texte pour faire apparaître la vue Affichage d’élément, puis appuyer sur Entrée.

Remarque :

Lorsque vous appuyez sur Entrée après être passé en mode d’édition, les résultats varient en fonction de l’emplacement du point d’insertion avant que vous n’utilisiez la touche Entrée. Les modifications sont semblables à ce qui se produit lorsque vous appuyez sur la touche Entrée lors de la modification d’un texte en mode Création.

La bordure orange autour de l’élément de texte indique que le mode est défini sur Modification. 

Une bordure orange indique l’activation du mode Modification
Une bordure orange indique l’activation du mode Modification

Le point d’insertion est placé à l’emplacement du double-clic. Pour sélectionner tout le texte de l’élément, cliquez trois fois sur l’élément de texte.

Les fonctions Couper, Copier-Coller et Annuler-Rétablir sont prises en charge lorsque vous modifiez du texte en mode En direct. Lorsque vous collez du texte, celui-ci est copié en texte brut.

Le tableau ci-après répertorie les scénarios pris et non pris en charge lors de la modification de texte en mode En direct :

Pris en charge Non pris en charge
Tous les éléments HTML pouvant contenir du texte

Modification de balises endommagées ou non valides. Si le code HTML contient des balises endommagées ou non valides, la modification de ces balises se fait suivant la manière dont les navigateurs les perçoivent :

  • Si les navigateurs corrigent le code HTML, par exemple, s’ils ferment la balise endommagée, vous pouvez être autorisé à modifier les balises en mode En direct.
  • Si les navigateurs ajoutent une nouvelle balise lors du rendu, vous ne pouvez pas modifier les balises endommagées ou non valides.

 

Fichiers HTML dérivés de modèles en mode En direct
Modification des pages jQuery
Balises structurelles contenant des éléments intégrés ; ces données sont présentées dans une même zone pour modification
Modification de balises ayant des contenus statiques et dynamiques. Bien que vous puissiez modifier les sélecteurs de ces balises, vous ne pouvez plus modifier le texte directement en mode En direct. Si vous double-cliquez sur ces éléments en mode En direct, une bordure grise les entourant apparaît, indiquant que la modification de texte n’est pas prise en charge.
Texte statique dans des pages dynamiques
 
Pages à grille fluide en mode En direct sans grille
 
Texte contenant des entités  

Mise en forme du texte

Vous pouvez désormais modifier le formatage du texte et du texte d’hyperlien en mode En direct. Pour afficher les options de formatage du texte, choisissez un mot ou une phrase. L’Inspecteur Propriétés rapide avec les options de mise en forme s’affiche juste au dessus du texte sélectionné.

Inspecteur Propriétés rapide pour la mise en forme du texte
Inspecteur Propriétés rapide pour la mise en forme du texte

Insertion d’éléments directement en mode En direct

Dans le panneau Insertion, vous pouvez directement faire glisser les éléments à l’emplacement souhaité dans le document en mode En direct. Les aides visuelles du mode En direct, telles que les Guides en direct et les icônes DOM, vous aident à positionner les éléments déplacés par rapport à un élément survolé.

Les guides en direct (en vert) s’affichent lorsque vous passez le curseur sur les différents éléments de la page avant de faire glisser l’élément. Ces guides indiquent les positions où l’élément peut être inséré. Ils peuvent apparaître en haut, en bas, à gauche ou à droite de l’élément survolé.

  • Au-dessus et en dessous - S’affichent lorsque vous survolez tous les types d’éléments/balises, à l’exception des balises incorporées. Lorsque la souris survole les premiers 50 % (partie supérieure) de l’élément, les guides s’affichent au-dessus de l’élément survolé. Lorsque la souris survole les derniers 50 % (partie inférieure) de l’élément, les guides s’affichent en dessous de l’élément survolé.
Guides en direct en haut et en bas
Guides en direct en haut et en bas des éléments survolés

  • Gauche et droite - S’affichent lorsque vous survolez des balises incorporées, par exemple les balises <a>, <span> ou les balises pour lesquelles la « propriété Flottante » est définie.
Guides en direct sur la droite et la gauche des éléments survolés
Guides en direct sur la droite et la gauche des éléments survolés

Quand vous marquez une pause de quelques instants avant de déposer un élément, l’icône DOM (</>) apparaît. Lorsque vous passez la souris sur cette icône, le panneau DOM s’ouvre et vous pouvez déposer l’élément dans la structure DOM du document.

Pour insérer des éléments directement en mode En direct, procédez comme suit :

  1. Passez en mode En direct.

  2. Dans le panneau Insertion, cliquez sur l’élément requis et faites-le glisser dans le document. Vous pouvez également simplement cliquer sur l’élément requis dans le panneau Insertion.

    Conseil : si vous ne pouvez pas faire glisser un élément du panneau Insertion sur la page, redémarrez l’ordinateur et réessayez.

  3. Déposez l’élément en haut, en bas, à droite ou à gauche d’un élément en fonction des Guides en direct. Vous pouvez également déposer l’élément à un emplacement précis dans la structure du document en cliquant sur </> et en utilisant le panneau DOM.

    L’élément est inséré dans la page et mis en évidence.

Cadre de sélection

L’outil Cadre de sélection permet de sélectionner facilement un bloc de texte en cliquant et en faisant glisser le curseur à l’intérieur de la balise en mode En direct. Lorsque vous cliquez et faites glisser un bloc de texte dans une version de Dreamweaver antérieure à la version 2014.1, l’élément se déplace d’un seul bloc. 

Remarque :

L’utilisation de l’outil Cadre de sélection en mode En direct est limitée aux opérations prises en charge par les navigateurs. 

Sélection et glisser-déposer d’éléments

En mode En direct, vous pouvez déplacer un élément en cliquant sur le nom de la balise et en le faisant glisser jusqu’à l’endroit souhaité. Quand vous cliquez sur le nom d’une balise, un curseur en forme de main apparaît, pour vous indiquer que vous pouvez faire glisser la balise depuis ce point. Dès que vous commencez à faire glisser la balise, des guides vous aident à la placer précisément au bon endroit.  

En cliquant sur le nom de la balise dans la vue En direct, vous pouvez sélectionner l’ensemble de son contenu dans le mode Code.

Cliquez sur le nom de la balise dans la vue En direct pour sélectionner l’ensemble de son contenu en mode Code.
Cliquez sur le nom de la balise dans la vue En direct pour sélectionner l’ensemble de son contenu en mode Code.

Inspection de code en mode En direct

Le mode Inspection s’associe au mode En direct afin de vous aider à identifier rapidement les éléments HTML et les styles CSS qui y sont associés. Lorsque le mode Inspection est activé, vous pouvez survoler des éléments de votre page afin d’afficher les attributs de modèle de boîte CSS de n’importe quel élément de niveau bloc.

Le mode Inspection permet d’obtenir une représentation visuelle du modèle de boîte. Vous pouvez également utiliser le panneau CSS Designer pendant le survol d’éléments en mode En direct.

Lorsque CSS Designer est ouvert en mode Actuel et que vous survolez un élément de la page, les règles et propriétés de CSS Designer sont automatiquement mises à jour, de façon à montrer les règles et propriétés de cet élément.

En outre, les modes et panneaux associés à l’élément que vous survolez sont également mis à jour (par exemple le mode Code, le sélecteur de balises, l’inspecteur Propriétés, etc.).

  1. Lorsque le document est ouvert dans la fenêtre de document, cliquez sur Affichage > Inspecter.

    Remarque :

    Si vous n’êtes pas déjà en mode En direct, le mode Inspection l’active automatiquement.

  2. Survolez des éléments de la page afin d’afficher le modèle de boîte CSS. Le mode Inspection utilise des couleurs de mise en surbrillance différentes pour la bordure, la marge, la marge intérieure et le contenu.

  3. (Facultatif) Appuyez sur la flèche vers la gauche, sur votre clavier, afin de mettre en évidence le parent de l’élément actuellement en évidence. Appuyez sur la flèche vers la droite pour rétablir la mise en évidence de l’élément enfant.

  4. (Facultatif) Cliquez sur un élément pour verrouiller la sélection en évidence.

    Remarque :

    Si vous cliquez sur un élément afin de verrouiller la sélection en évidence, le mode Inspection est désactivé.

Vous pouvez parcourir des éléments de page ou des sélecteurs en mode Affichage d’élément à l’aide du clavier afin d’accélérer le processus de modification. 

Parcourir des éléments de page

Les touches fléchées Haut et Bas permettent de parcourir des éléments de page en mode En direct. Le balayage repose sur la structure du DOM du document.

La navigation au clavier en mode En direct facilite l’accès aux éléments imbriqués et entourés.

Lorsque vous accédez à un élément à l’aide des touches fléchées Haut ou Bas, la vue Affichage d’élément pour cet élément apparaît. Vous pouvez ensuite accéder aux sélecteurs en mode Affichage d’élément ou appuyer sur Entrée pour modifier le texte directement en mode En direct.

L’image est d’abord activée
Dans cet exemple, l’image est tout d’abord activée. Lorsque vous appuyez sur la touche fléchée Bas, le paragraphe en dessous de l’image est sélectionné, comme illustré dans l’image suivante.

Le texte en gras est sélectionné
Le texte en gras est sélectionné.

Le paragraphe est sélectionné
Dans cet exemple, le paragraphe est sélectionné. Lorsque vous appuyez à nouveau sur la touche fléchée Bas, l’élément suivant de la structure DOM, le texte en gras, est sélectionné, comme illustré dans l’image suivante.


Parcourir des sélecteurs

Appuyez sur la touche de tabulation pour parcourir les sélecteurs en mode Affichage d’élément. Le sélecteur actif s’affiche avec une bordure orange comme illustré ci-dessous : 

Le sélecteur actif est mis en évidence
Le sélecteur actif est en évidence avec une bordure orange.

Si vous appuyez sur la touche de tabulation après le dernier sélecteur appliqué, la zone de texte d’ajout de sélecteur apparaît. 

Remarque :

Vous pouvez utiliser Ctrl+[ ou Cmd+[ pour sélectionner l’élément parent et Ctrl+] ou Cmd+] pour sélectionner l’élément enfant.

Désactivation des fonctions d’édition en mode En direct

Si vous ne souhaitez pas utiliser la vue Affichage d’élément et l’Inspecteur Propriétés rapide en mode En direct, vous pouvez désactiver ces fonctions d’édition.

Raccourcis clavier :

  • (Win) Ctrl+Alt+H
  • (Mac) Cmd+Ctrl+H

  1. Passez en mode En direct et cliquez sur Affichage > Options d’affichage en direct.

  2. Sélectionnez Masquer l’affichage en direct.

Scénarios non pris en charge

  • Les fichiers de modèle de Dreamweaver ne peuvent pas être modifiés en mode En direct.
  • Les balises ayant des contenus statiques et dynamiques. Bien que vous puissiez modifier les sélecteurs de ces balises, vous ne pouvez pas modifier le texte en mode En direct. Si vous double-cliquez sur ces éléments en mode En direct, une bordure grise les entourant apparaît, indiquant que la modification de texte n’est pas prise en charge.
  • Les balises auxquelles des sélecteurs de pseudo sont appliqués. Lorsque vous tentez de modifier de tels éléments en mode En direct, vous pouvez avoir des résultats inattendus.

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