Modification en mode En direct

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érentes 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, consultez la section 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 section 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 section 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 section 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 section Insertion d’éléments directement en mode En direct.

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.

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é.

• 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, consultez la section Mise en forme de pages avec CSS Designer.

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.

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

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

• 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.

• 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é.

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 :

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. 

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 cliquer sur l’élément de texte pour le modifier. Si vous êtes en mode Affichage d’élément, appuyez sur Entrée pour modifier le texte.

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

Le point d’insertion est placé là où vous cliquez. 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.

 Grâce à la fonction de synchronisation automatique, toutes les modifications effectuées en direct se synchronisent automatiquement avec l’affichage du code. 

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 :

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é.

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é.

• 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.

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 :

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. 

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.

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.).

Navigation au clavier en mode En direct

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.

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 : 

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. 

Désactivation des fonctions d’édition en mode 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.
• Des grilles CSS sont prises en charge dans le Mode en direct uniquement dans Dreamweaver 2019 et les versions ultérieures.