Expression Web

Review and First Look

Expression Web Interface

The interface is the most vital function of a program for making the various program functionalities available to the user.  So this is where we will go first.

interfaceThe top most line (1) is the text menu structure typical of most of applications. Immediately after the text menus are the main tool bar (2), the center of the screen (4) is the editing window and the outlying sections (3) are task panes.


There are eleven toolbars, all of which are positional by hovering over a set of dots on the left of the bar, until the cursor turns into a 4-way arrow, then click and drag to a the location you want. You can either dock them at the edges of the window or leave them floating anywhere on your screen.

Task Panes

The task panes REALLY work great, with one exception. You can dock the task panes at any of the four sides of the editing window or you can leave them on your screen in any location! Pretty cool but there is more. You can click and drag a task pane and dock it inside another task pane, where a tab will show task pane tabsup for that task pane. If you want to move task pane that is inside another task pane, just click the tab and drag the pane to a new location. And when moving them they snap in place leaving no doubt where they are going!

Each of the task panes have the traditional Windows X and box in the upper right hand corner. Clicking the X closes the task pane or click on the box to expand the task pane. Clicking the multiple boxes in the upper right  hand corner will resize the task pane to it's previous size.

There are eighteen (18) task panes in total!

  • Folder List
  • Tag Properties
  • CSS Properties
  • Layout Tables
  • Apply Styles
  • Manage Styles
  • Behaviors
  • Layers
  • Toolbox
  • Data Source Library
  • Data Source Details
  • Conditional Formatting
  • Find 1
  • Find 2
  • Accessibility
  • Compatibility
  • Hyperlinks
  • CSS Reports

The only problem with the task panes is that there is no means to minimize the task pane windows. So if you want the extra room on the screen you need to close all of the task panes on one side. And then you'll have to go back to the Task Panes  menu and reopen all of the task panes that you want opened.


Now while we are on short comings, the entire area I've just talked about is called the Workspace layout. And EW does not provide a means to save your workspace layout the way you want it. EW will remember your workspace layout, and open up the same as when you closed the program. But if you go the Task Panes text menu and click Reset Workspace Layout," you'll be back to the default layout without an easy way to reestablish your preferred layout.

report viewEditing Window

Now for the area you'll spend most of your time in, the editing window. As with FrontPage 2003 there are four options, Report view, Design view, Code View and a split screen with code view on the top and design view on the bottom.

When there are no web pages opened the editing window space will be filled with a file menu structure of the web site you have opened. At the bottom of the screen will be four options to view. Files, the default view; Remote Web Site, where you can set up the options of your remote web site; Reports, where you get a summary of the EW reports (see image above); and the Hyperlinks view, where you can see a line drawing of the hyperlinks as they relate to each item in the web site.

design-split-code view tabsOpening a web page changes the entire editing window. At the bottom of the window are the three options for Design, Split or Code views.

If you are familiar with FrontPage 2003 this works exactly the same. Design view is the entire editing window, in code view the editing window is all code and in the split window you'll have a design view in the bottom half and code view in the top half. In split view you can resize the split to view more of the design or more of the code. However there is no mechanism to switch the design view and code view with each other. So you'll have to like it this way!

tag selector barWhen a web page is open the editing window has a tag selector bar at the top. Again this can not be moved.

The tag selector bar gives you an easy means of selecting the CSS rules that are in the code. This eliminates having to click and drag, and ensuring that you have selected the complete opening and closing tags of the CSS rule you'd like to change.

When selecting the tag you can click a small down arrow that is next to the tag and select from several options.

Select Tag Selects the start and end tags and the content of those tags.
Select Tag Contents Selects only the content of the start and end tags.
Edit Tag Displays the Quick Tag Editor dialog box, which enables you to edit the current tag, including attributes and other aspects of the tag.
Remove Tag Removes the start and end tags, but leaves the content of those tags.
Insert HTML Displays the Quick Tag Editor dialog box, which enables you to add HTML to the page.
Wrap Tag Displays the Quick Tag Editor dialog box, which enables you to wrap a tag that you specify around the tag that you selected. The current tag becomes nested inside the tag you specify in the dialog.
Positioning Allows you to select absolute, fixed, relative or static  position for the tag selected.
Tag Properties Opens the properties dialog box for the tag.

There should be an option to the "Modify Style" dialog here as well!

Interface Wrap up

Overall slick and smooth, but it could use a few touch ups here and there. Such as:

  • The ability to reverse the split screens
  • The ability to move the tag selector bar
  • Another option for the tag selector to take you to the modify styles dialog
  • Enabling the minimizing of the task pane windows
  • The task panes could be simplified

Oh, one other major point. If you keep task panes opened on both sides of the editing window you'll want to work at 1280 x 960 screen resolution, at a minimum. If your web site  is being developed for 1024 x 768 screen resolution things will start seeming a little cramped. And without the ability to minimize the task pane windows and maximize them back to their previous settings, you may find that you want more room.

A great alternative is to start using two monitors - but I did not test EW with two monitors. Of course the least expensive option is to close all of the task panes on one side or the other of the window.

Well I have not covered the entire interface, just the most used concepts. Since the greatest change from FrontPage 2003 to EW is standards and CSS is basis for implementing the standards, the CCS implementation will be the next topic.