Corral Your Styles with Dreamweaver's CSS Visualization Tools
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
You can't create a modern website without using Cascading Style Sheets (CSS) to lay out your pages and style your page content. Using CSS throughout your site makes the site easier to maintain and update; makes it download faster and use less bandwidth; and makes it more accessible to every type of browser, from desktop to tablet to mobile. Of course, using CSS brings its own set of problems, chief of which is the difficulty of knowing which CSS properties and rules apply to a given page element. Happily, Dreamweaver provides a rich set of tools to help you zero in and easily modify the rules and properties that affect the look and layout of your page. In this article, we'll dive into Dreamweaver's visualization tools and the Code Navigator, which together can help you unravel the most complicated cascade of properties and rules. Once you figure out how CSS is styling a particular element, it's easy to make changes using Dreamweaver's CSS Styles panel.
Showing Off the Containers
Before we look at Dreamweaver's visual aids for CSS, let's do a quick review of the CSS box model. You create boxes as containers for the content on your page (almost always by adding a div tag) and then you use CSS to position the box on the page. Each box contains several elements, as shown in Figure 1. A box has a margin, border, padding, and content. Using CSS, you can set rules for each of these elements. For example, you can set different rules specifying the values for the top, right, bottom, and left sides of an element.
)
Your page will be made up of many different divs, and Dreamweaver allows you to see all of them at once. This feature is useful when you want to get an overall idea for where the different layout blocks are on the page, but for the majority of your work you'll use tools that offer more precision.
Let's begin by taking a look at our example page in Dreamweaver's Design view (see Figure 2).
)
This page has been laid out using CSS, but it also uses a Dreamweaver template and editable areas. (The areas with the teal borders labeled Page Title and Page Content show how Dreamweaver shows editable areas in Design view.) To see all the different blocks on the page, we'll turn on the first of Dreamweaver's visual aids, CSS Layout Backgrounds.
Go to the Visual Aids menu in the Document toolbar. Although it looks like a button, that tiny down arrow on the icon means that this is actually a pop-up menu. Click it to display the options in Figure 3. To turn each visual aid on or off, choose it from the menu to toggle its checkmark, or choose Hide All Visual Aids to turn them all off temporarily. For day-to-day use, I keep CSS Layout Backgrounds turned off and CSS Layout Box Model and CSS Layout Outlines turned on.
)
Make sure that you're in Dreamweaver's Design view (click the Design button in the Document toolbar), and then choose CSS Layout Backgrounds from the Visual Aids menu. The result, as shown in Figure 4, displays every layout block with a different background color. You can't change the garish colors that Dreamweaver uses for the boxes, but they do make it very clear which div is which. Turn off CSS Layout Backgrounds by choosing it again from the Visual Aids menu.
)
You can get a more precise view of the individual divs on your page by using Dreamweaver's CSS Inspect mode. This feature works with Live View mode to display the box model for an element. When you hover the pointer over an element on your page, Dreamweaver displays that element with an aqua background, yellow margins, lavender padding, and gray borders, as mostly shown in Figure 5 (the box in the figure doesn't use borders). Best of all, as you hover over various parts of your document, the CSS Styles panel (in Current mode) updates dynamically to display the rules currently in effect.
)
To turn on Inspect mode, click the Live View button and then the Inspect button that appears in the Document toolbar. Or choose View > Inspect to enable both CSS inspection and Live View in one step. When you turn on inspection, Dreamweaver shows an alert bar at the top of the document window (see Figure 6), offering to change views to what Dreamweaver suggests as the best way to use Inspect mode. Clicking the More Info link in this alert bar displays a dialog with the proper settings (see Figure 7). I recommend clicking the Switch Now link in the alert bar or the Switch button in the dialog. When you do that, Dreamweaver changes the display to a very useful split view that highlights the code as you hover over page elements in the Live View pane, as shown in Figure 8.
){kind=small}
)
)
When you're using Inspect mode, clicking an element in the Live View pane freezes the mode, so the colors remain visible and don't change when you move the cursor. Then you can move to the CSS Styles panel, change the rule, and see the colored borders around the element update to match your change. For example, Figure 9 shows the rules and properties in the CSS Styles panel for the text paragraph shown earlier (refer to Figure 5). If we increase the values of the padding-left and padding-right properties in the CSS Styles panel, the changes are reflected in CSS Inspect mode, as shown in Figure 10.
When you're done with CSS inspection, click anywhere in the document to exit the mode and get rid of the special colors.
)
)