Représentation visuelle en mode Création de Dreamweaver

Cette section regroupe toutes les modifications qui feront pleurer de joie les développeurs de feuilles de style CSS. De nouveaux outils permettent de mieux voir l'effet des styles et les propriétés de style rendues par Dreamweaver ont également été améliorées.

Outils d'affichage des feuilles de style CSS

Le premier groupe d'options d'affichage permet d'ouvrir ou créer une page contenant différentes feuilles de style et prenant en charge différents types de supports. Vous pouvez sélectionner Affichage > Rendu du style, puis choisir un autre type de support pour concevoir ou tester des styles. Si vous vous posez la question (je sais que nombre d'entre vous se la pose !), la méthode la plus simple d'intégration de plusieurs types de support dans un site Web consiste à définir une feuille de style dédiée au support d'impression. Le site Web macromedia.com a recours à ce type de feuille de style.

Figure 8. Le menu Rendu du style présente les types de support possibles

La dernière option est très pratique, mais facile à oublier : Afficher les styles. Elle est activée par défaut. Désactivez-la pour supprimer tous les rendus CSS. Ceci permet de faciliter la validation du code d'accessibilité. Par exemple, vous pouvez vérifier le code de la page sans la feuille CSS de façon à vérifier l'ordre de lecture du contenu par un lecteur d'écran.

L'autre groupe d'options d'affichage est accessible à partir de la barre d'outils Document. Cliquez sur le bouton d'assistance visuelle (avec un œil bleu) pour obtenir le sous-menu suivant.

Figure 9. Menu Assistance visuelle de la barre d'outils Document

Ces options seront particulièrement pratiques pour les utilisateurs définissant des propriétés portant sur la boîte et les contours. J'ai associé une copie d'écran de la page correspondant aux explications ci-dessous. Chaque copie d'écran indique comment la page s'affiche lorsque seule l'option d'affichage décrite est activée. La capture d'écran inclut une balise DIV définissant la position, le remplissage et les marges, et une balise DIV servant uniquement à inclure une balise P.

• Arrière-plan de mise en forme CSS : cette option ajoute une couleur d'arrière-plan aux éléments affectés par une propriété CSS. L'activation de cette option peut affecter la couleur du texte ; elle doit donc être activée ou désactivée en fonction du but recherché.

  Remarque : La couleur des arrière-plans peut ne pas correspondre à ceux de la figure 10 et les couleurs d'arrière-plan changent selon que vous activez ou désactivez cette fonction. Dreamweaver permet d'appliquer jusqu'à 16 couleurs d'arrière-plan. Si vous disposez de plus de 16 balises DIV sur votre page et si certaines sont incorporées, les couleurs d'arrière-plan qui se chevauchent risquent d'être identiques. L'activation ou la désactivation de cette fonctionnalité permet de contourner ce problème.

  

  Figure 10. Styles affichés lorsque l'assistance visuelle Arrières-plans de mise en forme CSS est activée

• Modèle de boîtes en feuilles CSS : cette option permet d'ajouter des hachures aux bords externes et internes d'une boîte sélectionnée, afin de faire ressortir les paramètres de remplissage et de marge. Vous devez sélectionner la bordure en pointillés du fichier d'exemple csstest.htm pour que ce dernier s'affiche comme indiqué dans la figure 11. De plus, une fois l'élément sélectionné, une info-bulle s'affiche en fonction de l'endroit survolé. Dans la capture d'écran ci-dessous, je survole le contour de la balise DIV sélectionnée. Si je survole les hachures externes, l'info-bulle donne uniquement les paramètres de marge. Par contre, si je survole les hachures internes, l'info-bulle donne uniquement les paramètres de la marge interne. Lorsque je survole le contenu, l'info-bulle donne des paramètres tels que la largeur et la hauteur.

  

  Figure 11. Styles affichés lorsque l'assistance visuelle Modèle de boîtes en feuilles CSS est activée

• Contours en feuille CSS : cette option ajoute un contour aux balises DIV. Ceci permet au développeur de sélectionner ce type de balise et de voir les éléments qu'elle contrôle. Par exemple, dans la copie d'écran ci-dessous, il est évident que le dernier paragraphe de la page ne figure pas dans une balise DIV, contrairement à celui qui est situé au-dessus.

  

  Figure 12. Styles affichés lorsque l'assistance visuelle Contours en feuille CSS est activée

• Contour des calques : cette option ajoute uniquement un contour aux balises DIV qui sont définies dans les propriétés du modèle de boîte. En d'autres termes, elle entoure les balises DIV qui sont utilisées à des fins de positionnement. Ceci est illustré dans la capture d'écran ci-dessous (souvenez-vous du paragraphe intermédiaire contenu dans une balise DIV, bien que cette balise ne soit pas encadrée). La boîte du haut conserve sa bordure sélectionnée.

  

  Figure 13. Styles affichés lorsque l'assistance visuelle Contours des calques est activée

Amélioration de la représentation visuelle des éléments

Dreamweaver 8 est un outil formidable pour le rendu des éléments CSS, ce qui inclut au moins l'un des éléments présentés dans les captures d'écran précédentes. Auparavant, les différents types de bordure des éléments « boîte » s'affichaient avec une seule ligne. Dreamweaver 8 permet désormais d'afficher tous les types de bordure, ce qui inclut la ligne en pointillés illustrée dans les captures d'écran.

Les améliorations les plus visibles portent sur le rendu des éléments de positionnement par Dreamweaver, notamment ceux des pages complexes avec des balises incorporées. Vous trouverez ci-dessous une sélection des améliorations apportées au mode de rendu :

• Styles des bordures
• Propriétés de positionnement, notamment des éléments incorporés
• Prise en charge de la propriété de débordement
• Eléments factices de première ligne et première lettre
• Prise en charge du rendu des propriétés CSS sur une règle horizontale

Page 3 sur 10

Page précédente

Page suivante