Ouvrez le document de votre choix, puis sélectionnez Fenêtre > DOM pour afficher le panneau DOM.
Dernière mise à jour le
2 mai 2021
- Guide de l’utilisateur de Dreamweaver
- Introduction
- Dreamweaver et Creative Cloud
- Espaces de travail et affichages Dreamweaver
- Configuration de sites
- À propos des sites Dreamweaver
- Création d’une version locale de votre site
- Connexion à un serveur de publication
- Configuration d’un serveur d’évaluation
- Importation et exportation des paramètres d’un site Dreamweaver
- Importation de sites web d’un serveur distant vers la racine de votre site local
- Fonctions d’accessibilité dans Dreamweaver
- Paramètres avancés
- Définition des préférences de site pour le transfert de fichiers
- Indication des paramètres du serveur proxy dans Dreamweaver
- Synchronisation des paramètres de Dreamweaver avec Creative Cloud
- Utilisation de Git dans Dreamweaver
- Gestion des fichiers
- Création et ouverture de fichiers
- Gestion des fichiers et des dossiers
- Acquisition et placement de fichiers depuis ou vers votre serveur
- Archivage et extraction de fichiers
- Synchronisation de fichiers
- Comparaison de fichiers pour analyse de leurs différences
- Masquage de fichiers et de dossiers dans votre site Dreamweaver
- Activation des notes de conception pour les sites Dreamweaver
- Prévention de l’exploitation potentielle de Gatekeeper
- Mise en page et design
- Utilisation d’assistances visuelles pour la mise en forme
- À propos de l’utilisation de CSS pour mise en forme de votre page
- Création de sites web en responsive design avec Bootstrap
- Création et utilisation des requêtes de multimédia dans Dreamweaver
- Présentation de contenus dans des tableaux
- Couleurs
- Design réactif à l’aide de mises en forme à grille fluide
- Extract dans Dreamweaver
- CSS
- Description des feuilles de style en cascade
- Mise en forme de pages avec CSS Designer
- Utilisation de préprocesseurs CSS dans Dreamweaver
- Comment définir les préférences de Style CSS dans Dreamweaver
- Déplacement des règles CSS dans Dreamweaver
- Conversion de code CSS intégré en règle CSS dans Dreamweaver
- Utilisation de balises div
- Application de dégradés à l’arrière-plan
- Permet de créer et modifier des effets de transition CSS3 dans Dreamweaver.
- Formatage du code
- Contenu de page et actifs
- Définition des propriétés de page
- Définition des propriétés d’en-tête CSS et des propriétés de lien CSS
- Utilisation du texte
- Recherche et remplacement de texte, de balises et d’attributs
- Panneau DOM
- Modification en mode En direct
- Le codage de documents dans Dreamweaver
- Sélection et affichage d’éléments dans la fenêtre de document
- Définition des propriétés de texte dans l’inspecteur Propriétés
- Vérification de l’orthographe d’une page web
- Utilisation de règles horizontales dans Dreamweaver
- Ajout et modification de combinaisons de polices dans Dreamweaver
- Utilisation d’actifs
- Insertion et mise à jour des dates dans Dreamweaver
- Création et gestion des actifs favoris dans Dreamweaver
- Insertion et modification d’images dans Dreamweaver
- Ajout d’objets multimédias
- Ajout de vidéos dans Dreamweaver
- Insertion de vidéo HTML5
- Insertion de fichiers SWF
- Ajout d’effets audio
- Insertion de fichiers audio HTML5 dans Dreamweaver
- Utilisation d’éléments de bibliothèque
- Utilisation de texte arabe et hébreu dans Dreamweaver
- Liens et navigation
- Effets et widgets jQuery
- Codage de sites web
- À propos du codage dans Dreamweaver
- Environnement de codage dans Dreamweaver
- Définition des préférences de codage
- Personnalisation de la coloration du code
- Rédaction et modification de code
- Conseils et remplissage de code
- Réduction et développement de code
- Réutilisation de code à l’aide de fragments
- Analyse linting de code
- Optimisation du code
- Modification de code en mode Création.
- Utilisation de contenu d’en-tête pour les pages
- Insertion d’inclusions côté serveur dans Dreamweaver
- Utilisation des bibliothèques de balises dans Dreamweaver
- Importation de balises personnalisées dans Dreamweaver
- Utilisation de comportements JavaScript (instructions générales)
- Application de comportements JavaScript intégrés
- À propos de XML et de XSLT
- Exécution de transformations XSL côté serveur dans Dreamweaver
- Exécution de transformations XSL côté client dans Dreamweaver
- Ajout d’entités de caractère pour XSLT dans Dreamweaver
- Formatage du code
- Flux de travaux inter-produit
- Installation et utilisation des extensions pour Dreamweaver
- Mises à jour intégrées dans Dreamweaver
- Insertion de documents Microsoft Office dans Dreamweaver (Windows uniquement)
- Utilisation de Fireworks et Dreamweaver
- Édition de contenu sur des sites Dreamweaver à l’aide de Contribute
- Intégration entre Dreamweaver et Business Catalyst
- Création de campagnes de messagerie personnalisées
- Modèles
- À propos des modèles Dreamweaver
- Reconnaissance des modèles et des documents basés sur un modèle
- Création d’un modèle Dreamweaver
- Création de régions modifiables dans des modèles
- Création de régions et de tables modifiables dans Dreamweaver
- Utilisation de régions facultatives dans les modèles
- Définition d’attributs de balises modifiables dans Dreamweaver
- Comment créer des modèles imbriqués dans Dreamweaver
- Modification, mise à jour et suppression de modèles
- Exportation et importation de contenus xml dans Dreamweaver
- Application ou suppression d’un modèle depuis un document existant
- Modification de contenu dans les modèles de Dreamweaver
- Règles de syntaxe pour les balises de modèle dans Dreamweaver
- Définition des préférences de surbrillance pour des régions de modèle
- Avantages de l’utilisation de modèles dans Dreamweaver
- Terminaux mobiles et écrans multiples
- Sites dynamiques, pages et formulaires web
- En savoir plus sur les applications web
- Configuration de l’ordinateur pour le développement d’applications
- Résolution des problèmes de connexion aux bases de données
- Suppression des scripts de connexion dans Dreamweaver
- Conception de pages dynamiques
- Présentation des sources de contenu dynamique
- Définition de sources de contenu dynamique
- Ajout de contenus dynamiques aux pages
- Changement des contenus dynamiques dans Dreamweaver
- Affichage d’enregistrements d’une base de données
- Fourniture et dépannage de données en temps réel dans Dreamweaver
- Ajout de comportements de serveur personnalisés dans Dreamweaver
- Création de formulaires à l’aide de Dreamweaver
- Utilisation de formulaires pour la collecte des informations sur les utilisateurs
- Création et activations des formulaires ColdFusion dans Dreamweaver
- Création de formulaires web
- Prise en charge améliorée de HTML5 pour les éléments de formulaire
- Développement d’un formulaire à l’aide de Dreamweaver
- Création visuelle d’applications
- Création de pages principales et détaillées dans Dreamweaver
- Création de pages de recherche et de résultats
- Création d’une page d’insertion d’enregistrements
- Création de la mise à jour d’une page d’enregistrement dans Dreamweaver
- Création de pages de suppression d’enregistrement dans Dreamweaver
- Modification d’une base de données à l’aide des commandes ASP dans Dreamweaver
- Création d’une page d’enregistrement
- Création d’une page de connexion
- Création d’une page à accès restreint
- Sécurisation de dossiers dans ColdFusion à l’aide de Dreamweaver
- Utilisation de composants ColdFusion dans Dreamweaver
- Test, aperçu et publication de sites web
- Résolution des problèmes
Comment utiliser le panneau DOM pour modifier la structure HTML en mappant des éléments en mode En direct ou des sélecteurs appliqués au Designer CSS avec leur balisage HTML.
Le panneau DOM présente une arborescence HTML interactive des contenus statiques et dynamiques. Cette vue permet de mettre visuellement en correspondance les éléments en mode En direct avec leurs balises HTML et les sélecteurs appliqués dans CSS Designer. Via le panneau DOM, vous pouvez également apporter des modifications à la structure HTML, dont l’effet est immédiatement visible en mode En direct.
Pour ouvrir le panneau DOM, sélectionnez Fenêtre > DOM. Vous pouvez également utiliser les raccourcis clavier Ctrl + / (Windows) ou Cmd + / (Mac) pour ouvrir le panneau DOM.
Lorsque vous faites glisser des éléments pour les insérer directement en mode En direct, l’icône </> apparaît avant que vous ne déposiez l’élément. Vous pouvez cliquer sur cette icône pour ouvrir le panneau DOM et insérer l’élément à l’endroit approprié dans la structure du document. Pour plus d’informations, consultez la section Insertion d’éléments directement en mode En direct.
En mode Code ou Création, le panneau DOM affiche uniquement les éléments statiques ; en mode En direct, il affiche aussi bien les éléments statiques que dynamiques.
Dans les documents à grille fluide, le panneau DOM permet de visualiser la structure du DOM HTML, mais pas de modifier la structure HTML.
Remarque :
Dans le panneau DOM, vous pouvez modifier uniquement le contenu statique. Les éléments dynamiques ou en lecture seule sont signalés en gris foncé.
Vous pouvez déplacer le panneau DOM pour le positionner où vous le souhaitez dans l’interface utilisateur. Vous pouvez également l’ancrer le long d’autres panneaux.
Utilisation du panneau DOM
-
-
Passez en mode En direct et cliquez sur l’élément que vous souhaitez inspecter ou modifier.
- Le balisage HTML de l’élément sélectionné apparaît en évidence dans le panneau DOM.
- Le sélecteur appliqué apparaît en évidence dans CSS Designer.
- Le code correspondant apparaît en évidence en mode Code.
- La balise correspondante apparaît en évidence (en bleu) dans le sélecteur de balises.
Vous avez également la possibilité de sélectionner un élément HTML dans le panneau DOM. Lorsque vous cliquez sur un élément dans le panneau DOM :
- Le mode En direct défile jusqu’à l’élément correspondant.
- Si le mode Code est ouvert, celui-ci défile jusqu’au code correspondant à l’élément.
- CSS Designer (volet Sélecteurs) défile jusqu’au sélecteur correspondant le plus proche (comme si vous cliquiez sur l’élément en mode En direct).
- La balise apparaît en évidence dans le sélecteur de balises.
Cette synchronisation entre les différentes vues et CSS Designer permet de visualiser immédiatement le balisage HTML et le style associés à l’élément sélectionné.
-
Poursuivez la modification de l’élément comme vous le souhaitez (édition HTML ou CSS). Pour plus d’informations sur l’utilisation du panneau DOM et la manière dont il permet de modifier les balises HTML, consultez la page Modification de la structure HTML à l’aide du panneau DOM. Pour plus d'informations sur CSS Designer, voir Mise en forme des pages avec CSS Designer.
Modification de la structure HTML à l’aide du panneau DOM
L’élément actuellement sélectionné sur la page est mis en évidence dans le panneau DOM. Vous pouvez accéder à n’importe quel nœud ou élément avec les touches fléchées.
Raccourcis clavier :
- Dupliquer - Ctrl + D (Windows) / Cmd + D (Mac)
- Supprimer - Suppr ou Retour arrière
- Copier - Ctrl + C (Windows) / Cmd + C (Mac)
- Coller - Ctrl + V (Windows) / Cmd + V (Mac)
- Annuler - Ctrl + Z (Windows) / Cmd + Z (Mac)
- Rétablir - Ctrl + Y (Windows) / Cmd + Y (Mac)
- Pour sélectionner un élément ou un nœud, cliquez dessus. Pour développer ou réduire un élément ou un nœud, cliquez sur la balise HTML ou double-cliquez sur le sélecteur à droite de la balise.
- Pour dupliquer un élément ou un nœud, cliquez dessus avec le bouton droit, puis cliquez sur Dupliquer. Lorsque vous dupliquez un élément associé à un ID, cet ID est incrémenté pour le nouvel élément (dupliqué).
- Pour copier un élément ou un nœud, cliquez dessus avec le bouton droit, puis cliquez sur Copier. Si vous avez copié un élément avec enfants, les éléments enfant sont également copiés.
- Pour coller un élément ou un nœud, cliquez sur l’élément ou le nœud au-dessous duquel imbriquer les éléments copiés. Cliquez ensuite avec le bouton droit sur l’élément ou le nœud et sélectionnez Coller.
- Pour coller un élément copié en tant qu’enfant d’un élément ou nœud spécifique, cliquez avec le bouton droit sur cet élément ou nœud (parent) et sélectionnez Coller en tant qu’enfant.
- Pour déplacer ou réorganiser des éléments, faites-les glisser vers l’emplacement souhaité dans le panneau DOM.
Une ligne verte indique où l’élément déplacé sera positionné. Si vous déplacez l’élément au-dessus de l’élément mis en évidence en gris (élément de référence), l’élément déplacé est défini en tant que premier enfant de l’élément de référence.
- Pour supprimer un élément ou un nœud, cliquez dessus avec le bouton droit et sélectionnez Supprimer.
Vous pouvez annuler (Ctrl/Cmd + Z) ou rétablir (Ctrl/Cmd + Y) les opérations effectuées dans le panneau DOM.
Pour effectuer des opérations de modification mentionnées ci-dessus pour plusieurs éléments, sélectionnez les plusieurs éléments dans le panneau DOM :
- Cliquez en maintenant la touche Maj enfoncée sur les éléments requis pour une sélection contiguë
- Cliquez en maintenant la touche Ctrl enfoncée sur les éléments requis pour une sélection non contiguë
Remarque :
En règle générale, lorsqu’une page est modifiée, le bouton Actualiser dans la barre d’outils du document se transforme en bouton Arrêter, indiquant que la page se recharge. Une fois la page rechargée, le bouton Actualiser s’affiche à nouveau pour indiquer que la page est complètement chargée.
Important : si votre page contient du code JavaScript, le menu contextuel du panneau DOM s’affiche pendant quelques instants, puis devient indisponible. Pour utiliser le menu contextuel, masquez la vue En direct (Options de l’affichage en direct > Masquer l’affichage en direct), puis désactivez JavaScript (Options de l’affichage en direct > Désactiver JavaScript).
Modification de balises, de classes et d’ID dans le panneau DOM
Vous pouvez modifier des balises, des classes et des ID en double-cliquant dessus dans le panneau DOM. Vous pouvez également ajouter des classes ou des ID supplémentaires en les séparant par un espace. Pour les balises qui ne sont pas associées à une classe ou un ID, vous pouvez saisir le nom de la classe ou de l’ID après avoir double-cliqué sur la balise.
Les conseils de code s’affichent lorsque vous commencez à saisir la balise, la classe ou l’ID. Pour limiter les conseils aux classes, commencez à taper par un point. Pour afficher uniquement les ID dans les conseils, commencez à taper par un signe dièse (#).
Insertion d’éléments dans le panneau DOM
Vous pouvez désormais insérer de nouveaux éléments dans votre page web à l’aide du panneau DOM de l’une des manières suivantes :
- Appuyez sur la barre d’espace ou cliquez sur l’icône d’insertion à côté de l’élément requis dans le panneau DOM. Dans la fenêtre contextuelle qui s’affiche, cliquez sur l’une des options. Pour envelopper plusieurs éléments dans une balise, sélectionnez les éléments requis, puis sélectionnez Envelopper avec balise dans les options d’insertion.
- Cliquez sur l’élément requis dans le panneau Insertion et faites-le glisser dans le panneau DOM. Les guides en direct s’affichent afin d’indiquer où l’élément sera inséré. Déposez l’élément à l’emplacement souhaité.
Lorsque vous insérez des balises à partir du panneau DOM, le texte par défaut (espace réservé) et les attributs requis pour ces balises sont également insérés :
- Lorsque vous insérez l’une des balises suivantes et validez les modifications, le texte par défaut est inséré en mode Code, En direct et Création :
div, header, nav, aside, article, section, footer, h1-h6 et hgroup - Lorsque vous insérez une balise table et validez les modifications, un tableau 3x3 est inséré.
- Lorsque vous insérez une balise embed ou img et validez les modifications, la boîte de dialogue Sélectionner un fichier apparaît et vous invite à sélectionner le fichier approprié.
- Lorsque vous insérez une balise meta et validez les modifications, le code suivant est ajouté en mode Code : <meta name="" content="">
- Lorsque vous insérez une balise figure et validez les modifications, une balise figure avec figcaption (légende) imbriquée est insérée.
- Lorsque vous insérez une balise ul ou ol et validez les modifications, une balise ol/ul avec balise li imbriquée est insérée.
