Web Design: When FrontPage and Dreamweaver Simply Do Not Suffice
by
Ross M. Greenberg

When web designers first experienced the WYSIWYG of FrontPage they thought they had died and gone to heaven.  The idea that you could assemble web pages quickly and easily with only a few clicks of the mouse in that newfangled Windows thing was simply astounding.  Then reality set in: you couldn't really do everything you wanted to, mixing code and graphical elements was easy only in the demo and not in real life and trying to modify pages that were not created using FrontPage itself was anything but easy in FrontPage!  The final affront to Web designer dignity: making sure that any way you went for Web hosting had to have the so-called "FrontPage Extensions" -- but what choice did a professional webpage designer really have?  There was really only one and it was the proverbial high-priced spread.
A little Web designer interface/program history seems in order.
The truly professional webpage designers were busy understanding this new all-in-one program called "Dreamweaver" to see if it lived up to its lived up to its hype.  And, surprisingly, apparently it did.  It did take Macromedia multiple tries to get it mostly right but even cascading style sheets (CSS) seem to have been conquered. The interface to other products seemed well in hand -- and interfacing to other Adobe products seemed really top-notch.
Generally speaking the world of webpage design moved forward.,  About the same time that Dreamweaver became the de facto standard in the Web design world, Adobe bought Macromedia.  Future changes could have been stifled since then, until you consider the close integration between the latest-and-greatest entre’, the CS3 members.  Dreamweaver has some new competition, however, and I think it has breathed some of the life into what could have been fast becoming a tired old product.

Microsoft's entries into the "new" world of Web design are called "Expression Web" and Visual Web Designer. They really seem to pick up where Dreamweaver and DreamweaverCS3 seems to have left off.  Microsoft had to come up with something not only that was just as good as Dreamweaver, but something substantially better in key areas.  It seems to have answered every deficiency the older product may have had.
After playing with Expression and Visual Web Developer for awhile I'm ready to stop fighting Dreamweaver and try to do similartypes of work in all three products to ascertain which is superior, I found only one true deficiency in Expression: it can't import legacy websites the way I like.  Pity.

I didn't find any other deficiency.  It is truly a professional web designers dream in many ways.

Don’t take my word for it: Microsoft has a free trial version available for you at: Free Trial Expression Web.: The trial version only allows you 25 invocations, and I don't think that's enough to know the product well enough to buy it -- better would have been perhaps a 60 day trial. Visual Web Developer is a free product available for download and installation now – be warned it is a hefty 400 MB download and a painfully slow installation.   The good news is that the Express 2008 version of Visual Studio and SQL Server 2005 Express are part of the freebie package.
Some innovative concepts, such as a split screen view of both the code and design -- which I believe Macromedia pioneered -- have been effected seamlessly in Expression and VWD.  Bring up a webpage, toggle on the split-screen view and make some changes in the graphical design representation, and watch the code window change to reflect the changes made.  With clean CSS code, too.
If you’re familiar with other Microsoft office products, such as Word, Expression’s and VWD’s interface will feel very familiar.  I enjoyed using split screen view as I experimented with some of HTML’s more esoteric and lesser used functions, as Microsoft's previous efforts in the HTML code generation arena have been truly embarrassing -- especially for a development company such as Microsoft --: they seem to have done it properly this time with both Expression and VWD.
Something I did find rather impressive was both products rather tight integration with some "currently new" stuff, such as Ajax,.Net, SQL server technology, and other Microsoft-only technology.  Although this may be considered limiting when in the search for a decent Internet service provider, I did not find any real premium price to be put on such features.  The ISP I use can be found at hostmysite.com. 
Probably the most noticeable change in going to CSS from HTML was crossing the “tableless” border –it is rare indeed to see traditional tables used in a modern CSS-based webpage.  There’s a trial version of a very effective table-less CSS converter available at CSSConverter.  It is only a trial but should suffice for pages of a reasonable length.
Make sure, by the way, to actually do the conversion by hitting the convert button at the bottom of the conversion screen CSS Converter Screen Shot
it is vitally important to realize that there is no one-to-one correspondence, directly, between CSS and, say, HTML tables.  Although the above converter is a good start realize that CSS was designed with “tweaking” in mind!
HTML users have gotten complacent and lazy with positioning of things such as nested tables and have been using the so-called power of tools such as DreamWeaver8.  As was said by Uncle Ben in the original Spiderman movie "With Great Power Comes Great Responsibility" -- and with the power of full CSS editors, such as CS3 DreamWeaver, comes the added responsibility of near infinite tweaking!
Here is the before-conversion .htm file http://www.ramnet.net/table.htm, and here is the after-conversion.htm file http://www.ramnet.net/cssexample.htm .  And here is the "tweaked" version:Tweaked Converted Example .  The needed tweaks included setting border characteristics such as border thickness and border pattern for each of the DIV’s that make up each of the table cells.  This "decoration" needed to be set for the top, bottom, left and right borders -- that aforementioned infinite tweaking gets tiresome real fast!
Text and HTML versions of all three examples are available at

Each product's heritage is most apparent when viewed from the tight integration with the other products of its lineage: Microsoft's Expression Web and VWD provide for greater integration with Visual Studio widgets and gadgets; Adobe's CS3 DreamWeaver provides for a familiar interface for any DreamWeaver8 user as it provides for easy manipulation of CSS.  Additionally, the Adobe product provides many templates and starter WebPages to draw upon for further inspiration in designing new web pages.
All the products provide for easy access to the programming interface, with Active Server Pages (ASP) integration in Microsoft’s Expression Web and VWD products and Adobe's ease in getting to the JavaScript important to Ajax implementation and the Spry interface for doing Ajaxy type things.
The Adobe/CS 3-Dreamweaver Approach
Adobe’s Spry page at http://www.adobe.com/devnet/spry/ is quite enlightening and it gives a great idea of what future WebPages can include. A full Spry tutorial is available at http://vineyardesigns.com/resources/dreamweaver/spry.shtml . After downloading the trial version of CS3 DreamWeaver as mentioned above, you can find a lot of the Spry modules easy to utilize through the Spry submenu under the insert menu.
The Dreamweaver approach to dataset manipulation and connection tuning is still ridiculously cumbersome and, alas, something easy to forget between episodes of usage.

To give an idea of the Spry interface, see http://ramnet.net/examplespry.jpg .  This shows a simple code-and-design view of a page design using only the interface provided by CS3; to see that interface in action, see http://ramnet.net/spry1.html the source for this page is available at http://www.ramnet.net/examplespry.txt Note, however, that Spry includes a variety of files to enable the JavaScript and CSS, viewed at http://ramnet.net/spryassets all "automagically" generated simply by publishing the site/page with a simple F12.  The live page demonstrates tabs, accordion, or vertical menus, and collapsible tab entries -- all generated without having to do any coding!
The next part of this Web design series of articles will discuss the approach Microsoft took with its Expression Web / Visual Web Developer: they are both rather impressive. 
And the fact that Visual Web Developer is entirely free and available right now -- just a download away -- makes it even more impressive!

The Microsoft/Expression Web Approach

And Now, as Monty Python would say, for Something Completely Different
ASP.NET AJAX (formerly called ATLAS) is a free framework for building rich interactive, cross-browser web applications. This Microsoft technology integrates cross-browser client script libraries with the .NET framework.

ASP.NET AJAX hosting makes it possible to take advantage of AJAX (Asynchronous JavaScript and XML) techniques to create ASP.NET webpages with rich user interfaces. Including both client-side and server-side components, ASP.NET AJAX allows creating web applications in ASP.NET which can update data on the web page without a complete reload of the page.
The real story here is the total solution; Microsoft Expression tools for web designers, Visual Studio for web developers, and Silverlight (news flash: a new version of Silverlight was just released this month, March: true, it's only a beta-but even as the beta it's not bad at all) for cross web browser and cross platform support. The combination of great tools for building applications and Silverlight for cross platform distribution creates real synergy for developers, web site owners, and users.
Silverlight is both client- and server-agnostic. There's no difference between the Macintosh and PC runtimes; you don't need any Microsoft software on the server if you don't want to use any - you can deliver a great Silverlight experience from an Apache / Linux server to a Mac OS 10.4 client.
Expression Web Designer allows true integration to and from a Dreamweaver site and can even use and apply DWT files, or Dynamic Web Templates as they are called in Web Designer.  The Dreamweaver pros know that it actually stands for Dream Weaver Template There is no change in source code psycho from one to the other: pop out of Expression Web Designer and pop back in to Dreamweaver (both CS 3 and version 8)