With GoLive all-but gone, it might seem that Dreamweaver now holds a monopoly over professional page-based web authoring.

However there’s still one company with the resources, vision and resolve necessary to mount a serious challenge to Adobe, and Microsoft is absolutely determined to do just that.

The bottom line is that professional web publishing is so important that it simply can’t afford to fail.
However to succeed Microsoft faces an uphill struggle, not just because of Dreamweaver’s dominance but because it has failed before – and badly. As such Microsoft’s first aim with its brand-new Expression Web application is to lay the ghost of its former web authoring application, FrontPage. FrontPage was one of the early web design pioneers and Microsoft chose it because it promised to make designing for the Web as simple and visual a process as designing for print. Unfortunately it isn’t – a web page is built on code and code that needs to be reliably interpreted and displayed across multiple cross-platform browsers. To keep life simple Microsoft tried to protect its users from this code, ignored common standards and targeted its own Internet Explorer browser. The result was that FrontPage sites worked fine when viewed locally on a user’s own system but the code was ugly, inefficient and often didn’t work at all when viewed with other browsers. From a professional designer’s point of view it was a disaster.
Eventually Microsoft saw the light and tried to make FrontPage more professional, but the damage had been done and few self-respecting designers would even look at it. Finally Microsoft has bitten the bullet and recognized that reworking FrontPage isn’t an option; it has to start from scratch. That’s where the new Expression Web comes in and, with it, Microsoft is determined to show that it has learned its lesson. As such, while Expression Web retains a visual wysiwyg editing environment, there’s a completely new focus on code and in particular on efficiently creating clean, standards-compliant code.
For a first release to try to compete with an established veteran such as Dreamweaver is a tall order, but Expression Web’s fresh start gives it two clear advantages. Firstly Microsoft’s developers have been able to take the best from both FrontPage and Dreamweaver to produce a streamlined, focused and productive interface which gets you up and running as quickly as possible and then helps keep you on top of your site (see Site Handling walkthrough). Secondly, when it comes to code, Expression Web can simply ignore all the many highways and byways that have emerged over the years as web design has organically evolved and instead concentrate all its efforts on the current state-of-the-art of modern web design.
When it comes to the web page’s underlying HTML code this means that Expression Web can simply ignore all the early browser-specific workarounds and the once standard tags that are now officially deprecated. In fact, by default, Expression Web creates its pages based on the XHTML 1.0 Transitional specification, the XML-based rewrite of HTML. The great strength of XHTML is the new rigour that it brings to bear which means that, for example, all those inefficient and undesirable table and font tags that FrontPage relied on so heavily to handle layout and formatting are now things of the past.
Instead Expression Web makes full use of CSS (Cascading Style Sheets), the presentational mark-up language designed to work hand-in-hand with XHTML’s content-based mark-up. CSS is supremely efficient offering centralized design control of both layout and formatting – apply a pre-defined CSS style to your page, for example, and your text is instantly and consistently formatted. Even better, make a single change to a style stored in an external style sheet and you can completely change the appearance of a whole site.
However handling CSS is by no means simple as, for example, different and potentially conflicting rules stored in different places – in external style sheets, in the document’s head and inline - all feed in to the final appearance. The difficulty of implementation that follows from this “cascade” of styles as well as patchy browser support explains Dreamweaver’s comparatively slow take-up of CSS. However browser support has now improved to the point where CSS formatting and positioning are now seen as absolutely fundamental to modern page-based web design and, Expression Web can claim to offer the most efficient CSS handling available (see Page Design walkthrough).
Tackling Dreamweaver head-on when it comes to streamlined efficiency and core page design capabilities is no mean feat and the planned Ajax-enabled update should boost Expression Web’s credentials when it comes to creating dynamic and interactive pages. Most significantly, the soon-to-be-released Expression Studio will put Expression Web at the heart of a comprehensive CS3-style suite focused on professional web and application design. While the latest Dreamweaver CS3 remains the current choice for professional web page design, this first release of Expression Web creates a strong platform on which Microsoft can, and will, build.
GoLive and FrontPage might have bitten the dust but, with Expression Web, Dreamweaver now faces its most serious competition yet.

SITE HANDLING: Site Views and Templates

1. Expression Web stresses its professional credentials, but it still offers FrontPage-style usability features designed to get you off to a flying start. For example, select the New > Web Site command to create a site framework based on a range of predesigned templates.

2. The result is a multiple page site neatly organized into named folders as shown in the central Web Site panel’s default Folder view. This view can be used for file management so any pages/folders that you don’t need, such as the Photo Gallery, can quickly be removed.

3. As well as its Folder view the Web Site panel can also be used to show site-wide Reports. Switch to the Site Summary report and you’ll see a host of useful drill-through statistics such as the number of broken links (these are the result of the deleted pages) .

4. Switch to view the Shared Content > Dynamic Web Templates report and you’ll see that all the site’s pages are linked to a single central template – master.dwt. This file is used to handle the site’s shared navigation and branding.

5. Double-click on master.dwt and it opens like any other page, ready for editing. Edit the branding across the top of the page and delete the links to those pages that you removed both in the text links at the bottom of the page and in the side navigaton bar.

6. Save the changes you made to the master.dwt and the edits are automatically applied to all pages that are linked to it. Working like this with Dynamic Web Template gives you centralized control over a site’s shared content in the same way that CSS handling gives you centralized control over its themed appearance (see over).

PAGE DESIGN: XHTML and CSS

7. Now you’re ready to begin editing and styling the individual pages of your site. To make life slightly easier, rather than returning to Folder view, select the All Files report which gives a flat view of your pages. Double-click on a file to open it for editing.

8. Notice that the changes that you made to the master.dwt file have automatically been applied. Also note that you can’t edit those areas specified in the DWT – this locking ensures that you don’t inadvertently alter the page’s shared branding and navigation.

9. By default Expression Web defaults to the wysiwyg Design view for visual layout. However you can always switch to Code view to see and edit the underlying code. For most work the Split view gives you the best of both worlds.

10. Temporarily switch to Code view and take a look at the code. Note the XHTML 1.0 Transitional DocType at the top of the document and the fact that closing tags in XHTML require a preceding forward slash. Expression Web’s in-built Intellisense will help when coding XHTML directly.

11. Switch back to Split view to edit and style the page. There’s no Dreamweaver-style Properties panel so the first port of call is the toolbar. We want the company name to stand out so choose a contrasting font family. Note that the formatting is applied as a CSS-based span> class – “style1” – rather than as an old-fashioned font tag.

12. Expression Web’s code view automatically hyperlinks the style name so Ctrl-click on it to be taken directly to its associated CSS code in the document head. CSS experts can manually edit the style here, or you can open the Manage Styles taskpane then right-click on the “style1” style and select the Modify Style command.

13. The Modify Style dialog is the same as if you are creating a style from scratch and lets you quickly set all style properties. Explore the full range of settings in the Font category and beyond. Many of CSS’s formatting capabilities, such as a background colour for text, simply aren’t possible with HTML.

14. That’s fine for this page, but the main point of CSS is to centralize design power. This is easily done with the Manage Styles taskpane. Right-click to change the style name to something more meaningful (“companyname”) and then simply drag it from the Current Page onto the already linked external style sheet, style1.css.

15. Now when you open a new page and switch to the Apply Styles taskpane you’ll find a preview of your new companyname style in the style listing. Select some text and click on it and the formatting is instantly and consistently applied much as it is in a word processor...

16. … but this analogy is misleading. Open the CSS Properties taskpane and at the top you’ll see a list of all “applied rules” that are feeding into the current formatting. With multiple styles stored in multiple places and often conflicting it could be a nightmare…

17. … but not for Expression Web. Select an applied rule and its properties are shown below with uninherited and so irrelevant properties indicated with overscores. Most impressive - all properties are live so that you can quickly update all relevant styles wherever they are.

18. For maximum centralized design control you can directly edit the external stylesheet, style1.css, that Expression Web automatically created back when it first created the site framework. Note that you can still use the CSS Properties and Manage Styles taskpanes as well as editing the CSS code directly.