![]() ![]() |
7.1 Cleaning Up Your HTML CodeClean
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 7.1.1 Clean Up HTMLAlthough 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 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:
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 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:
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:
The Clean Up CSS checkbox enables the following five settings:
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 <font> tags to heading tags based on the font size, as seen in Figure 7-2. 7.1.3 Clean Up FrontPage HTMLAs 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 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:
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 Figure 7-4. The Find and Replace dialog box![]() You can configure numerous options, including where to search and what to look for:
When using the Search For Source Code option, Dreamweaver searches for the precise text in your HTML code. For example, if you search for "<font>," it won't find <font color="990099" size="+2"> or </font>. 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 <b>Dreamweaver</b> 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 <p> elements with an align="left" attribute, or all the <p> 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:
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):
7.1.4.1 Searching with regular expressionsIf 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.
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 <br> and <p> 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 SelectorThe 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![]()
Use Edit 7.1.6 Quick Tag EditorThe 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:
Figure 7-8. The three modes of the Quick Tag Editor![]() You may want to wrap a tag within a <span> 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:
To open the QTE in Insert HTML mode (to insert a new tag), ensure that no elements are selected and then:
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.
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
7.1.7 Copy and Paste HTMLIn 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.
The Edit 7.1.8 Apply Source FormattingDreamweaver can format your
HTML to
make it more legible without affecting its underlying meaning. Source
formatting is applied by using Commands <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 You can specify an external code editor, such as
BBEdit or
HomeSite, by using
Edit
|
![]() ![]() |