Microsoft Expression Web: The Right Tool for the Job?
Image 1 of 23
Expression Web integration with Office
Expression Web integration with Office
One notable item missing from Microsoft Office 2007 is the venerable FrontPage HTML editor and Web site design tool. Over the years, FrontPage developed a reputation for allowing non-programmers to crank out somewhat nice looking, somewhat dynamic Web sites — at the expense of industry standards and ugly HTML code.
Microsoft recently released Expression Web, which replaces FrontPage. Expression Web falls into the Expression family, aimed at Web designers and positioned between Office and Visual Studio. Expression Web can handle HTML, CSS, and ASP.NET pages, although its ASP.NET capabilities are rather limited. Although Expression Web has come a long way from its FrontPage roots, it still maintains much of the ease of use that allowed FrontPage to be used by so many new Web content creators.
As you can see from the installation options shown here, Expression Web integrates itself with Microsoft Office, showing that it’s a replacement for FrontPage.
This gallery is also available as a PDF download. For a quick rundown of key facts, see “10 things you should know about Microsoft Expression Web.”
Expression Web prompt
Expression Web prompt
Expression Web offers to become your default HTML editor.
Privacy options
Privacy options
Microsoft has made great efforts over the last few years to address the privacy concerns over the “call home” functionality of its products. This installation dialog is a great example of some of things it’s doing to make this functionality as open and configurable as possible.
Starting Expression Web
Starting Expression Web
This is the default, blank screen that you see the first time you start Expression Web. It looks like a cross between FrontPage and Visual Studio.
Site settings
Site settings
The Site Settings dialog contain a good number of options. The FrontPage heritage is evidenced by the concepts in the settings, particularly the idea of a “Web” that uses metadata files to give hints to the software, as opposed to a simple collection of files. Expression Web is much less intrusive and dominating of your files than FrontPage was.
Properties sheet
Properties sheet
Expression Web shares the same workgroup and workflow features as Microsoft Office.
CSS style editor
CSS style editor
The CSS style editor in Expression Web is identical to the one found in Visual Studio 2005. Like Visual Studio 2005, Expression Web generates high quality CSS styles that meet standards and puts the industry standards in front of Microsoft-specific standards (although the option exists to make styles IE-centric).
Updating or attaching a style sheet
Updating or attaching a style sheet
Expression Web makes it easy to update or attach a style sheet to a single page or the current page. The Import feature allows you to have the style sheet copied into a page, instead of referring to an external style sheet.
Starting a new page
Starting a new page
Expression Web has a wide variety of templates for starting a new page. It is also capable of handling HTML, ASP.NET, CSS, JavaScript, XML, and text files, which covers all of the file formats that most people will need while performing Web design, outside of a good graphics editor.
CSS style sheets
CSS style sheets
Expression Web comes with a number of high quality, predefined CSS style sheets. These sheets cover all of the common layouts and are 100 percent standard compliant and cross-browser usable.
CSS themes
CSS themes
Expression Web also has CSS themes, although none of them is particularly inspiring.
Support for frames
Support for frames
Expression Web can create a framed site as well, if you want it to.
Basic design view
Basic design view
This is the basic design view of an HTML file. While on the surface it looks standard, it does some nice things to make it easy to work with the layout and access the metadata within the HTML. Expression Web leans quite heavily toward CSS positioning for layout, as opposed to table-based layouts.
Split view
Split view
This is the split view of working with a file, which many Web designers will prefer. Highlighting a tag in one view highlights it in the other. The code section also has IntelliSense, like Visual Studio.
Page Editor Options dialog box
Page Editor Options dialog box
The page editor options are quite extensive. I would have preferred it to use Strict HTML as a default, but it defaults to W3C standards first and Microsoft Standards second.
CSS control
CSS control
The options page gives the user extremely granular control over the CSS that Expression Web generates.
Code formatting options
Code formatting options
Expression Webu00e2u20acu2122s in-depth code formatting options let you format the code the way you like. You can later run the HTML optimizer to reformat so that it’s suitable for posting online.
Page and code control
Page and code control
The editor settings provide ultra-granular control over the page and the code.
HTML optimizer
HTML optimizer
The HTML optimizer is a welcome feature, providing power and control at the same time.
Displaying margins and padding
Displaying margins and padding
You can see in this screenshot what happens when you enable the showing of margins and padding. Expression Web makes it easy to understand why your block elements are behaving the way they do. This feature is quite handy.
Viewing different resolutions
Viewing different resolutions
Expression Web also allows you to work on the page as if you were using a different screen resolution. This functionality is well thought out; it uses the true dimensions of a page within a maximized browser window at that resolution, not merely a display confined to that absolute resolution.
Working with layers
Working with layers
Expression Web also does a good job at working with layers in CSS.
Flaky spell checker
Flaky spell checker
One pain point was the spell checker. If you change a word and it becomes a typo after it was written, the spell checker does not detect it as a misspelling.
