Visual Display in Dreamweaver Design View

In this section, you can find all of the changes that will make advanced CSS developers weep with joy. There are new tools to help you see styles display as well as improvements in the style properties Dreamweaver renders.

Tools for CSS Display

The first group of display choices allow you to view or create a page that has different style sheets supporting different media types. You can select View > Style Rendering, and then choose a different media type to design or test the styles. In case you are wondering (and I know some of you are!), the easiest way to integrate multiple media types in a website is to define a separate style sheet for print media. The macromedia.com website makes use of a separate print media style sheet.

Figure 8. The Style Rendering menu showing the possible media types

A handy easy-to-overlook option is the last one: Display Styles. This option is enabled by default, but deselecting it removes all CSS rendering. This is useful as a sanity check for those of you who are concerned about accessibility. For example, reviewing the page without CSS rendering can help a developer see the order of content as a screen reader might encounter it.

The other group of display choices is available from the Document Toolbar. Clicking the visual aids button (the funny-looking eye) presents the following submenu.

Figure 9. The Visual Aids menu in the document toolbar

These choices will be most useful for users defining properties that include box properties and outlines. For each of the explanations below, I include a screen shot of exactly the same page. Each screen shot shows how the page is displayed with only the described display option enabled. The screen shot includes a DIV tag defined with positioning, padding, and margins; a DIV tag used only to house a P tag, and a P tag.

• CSS Layout Backgrounds: This choice will add a background color to any elements affected by a CSS property. Turning this setting on can affect the color appearance of text elements, so I recommend that you enable and disable the option as needed.

  Note: The color of the layout backgrounds may not match those in Figure 10, and the background colors will change if you turn the feature on and off. There are a total of 16 colors that Dreamweaver can assign to the background colors. If you have more than 16 DIV tags on a page and some are nested, the overlapping background colors may be the same color. Turning this feature off and back on will help you work around this.

  

  Figure 10. Styles shown with the CSS Layout Backgrounds visual aid enabled

• CSS Layout Box Model: This choice adds some crosshatching to the inside and outside of a selected box element, representing any padding and margin settings. You will need to select the dotted border in the csstest.htm sample file for it to display as shown in Figure 11. Also, once the element is selected, there is a tooltip that will appear depending on where within the element you hover. In the screen shot below, I was hovering over the outline of the selected DIV tag. If I hover over the outer crosshatch, the tooltip indicates only the margin settings. If I hover over the inner crosshatch, the tooltip indicates only the padding settings. If I hover over the inside of the content, the tooltip indicates settings such as width and height.

  

  Figure 11. Styles shown with the CSS Layout Box Model visual aid enabled

• CSS Layout Outlines: This option adds an outline to any DIV tags. If nothing else, this is useful to help a developer select the DIV tag, but it is a handy way of seeing which elements are controlled by DIV tags. For example, in the screen shot below, it is simple to see that the last paragraph on the page is not in a DIV tag, but the one above it is.

  

  Figure 12. Styles shown with the CSS Layout Outlines visual aid enabled

• Layer Outlines: This option adds an outline only to DIV tags that are defined with box model properties. In other words, it outlines those DIV tags that are used for positioning purposes. This is illustrated in the screen shot below (remember the middle paragraph is contained in a DIV tag, yet that tag is not bordered). The top box still retains its highlighted border.

  

  Figure 13. Styles shown with the Layer Outlines visual aid enabled

Visual Display of Elements Has Improved

Dreamweaver 8 does an admirable job of rendering CSS elements, including at least one of the elements shown in the previous screen shots. Previously, box elements defined with a border of any kind displayed with a single line. Dreamweaver 8 now displays all border types, including the dashed line illustrated in the screen shots.

The most apparent improvements are how Dreamweaver renders various positional elements, especially those in complex pages and with nested tags. The following is a sampling of the rendering improvements:

• Border styles
• Positioning properties, especially nested elements
• Support for the overflow property
• First-line and first-letter pseudo elements
• Support for rendering CSS properties on a horizontal rule