First Look at Microsoft Expression Web Designer

June 2006 - Kim Berry - for www.prestwood.com newsletter (DRAFT 6/11/2006) 

Microsoft had released the first of likely several Community Technology Preview (CTP) of their upcoming Expression Web Designer (EWD).  It is a free download that expires in February 2007, 225meg, and requires that the .NET 2.0 framework be installed on the development box. However it generates standard HTML that can be hosted just about anywhere. It also contains ASP.NET 2.0 server controls and integrates well with Visual Studio 2005. But if these controls are used then the host must support the .NET 2.0 framework.

This is your change to help shape the product. If you have a suggestion it can reach the developer team through the discussion forum.

Without reading any documentation I ran EWD and selected "Create New Website" then selected from among the dozen plus templates. "File | Preview in Browser" provided IE 6 with different dimensions, and an option to specify additional browsers. The template created a fully functional website. Within an hour I had tweaked content, menus, images, and the style sheet to get a feel for the environment.

Is this just FrontPage++?

The template site included a file "master.dwt" which contained the common template for the entire site. (I understand that FrontPage also uses .dwt files, but I have never used them.) From there I could modify the header image and menu options. The fonts and colors could be tweaked in the stylesheet. I renamed one of the folders and the path in a hyperlink in master.dwt also updated.

If a section of text his highlighted and font changes applied, rather than wrapping a font tag around the section, it creates a new stylesheet entry local to the page, which presumably could be copied to the .css file.

I have limited experience with the primary contender, Adobe Dreamweaver. But according to this article, Microsoft's Expression Web Designer vs. Adobe's Dreamweaver - First look: Let the rumble begin by Matthew David,  "Expression Web Designer is not FrontPage. It is a professional tool . . . Unlike Dreamweaver, Expression Web Designer is not built on a legacy of changing standards. Expression Web Designer was built from the ground up to support Web 2.0 and the standards for today." Matthew fails to call a clear winner, but acknowledges that Microsoft is now in that league.

A peek in the toolbox resolves that this is not FrontPage. Expression provides the ASP.NET 2.0 Controls. The validation controls eliminate the need to write JavaScript validations, and the Data Controls: XmlDataSource, GridView, etc. are extremely powerful.

Merging ASP.NET Controls with the DWT Templates

The FAQ on the Microsoft website is reassuring:

Expression Web Designer draws on site functionality and Web services created in Visual Studio, and both products can be used collaboratively between designers laying out pages and developers building back-end functionality. ASP.NET 2.0 code and controls are fully compatible, and the design preview surface within both products is identical so that designers and developers can work on the same solution and build the better end-user experiences.

When the server controls are dragged to the form, they appear, but clicking will not bring up a code-behind, and there is no server form. When I manually entered a server form it reported the error that "the attributed 'runat' is not permitted for the <form>."  Don't manually enter a form tag!

When attempting to save after dropping an ASP.NET Component on a .htm page a dialog "You should rename this page with a file extension of ".aspx." pops up.

Once renamed, the tag "<form runat="server">" appears just below <body> in golden, as if it is part of the DWT, allowing support for the ASP.NET controls.

From "File | New": You can either create a raw .aspx page, or have the option of creating a .htm page as "Create from Dynamic Web Template" and selecting a DWT file. However, once a .aspx page is created, the option "Format | Dynamic Web Template | Attach Dynamic Web Template ..." will embed the template within the ASPX file. (There is a similar option for attaching a master page to the .aspx file - a feature that I don't believe exists in VS 2005.)

I added a link from the menu on the master.dwt to the new .aspx page, and the environment updated all the internal links. But as I expected, aspx files cannot run in the "Preview in Browser" mode:

The solution was to modify "Site Settings" to preview all web pages with the ASP.NET development server:

Et voila. I was able to implement the validation controls. I added a Calendar control from both VS 2005 and EWD. The process was identical: Each environment allowed me to select from the same auto format color schemes.

 

RSS Newsfeed using ASP.NET Controls

From within Expression I was able to use the XmlDataSource and Repeater controls to display an RSS Feed from Google News:

1) From http://news.google.com query for a some news, then select the RSS link in the left column:

2) Drag an XmlDataSource to the page. Paste the Google URL that is displaying XML into the DataFile property and "/rss/channel/item" into the XPath property:

3) Drag a Repeater control to the page and bind it to the XmlDataSource

4) Insert the highlighted code:

<asp:Repeater runat="server" id="Repeater1" DataSourceID="XmlDataSource1">
<ItemTemplate>
<%#XPath("description")%><br/>
</ItemTemplate>

</asp:Repeater>

5) It should work:

 

The Development Environment

The environment feels like a cross between FrontPage and Visual Studio 2005. The folderlist on the left, file tabs on the top, and Design | Split | Code | Preview buttons are the bottom are the same as FrontPage. Viewing the .htm file below, notice that the code that resides in the .dwt file has a golden background and cannot be modified.

When the .dwt file is modifed then saved, it prompts whether to update the other files, displaying a log when complete:

 

Why am I disappointed?

I am disappointed that the templates are boring. I expected support for drop-down and pop-up menus within the template. I expected templates that include rounded-edged tables, such as on the Expression Website itself:

I was advised that the default templates do no support this. This is accomplished either by purchasing (or obtaining) and template that includes the shapes, or creating them in a graphics program.

 

Why does the Web Designer keep trying to re-install?

The only thing that concerns me is that this dialog keeps popping up when I'm not even running Expression, even though I had already rebooted after the install. And restarting does not make it go away. (Issue: Why does installation require a reboot? I thought rebooting after install was no longer requires in the XP/Vista world.)

 

Can you use this to replace FrontPage today?

I used to have all sorts of problems with FrontPage "bots." Generally this product appeared stable, but twice it did hit an error:

I would use this product today to create menu-intensive websites that were not predominately web applications based on server content. I would certainly use it if the host did not support .NET 2.0. Otherwise I would use VS 2005 and utilize master pages and the controls provided in that environment.

If a site is going to require ASP.NET controls, then it may as well use the Navigation controls, when then seems to limit the usefulness of a DWT approach. I'll be interested in a "best practices" in this regard.

About the Author

Kim Berry is currently developing in ASP.NET 2.0 in C#. He has a strong background in ASP Classic, but only limited experience with FrontPage controls, and no experience with Dreamweaver. He can be reached at kim@prestwood.com

REFERENCES

Expression Web Designer Microsoft Discussion Forum

http://www.microsoft.com/products/expression/en/default.mspx

http://by-expression.com/

 

"