Expression Web 4.0
Expression Web is NOT FrontPage! Expression Web is a professional-level Web design tool, used for developing cross browser and standards compliant web sites. Expression Web is NOT a WYSIWYG editor! To use the program successfully requires you have at least a basic understanding of writing HTML and CSS. Read Prerequisites for Using Microsoft Expression Web.
New Expression Web Service Pack 2 Released July 8th - Expression Web 4 SP2 applies significant fixes and improvements to publishing, SuperPreview, file management, extensibility, and other areas of the programs. There are also two new videos from Microsoft:
- Expression Web 4 SP2 Workspaces Demo - Expression Web 4 SP2 includes new features that help users configure and customize their workspace. This demo shows the enhanced workspaces feature, custom toolbars, image thumbnails and an interactive Snapshot panel.
- Expression Web 4 SP2 Code Editing Demo - Expression Web 4 SP2 helps streamline your code editing experience via a number of new tools and features including jQuery IntelliSense, a universal comment/uncomment feature and the new Snippets panel.
- Some of the Improvements include:
- jQuery IntelliSense
- Thumbnails in Folder View (Vista & Win7 only) - You can now view a preview thumbnail of the file you have selected in the folder list panel. You can view both the dimensions of the image as well as the file size. The two links under the image which can be difficult to see allow you to copy the <img> tag to the clipboard or the css properties to the clipboard. You can then paste either one into your markup. The preview area is resizeable. Just above the top folder you will see 5 tiny gray dots that you can grab and drag down. View Screenshot
If you highlight a CSS file from the folder list, you will see clickable links that allow you to copy an @import tag or <link> rule to the clipboard to paste into your markup. If you select a javascript file, you can click and copy a <script> tag to the clipboard to paste in your markup. View Screenshot. - New Snippets Panel - SP 2 has enhanced the Snippets Panel so that you can now store and access your snippets in a folder-based hierarchy. Lots of useful snippets in a variety of languages are included by default. EW will also automatically convert and load any existing custom snippets you have already built. View Screenshot
- Universal comment/uncomment - This feature will allow you to comment or uncomment code with Ctrl-J or Ctrl-Shift-J. This works from within whatever language you’re working with at the time - PHP, JS, CSS, or HTML.
- Workspaces - Expression Web now supports any of your custom workspaces. Workspaces are just collections of panel configurations. EW allows you to save, restore and/or reset workspaces. View Screenshot
- Custom toolbars - With Expression Web 4 SP2, the ability to build custom toolbars is BACK. This feature allows you to create any number of custom toolbars using any of the built-in (internal) Expression Web commands. The new feature does not have the same customization ability as did the earlier version but it is a step forward. The Custom Toolbars feature is found under the View menu. View Screenshot.
- Interactive Snapshot - The Snapshot Panel was introduced in Expression Web 3. It used the SuperPreview rendering engine to allow you to preview your pages as you authored them in IE and FF. This did NOT allow for any interactivity with the various elements of the page. Interactive mode added in SP2, puts Internet Explorer (current installed version) in a panel, and allows you to see and interact with web pages during the authoring process. Any mouse-overs, lightboxes and animations all work. Firefox is also available in the interactive Mode. View Screenshot.
- Code View - Code now uses the popular Consolas font by default. Color and syntax highlighting in Code view have also been improved.
Steven Guttman. who is the Director of Product Management for Expression Web, has written about the newest features of Expression Web 4 SP2.
Upgrading from Expression Web 3.0 to 4.0
If you have already purchased Expression Studio 3.0 or Expression Web 3.0 you are entitled to a FREE upgrade to version 4.0!
How does the free upgrade work? If you have a retail version 3 installed, you can download and install the trial of the version 4 product and it will be fully activated and functional. This will only activate a purchased version of Expression Studio 3.0 OR Expression Web 3.0 NOT a trial version and not one from MSDN or DreamSpark.
The automatic upgrade requires that the version 3 product is (or was) installed on the machine you are installing version 4 on. You cannot use a version 3 product key on a version 4 product. Please keep your version 3 product, as you will need to install and license it if you upgrade to a new computer or have to reinstall the program.
Expression Web 4 can be licensed and activated on, at most, two systems, e.g., a laptop and a desktop. If you need to reinstall on one of those systems, e.g., because you reinstalled Windows, you should be able to reinstall Expression Web 4 and reactivate at that time.
What's New in Expression Web 4.0
Some areas of work and improvement include, -
- SuperPreview online service is a beta service that extends the capability of SuperPreview to include support for additional browsers and operating systems. You will be able to see how your site displays on a Mac running Safari without owning a Mac. SuperPreview now includes Internet Explorer 7 as a rendering option. You will need to register to use this service.
- A new extensibility model that allows you to create add-ins much more easily using html, css, javascript and a manifest file (xml).
Anna Ulrich has an article on how to create add-ins for Expression Web 4 at Easily create an Add-in for Expression Web 4 with the Add-in Builder. - A new Search Engine Optimization reporting tool that scans your site and warns you about any SEO-related issues (See Help for the SEO rules). You can choose SEO options, display an SEO report, filter the results in the SEO report, and step forward and back through the list of results in the SEO report to see more detail for individual list items. You can choose to do this for one page or the entire site.

Fig 1: SEO Panel - Click for larger image - Improvements to Publishing UI (Publish All, Publish Changed, and Publish Current File on on the Site menu) and fixes for "Publish Selected Files."

Fig 2: Publishing Options - click for larger image - Limited customization of toolbars. While you will NOT be able to customize any of the current toolbars, you can create your own "Favorites" toolbar by using an Expression Web add-in.
- Many bugs reported by customers via Microsoft Connect have been fixed.
Which Version Should I Get?
- Expression Studio 4 Web Professional - This is what is currently released as standalone Expression Web and includes the following:
- Expression Web + SuperPreview - is an application to build standards based websites.
- Expression Encoder - is an application for video encoding.
- Expression Design - is an application to build standards based websites.
- Expression Studio 4 Ultimate - This is what is currently released as Expression Studio and includes the following:
- Expression Web + SuperPreview
- Expression Blend is an application to create rich interaction design.
- SketchFlow
- Expression Encoder Pro
- Expression Design is an application to build standards based websites.
You can read more details on any of these programs at http://www.microsoft.com/expression/
Pricing
Expression Studio 4 Ultimate
- Estimated Retail Price $599 USD
- Estimated Upgrade Price $349 USD
Expression Studio 4 Web Professional
- Estimated Retail Price $149 USD
- Estimated Upgrade Price $79 USD
Additional Resources
- Release Notes
- Expression Web 4 System Requirements
- Expression Web 4 FAQ
- Download Expression Studio 4 Web Professional
- Morten Rand-Hendriksen's First Impressions
- Paul Laberge’s post
- Expression Web 4 Add-in Friendly
- Expression Web 4 Upgrade Process
- Expression Web 4.0 Add-ins
- Installing Expression Web 4
- Expression Web 4 Add-ins
- Easy HTML & CSS with Expression Web 4
Expression Web 4 Books and Videos
- Microsoft Expression Web 4 Step by Step by Chris Leeds
- Microsoft Expression Web 4 In Depth by Jim Cheshire
- Sams Teach Yourself Microsoft Expression Web 4 in 24 Hours by Morten Rand-Hendriksen
- Expression Web 4 Step by Step Videos by Chris Leeds (FREE)
- Microsoft Expression Web 4 LiveLessons (Video Training) by Morten Rand-Hendriksen
Expression Web 4.0 Tutorials
Free Expression Web 4 Tutorials EBook 2nd edition by Pat Geary Microsoft MVP Expression Web
The EBook is in format and zipped for easier download. You will need the free Adobe Reader to view the EBook.
The title says it all Expression Web 4 Tutorials from Install to Publish and More. I'll take you through installing Expression Studio Web Professional (the official name) and setting up the program, to creating your first site and page right through to publishing. At the end I throw in some extras. Updated to include Sp1 and SP2.
- Installing Expression Studio 4 or Expression Web 4
- Setting Up Expression Web 4.0
- Create Website in Expression Web 3.0 and 4.0
- Create a Blank Web Page
- Create a Webpage Layout in Expression Web
- Adding Horizontal Top Navigation to Webpage Layout
- Adding Vertical Navigation to Webpage Layout
- Validating your webpages in Expression Web
- Creating an Expression Web Dynamic Web Template - DWT
- Publishing Your Web Site with Expression Web 4
Next Step: Installing Expression Web 4.0 ![]()

