Introduction

Welcome to this product comparison video overview showing the differences between the latest Web design tools available from Microsoft and Macromedia, namely, Microsoft’s Visual Studio 2005 and Macromedia’s Dreamweaver, Version 8. Valid HTML is essential for professional Web sites that are to be cross-browser compatible. Limiting extraneous code is also important for the performance of a site. Both Visual Studio and Dreamweaver offer features to ensure your code is optimized.

Visual Studio 2005 Section

In Visual Studio 2005, effective assistance is given when newly created code is written so it is optimized as it’s being typed. Different target schemas can be selected to make sure the site is usable for the desired environment. Syntax verification and Intellisense give proper hints to create compliant code. If the user decides to use an element or an attribute that is not in association with accessibility or W3C standards, the document fails validation and the error list will give a description of how to correct the code to bring it into compliance. Syntax verification and Intellisense give proper hints to create compliant code. If the user decides to use an element or an attribute that is not in accordance with accessibility or W3C standards, the document fails validation and the error list will give a description of how to correct the code to bring it into compliance. Customizable auto-formatting is also a key feature in the generation of optimized code. This feature cleans up code as you type, recognizing features such as attributes, capitalization, special characters, white space, and so on. Visual Studio allows extreme flexibility, to the point where every HTML tag can be customized to your liking. For instance, by default when you type in a BR tag, the IDE replaces this non-closing tag with XHTML compliant code that includes a forward slash to represent a self-closing tag. And if you type the open p tag to open a paragraph, Visual Studio knows that this tag is a containment tag and the environment places the corresponding closing tag for you automatically. You can define the exact behavior of how the environment should treat each tag by referencing Tools… Options… then Text Editor… HTML… Format… and then selecting the Tag Specific Options button. This dialog box allows you to select options for default settings such as auto-closing options, color-coding, and indentation. This dialog also provides a preview of how your tag will be formatted. These default settings will affect all of your tags, but you also have the ability to override these defaults on a tag-by-tag basis. You even have to option to create custom tags to extend Visual Studio so that the environment knows how you like to treat these new tags.

Dreamweaver Section

Dreamweaver 8 makes it easier to clean up code that has been generated by Microsoft Word and other applications. Clean-up options have been expanded in Dreamweaver 8 and include a number of specific features. Cleaning up code generated by Word has been directly addressed as a new feature in Dreamweaver 8, located in the Commands menu. By selecting Commands > Clean Up HTML… a dialog box pops up with both basic and detailed options, allowing you to: remove all word specific markup, clean up CSS, clean up <font> tags, fix invalid nested tags, set a background, apply source formatting, and show log on completion.

To access the clean-up features, we go to the Commands menu > Clean up HTML… which presents a dialog box. We can then set the dialog box options to any number of settings. To begin, we can set the Clean up HTML dialog box options to remove empty container tags. This setting scans through the page and removes any tags that have no content place within them. For example, this set of bold tags and this font tag are empty, but the bold tag placed around some text is not, so this won’t be removed. "Show a log on completion" displays an alert box with the details about the changes made to the document during the clean-up process. Another option is to remove redundant nested tags, which removes all unnecessary instances of a tag. For example, where we have this nested bold tag in this text, "This is what I really wanted to say." The bold tags surrounding the word ‘really’ are redundant and they are then removed. Setting the options to remove all non-Dreamweaver HTML comments removes all comments that were not inserted by Dreamweaver. Dreamweaver uses comments in order to implement features such as templates. In this example, the "Begin BODY text" comment would be removed but this "TemplateBeginEditable" region would not because it’s a Dreamweaver comment that marks the beginning of an editable region in a comment. The "Remove Dreamweaver special markup" option removes comments that Dreamweaver adds to code. These special comments are placeholders that mark where documents should be automatically updated when templates and library items are correspondingly updated. The "Remove specific tags" option removes tags specified in the adjacent text box. Use this option to remove custom tags inserted by other visual editors and other tags you didn’t want to appear on your site, such as this blink tag. The "Combine nested <font> Tags when possible" option consolidates two or more font tags when they control the same range of text. For example, here are two font tags, one that modifies the size, and the other, the color of text. After using this option, the font tags are now consolidated into a single tag.

Dreamweaver also balances tags and braces. This feature allows you to make sure that the tags, parenthesis, braces, and square brackets are balanced on a page. For example, to check for balanced tags, place the cursor in the nested code you want to check. We’ll place our insertion in this nested code, and then by selecting Edit and Select Parent Tag… the enclosing matching tags and their contents are all selected. By continuing to select Edit > Select Parent Tag, we can verify that the tags are balanced, and eventually Dreamweaver will end up with the outermost HTML tag. To check for balanced parenthesis, braces, and square brackets, you place the cursor in the portion of code you want to check and select Edit and Balance Braces... All the code between the enclosing parenthesis, braces, or square brackets is selected. Again, choosing Edit, Balance Braces selects all of the code that’s inside of this new selection. In this way, you can continue to iterate through these sets of punctuation to make sure that everything is balanced.

Conclusion

This concludes our comparison of Dreamweaver and Visual Studio 2005 regarding optimizing code.