Guide d'utilisation Annuler

Modification en mode En direct

  1. Guide de l’utilisateur de Dreamweaver
  2. Introduction
    1. Principes de base du design web réactif
    2. Nouveautés de Dreamweaver
    3. Développement web avec Dreamweaver - Présentation
    4. Dreamweaver / Questions fréquentes
    5. Raccourcis clavier
    6. Configuration requise pour Dreamweaver
    7. Récapitulatif des nouvelles fonctionnalités
  3. Dreamweaver et Creative Cloud
    1. Synchronisation des paramètres de Dreamweaver avec Creative Cloud
    2. Bibliothèques Creative Cloud dans Dreamweaver
    3. Utilisation de fichiers Photoshop dans Dreamweaver
    4. Utilisation d’Adobe Animate avec Dreamweaver
    5. Extraction de fichiers SVG optimisés pour le web depuis des Bibliothèques
  4. Espaces de travail et affichages Dreamweaver
    1. Espace de travail de Dreamweaver
    2. Optimisation de l’espace de travail Dreamweaver pour la conception visuelle
    3. Recherche de fichiers sur la base de leur nom ou de leur contenu | Mac OS
  5. Configuration de sites
    1. À propos des sites Dreamweaver
    2. Création d’une version locale de votre site
    3. Connexion à un serveur de publication
    4. Configuration d’un serveur d’évaluation
    5. Importation et exportation des paramètres d’un site Dreamweaver
    6. Importation de sites web d’un serveur distant vers la racine de votre site local
    7. Fonctions d’accessibilité dans Dreamweaver
    8. Paramètres avancés
    9. Définition des préférences de site pour le transfert de fichiers
    10. Indication des paramètres du serveur proxy dans Dreamweaver
    11. Synchronisation des paramètres de Dreamweaver avec Creative Cloud
    12. Utilisation de Git dans Dreamweaver
  6. Gestion des fichiers
    1. Création et ouverture de fichiers
    2. Gestion des fichiers et des dossiers
    3. Acquisition et placement de fichiers depuis ou vers votre serveur
    4. Archivage et extraction de fichiers
    5. Synchronisation de fichiers
    6. Comparaison de fichiers pour analyse de leurs différences
    7. Masquage de fichiers et de dossiers dans votre site Dreamweaver
    8. Activation des notes de conception pour les sites Dreamweaver
    9. Prévention de l’exploitation potentielle de Gatekeeper
  7. Mise en page et design
    1. Utilisation d’assistances visuelles pour la mise en forme
    2. À propos de l’utilisation de CSS pour mise en forme de votre page
    3. Création de sites web en responsive design avec Bootstrap
    4. Création et utilisation des requêtes de multimédia dans Dreamweaver
    5. Présentation de contenus dans des tableaux
    6. Couleurs
    7. Design réactif à l’aide de mises en forme à grille fluide
    8. Extract dans Dreamweaver
  8. CSS
    1. Description des feuilles de style en cascade
    2. Mise en forme de pages avec CSS Designer
    3. Utilisation de préprocesseurs CSS dans Dreamweaver
    4. Comment définir les préférences de Style CSS dans Dreamweaver
    5. Déplacement des règles CSS dans Dreamweaver
    6. Conversion de code CSS intégré en règle CSS dans Dreamweaver
    7. Utilisation de balises div
    8. Application de dégradés à l’arrière-plan
    9. Permet de créer et modifier des effets de transition CSS3 dans Dreamweaver.
    10. Formatage du code
  9. Contenu de page et actifs
    1. Définition des propriétés de page
    2. Définition des propriétés d’en-tête CSS et des propriétés de lien CSS
    3. Utilisation du texte
    4. Recherche et remplacement de texte, de balises et d’attributs
    5. Panneau DOM
    6. Modification en mode En direct
    7. Le codage de documents dans Dreamweaver
    8. Sélection et affichage d’éléments dans la fenêtre de document
    9. Définition des propriétés de texte dans l’inspecteur Propriétés
    10. Vérification de l’orthographe d’une page web
    11. Utilisation de règles horizontales dans Dreamweaver
    12. Ajout et modification de combinaisons de polices dans Dreamweaver
    13. Utilisation d’actifs
    14. Insertion et mise à jour des dates dans Dreamweaver
    15. Création et gestion des actifs favoris dans Dreamweaver
    16. Insertion et modification d’images dans Dreamweaver
    17. Ajout d’objets multimédias
    18. Ajout de vidéos dans Dreamweaver
    19. Insertion de vidéo HTML5
    20. Insertion de fichiers SWF
    21. Ajout d’effets audio
    22. Insertion de fichiers audio HTML5 dans Dreamweaver
    23. Utilisation d’éléments de bibliothèque
    24. Utilisation de texte arabe et hébreu dans Dreamweaver
  10. Liens et navigation
    1. A propos des liens et de la navigation
    2. Etablissement de liens
    3. Cartes graphiques
    4. Résolution des problèmes de liens
  11. Effets et widgets jQuery
    1. Utilisation de widgets jQuery UI et Mobile dans Dreamweaver
    2. Utilisation d’effets jQuery dans Dreamweaver
  12. Codage de sites web
    1. À propos du codage dans Dreamweaver
    2. Environnement de codage dans Dreamweaver
    3. Définition des préférences de codage
    4. Personnalisation de la coloration du code
    5. Rédaction et modification de code
    6. Conseils et remplissage de code
    7. Réduction et développement de code
    8. Réutilisation de code à l’aide de fragments
    9. Analyse linting de code
    10. Optimisation du code
    11. Modification de code en mode Création.
    12. Utilisation de contenu d’en-tête pour les pages
    13. Insertion d’inclusions côté serveur dans Dreamweaver
    14. Utilisation des bibliothèques de balises dans Dreamweaver
    15. Importation de balises personnalisées dans Dreamweaver
    16. Utilisation de comportements JavaScript (instructions générales)
    17. Application de comportements JavaScript intégrés
    18. À propos de XML et de XSLT
    19. Exécution de transformations XSL côté serveur dans Dreamweaver
    20. Exécution de transformations XSL côté client dans Dreamweaver
    21. Ajout d’entités de caractère pour XSLT dans Dreamweaver
    22. Formatage du code
  13. Flux de travaux inter-produit
    1. Installation et utilisation des extensions pour Dreamweaver
    2. Mises à jour intégrées dans Dreamweaver
    3. Insertion de documents Microsoft Office dans Dreamweaver (Windows uniquement)
    4. Utilisation de Fireworks et Dreamweaver
    5. Édition de contenu sur des sites Dreamweaver à l’aide de Contribute
    6. Intégration entre Dreamweaver et Business Catalyst
    7. Création de campagnes de messagerie personnalisées
  14. Modèles
    1. À propos des modèles Dreamweaver
    2. Reconnaissance des modèles et des documents basés sur un modèle
    3. Création d’un modèle Dreamweaver
    4. Création de régions modifiables dans des modèles
    5. Création de régions et de tables modifiables dans Dreamweaver
    6. Utilisation de régions facultatives dans les modèles
    7. Définition d’attributs de balises modifiables dans Dreamweaver
    8. Comment créer des modèles imbriqués dans Dreamweaver
    9. Modification, mise à jour et suppression de modèles
    10. Exportation et importation de contenus xml dans Dreamweaver
    11. Application ou suppression d’un modèle depuis un document existant
    12. Modification de contenu dans les modèles de Dreamweaver
    13. Règles de syntaxe pour les balises de modèle dans Dreamweaver
    14. Définition des préférences de surbrillance pour des régions de modèle
    15. Avantages de l’utilisation de modèles dans Dreamweaver
  15. Terminaux mobiles et écrans multiples
    1. Création de requêtes multimédias
    2. Modification de l’orientation de la page pour les appareils mobiles
    3. Création d’applications web pour appareils mobiles à l’aide de Dreamweaver
  16. Sites dynamiques, pages et formulaires web
    1. En savoir plus sur les applications web
    2. Configuration de l’ordinateur pour le développement d’applications
    3. Résolution des problèmes de connexion aux bases de données
    4. Suppression des scripts de connexion dans Dreamweaver
    5. Conception de pages dynamiques
    6. Présentation des sources de contenu dynamique
    7. Définition de sources de contenu dynamique
    8. Ajout de contenus dynamiques aux pages
    9. Changement des contenus dynamiques dans Dreamweaver
    10. Affichage d’enregistrements d’une base de données
    11. Fourniture et dépannage de données en temps réel dans Dreamweaver
    12. Ajout de comportements de serveur personnalisés dans Dreamweaver
    13. Création de formulaires à l’aide de Dreamweaver
    14. Utilisation de formulaires pour la collecte des informations sur les utilisateurs
    15. Création et activations des formulaires ColdFusion dans Dreamweaver
    16. Création de formulaires web
    17. Prise en charge améliorée de HTML5 pour les éléments de formulaire
    18. Développement d’un formulaire à l’aide de Dreamweaver
  17. Création visuelle d’applications
    1. Création de pages principales et détaillées dans Dreamweaver
    2. Création de pages de recherche et de résultats
    3. Création d’une page d’insertion d’enregistrements
    4. Création de la mise à jour d’une page d’enregistrement dans Dreamweaver
    5. Création de pages de suppression d’enregistrement dans Dreamweaver
    6. Modification d’une base de données à l’aide des commandes ASP dans Dreamweaver
    7. Création d’une page d’enregistrement
    8. Création d’une page de connexion
    9. Création d’une page à accès restreint
    10. Sécurisation de dossiers dans ColdFusion à l’aide de Dreamweaver
    11. Utilisation de composants ColdFusion dans Dreamweaver
  18. Test, aperçu et publication de sites web
    1. Prévisualisation de pages
    2. Aperçu et inspection de pages web Dreamweaver sur plusieurs appareils
    3. Test de votre site Dreamweaver

 

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é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.
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, consultez la section 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 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.

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à 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 :

Pris en charge

Non pris en charge

Tous les éléments HTML pouvant contenir du texte et des balises sémantiques

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

 

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

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.

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.

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

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.
  • Des grilles CSS sont prises en charge dans le Mode en direct uniquement dans Dreamweaver 2019 et les versions ultérieures.

Autres ressources similaires

Logo Adobe

Accéder à votre compte