Optimizing Dreamweaver MX 2004 Code

Talk to a seasoned developer, and he or she will tell you, "Dreamweaver writes ugly code." What they are really saying is, "I prefer to write my own code." There is a grain of truth in this because hand-written code may only require one line, whereas Dreamweaver MX 2004 will do the same thing using four or five lines. Eventually, you are going to write some of your own code, and when you do, you will have to do some debugging.

Debugging is the process of finding and fixing coding errors. This mainly involves checking the code for syntax errors such as spelling mistakes, misplaced or unbalanced brackets, and so on. It also involves following variables to ensure that they have the values they are supposed to have. Though serious debugging should always be in the realm of the team's " coder ," there is a rather interesting method of optimizing code in Dreamweaver MX 2004.

Using the Clean Up HTML/XHTML Command

Even though Cascading Style Sheets (CSS) reduce the need for optimized HTML, the key word here is "reduce." As we are fond of saying, "Let the software do the work." Follow these steps to have Dreamweaver scoot through your pages and do the optimization for you:

1. Open a Dreamweaver MX 2004 page. Select Commands, Clean Up HTML to open the Clean Up HTML/XHTML dialog box shown in Figure 19.5.

   Figure 19.5. Use the Clean Up HTML/XHTML dialog box to optimize the HTML code in a page.

   

2. To delete tags with no code between them, such as <p></p> , select the Remove: Empty Container Tags.

3. To remove tags that repeat the same code in the same text block, select Remove: Redundant Nested Tags.

4. To remove any comments not created by Dreamweaver for items such as Library or template items, select Remove: Non-Dreamweaver HTML Comments.

5. To remove all Dreamweaver-specific code comments, select Remove: Dreamweaver Special Mark Up.

6. To remove a specific tag or tags and all of the tag's attributes, select Remove: Specific Tags, and enter the tag or tags to be removed into the text input box.

7. To consolidate <font> tags, select Option: Combine Nested <font> Tags when possible.

8. If you would like to see a log of the changes, select Option: Show Log on Completion.

9. Click OK.

The requested actions will be undertaken, and if the Show Log Option is selected, an alert will display any changes made.

Balancing JavaScript Braces

If you have written JavaScript or Flash ActionScript, you know how easy it is to lose track of opening and closing curly braces, parentheses, and quotation marks. It's very easy for code to become entrenched in braces. Unbalanced braces can have implications ranging from syntax errors to unpredictable operations of the code.

Though Dreamweaver leaves you to your own devices when it comes to quotation marks, there is help available with curly braces, square brackets, and parentheses. Here is how to use it:

1. Open a Dreamweaver MX 2004 page and select View, Code View. Select a curly brace , square bracket or parenthesis.

2. Select Edit, Balance Braces, as shown in Figure 19.6. Dreamweaver will select all the code between that brace and the closing brace. If there is a problem, Dreamweaver will beep.

   Figure 19.6. Dreamweaver MX 2004 will balance braces and quotations in JavaScript and ActionScript code.

   

Tip

This doesn't work if you select a closing brace.

Note

If Mac users are wondering where the JavaScript Debugger is located, we are pleased to report that it is deceased. The JavaScript Debugger tool has been removed from the application.