User Interface Changes

Dreamweaver 8 retains much of the CSS-specific user interface elements introduced in Dreamweaver MX 2004. In fact, the MX 2004 interface choices are so important to this version’s workflow that I am including a section specifically describing the interface elements that remain the same. The changes in this version build off the existing interface, incorporating enhancements intended to streamline user workflow.

Property Inspector

The Property inspector sees only one change: the introduction of the CSS/Edit CSS button. This button gives the developer quick access to the pertinent definition in the CSS Styles panel. If the CSS Styles panel is already open, the CSS button is dimmed. The screen shot illustrates that I selected a paragraph <P> tag that had been styled, but since the CSS Styles panel was already open to that style, the CSS button is disabled.

Figure 1. The Property inspector in Dreamweaver 8 with the CSS button dimmed because the CSS Styles panel is already open to the selected style

CSS Styles Panel

The CSS Styles panel has seen some interesting changes, and these changes will be of special interest to developers who use an external CSS editor.

The first change is very subtle: The panel grouping, which includes the CSS Styles panel and the Layers panel, is called CSS. As shown in Figure 2, this change is very subtle, but will improve a user’s ability to find the pertinent panel group quickly.

Figure 2. The panel group has been renamed CSS to improve usability

Note: When you collapse the CSS panel group as shown in Figure 2, clicking the CSS button in the Property inspector will open the CSS Styles panel. So, users should always be able to find this panel group.

Once the CSS Styles panel is open, the changes for Dreamweaver 8 become much more evident, and users face possible confusion.

The CSS Styles panel has two modes: All and Current. I actually find this nomenclature confusing, although it may only be confusing because it is so simple. The All mode displays a listing of declarations affecting the entire page—essentially “all” of the declarations. The Current mode displays the CSS declarations affecting the current element. See? There is no reason for confusion!

Current Mode

While in Current mode, the CSS Styles panel includes the following displays: Summary for Selection, Rules, and Properties. Figure 3 illustrates what I see with my insertion point in a paragraph that has been redefined to display blue in Geneva, 12 pixels.

Figure 3. The CSS Styles panel in Current mode with the insertion point in a paragraph that has been redefined to display blue in Geneva, 12 pixels

The Summary category lists only those attributes affecting the appearance of the selection (in this case, the paragraph currently selected). If I click within another paragraph assigned a class style called hilite_text, the summary category in the CSS Styles panel shows the new color defined by that class style (#99FF66) as shown in Figure 4 rather than the color defined by the redefinition of the paragraph tag (#0000FF).

Figure 4. The Summary, Rules and Properties categories of the CSS Styles panel showing info for the hilite_text style class

The Rules category displays the cascade of rules affecting the current selection. Refer to Figure 4 for an illustration of this. In Figure 4, the first in the cascade is the styling defined in the body tag. The attributes defined in that rule are contradicted by rules “closer” to the selection, so those attributes are not displayed in the summary section. In CSS terms, this “closeness” is known as specificity. You can learn more about specificity on the W3C site. The attributes set by the redefinition of the paragraph tag are next in the cascade, but only the font-family and font-size attributes affect the current selection. The final rule is the hilite_text class style, which only defines the color of the text.

There’s a nifty alternate display, available by clicking the inner button in the Rules section. This About category displays useful information about the currently selected property, as shown in Figure 5. The property selected is the color property, as the About category heading indicates. The About category indicates which rule houses the specific property, and where that rule is defined.

Figure 5. The About category in the Current mode showing which rule houses the specific property, and where that rule is defined

That brings me to the Properties category of the CSS Styles panel. Click any property in the Summary category or click a rule in the Rules category, and the properties defined in the corresponding rule will display in the Properties category. The Properties category will also indicate which properties are affecting the selection: any properties that contradict and that are further up the cascade ladder will show a line through the property name. Try this by selecting the word “highlighted” on the first line of the csstest.htm file and then select the <body> tag in the Rules category. You will notice in the Properties category that font-family and font-size both have lines through them because the properties defined for font-family and font size in the <body> tag are contradicted by the properties for font-family and font-size defined in the <p> tag. Properties in the <p> tag override rules in the <body> tag because they are “closer” to the highlight selection.

Note: You will create the csstest.html file later in this article, but you can follow along with the csstest.html file in the sample files for now.

The Properties category is something of the meat-and-potatoes of the panel. Not only can you edit the details of any property already defined (for example, changing the color property defined in .hilite_text from #99FF66 to another color is as simple as clicking the color box or typing a new color), you can also add a property to that rule. Clicking the Add Property link provides a different-to-Dreamweaver method of defining CSS styles, but I will detail that in the User Workflow section.

All Mode

The All mode of the CSS Styles panel shows all of the rules available to the page, whether those rules are defined within the head of the page or in a separate style sheet linked or imported from the page. As illustrated by Figure 6, the rules are separated according to where they are defined: rules defined within the head of the document appear under <style> while rules defined in a style sheet appear under the style sheet name.

Note: Inline styles—styles defined within the tag itself—do not appear in the All mode, but they do appear when appropriate in the Current mode.

Figure 6. The CSS Styles panel in All mode showing rules separated according to where they are defined

In addition to the listing of rules in the All Rules category, there is also a Properties sheet that performs the same as the one in Current mode. This mode seems familiar to the CSS Styles panel in Dreamweaver MX 2004, in that it displays and organizes the rules available to the page. The difference (a very welcome one) is that the Properties sheet allows you to see the properties of any selected rule, change any property, and add a property to the rule. Gone are the days of wishing the panel was 500 pixels wide to see all the properties!

Properties Sheet

The Properties sheet deserves its own section because it is so powerful. As I have mentioned, it is available for both All and Current modes. Astute Dreamweaver MX 2004 users will notice the similarities between it and the Relevant CSS panel (which it replaces). The power and flexibility of this user interface element will gradually sink in as you use Dreamweaver 8, and I will spend more time talking about how to use it in a workflow. For now, though, let me point out the buttons in the lower left corner.

Figure 7. The right button of the properties sheet shows only the properties that are set in the current document rather than all properties that can be set

For the screen shots I have provided in this section, I have selected the right button, which shows only the set properties. The other two buttons show all of the properties that CAN be set, listing them as grouped by category (left button) or listed alphabetically (middle button).

In the next section, I will review all the new features for visual display of CSS within Dreamweaver 8.