Web Design All-in-One For Dummies, 2nd Edition
Book image
Explore Book Buy On Amazon

Most web code editors have a command that automatically cleans up the common errors in your code. For instance, the Clean Up Word HTML/XHTML command in Dreamweaver is a must for any webpage that includes content that was copied from Word or any other Microsoft documents.

This is important because Microsoft files often embed extra markup when pasted into a web page to make the file’s content retain its formatting. Unfortunately, on the web, all this extra Microsoft HTML code is unnecessary. Therefore, you must use a tool like this to strip that extra markup out of your pages to ensure that your code — not Microsoft’s — dictates the look of the site within the browser.

To access the Clean Up Word feature in any open document in Dreamweaver, follow these steps:

Choose Commands→Clean Up Word HTML.

Choose Commands→Clean Up Word HTML.

The Clean Up Word HTML dialog box opens.

Enable or disable the cleanup settings as desired on both the Basic and Detailed tabs of the dialog box.

By default, all the options on both tabs are automatically enabled to provide the most robust form of cleanup. Here’s an overview of the options on the Basic tab:

Remove All Word Specific Markup: This setting deletes any special markup that is required to format the page in Word and Word HTML files but is unnecessary in a normal HTML file.

Clean Up CSS: Enable this option to delete any Microsoft Word–specific CSS markup, such as <p class=”MSO Normal” style=”Margin-TOP:3em”>. This type of markup can override your CSS, so be sure to leave this one turned on.

Clean Up <font> Tags: This setting deletes any instances of old <font> tags for styling.

Fix Invalidly Nested Tags: Word sometimes adds markup to a page outside normal heading and paragraph tags, which don’t conform to valid tag-nesting standards. This option removes those tags.

Apply Source Formatting: Source formatting is determined by the options specified in Dreamweaver’s SourceFormat.txt file as well as the Code Format settings in the Preferences panel. Leave this one enabled.

Show Log on Completion: Select this check box to see a summary of the cleanup results.

Click OK to run the Clean Up operation.

Click OK to run the Clean Up operation.

Upon completion of the cleanup process, Dreamweaver displays an alert box with details about the cleanup.

About This Article

This article is from the book:

About the book author:

Sue Jenkins is a working designer as well as a design trainer and author. Her design firm, Luckychair, provides design services for web, logo, and print. Sue has also created a series of training DVDs on popular Adobe design tools including Photoshop, Dreamweaver, and Illustrator.

This article can be found in the category: