Modifications de l'interface utilisateur

La version 8 reprend la plupart des options propres aux feuilles de style CSS qui ont été introduites avec Dreamweaver MX 2004. En fait, les choix d'interface de la version MX 2004 sont si importants pour le flux de travail de la version 8 que j'ai inclus une section portant exclusivement sur les éléments d'interface qui sont restés identiques. Les modifications apportées dans la nouvelle version s'appuient sur l'interface existante, en incorporant des améliorations conçues pour standardiser le flux de travail des utilisateurs.

Inspecteur Propriétés

L'inspecteur Propriétés n'a fait l'objet que d'une seule modification : l'introduction du bouton CSS/Modifier feuille de style. Ce bouton permet au développeur d'accéder rapidement à la définition pertinente dans le panneau Styles CSS. Lorsque le panneau Styles CSS est ouvert, le bouton CSS est désactivé. La capture d'écran illustre la sélection d'une balise de paragraphe, <P>, à laquelle un style a été appliqué. Cependant, dans la mesure où le panneau Styles CSS est déjà ouvert, le bouton CSS est désactivé.

Figure 1. Inspecteur Propriétés de Dreamweaver 8 avec son bouton CSS désactivé parce que le panneau Styles CSS affiche déjà le style sélectionné

(+) Agrandir

Panneau Styles CSS

Le panneau Styles CSS a fait l'objet de quelques modifications intéressantes. Ces modifications sont particulièrement utiles pour les développeurs ayant recours à un éditeur CSS externe.

La première modification est très discrète : le groupement de panneaux, ce qui inclut les panneaux Styles CSS et Calques, a été renommé CSS. Comme indiqué dans la figure 2, cette modification est très modeste, mais elle permet à l'utilisateur de trouver plus rapidement le groupe de panneaux voulu.

Figure 2. Le groupe de panneaux a été renommé CSS pour des raisons pratiques

Remarque : Lorsque le groupe de panneaux CSS est réduit, comme indiqué dans la figure 2, cliquez sur le bouton CSS dans l'inspecteur Propriétés pour afficher le panneau Styles CSS. De cette façon, les utilisateurs peuvent toujours accéder facilement au groupe de panneaux.

Une fois le panneau Styles CSS ouvert, les nouveautés de Dreamweaver 8 deviennent beaucoup plus évidentes, ce qui peut porter à confusion.

Le panneau Styles CSS dispose de deux modes : Tous et Actuel. Je trouve cette organisation un peu déroutante, sans doute à cause de sa simplicité. Le mode Tous affiche une liste de déclarations portant sur l'ensemble de la page, ce qui correspond à « toutes » les déclarations. Le mode Actuel affiche les déclarations CSS qui portent sur l'élément sélectionné. Vous voyez ? Il n'y a aucun risque de confusion !

Mode Actuel

Lorsque ce mode est actif, le panneau Styles CSS inclut les options suivantes : Résumé de la sélection, Règles et Propriétés. La figure 3 illustre ce qui s'affiche lorsque le point d'insertion est dans un paragraphe qui a été redéfini pour s'afficher en bleu avec la police Geneva, 12 pixels.

Figure 3. Le panneau Styles CSS du mode actif où le point d’insertion figure dans un paragraphe redéfini sur texte en bleu, Geneva, 12 pixels

La section Résumé affiche uniquement les attributs ayant un impact sur l'aspect de la sélection (dans ce cas, le paragraphe sélectionné). Si je clique dans un autre paragraphe ayant reçu le style de classe appelé hilite_text, la section Résumé du panneau Styles CSS affiche la nouvelle couleur définie par ce style de classe (#99FF66), comme illustré par la figure 4, et non pas la couleur définie lors de la modification de la balise de paragraphe (#0000FF).

Figure 4. Les catégories Résumé, Règles et Propriétés du panneau Styles CSS affichent des infos sur la classe du style hilite_text

La catégorie Toutes les règles affiche la suite de règles portant sur la sélection actuelle. Consultez la figure 4 pour en obtenir une illustration. Dans la figure 4, la première règle de la « cascade » correspond au style défini pour la balise body. Les attributs définis dans cette règle sont remplacés par des règles qui sont « plus proches » de la sélection, de façon à ce que ces attributs ne soient plus affichés dans la section de résumé. En jargon CSS, cette « proximité » est appelée spécificité. Vous trouverez plus de détails sur la spécificité sur le site de W3C*. Les attributs définis lors du changement de définition de la balise de paragraphe viennent en second et se limitent à la famille de police et aux attributs de taille qui portent sur la sélection actuelle. La dernière règle est le style de classe hilite_text qui définit uniquement la couleur du texte.

Vous disposez d'un écran supplémentaire très pratique, accessible en cliquant sur le bouton situé dans la section Règles. Cette section A propos affiche des informations utiles sur la propriété sélectionnée, comme indiqué dans la figure 5. La propriété sélectionnée est la propriété color, comme indiqué par le titre de la section A propos. Cette section indique la règle comportant la propriété en cours d'édition et l'emplacement où cette règle est définie.

Figure 5. La catégorie A propos du mode actuel indiquant la règle comportant la propriété et l’endroit où cette règle est définie

Ceci nous amène à la catégorie Propriétés du panneau Styles CSS. Cliquez sur une propriété dans la section Résumé ou cliquez sur une règle dans la section Règles ; les propriétés définies dans la règle correspondante s'affichent dans la section Propriétés. La section Propriétés indique également les propriétés qui influent sur la sélection : toute propriété contradictoire située plus haut dans la hiérarchie voit son nom barré. Pour ce faire, essayez de sélectionner le mot « highlighted » sur la première ligne du fichier csstest.htm, puis sélectionnez la balise <body> dans la section Règles. Vous pouvez alors constater que, dans la section Propriétés, cette famille et cette taille de police sont barrées dans la mesure où les propriétés définies pour ces dernières dans la balise <body> sont remplacées par les propriétés spécifiées par la balise <p>. Les propriétés de la balise <p> remplacent les règles de la balise <body>, car elle sont « plus proches » de la sélection.

Remarque : Vous allez créer le fichier csstest.html plus bas dans cet article, mais vous pouvez suivre à l'aide du fichier csstest.html fourni dans le dossier d'exemples.

La section Propriétés est un peu la section à tout faire du panneau. Non seulement vous pouvez modifier les détails des propriétés déjà définies (par exemple, la modification de la propriété color de .hilite_text, en remplaçant #99FF66 par une autre couleur, nécessite uniquement de cliquer sur la boîte de sélection de couleurs ou de taper une nouvelle couleur), mais encore vous pouvez ajouter une propriété à la règle. Le fait de cliquer sur le lien Ajouter une propriété offre une autre possibilité de définition de styles CSS, en dehors de Dreamweaver, ce qui sera couvert plus en détails dans la section Flux de travail de l'utilisateur.

Mode Tous

Le mode Tous du panneau CSS affiche l'ensemble des règles disponibles pour la page, que ces règles aient été définies dans l'en-tête de la page ou dans une feuille de style externe et liée ou importée. Comme illustré par la figure 6, les règles sont classées en fonction de leur emplacement de définition : les règles définies dans l'en-tête du document s'affichent dans la section <style>, tandis que les règles définies dans une feuille de style s'affichent sous le nom de cette feuille.

Remarque : Les styles en ligne, styles définis au sein de la balise, ne s'affichent pas en mode Tous ; ils s'affichent en fonction de la sélection en mode Actuel.

Figure 6. Le panneau Styles CSS en mode Tous présente les règles en fonction de leur emplacement de définition

Outre la liste de règles dans la section Toutes les règles, vous disposez également d'une feuille Propriétés qui fonctionne de la même façon qu'en mode Actuel. Ce mode ressemble au panneau Styles CSS de Dreamweaver MX 2004, dans le sens où il affiche et organise les règles disponibles pour la page. La différence (importante) est que la feuille Propriétés permet de voir les propriétés d'une règle sélectionnée, de modifier des propriétés et d'ajouter une propriété à la règle. Finies les listes de propriétés pouvant occuper plus de 500 pixels !

Feuille Propriétés

La feuille Propriétés mérite sa propre section du fait de sa puissance. Comme indiqué précédemment, cette feuille est disponible aussi bien en mode Tous qu'en mode Actuel. Les utilisateurs perspicaces de Dreamweaver MX 2004 remarqueront les similarités entre ce panneau et le panneau CSS pertinents (qu'il remplace). La puissance et la souplesse de cet élément d'interface utilisateur se révéleront au fur et à mesure de l'utilisation de Dreamweaver 8, et je reviendrai dessus concernant son utilisation dans un flux de travail. Pour l'instant, je me contenterai de signaler les boutons situés dans le coin inférieur gauche.

Figure 7. Le bouton droit de la feuille de propriétés affiche uniquement les propriétés qui sont définies dans le document et non pas les propriétés pouvant être définies

Pour obtenir les captures d'écran fournies dans cette section, j'ai sélectionné le bouton droit, qui affiche uniquement les propriétés définies. Les deux autres boutons affichent toutes les propriétés qui PEUVENT être définies, en les regroupant par catégories (bouton gauche) ou en les présentant par ordre alphabétique (bouton intermédiaire).

Dans la section suivante, je vais aborder les nouvelles fonctionnalités d'affichage visuel du code CSS dans Dreamweaver 8.

Page 2 sur 10

Page précédente

Page suivante