Adobe Dreamweaver CC

Visualisation et modification graphique de la structure HTML

Utilisez l'outil Affichage rapide des éléments et son interface de type arborescence DOM pour visualiser et modifier la structure HTML de vos pages web. (Réalisation du projet : 30 min)

Visualisation et modification graphique de la structure HTML

30 min

Dreamweaver inclut une fonctionnalité nommée Affichage rapide des éléments qui offre une représentation graphique de la structure HTML de votre page.  

De quoi ai-je besoin ?

Télécharger les fichiers Fichiers d'exemple pour s'entraîner (ZIP, 2 Mo)

Télécharger le PDF Feuille de référence Dreamweaver

Le mode Affichage rapide des éléments vous permet de naviguer dans vos mises en page via une arborescence dynamique. Visualisez l'ensemble de la structure DOM sous forme de liste, puis cliquez, déplacez et cliquez avec le bouton droit sur les éléments pour sélectionner, réagencer, supprimer, copier, coller et dupliquer les éléments HTML.

Cet article va vous permettre d'explorer les fonctionnalités du nouvel outil Affichage rapide des éléments en modifiant un exemple de projet.

Un grand merci à Dan Carr pour la création du projet d'exemple fourni avec cet article. Pour savoir comment créer la page, consultez la rubrique Accélération de la programmation HTML5 et CSS. N'oubliez pas de visionner la vidéo de Dan Carr dans laquelle il présente le mode Affichage rapide des éléments (vidéo 1). Vous pourrez ensuite suivre les étapes indiquées dans cet article pour tester ces nouveautés par vous-même.

Vidéo 1. Utilisez le mode Affichage rapide des éléments pour consulter la hiérarchie HTML de la page et structurer les éléments de cette dernière.

Pour utiliser le mode Affichage rapide des éléments afin de structurer les éléments de la page :

  1. Lancez Dreamweaver CC.
  2. Choisissez Fichier > Ouvrir, puis sélectionnez le fichier dw_example.html. Activez les modes Création et En direct en haut de la fenêtre Document (voir Figure 1).
Figure 1. Activez les modes Création et En direct
  1. Cliquez sur l'icône </> en bas à gauche de la fenêtre Document pour activer le mode Affichage rapide des éléments (voir Figure 2).
Figure 2. Le mode Affichage rapide des éléments affiche l'élément sélectionné dans une liste d'éléments de page

Le texte lié à la classe .hero-bright est sélectionné dans la liste de la hiérarchie. Si vous examinez le reste de l'espace de travail, vous constaterez que le même élément est affiché en mode En direct, dans le sélecteur de balises et dans CSS Designer. Si vous passez temporairement en mode Fractionné, vous verrez que l'élément correspondant est également sélectionné en mode Code.

Quelle que soit votre méthode de travail et de sélection d'un élément, toutes les autres parties de l'interface sont mises à jour pour afficher votre sélection.

La liste interactive facilite la sélection des éléments tout en fournissant une vue d'ensemble de la page. Dans la Figure 13, l'élément h1 développé contient trois sous-éléments.

  1. Sélectionnez l'élément span avec la classe .hero-bright sous l'élément A en évidence pour observer la mise à jour de la sélection dans Dreamweaver et en mode En Direct.
  2. Cliquez sur l'élément h1 pour réduire la section dans la hiérarchie et masquer son contenu.
  3. Développez l'élément div #tile7, puis sélectionnez l'élément imbriqué h2 .action-title. Cliquez avec le bouton droit de la souris, puis choisissez Dupliquer dans le menu contextuel (voir Figure 3).
Figure 3. Dupliquez un élément sélectionné pour en créer une copie

L'élément dupliqué s'affiche juste en dessous de l'original. Le nouveau contenu h2 est sélectionné. Vous pouvez double-cliquer dessus pour le modifier (voir Figure 4).

Figure 4. Dupliquez un élément DOM et modifiez le contenu, puis ajoutez ou supprimez des styles pour mettre à jour les pages

Vous pouvez aussi copier un élément de la liste, puis sélectionner un autre élément de page et le coller dedans.

  1. En mode En direct, mettez à jour le texte dupliqué en le remplaçant par « Sign up now! ».
  2. En mode Affichage rapide des éléments, cliquez de nouveau sur l'élément div #tile7 pour réduire la section de la structure de page.

Vous pouvez aussi déplacer les éléments par glisser-déposer au sein de la structure de page en mode Affichage rapide des éléments.

  1. Développez l'élément div #tile1, cliquez sur l'élément A à l'intérieur de celui-ci, puis cliquez sur l'image de logo en haut à gauche de la grille (voir Figure 5).
Figure 5. Sélectionnez un sous-élément dans la structure DOM
  1. Faites glisser l'élément d'image sur l'élément div #tile8, puis relâchez le bouton de la souris. Le logo PLAY passe de l'angle supérieur gauche à l'angle inférieur droit de la page, masquant son image de fond (voir Figure 6).
Figure 6. Déplacez des sous-éléments vers une autre section de la page

Lorsque vous déplacez un élément en mode Affichage rapide des éléments, une ligne vert clair indique où il sera placé lorsque vous relâcherez le bouton (avant/après) ou survolerez l'élément dans lequel il sera imbriqué. Relâchez le bouton lorsque vous survolez la zone où vous souhaitez positionner l'élément.

Si vous retournez dans Dreamweaver et passez en mode Code, vous constaterez que Dreamweaver génère du code HTML et des styles CSS impeccables, conformes aux derniers standards web.

Pour aller plus loin

Examinez le nouveau flux En direct pour constater à quel point les nouveaux outils accélèrent le processus de production. Essayez de modifier la structure d'éléments de page en mode Affichage rapide des éléments, d'ajouter des sélecteurs à l'aide de l'affichage des éléments en direct et de définir de nouvelles propriétés dans CSS Designer.

Pour savoir comment ce projet d'exemple a été développé, consultez la page Authoring code more efficiently using Code View in Dreamweaver CC (Écrire du code plus efficacement grâce au mode Code de Dreamweaver CC).

Pour de plus amples informations sur le mode En direct également utilisé dans ce projet, consultez la page Modification et prévisualisation de pages web en mode En direct.

Et pour découvrir de nouvelles façons d'utiliser CSS Designer et le mode En direct, consultez la page CSS Designer : un outil de conception graphique intégré à Adobe Dreamweaver CC.

Pour finir, n'oubliez pas de consulter la page de formation à Dreamweaver. Vous y trouverez des tutoriels vidéo, des articles détaillés et des exemples de projet qui vous aideront à vous familiariser avec les nouvelles fonctionnalités de Dreamweaver CC.

Donnez-nous votre avis

Et voilà, vous avez terminé !

 


tommi-west_83x83

Tommi West
Tommi est développeuse web indépendante et directrice de la création du site tommiland.com. Avant de créer sa propre entreprise en 2004, elle a travaillé pendant six ans chez Macromedia en tant que rédactrice technique, éditrice et productrice web. Tommi West fait partie des professionnels de la communauté Adobe.


dan-carr_83x83

Dan Carr
Dan est une véritable référence en matière de création interactive, de développement logiciel, de rédaction technique et de formation. Il collabore depuis plus de 15 ans avec Adobe et d'autres chefs de file du secteur. Ses derniers travaux en date portent sur le développement multimédia en HTML5 et JavaScript, l'exploration d'iOS et l'innovation continue en matière de jeux et vidéos Flash.