The application's design surface, where you create your Web designs, is almost as easy to use as Adobe's Dreamweaver, the incumbent leader for Web Design tools. The support for ASP.NET controls is solid (though there's no Atlas or AJAX support). However, the clear power tool in Expression Web Designer is its Cascading Style Sheet (CSS) support.

The major challenge is that many people don't get what CSS is and why it is useful. I have been a huge supporter of CSS since it first made an appearance in IE 3 back in '97. I even wrote a chapter on CSS support for the Dreamweaver Bible from Wiley. And, after looking at this CTP, I'm convinced that this software is worth exploring if only for its support of CSS.

Integrating Expression Web Designer with Visual Studio and Web Developer Express

Expression Web Designer bridges the gap between the world of developer and designer. To show how it works, in the following example, I use the Time Tracker Starter Kit to demonstrate how to use both the Web Developer Express for Visual Studio 2005 and Expression Web Designer to create a rock solid experience.

The first step is to create the site. In Visual Studio, create a Time Tracker site from the Starter Kits. The site is created with the database, web pages, code behind, and Master Pages. The site will look like this in Visual Studio:

The page looks pretty good, right? The problem is that "pretty good" and "accurate" are different. The site has to be previewed in IIS to get a true understanding of how the page really looks.

Here, the login page is viewed inside IIS:

Even with this simple design, the layout in IIS and Visual Studio is different. When you are developing Web sites this is probably okay, but when designing a Web site it is not acceptable.

This is where Expression Web Designer steps in. The focus of Expression Web Designer is to provide you with a clean, clear and complete view of how you Web page will be presented, long before you even have to test the page in a Web browser.

Let's take a look at the login page above as it is rendered in Visual Studio:

Now, compare that to the same page as it is rendered in Expression Web Designer:

What you have presented is almost identical to the view in IIS of the same Web page. The design experience is much cleaner.

Expression Web Designer does not stop here. You can extend the support of CSS created Visual Studio with the rich CSS management tools in Expression Web Designer. The following image is the new styles manager. Styles can be created on a single page, in line, and on a CSS document. Through drag and drop support, you can move styles effortlessly from a page to a shared document.

Design layout uses CSS positioning to maintain standards for layout. For instance, you use the resize handles to drag out the size of an object on the page. The following image shows a split Design/Code view of the login control after a it has been resized (you can work in both code and design view in Expression Web Designer):

Expression Web Designer also has a number of tools, such as accessibility reports that you can run against a site to detect if all standards are being addressed and adhered to. Finally, Expression Web Designer works in exactly the same project layout as used with Visual Studio 2005, Visual Studio Web Developer Express, and Visual Studio "Orcas." There is a true harmony between the functions of each product.

I feel that Microsoft has made a smart move by creating these various Web tools. Not everyone is a designer and not everyone is a developer. Sharing tools in one big huge product can be overwhelming. As it is, the Expression and Visual Studio tools keep the designers and developers working together but also places them separately in their own worlds.