|
À l'heure où les mises en page se font à l'aide de règles CSS, appliquées généralement à des balises <div>, Dreamweaver ne possède aucune fonctionnalité permettant d'afficher la structure de ces balises div, leurs différents niveaux d'imbrication.
Il existe le panneau Calques mais celui-ci a un gros "défaut" : il ne présente que les balises div en positionnement absolu, ce qui s'utilise quand même rarement pour faire une mise en page complète via CSS.
Donc le but de ce panneau Balises Div est de remédier à ce problème : il affiche toutes les balises <div> trouvées dans le document, avec leur niveau d'imbrication.

Télécharger l'extension (Win/Mac)
Cette extension fait partie des panneaux flottants, on y accède par le menu Fenêtres > Balises Div.
Utilisation
Pour afficher les div présents dans un document, il suffit de cliquer sur le bouton (flèche bleue en cercle) en haut à gauche du panneau.
Il faut penser à recliquer sur ce bouton Actualiser après toute opération d'édition sur une balise div : supprimer, ajouter, renommer, ou aussi quand on bascule vers un autre document.
L'affichage ne se fait pas en temps réel en raison d'un problème de performance : des aller-retours entre le document et le panneau, bien que possibles de façon transparente, entraînent une dégradation des vitesses d'exécution.
La structure affiche les noms donnés, la colonne Sélecteur indique le type du sélecteur.
- Quand une ligne affiche un nom, suivi d'un autre entre parenthèses, il s'agit d'un bloc div du type <div id="xxx" class="yyy">. C'est toujours l'id qui a la priorité et la classe s'affiche entre parenthèses.
- Quand un tiret apparait dans la colonne Sélecteur, il s'agit alors d'un bloc div qui ne possède aucun sélecteur d'id ou de classe. Ça peut être par exemple un simple <div>.......</div> ou encore <div align="xxx">.......</div> (Ce qui se produit quand on fait un alignement à la sauvage en passant par le panneau Propriétés).
- La sélection d'un nom dans le panneau entraine automatiquement la sélection du div correspondant dans le document.
Très utile pour naviguer rapidement dans la page.
- Le panneau fonctionne aussi bien en mode Code qu'en mode Création.
|