Introduction to Expression Web 3
Recently, I took a look at one of the premier web design
software packages available today, Dreamweaver CS4. In this article I’ll
begin to explore another popular web design suite, Expression
Web 3 from Microsoft. I’ll cover
some of the best features of Expression Web 3 as well as point out a few
shortfalls.
What’s Included
When you purchase or download the trial version of Expression
Web 3 you will actually get 3 products, Expression Web, Expression
Design and Expression Encoder. Each are very specific in their
purpose but are designed to complement one another. Here is a breakdown of each
piece:
Expression Web – This is the
workhorse of the suite. It handles all of your standard design needs for coding
and designing. It’s the base web design piece that Expression Design and
Expression Encoder are designed to complement.
Expression Design – Here you
will take care of your graphic design needs. This piece has nothing to do with
the layout and design of your web pages; it’s strictly a graphic generation
tool. It’s basically Microsoft Paint on steroids. If you have ever used
Adobe’s Photoshop or Illustrator products then you will feel
quite at home with the look and feel of Expression Blend. The tools and
functionality are fairly similar.
Expression Encoder – If you
are heavily into video and/or you use Microsoft’s Silverlight in your
website design work then this product will be just what you are looking for. It
has support for video capture, video streaming (with IIS), and tight
integration with Silverlight.
Feature Overview
While each of the three pieces mentioned above are useful to
a web designer, we are focusing on products that provide actual web design and
coding functionality, i.e. Expression Web. If you are interested in
learning more about Expression
Design or Expression
Encoder you can read about them and even download a trial version for
the Microsoft website.
There are several features of note in Expression Web.
I will discuss some of the more basic features below. In the next edition of
this series I will take a look at some of the more advanced features. For now,
here are the basics:
Technology Support – Microsoft
touts their support for different technologies which include PHP, HTML/XHTML,
XML/XSLT, CSS, JavaScript, ASP.NET and ASP.NET AJAX, Silverlight, Flash,
Photoshop files, and video/audio. As you can see all of the basics are covered
as well as everything that Microsoft has to offer … imagine that. Then there is
the oddball PHP support which is fair at best. The PHP support is obviously an
attempt to broaden the market base for Expression Web, however it is
clearly not a priority. Don’t get me wrong, the PHP support isn’t terrible,
just adequate. Obviously, the broad technology support falls short of other
products like Dreamweaver. If you deal exclusively in Microsoft technologies,
though, Expression Web beats Dreamweaver hands down.
Standards Compliance – It’s apparent
that Microsoft is proud of it standard compliance support for HTML, XHTML,
Strict/Transitional/Frameset and CSS 1.0, 2.0, or 2.1. Don’t get too excited,
though. Just because the functional support is good doesn’t mean the implementation
is easy. For example, adding a new cascading style sheet (CSS) to your website
provides you with only a blank page, no pop-up asking what schema to use or how
to start defining styles. To the beginner this blank page can be quite
intimidating. However, once you start typing Expression Web does a
pretty good job of giving you hints and suggestions. What’s not intuitive is
the placement and naming of tools. If you want to change your CSS schema the
button for that is in the bottom right and the style tools are found in the top
menu under format.
Views – Like just about
every other website design package you have the choice of looking at your work
in design view, code view or split view. Personally, I always choose split view
because I just hate clicking back and forth. Split view is one of my favorite features
in any design package.
SuperView – This view option
is designed to help you troubleshoot issues between browsers. I really like the
way this feature works. If you want to see how your design renders in IE6
versus the newest version of Firefox then all you have to do is click the SuperView
button and then select your browser options. You will get a split screen view
of each browsers actual rendering of your page complete with rulers that make
alignment and spacing issues much easier to spot. You can also add more browsers
to either pane. For example, you may want to compare Firefox to both IE6 and
IE8. You can click the add button for your IE6 pane and add IE8 as an option
then just clock the IE6 and IE8 icons to switch back and forth. Although
quickly finding code that needs to be tweaked is much better in Dreamweaver’s Live
View, comparing browser rendering is far superior in Expression Web.
I wish I could blend SuperView and Live View together for Super
Live View and get the perfect solution.
Photoshop Support – Support
for Photoshop is a must for any good web design package these days.
While Microsoft makes a good stab at photo editing with Expression Design,
Adobe’s Photoshop has been around too long and is too ingrained into the
web design industry to discount it. With this feature Expression Web
will let you import your Photoshop files directly into your website and
it will take care of converting them into either PNG, GIF or JPEG formats, your
choice. It will maintain layer and transparency when possible and can automatically
update your web images when you make changes to your Photoshop files.
Conclusion
Expression Web is a far cry from its predecessor FrontPage.
The layout is fairly intuitive, the look is sharp, and the features are good
(albeit seriously slanted toward Microsoft products). In the next article in
this series I’ll take a look at the more advanced features and give an overall
assessment of Expression Web.
