WebReference.com - Chapter 4 from The Joy of Dreamweaver MX, from Osborne/McGraw-Hill (5/8)

[previous] [next]

The Joy of Dreamweaver MX: Chapter 4

Using the Output Panel

TopStyle Pro's integration with Dreamweaver MX includes a great new feature: any time you launch TopStyle Pro to edit a style, the current Dreamweaver MX document is used to preview it. To illustrate this, open the CSS Styles panel and double-click Chapter4.css.

TopStyle Pro opens Chapter4.css in an integrated workspace, not unlike Dreamweaver MX. Notice that Chapter4.htm appears in the Output panel (if you don't see the Output panel, choose View | Output or press CTRL-D). Like Dreamweaver MX, TopStyle Pro generates a temporary version of the document to preview the page. (In other words, TopStyle doesn't mess with your original document.)

Above the Output panel are the Selectors panel, the Editor panel, and the Style Inspector. The Editor panel contains the style sheet itself, in a format resembling Code view in Dreamweaver MX.

Let's change the font color to Slate Gray. In the Editor panel, place your cursor between the opening and closing {} brackets. The Style Inspector lists the selector's available properties.

NOTE: Cascading Style Sheets use the following syntax: selector {property:value}. The selector can be an HTML element, a Class, or an ID. The property is the attribute you want to change, such as font-size, color, border, padding, etc. For example, a CSS declaration that changes all anchor tags to red would look like this: a {color:#FF0000}. Multiple properties are separated by a semicolon (;).

Scroll down to color in the Style Inspector and place your cursor inside the value column. Click the Color Picker icon and select Slate Gray. Click OK to close the Color Picker dialog box.

The new property appears in the Editor panel: color: #708090. Notice that the text in the Output panel is now gray.

Let's create a new selector for the horizontal rule (<hr>) tag. In the Selectors panel, click the New Selector button. This launches TopStyle's Selector Wizard. Click Simple to create a selector that applies to an HTML element. In the left pane, scroll down and select hr. Click Add, and then click OK.

The hr selector appears in the Editor panel, and Style Insight displays a list of available properties. Select color, and then select Teal, from the Style Insight pop-up menus. Examine the Output panel: the horizontal rule is now green. Choose File | Exit or press ALT-X to close TopStyle Pro. Click Yes when prompted to save your changes to Chapter4.css.

When you return to Dreamweaver MX, the changes to the style sheet are reflected in the Document window. In addition, the new selector appears in the CSS Styles panel.

To configure TopStyle Pro to use preview documents that contain server-side code--e.g., ASP, ColdFusion, PHP--you need to add a mapping. To do this, choose Options | Options in Top Style Pro and select Mappings in the Preview category. Click Add and enter the physical path to your site's root folder in the Map From text box. Enter the virtual directory in the Map To text box (e.g., http://localhost/Chapter4/). Click OK.

Check the option to Use Mappings When Previewing and click OK. Now you can use TopStyle's Output panel to preview new styles using dynamic, as well as static, web pages.

[previous] [next]

The Joy of Dreamweaver MX, By Paul Newman
Copyright (c) 2002 by The McGraw-Hill Companies

Created: September 16, 2002
Revised: September 16, 2002

URL: http://webreference.com/authoring/languages/html/joydreamweaver/chap4/5.html