| home / authoring / languages / html / cm / joydreamweaver / chap4 |    [previous] [next] |
|
|
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.
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.
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.
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.
| home / authoring / languages / html / cm / joydreamweaver / chap4 | [previous] [next] |
The Joy of Dreamweaver MX, By Paul Newman
Copyright (c) 2002 by The McGraw-Hill Companies
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: September 16, 2002
Revised: September 16, 2002
URL: http://webreference.com/authoring/languages/html/joydreamweaver/chap4/4.html
