• 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, Dream weaver usually avoids changing it back. On the other hand, some applications (most notably Microsoft products) write hideous code that begs intervention from the UN.

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 Dreamweaver MX, 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. The Preferences dialog box will appear.

In the Category list, select Code Rewriting. That panel will appear (Figure 4.94-95).

Figure 4.94. The Code Rewriting panel of the Preferences dialog box. Now in Dreamweaver MX 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 check box.

Figure 4.96. When you open a file with errors in it, you can get a prompt like this one that tells you what's being fixed. This is the file that I trashed for Figure 4.11.

Performing additional clean-up

Aside from Dreamweaver's automatic cleanup 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 check box.

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.

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).

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

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.

Cleaning up Word HTML

Many text documents, for better or worse, are prepared in Microsoft Word at one stage or another in the production process. Word (95-2000 and 2002/XP/X) offers a timesaving Save As HTML feature that puts in paragraphs, line breaks, links, and most text formatting. But it does it so badly!

Fortunately, the errors Word makes when converting pages to HTML are consistently bad. The Dreamweaver team figured out the error patterns and wrote a widget to fix most of them.

To clean up Word HTML:
In the Document window, open the page you saved as HTML using Word.

From the Document window menu bar, select Commands > Clean Up Word HTML.

Dreamweaver will read the document info to determine which version of Word was responsible for the damage. If it can't detect this information, a warning will appear (Figure 4.101). Your document may not have been prepared in Word; you might want to run through it with the other Clean Up HTML dialog box, as well.

Figure 4.101. This dialog box will appear if you use Clean Up Word HTML to fix a file that wasn't created in Word, or that was created with an ancient version.

In any case, the Clean Up Word HTML dialog box will appear (Figures 4.102, 4.103, and 4.104), perhaps after you click on OK to dismiss the dialog.

Figure 4.102. The Clean Up Word HTML dialog box for Word 97/98.

Figure 4.103. The Clean Up Word HTML dialog box for Word 2000/2002. (Word XP and Word X are also known as Word 2002.)

Figure 4.104. The Detailed panel of the Clean Up Word HTML dialog box for Word 97/98.

If Dreamweaver detects the version of Word used to save the HTML, it will appear in the Clean Up HTML From drop-down menu. If not, select your version. (For Word 95, select Word 97/98; for Word XP or Word X, select 2000/2002). You may get a warning that the version is different from what Dreamweaver detected.

The following options are available for fixing. For more details about Word-specific markup, see the sidebar, Detailed Word Markup.

  • Remove Word-specific markup (tags that aren't standard HTML tags)

  • Clean Up CSS (fixes modifications made using Cascading Style Sheets)

  • Clean Up <font> tags (consolidates redundant text formatting)

  • Fix Invalidly Nested Tags (rearranges tags nested in nonstandard order)

  • Set Background Color. (Type the hex code in the text box; #FFFFFF is white. If you don't know the hex code, skip this one and apply the background color later.)

  • Apply Source Formatting. (Makes modifications to the indenting, line breaks, and case selections. See Setting HTML Preferences, earlier in this chapter.)

To see a dialog box describing the fixes Dreamweaver made, make sure the Show Log on Completion check box is marked.

Ready? Click OK. Dreamweaver will make the selected revisions and display a log if you asked it to do so (Figure 4.105).

Figure 4.105. This dialog box is a log of the changes that were made using the Clean Up Word HTML command. That's a lot of crap!

Detailed Word Markup

Word makes some singular, usually unnecessary additions to standard HTML code when you save a Word file as HTML. If any of this proprietary code is something you want to address on your own, you can ask Dreamweaver not to remove it.

In the Clean Up HTML dialog box, click on the Detailed tab. That panel will come to the front (Figures4.104 and 4.106).

Figure 4.106. The Detailed panel of the Clean Up Word HTML dialog box for Word 2000/2002.

In all versions of Word, the program applies its own <meta> and <link> tags in the head of the document. If these are useless to you, check the Word Meta and Link Tags from <head> checkbox (Figure 4.107).

  • Word 97/98: Word 97 and 98 make peculiar choices when it comes to font sizes. To convert Word's font size choices to your own, click the check box for the font size, and then select a heading size or font size from the associated drop-down menu. For example, a wise choice would be to assign size 3 text to the default size in Dreamweaver. If you want to keep Word's size assignment, select Don't Change.

  • Word 2000/2002: Word is getting ahead of itself in using XML, or in other words, it includes proprietary code for perfectly vanilla HTML functions. It also makes a few more boo-boos.

Figure 4.107. Word inserted these META and XML tags; the two META NAME tags will be removed, as will all the extraneous XML markup. You may find these tags useful for importing documents; if so, uncheck the XML check box.

To remove XML from the opening <html> document tag, check that box.

To remove other Word HTML markup (in the form of proprietary tags), check the Word XML Markup checkbox.

To remove pseudo-code, check the <![if …]><![endif]> Conditional Tags and Their Contents checkbox.

To remove both empty paragraphs and extra margins, check that box.

Word writes CSS code that's both great and awful. Any Word paragraph styles will be saved as CSS styles and applied; that's fine. But Word applied 1,983 lines of style definitions to a relatively uncomplicated page I saved in XP, making the document weigh in at 88K without any images. To clean up CSS, it's best to leave all the check boxes checked, and even then you may want to strip out more styles using the CSS Styles panel.

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