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. In this video, we’ll examine the conveniences put into place in each of the tools to easily manage cascading style sheets or CSS.

Dreamweaver Section

Opening up Dreamweaver Version 8, it simplifies creating, viewing, and maintaining cascading style sheets. Regardless of what view you are working in, you can always create a new style sheet by referencing the Text menu… CSS Styles… New. When creating a new style sheet, we’re prompted to choose a type of selector and then pick from the categories and attributes specific to that selector. Modifying existing style sheets has been simplified in Dreamweaver Version 8 by the addition of the unified CSS panel. All the CSS functionality has been consolidated into the single panel set and enhanced to make working with CSS easier and more productive. This new interface makes it easier to see the cascade of styles being applied to a specific element and easily identify where attributes are defined. In addition, a property grid allows quick edits. In the design or split views, Dreamweaver 8 has the improved ability to visualize CSS layouts by allowing you to outline CSS layout borders or color CSS layouts revealing complex nesting schemes and improving selection. In addition, clicking on the CSS layout reveals valuable tool tips such as ID, padding, margin, and border settings.

Dreamweaver has also made it much easier to display CSS elements such as pseudo-elements or form modification controls without forcing you to preview the design in your Web browser. It is possible to view the content the same way the end user sees it, no matter what the delivery mechanism. This is accomplished by using the style-rendering toolbar in the design view to see how your page will look in print, on a handheld device, or on the screen. Dreamweaver Version 8 also has support for the WCAG Accessibility Guidelines and also has support to validate the WC3 Priority 2 Checkpoints.

Visual Studio 2005 Section

In Visual Studio 2005 you can apply the CSS style attributes directly to an individual HTML element on a single Web page, or you can add style attributes to CSS rules stored on an external style sheet. External style sheets are convenient for defining a common appearance across many Web pages at once. When you open a cascading style sheet or CSS file, the Visual Studio CSS editor automatically opens. You can add styles to your CSS files two ways – first, by typing in style rules directly into the mark-up (notice as we type, Intellisense is available to assist us in selecting valid CSS attributes and values), and second, by selecting options from the Style Builder dialog box. The Style Builder automatically generates style rules and inserts their syntax into your document. You can access the Add Style dialog box from the Styles menu. This enables you to define CSS styles for elements as well as CSS Class and ID styles and then inserts them into the external style sheet. From here, you can also define CSS attributes that make up a style. This Style Builder dialog box is divided into two panes. The left pane lists eight general categories: Font, Background, Text, Position, Layout, Edges, Lists, and Other. When you select a category, the right pane shows the options for the selected category. As you select style options, the Style Builder dialog box creates CSS style definitions for you. The Font Picker dialog box is used to pick fonts that apply to a style sheet and to set a font sequence. A font sequence specifies the precedence in which fonts are selected when the Web page displays in a browser. Under font name, family is selected by default and you can click this ellipsis button next to the family text. This allows the selection of multiple fonts and the font sequence for your style. The CSS positioning page sets options that determine how elements are positioned in design view when you’re creating them using one of three methods. As you make changes to the Style Builder, notice that the preview at the bottom of the screen shows you a sample of style you are building. This makes it very easy to adjust your style properties to be just right. You can also check the accessibility of an ASPX page from the Tools menu under Accessibility where you can choose the WCAG Priority 2 Checkpoint and Access Board Section 508 options.

Conclusion

This concludes our comparison of Dreamweaver and Visual Studio 2005 with CSS support.