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

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

To page 1To page 2To page 3current pageTo page 5To page 6To page 7To page 8
[previous] [next]

The Joy of Dreamweaver MX: Chapter 4

TopStyle Pro Integration

Although TopStyle Lite is bundled with Dreamweaver MX, you need TopStyle Pro (2.51 or higher) to take advantage of the latest integration features. Fortunately, the trial version of TopStyle Pro allows unlimited usage. To download TopStyle Pro, visit Bradbury Software's web site: http:// www.bradsoft.com/topstyle/download. To support future development of TopStyle, please register the software if you decide to keep it.

Once the software is installed, Dreamweaver MX automatically detects TopStyle Pro and makes it the external editor for style sheets. To make TopStyle Pro the default editor for embedded styles, launch Dreamweaver MX and open the CSS Styles panel (Window | CSS Styles). Open a web page, such as Chapter4.htm, and right-click inside the CSS Styles panel. Make sure Use External Editor is checked.

Cheking the 'Use External Editor' option

If you installed TopStyle Pro after installing Dreamweaver MX, you can enable integration using TopStyle's options. Launch TopStyle Pro and choose Options | Options, or press F8. Select Third Party Integration on the left, and click Enable Dreamweaver Integration. While you're at it, you may want to click Enable HomeSite Integration as well.

For more on Dreamweaver/TopStyle integration, visit Bradbury Software's web site: http://www.bradsoft.com/topstyle/thirdparty/dmx/index.asp.

Editing Style Sheets

After you've enabled the integration of Dreamweaver MX and TopStyle Pro, you can invoke TopStyle Pro by double-clicking any style defined in the CSS Styles panel. To demonstrate this, we'll create an external style sheet for the Chapter4 site. Open Chapter4.htm in Dreamweaver MX and click the New CSS Style icon on the CSS Styles panel toolbar. This opens the New CSS Style dialog box. Select the Redefine HTML Tag radio button and choose body from the Tag drop-down menu. Select the (New Style Sheet File) option and click OK.

New CSS Style Dialog

Dreamweaver MX prompts you to name the external style sheet. Enter Chapter4.css in the File Name text box and click Save.

In the CSS Style Definition dialog box, select Georgia, Times New Roman, Times, serif from the Font drop-down menu, and choose 10 from the Size drop-down menu. Click OK.

Dreamweaver MX generates the new external style sheet. If you examine the CSS Styles panel, you'll see that Chapter4.css appears below Chapter4.htm. Now we can use Dreamweaver MX and TopStyle Pro to edit styles defined in an external style sheet (i.e., Chapter4.css), or embedded styles defined in an HTML document (i.e., Chapter4.htm).

NOTE: An embedded CSS style is one that is defined in the current document--usually embedded between the <head> tags--rather than in an external style sheet. An inline style is one that appears within an HTML element (e.g., <input type="button" style="font-size:10px">).

To switch between using Dreamweaver MX and TopStyle Pro to edit your CSS styles, simply right-click inside the CSS Styles panel and check (or uncheck) Use External Editor.


To page 1To page 2To page 3current pageTo page 5To page 6To page 7To page 8
[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/4.html