Comment modifier des divisions à positionnement absolu (AP) dans Adobe Dreamweaver CS6 - pour les nuls

Chaque division à positionnement absolu (PA) que vous dessinez dans Adobe Dreamweaver CS6 est automatiquement répertoriée dans le panneau Éléments AP (choisissez Fenêtre → AP Elements pour l'afficher). Le panneau Éléments AP peut vous aider à sélectionner, à masquer et à afficher les divisions AP sur la page. Ce panneau est pratique lorsque vous avez beaucoup de Divisions AP sur la page et que vous voulez naviguer parmi eux avec précision.

Surtout, parce que vous pouvez modifier les propriétés de n'importe quel AP Div à partir de son style d'ID correspondant, le panneau vous aide à déterminer quel style d'ID appartient à une division AP.

Le panneau Éléments AP est souvent regroupé avec le panneau Styles CSS, au cas où vous le recherchiez.

Pour modifier une boîte (AP Div), procédez comme suit:

1. Choisissez Fenêtre → Éléments AP pour ouvrir le panneau Éléments AP.

2. Dans le panneau, localisez et sélectionnez apDiv1 pour le mettre en surbrillance sur la page.

   L'inspecteur des propriétés affiche sa taille et sa position en plus des autres propriétés.

3. Dans les zones de texte de l'inspecteur des propriétés, modifiez la largeur de la boîte en entrant un nombre dans le champ W et modifiez la hauteur de la boîte en entrant un nombre dans le champ H.

4. Cliquez sur l'échantillon en regard de Couleur Bg et choisissez une couleur dans le panneau Nuancier pour définir la couleur d'arrière-plan de la boîte.

   Pour les propriétés supplémentaires, telles que la bordure ou le remplissage, ajoutez-les dans le panneau Styles CSS.

5. Si le panneau Styles CSS n'est pas déjà visible, ouvrez-le en choisissant Fenêtre → Styles CSS.

6. Double-cliquez sur le style d'ID # apDiv1 qui contrôle la boîte.

   La boîte de dialogue Définition de règle CSS apparaît.

   

7. Sélectionnez la catégorie Bordure à gauche pour modifier la bordure.

8. Dans la colonne Style, utilisez la liste déroulante Dessus pour définir un style de bordure (tel que Solide) sur les quatre côtés.

   Utilisez la liste déroulante Dessous de la catégorie Largeur pour sélectionner une épaisseur de bordure (par exemple, moyenne) pour les quatre côtés. Utilisez le sélecteur de couleurs le plus haut sous la colonne Couleur pour attribuer une couleur de bordure aux quatre côtés.

   Pour assigner des valeurs différentes à un ou à tous les côtés pour le style, la largeur ou la couleur, décochez la case Identique à Tous sous leurs colonnes respectives.

9. Dans la catégorie Boîte à gauche, sous Remplissage, définissez le rembourrage pour les quatre côtés de la boîte à l'épaisseur souhaitée (par exemple, entrez 5 px dans les zones de texte).

10. Cliquez sur OK pour quitter le panneau et appliquer les modifications.

    Vous voyez comment les propriétés CSS que vous avez appliquées affectent la zone apDiv1 sur la page.

Pour masquer une case affichée sous le panneau AP Elements, cliquez sur la colonne à gauche de son nom (sous l'icône Eye) jusqu'à ce qu'une icône Eye fermée s'affiche.Pour que la boîte réapparaisse, cliquez sur l'icône Œil jusqu'à ce que la boîte s'ouvre à nouveau.

Vous pouvez remarquer la case à cocher Empêcher les chevauchements, désélectionnée par défaut, en haut du panneau Éléments AP. Comme AP Divs peut facilement se chevaucher, la sélection de cette case à cocher annule ce comportement en forçant les cases les unes à côté des autres et en empêchant la création de nouvelles boîtes les unes sur les autres.