• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Editing Code > Cleaning Up HTML

Cleaning Up HTML

For the most part, Dreamweaver writes passable, clean code. If you modify the code, Dreamweaver usually avoids changing it back. On the other hand, some applications (most notably Microsoft products) write hideous code that begs intervention from the UN.

Using HTML that was produced in Microsoft Office software is covered in its own Chapter 10. You can now import entire Word documents into Dreamweaver, and you can clean up documents saved as HTML from Word or Excel. Chapter 10 covers the special commands involved in saving, pasting, and cleaning up Word HTML.

Dreamweaver offers several handy shortcuts for cleaning up gnarly code. You may have handwritten code half-smashed on No-Doz and Jolt cola, or an intern may have demonstrated his or her lack of brilliance all over your site, or you may formerly have used a lackluster editor.

Dreamweaver even makes some common errors that are easily fixed. There are three ways to clean up your code: opening a file, using the Clean Up HTML command, and using the Clean Up Word HTML command.

Cleaning up when opening a file

Dreamweaver can make certain revisions to a page when it's first opened—in MX and MX 2004, these preferences are not on automatically, so if you're a beginning coder or dealing with older pages, you should turn these on.

To modify the auto-cleanup prefs

From the Document window menu bar, select Edit > Preferences (on the Mac, select Dreamweaver > Preferences). The Preferences dialog box will appear.

In the Category list, select Code Rewriting. That panel will appear (Figures 4.94 and 4.95).

Figure 4.94. The Code Rewriting panel of the Preferences dialog box. In MX and MX 2004 the code-fixing is off by default.

Figure 4.95. Check these boxes if you want your errors to be fixed and if you want to see the prompt in Figure 4.96.

To allow Dreamweaver to Fix Invalidly Nested and Unclosed Tags and Remove Extra Closing Tags, check those boxes.

To see a prompt (Figure 4.96) when Dreamweaver modifies a page, check the Warn When Fixing or Removing Tags checkbox.

✓ Tip

  • For more about the other attributes, see Appendix D on the Web site for this book.

Performing additional clean-up

Aside from Dreamweaver's automatic clean-up functions, you can have it perform more specific code-massaging at any point.

To clean up HTML code

From the Document window menu bar, select Commands > Clean Up HTML. The Clean Up HTML dialog box will appear (Figure 4.97).

Figure 4.97. Choose which elements to clean up in the Clean Up HTML dialog box.

Dreamweaver lets you remove the following boo-boos (Figure 4.98):

  • Empty Tags (Lines 8 and 9)

  • Redundant Nested Tags (Line 11)

  • Non-Dreamweaver HTML Comments (regular comments not inserted by the program; Line 13)

  • Dreamweaver HTML Comments (This option removes comments Dreamweaver inserts with scripts and the like).

  • Specific Tags (any specified tag; Line 15). You must type the tag in the text box. Type tags without brackets, and separate multiple tags with commas. For example: blink, u, tt).

Figure 4.98. This “page” is really just a catalog of errors to be fixed.

Check the box beside the garbage you want to be removed (Figure 4.97).

Even Dreamweaver is sometimes guilty of redundancy when coding <font> tags (Figure 4.99). To combine redundant font tags, check the Combine Nested <font> Tags When Possible checkbox.

Figure 4.99. The three <font> tags on line 9 can easily be combined into a single <font> tag using the Clean Up HTML command.

To see for yourself the errors Dreamweaver catches, check the Show Log on Completion checkbox.

Ready? Click OK. Dreamweaver will scan the page for the selected errors, and if you chose to display a log, it will return a list of what it fixed (Figure 4.100).

Figure 4.100. After cleaning up the stuff in Figure 4.98, this dialog box shows what was done.

Nesting Instincts

Valid, by-the-spec HTML asks that <font> tags be nested inside <p> tags. This means that each paragraph contains its own font formatting. This can take up quite a bit of room and add download time to very large pages.

If you want to cheat on this, which the browsers allow, then turn off the Fix Invalidly Nested and Unclosed Tags option. Then, you can use a single <font> tag to modify as many blocks of text as you desire.

Of course, if you really want to save time and not worry about font tags, use CSS to format your text instead (see Chapter 11).

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint