7.1 Cleaning Up Your HTML Code | Dreamweaver in a Nutshell

Clean HTML code is one sign of a conscientious HTML developer. No matter which tools you used to create your original HTML document, Dreamweaver can be used to clean it up and ensure compliance with HTML 4 standards. Although Dreamweaver features so-called Roundtrip HTML, it will rewrite HTML code when opening documents according to the settings under Edit Preferences Code Rewriting. You can hand-edit your HTML in the Document window's Code pane (View Code) or in the Code inspector (Window Code Inspector or F10).

7.1.1 Clean Up HTML

Although Dreamweaver's visual paradigm makes it easy to edit your page, it can also lead to duplicate tags and empty tags. Thankfully, Dreamweaver can automatically find and fix these and other problems in your HTML code. Use Commands Clean Up HTML to open the Clean Up HTML dialog box, shown in Figure 7-1.

Figure 7-1. The Clean Up HTML dialog box

The options in this dialog box control how Dreamweaver decides which HTML tags to remove, merge, or ignore.

The following checkboxes determine which tags Dreamweaver removes :

Empty Tags: Removes tags containing no content, such as <a></a> or  .
Redundant Nested Tags: Removes redundant tags, such as content , resulting in content .
Non-Dreamweaver HTML Comments: Removes all comments not added by Dreamweaver, which may also remove scripts and stylesheets that have been included in comment markers (  ) to support older browsers. Use with caution.
Dreamweaver HTML Comments: Removes Dreamweaver HTML features that rely on comments. Use with caution.

Removing Non-Dreamweaver HTML Comments removes any comments you've added, plus comments added by other programs. Consider using Design Notes instead of comments if you intend to strip out comments to optimize your HTML. Removing Dreamweaver HTML Comments turns template-based documents and library items into normal HTML code. It also removes tracing images, but does not remove comments inserted using Insert Invisible Tags Comments or SSIs inserted using Insert Server-Side Include.

Specific Tag(s): Removes the listed HTML tag. For multiple tags, specify a comma-separated list such as font, b, div . The Find and Replace option is easier to use to remove tags across multiple documents.
Combine Nested Tags When Possible: Combines nested  tags into a single  tag.
Show Log on Completion: Displays a dialog box showing a summary of the cleanup that was performed, such as "1 empty tag removed."

You should create a custom keyboard shortcut to make it easier to use the Clean Up HTML command on each document (there's no way to run it for an entire site at once). You should always enable the options that remove empty, nested, and redundant tags, but exercise caution with the other options (and Undo any mistaken changes before saving the file). The default options in the dialog box, as shown in Figure 7-1, are the safest.

7.1.2 Clean Up Word HTML

Dreamweaver can clean up HTML documents created in Microsoft Word. It works well when cleaning up documents created in Word 97 and 98, but less so when the documents were created in Word 2000 and XP, which use CSS extensively. (You can take advantage of MS Word's CSS features as discussed in Chapter 10.) Use Commands Clean Up Word HTML to open the Clean Up Word HTML dialog box shown in Figure 7-2. (The dialog box also appears when using File Import Import Word HTML.)

Figure 7-2. The Basic and Detailed tabs of the Clean Up Word HTML dialog box

The following options are available on the Basic tab of the dialog box:

Remove Word-specific markup: Deletes HTML tags that work only in Word. See the Detailed tab for more options.
Clean Up CSS: Removes CSS tags added by Microsoft Word. See the Detailed tab for more options.
Clean up tags: Removes redundantly nested  tags.
Fix invalidly nested tags: Cleans up improperly nested tags so that ... becomes ... .
Set background color: Used to add a background color because Word doesn't set one.
Apply source formatting: Formats the HTML code for readability according to your Dreamweaver preferences.
Show log on completion: Displays results when the cleanup process is complete.

The Detailed tab of this dialog box varies depending on whether you are importing a Word 97/98 document or a Word 2000 document (see Figure 7-2). When importing a Word 2000 document, the Detailed tab allows greater control over the Remove All Word-specific Markup and Clean Up CSS options.

The Remove Word-specific Markup checkbox enables the following five settings:

XML from <html> tag: Removes Word's XML elements from within the <html> tag.
Word meta and link tags from <head>: Removes Word-specific <meta> and <link> tags within the <head> tag (also applies to Word 97/98).
Word XML markup (i.e., <o:p> </o:p> ): Removes all XML-based markup added by Word.
<![if ...]><![endif]> conditional tags and their contents: Removes Word-specific conditional tags and their contents, which aren't supported in normal HTML or JavaScript-enabled documents.
Remove empty paragraphs and margins from styles: Removes all empty  elements and document margin measurements from style attributes.

The Clean Up CSS checkbox enables the following five settings:

Remove Inline CSS styles when possible: Removes style attributes and makes them part of the <style> tag when possible.
Remove any style attribute that starts with "mso": Removes Word-specific style attributes.
Remove any non-CSS style declaration: Removes CSS attributes that do not conform to the W3C specification.
Remove all CSS styles from table rows and cells: Removes style attributes from <tr> , <th> , and <td> elements and converts CSS tables to HTML tables, if necessary.
Remove all unused style definitions: Removes stylesheet declarations that are not applied within the current documents.

You should generally leave all the options checked. Once the cleanup process completes, Dreamweaver will optionally display the results.

When cleaning up Word 97/98 HTML, Dreamweaver converts  tags to heading tags based on the font size, as seen in Figure 7-2.

7.1.3 Clean Up FrontPage HTML

As with Word, Microsoft FrontPage creates nonstandard HTML code. You can clean up your FrontPage documents by using the Cleanup FrontPage HTML Sitewide extension available from Dreamweaver Exchange (see Chapter 22). It can be can run on individual pages or an entire site. If you have installed the extension, you can use Commands Clean Up FrontPage HTML to open the Clean Up FrontPage HTML dialog box shown in Figure 7-3.

Figure 7-3. The Clean Up FrontPage HTML dialog box

You should generally leave all the options checked. Once the cleanup process completes, Dreamweaver optionally displays the results. Most of the settings in this dialog box are self-explanatory or similar to the cleanup options described earlier. The following three options remove FrontPage-specific markup elements:

WEBBOTs: Removes server extensions indicated by  .
MSNavigation comments: Removes navigation controls indicated by  .
Themes comments: Removes the themes information indicated by  .

The three items shown here could also be removed by using Dreamweaver's Clean Up HTML command to remove Non-Dreamweaver comments, but the Cleanup FrontPage HTML extension allows you to do it for the entire site at once.

7.1.4 Find and Replace

You can clean up your HTML manually by using Find and Replace to delete or change text or HTML tags. You can open the Find and Replace dialog box, shown in Figure 7-4, using Edit Find and Replace, or Ctrl+F (Windows), or Cmd+F (Macintosh). Figure 7-4 shows the simplest version of the Find and Replace dialog box (for Source Code and Text searches).

Figure 7-4. The Find and Replace dialog box

You can configure numerous options, including where to search and what to look for:

Find In: Use this option to specify whether to search the Current Document, Entire Local Site, Selected Files in Site, or Folder (in the last case, a field appears that allows you to specify or browse to the folder to be searched).
Search For: Use this option to specify whether to search the Source Code, Text, Text (Advanced), or Specific Tag.
Find All: Using the Find All button automatically expands the dialog box to show a list containing all occurrences of the text. You can also use the arrow in the dialog box's lower-right corner to expand or collapse the bottom portion.

When using the Search For Source Code option, Dreamweaver searches for the precise text in your HTML code. For example, if you search for "," it won't find  or  . Search for "font" (without the angled brackets) instead.

When using the Search For Text option, Dreamweaver searches the text visible in the Design pane and ignores any HTML tags that might interrupt your search string. For example, searching for "Dreamweaver book" would find the text resulting from HTML, such as Dreamweaver book .

Using the Search For Text (Advanced) option, as shown in Figure 7-5, allows you to refine your search considerably.

Figure 7-5. The Find and Replace Text (Advanced) dialog box

You can limit your search to a specific tag (and search for text either inside or outside that tag). You can refine the search further by clicking the plus (+) button and making additional selections. You can limit the search to tags that contain or don't contain a specific attribute (and even set constraints on the attribute's value). You can also control whether the matched text must contain or not contain a string or tag, and whether the matched text must occur within or without another tag. In other words, you have an incredible amount of control. For example, you can easily find all the  elements with an align="left" attribute, or all the  elements not aligned left but with the word "holiday" in their contents.

The most advanced choice is the Search For Specific Tag option, as shown in Figure 7-6.

Figure 7-6. The Find and Replace dialog box

This dialog box lets you search for a tag with one or more attributes (use the plus (+) button to specify additional attributes), and then choose an Action from the following list:

Replace Tag and Content

Replace Content

Remove Tag and Content

Strip Tag

Change Tag

Set Attribute

Remove Attribute

Add Before Start Tag

Add After End Tag

Add After Start Tag

Add Before End Tag

You can use the Search For Specific Tag option to add text, elements, or attributes to all the pages in a site. For example, to add alt attributes to all image elements, search the entire local site for img tags with a specified src attribute. Then set the Action option to Set Attribute to set your alt attribute's value. You can also use the Add Before End action to add a copyright notice within the <body> of all pages.

The Find and Replace dialog box also offers the following options (the Open Query and Save Query buttons are indicated in Figure 7-6):

Match Case: Limit matches to text of the exact letter case. For example, searching for "Dreamweaver" would not find "dreamweaver" or "DreamWeaver."
Ignore Whitespace Differences: Ignores whitespace (spaces, tabs, and newline characters ) when determining matches. For example, searching for "Dreamweaver" would find both "Dream weaver " and "dr eamweaver."
Use Regular Expressions: Causes specific characters (such as ?, *, \w, and \b) in your search string to be interpreted as regular expression operators. See Table 7-1.
Open Query button: Opens a saved Dreamweaver Find and Replace query operation.
Save Query button: Saves the current Find and Replace query operation.

The Replace All button searches for and replaces the string in one or more files specified in the Find In field. You can't Undo the operation unless the scope is limited to the current document. Although you may be able to correct the problem with a new, carefully crafted search, make a backup copy before using Replace All throughout the entire site.

7.1.4.1 Searching with regular expressions

If you have enabled the Use Regular Expressions option in the Find and Replace dialog box, you can use the regular expressions listed in Table 7-1 in your Search For field. Regular expressions are useful in performing wildcard searches , which are more flexible than searching for exact strings. See Mastering Regular Expressions by Jeffrey E. Friedl (O'Reilly) for extensive practice with regular expressions.

Table 7-1. Regular expressions

Expression	Matches	Example
?	The preceding character zero or one time (i.e., preceding character is optional)	`ta?k` finds `tak` or `tk` , but not `tik` or `taak`
*	The preceding character zero or more times	`w*k` finds `wok` , `ok` ,or `kwanza` , but not `walla`
+	The preceding character one or more times	`aw+l` finds `crawl` or `awwl` , but not `wake`
. (period)	Any one character except a newline	`.ow` finds `cow` or `crow` , but not `ow`
^	The specified string at the beginning of a line	^ `w` finds `wok` or `wrap` , but not `kiwi`
$	The specified string at the end of a line	`$w` finds `cow` or `crow` , but not `wok`
xy	Either statement	`owaw` finds `crawl` or `cow` , but not `wake`
[abc]	Any of the characters in the brackets	`[aei]` finds `crawl` or `ale` , but not `concho`
[a-z]	Any characters in range	`[0-9]` matches all numeric digits
[^abc]	Any character other than those listed	`[` ^ `aeu]` finds `concho` or `silo` , but not `wake`
[^a-z]	Any characters not in range	`[` ^ `0-9]` matches all non-numeric characters
{n}	Exactly `n` occurrences of the preceding character	`e{2}` finds `creel` or `creep` , but not `crepe` or `creeep`
{n,m}	At least `n` but no more than `m` instances of the preceding letter	`e{2,3}` finds `creel` or `creeep` , but not `screeeech`
\b	The letter at the beginning of a word	`\bq` finds `queen` , but not `Iraq`
\B	The letter not at the beginning of a word	`\Bq` finds `Iraq` , but not `queen`
\d	Any numeric digit; same as [0-9]	`\d` finds `R2D2` , but not `Boba` `Fett`
\D	Any nondigit character; same as [^0-9]	`\D` finds `Boba Fett` , but not `R2D2`
\f	A form feed	`\f` finds form feeds
\n	A line feed (newline)	`\n` finds newline characters (ASCII 10)
\r	A carriage return	`\r` finds carriage returns (ASCII 13)
\s	A single whitespace character (space, tab, line feed, or form feed)	`\s` finds the space in `King` `Tut`
\S	A single nonwhitespace character	`\STut` finds `KingTut` , but not `King Tut`
\t	A tab character	`\t` finds tab characters (ASCII 9)
\w	Any alphanumeric character; same as [A-Za-z0-9]	`q\w` finds `quest` , but not `q%est`
\W	Any non-alphanumeric character	`\Wq` finds `&q` , but not `iq`
\x	Escaped characters (non-metacharacters)	`\/` finds slashes ; `\(` finds parentheses, etc.

To search for a Return character without using regular expressions, deselect the Ignore Whitespace Differences option and use Ctrl+Enter or Shift+Enter (Windows) or Ctrl+Return, Shift+Return, or Cmd+Return (Macintosh) as the search text. (When using regular expressions, you can search for \r .) Return characters appear as spaces, not as line breaks, in the Design pane of the Document window. Searching for the Return character does not find   and  tags.

Regular expressions operators can be combined. For example, the regular expression \d+\/\d+\/\d+ finds dates of the form xx/xx/xx.

Parentheses are used to "remember" strings in the regular expression to be used later. For each expression in parentheses, you can use the matching text by substituting $ n as a placeholder in the replacement string. For example, you can convert between U.S.- and European-style dates by searching for (\d+)\/(\d+)\/(\d+) and replacing it with $2/$1/$3 . Try it!

7.1.5 Tag Selector

The Tag Selector is located in the Status bar at the bottom of the Document window and is shown in Figure 7-7. It displays the HTML tags related to the selected object. You can select a tag by clicking its name in the Tag Selector. You can adjust the selected object by right-clicking (Windows) or Ctrl-clicking (Macintosh) on its tag and selecting from the contextual menu shown in Figure 7-7.

Figure 7-7. Tag Selector pop-up menu options

Remove Tag: Deletes the selected HTML tag but not any tags nested within it. You can't delete certain tags, such as <body> , <table> , <tr> , and <td> tags using this menu option.
Edit Tag: Opens the Quick Tag Editor (discussed next ).
Set Class: Applies or removes a CSS class selector style to format the selected tag (as described in Chapter 10 and shown in Figure 10-16).
Set ID: Applies or removes a CSS ID selector style to format the selected tag (as described in Chapter 10 and shown in Figure 10-6).

Use Edit Select Parent Tag and Edit Select Child to select another tag.

7.1.6 Quick Tag Editor

The Quick Tag Editor (QTE) gives you direct control over a single HTML tag without having to open the Code view or Code inspector. The QTE has several modes, as seen in Figure 7-8, and you can open it in several ways.

To open the QTE in Edit Tag mode (to edit an existing tag), select only one element, and then:

Right-click (Windows) or Ctrl-click (Macintosh) on the Tag Selector in the status bar and choose Edit Tag from the contextual menu.
Use Modify Quick Tag Editor, Ctrl+T (Windows), or Cmd+T (Macintosh).
Right-click (Windows) or Ctrl-click (Macintosh) on an element in the Document window and choose Edit Tag from the contextual menu.
Click the Quick Tag Editor icon at the right edge of the Property inspector (see Figure 1-5).

Figure 7-8. The three modes of the Quick Tag Editor

You may want to wrap a tag within a  tag to allow you to add a hyperlink to tags that don't ordinarily support hyperlinks . To open the QTE in Wrap Tag mode (to wrap a new tag around two or more existing tags), select two or more elements and then:

Right-click (Windows) or Ctrl-click (Macintosh) and choose Wrap Tag from the contextual menu.
Use any method that opens the QTE (when more than one element is selected, the QTE defaults to the Wrap Tag mode instead of the Edit Tag mode).

To open the QTE in Insert HTML mode (to insert a new tag), ensure that no elements are selected and then:

Right-click (Windows) or Ctrl-click (Macintosh) on an unoccupied space in the Document window and choose Insert HTML from the contextual menu.
Use any of the methods that open the QTE (when no elements are selected, the QTE defaults to the Insert HTML mode instead of the Edit Tag mode).

The simple QTE pop-up window lets you insert or edit a single tag. You can change the tag attributes directly without the constraints of the Property inspector. The QTE also lets you select attributes to add from the Tag Hints drop-down list, as seen in Figure 7-8.

Table 7-2 lists some common QTE shortcuts.

Table 7-2. Quick Tag Editor options

Shortcut	Operation
Tab	Selects the next attribute.
Shift-Tab	Selects the previous attribute.
Ctrl+T (Windows) or Cmd+T (Macintosh)	Opens the Quick Tag Editor and cycles through its three modes.
Show drop-down Tag Hints	Open a drop-down list by typing a space after the closing quotes of any attribute; the delay can be adjusted or tag hints can be disabled under Edit Preferences Quick Tag Editor.
Navigate Tag Hints list	Type the first few letters of an attribute name or use the arrow keys. Press Enter (Windows) or Return (Macintosh) to select an item.

To apply changes made in the QTE, click in any other area of the document (or press the Tab key if the Apply Changes Immediately While Editing option is enabled under Edit Preferences Quick Tag Editor).If you made a visible change to your document, such as changing the font color or the size of an image, it is reflected immediately in the Document window.

7.1.7 Copy and Paste HTML

In addition to standard copying, cutting, and pasting, Dreamweaver allows you to copy and paste HTML code directly. This feature allows you to copy and paste information from one portion of your document to another with or without including the HTML code. Table 7-3 shows the effect of various combinations of cut and paste.

Table 7-3. Copy and Paste from Design View

Copy operation	Paste operation	Results
Edit Copy	Edit Paste	Copies an exact duplicate, including HTML code, to the new location.
Edit Copy HTML	Edit Paste	Pastes the HTML code into the document's Design view.
Edit Copy	Edit Paste HTML	Pastes the text of the selection without HTML code included.
Edit Copy HTML	Edit Paste HTML	Copies an exact duplicate, including HTML code, to the new location.

The Edit Copy command cannot be used to copy steps from the History panel; use the Copy Steps button in the History panel instead (see Figure 7-9). Use Edit Paste HTML to see the JavaScript that underlies the steps copied from the History panel.

7.1.8 Apply Source Formatting

Dreamweaver can format your HTML to make it more legible without affecting its underlying meaning. Source formatting is applied by using Commands Apply Source Formatting. For example, this command changes this code from its current eclectic and illegible state:

 <ul><li><font face="Copperplate Gothic Bold" size="4"><a href="http:// berry-basket.com">Berry Basket</a></font></li> <li><font  face="Copperplate Gothic Bold" size="4"><a href="http://bettys-kitchen. com">Betty's Kitchen</a></font></li>

into this:

 <ul>    <li><font face="Copperplate Gothic Bold" size="4"><a href="http:// berry-basket.com">Berry       Basket</a></font></li>    <li><font face="Copperplate Gothic Bold" size="4"><a href="http:// bettys-kitchen.com">Betty's       Kitchen</a></font></li>  </ul>

Source formatting is controlled by the Code Format and Code Color categories under Edit Preferences and the SourceFormat.txt file discussed in Chapter 18.

You can specify an external code editor, such as BBEdit or HomeSite, by using Edit Preferences File Types / Editors External Code Editor. To open an HTML file in the external editor, use Edit Edit With ApplicationName , Ctrl+E (Windows), or Cmd+E (Macintosh).