Guide d'utilisation Annuler

Panneau DOM

Rechercher
Dreamweaver

Dreamweaver

Ouvrir l’application
  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
  19. Résolution des problèmes
    1. Problèmes résolus
    2. Problèmes connus

 

 

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

Panneau DOM
Panneau DOM

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

  1. Ouvrez le document de votre choix, puis sélectionnez Fenêtre > DOM pour afficher le panneau DOM.

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

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

Options d’édition dans le panneau DOM
Options d’édition dans le panneau DOM

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

Modification de classes
Modification de classes

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.
Options d’insertion dans le panneau DOM
Options d’insertion dans le panneau DOM

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

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?

Liens rapides

Voir toutes vos formules Gérer vos formules
Afficher les liens rapides
Masquer les liens rapides

Mentions légales    |    Politique de confidentialité en ligne