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 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 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 Clean Up HTML to open the Clean Up HTML dialog box, shown in Figure 7-1. Figure 7-1. The Clean Up HTML dialog boxThe 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 HTMLDreamweaver 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 boxThe 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 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 boxYou 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 ReplaceYou 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 boxYou 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 boxYou 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 boxThis 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 Select Parent Tag and Edit Select Child to select another tag. 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 EditorYou 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 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 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 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 FormattingDreamweaver 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). |