Using Commands for Editing Code
Dreamweaver commands are a series of steps that have been grouped together into an automated task. Dreamweaver has several built-in commands, including four commands that involve editing code: Clean Up HTML, Clean Up Word HTML, Apply Source Formatting, and Apply Source Formatting to Selection.
Clean Up HTML
Dreamweaver can automatically fix improperly nested tags, combine nested font tags, remove empty tag sets, and otherwise clean up unreadable HTML or XHTML code via the Clean Up HTML or Clean Up XHTML command.
For XHTML documents, Dreamweaver automatically sets the case of all attributes to lowercase, adds or reports missing required attributes, and fixes XHTML syntax errors. For more information on using XHTML in Dreamweaver, see Chapter 14, "XML and XHTML."
To clean up HTML or XHTML code:
- Open an HTML or XHTML document in Dreamweaver.
- From the Command menu, choose Clean Up HTML or Clean Up XHTML.
The Clean Up HTML/XHTML dialog appears (
Figure 3.38
).
Figure 3.38 The Clean Up HTML/XHTML dialog.
- Select from the following options in the Remove section:
- Empty Container Tags removes any tags without content.
- Redundant Nested Tags removes any redundant occurrences of a tag—a tag that's nested within the same tag.
- Non-Dreamweaver HTML Comments removes any comments that weren't inserted by Dreamweaver.
- Dreamweaver Special Markup removes comments that Dreamweaver adds to library items and templates.
- Specific Tag(s) removes specified tags such as font tags or tags created in other editors.
- Select from the following choices in the Options section:
- Combine Nested <font> Tags When Possible combines multiple font tags that wrap the same block of text.
- Show Log-on Completion displays an alert box that list all changes made to the document.
- Click OK to initiate the command and close the Clean Up HTML/XHTML dialog.
Clean Up Word HTML
HTML documents created in Microsoft Word contain special Word markup that is used for formatting and displaying documents in Word. If you want to use an HTML document created in Word, you can open it in Dreamweaver and then apply the Clean Up Word HTML command to remove extraneous code generated by Word.
To clean up Word HTML:
- Open a Word HTML file in Dreamweaver.
- From the Command menu, choose Clean Up Word HTML.
The Clean Up Word HTML dialog appears, with the Basic tab selected by default (
Figure 3.39
).
Figure 3.39 The Clean Up Word HTML dialog with the Basic tab selected.
- All options in the Clean Up Word HTML dialog are selected by default. Deselect any options you don't want to be applied:
- Remove All Word Specific Markup removes all Microsoft Word–specific tags. You can select options for removing Word markup on the Detailed tab.
- Clean Up CSS removes all Word–specific CSS markup. You can set options for removing Word CSS on the Detailed tab.
- Clean Up <font> Tags removes all font tags and converts the text display to HTML size 2.
- Fix Invalidly Nested Tags removes all invalidly nested font tags added by Word.
- Set Background Color lets you add a background color to the page. Otherwise, your page will have a gray background.
- Apply Source Formatting applies the source formatting options you set in the Code Format pane of the Preferences dialog.
- Show Log-on Completion displays an alert box that lists all changes made to the document.
- Select the Detailed tab (
Figure 3.40
) to customize selections for Remove Word Specific Markup and Clean Up CSS.
Figure 3.40 The Detailed tab of the Clean Up Word HTML dialog.
- Click OK to initiate the command and close the Clean Up Word HTML dialog.
Apply Source Formatting
Dreamweaver applies preferences from the Code Format pane of the Preferences dialog to any new documents that you create. To apply the same formatting to existing documents, you can use the Apply Source Formatting command. You can apply source formatting to an entire document or to only a selection of a document.
To apply source formatting:
- Open a document in Dreamweaver.
- From the Command menu, choose Apply Source Formatting. The selected preferences from the Code Format pane of the Preferences dialog are applied to the open document.
To apply source formatting to a selection:
- Make a selection in an open document.
- From the Command menu, choose Apply Source Formatting to Selection. The selected preferences from the Code Format pane are applied to the selection.