From FrontPage to Expression Web
Making the Move
With Your Web Site
What Works and What Doesn't
Making The Move
In case you've been hiding under a bus for the past several
months, Microsoft FrontPage is no longer being developed by Microsoft. In its
place, Microsoft is releasing a pair of applications that are similar in
appearance; SharePoint Designer (released with Office 2007) and Expression Web.
Users of FrontPage will likely want to make the move to Expression Web and not
SharePoint Designer because Expression Web is better suited to developing Web
pages for the Internet.
you develop in a corporate environment that uses SharePoint technologies,
SharePoint Designer may be a more logical choice. If you don't develop against
SharePoint, Expression Web is the way to go.
Expression Web has been available in beta as a free download
for several months and the reaction has been overwhelmingly positive. Expression
Web adds several great, new features that Web designers have been asking for and
many of the pitfalls of FrontPage are now gone forever. Some of the improvements
you'll find in Expression Web are:
improved CSS features
standards-compliant Web sites by default
designer support for ASP.NET 2.0
user interface with task panes and other new features
These new features are driving many veteran FrontPage users
to give Expression Web a try. While most of them seem to appreciate the
improvements, many questions are raised concerning how existing Web sites will
work with the new application and what changes will need to be made to make the
transition a smooth one. In this article, we'll discuss how you can easily make
the move from FrontPage to Expression Web.
Working With Your Web Site
When you begin using Expression Web, you'll notice right
away that it will feel familiar to you as a FrontPage user. Many of the dialogs
are similar or identical and some of the techniques (such as opening and
publishing Web sites) are almost exactly the same.
assured that the similarity to FrontPage is only skin deep. Under the covers,
Expression Web is a completely revamped application.
Expression Web will open and publish Web sites using the
FrontPage Server Extensions if they are available. It also supports FTP (much
better support than you had in FrontPage 2003) and disk-based Web sites.
Whatever method you used to work with your Web site in FrontPage is still
available to you in Expression Web and the dialogs you'll be using are the same
What Works And What Doesn't
The first thing FrontPage users want to know when they start
using Expression Web is what features in existing Web sites are going to break.
One of the main reasons why this question is in the forefront is because of
Microsoft's decision to drop the FrontPage components from Expression Web. You
won't find features such as the Hit Counter, Shared Borders, Photo Gallery, etc.
in Expression Web. However, if you do have these features in your existing Web
site, don't worry. Microsoft thought well ahead and Expression Web will support
editing of components that have already been inserted. In short, your existing
FrontPage components will still work.
With that said, there are caveats. In Figure 1, a FrontPage
Link Bar is being edited in Expression Web. While you can interact with the Link
Bar Properties dialog just as you could in FrontPage, you cannot edit the
navigation structure that defines the structure of the Link Bar because the
FrontPage Navigation view is not available in Expression Web.
Editing a FrontPage Link Bar in Expression Web
Even though existing components can be edited, you cannot
insert new components from within the menu system in Expression Web. If you want
to add a new Web component to your Web page in Expression Web, you'll have to
add the webbot code that FrontPage would normally add either by hand or using
the Code Snippet feature in Expression Web.
For full details on using the Code Snippet feature and tips on
using Code Snippets to insert FrontPage components in Expression Web, see
Chapter 7 in my book,
Special Edition Using Microsoft Expression Web
from Que Publishing.
In short, none of your FrontPage components are going to
break in Expression Web. Where you're likely going to find the most difficulty
is when you want to ensure that you maintain current standards. We'll tackle
that topic next.
So far, I've painted a pretty picture for those of you
moving to Expression Web, but it's not all a bed of roses. As most FrontPage
users know, FrontPage didn't excel at creating standards-compliant code. That
fact is going to rear its ugly head when you open your FrontPage Web site in
Figure 2 shows the Compatibility Reports task pane in
Expression Web displaying results of a compatibility check on one page from a
typical FrontPage Web site. Fortunately, Expression Web provides tools that make
it easy and convenient to identify errors.
Compatibility reports in Expression Web make finding
problems fast and easy.
To run the Compatibility Reports, select Tools, Compatibility Reports in Expression
When you open a page in Expression Web, the status bar will
indicate to you whether or not a compatibility problem exists. Figure 3 shows
the status bar in Expression Web showing that there are problems with the
The status bar in Expression Web will let you know if
there are code problems.
The leftmost icon indicates an HTML incompatiblity. Also notice
that Expression Web is operating in Quirks mode which means that it is
rendering non-standard code. More on that later.
For more information on detecting compatibility problems in your
Web site using Expression Web, see Chapter 20 of my book,
Special Edition Using Microsoft Expression Web from Que Publishing.
Once you've determined that you've got problems, the next
step is to fix them . . . if you can. Some problems are ones that you will just
have to live with. For example, if you use FrontPage Web components in your Web
site, you'll see an incompatibility notification in your reports for those
components. Your options in such cases are to live with the incompatibility or
replace the FrontPage component with custom code. The choice is yours.
If incompatibilities exist in code, you may or may not be
able to correct it. For example, consider the following line of code which was
highlighted by the compatibility reports shown in Figure 2.
<td valign="top" width="75" style="border-right-style:solid;
This particular line of code was flagged by Expression Web
because of the value for border-right-width. FrontPage added a value of 1, but
the standards require that if a number value is used, it is followed by the
unit. Therefore, 1px is a valid value, but 1 is not.
How are you supposed to know that? In many cases, you won't.
The best way to try to figure out what is allowed is to check the W3C's Web site
(www.w3c.org) or by referring
to Expression Web's own Style dialog. Figure 4 shows the valid settings for the
width of a border in the Expression Web Style dialog. Notice that you cannot
specify a value without specifying a unit for that value.
The Style dialog can often clue you in on CSS
Creating More Problems
Now that we've covered some of the problems you might
encounter, it's time to create some new problems. Remember that we previously
saw that the status bar showed that Expression Web was rendering the page in
Quirks mode? (See Figure 3.) That's because FrontPage does not add a DOCTYPE
declaration to pages, so Expression Web doesn't really know which standard to
check your page against.
To correct this problem, switch to Code view and place the
insertion point at the very top of the page above the opening <html> tag. Press
Ctrl-Enter to open the Code Snippets IntelliSense popup and select the DOCTYPE
declaration of your choice.
you want to use the latest standard, choosing XHTML 1.0 Transitional is a good
Once you do that, you'll notice two changes. First of all,
Expression Web's status bar will no longer show you in Quirks mode. Instead, it
should say that you are in Standard rendering mode as shown in Figure 5.
Once the DOCTYPE declaration is added to the page,
Expression Web will render the page in Standard rendering mode.
The next thing you'll notice (if you switch to Code view) is
that there are a lot of new errors showing up. At this point, it's going to help
you a lot to understand how Expression Web highlights different problems. I
won't go into detail on that in this article because I cover it in-depth in my
book, but let's look at a couple of different types of problems.
The most apparent problems will be code errors. Expression
Web will highlight these in yellow as shown in Figure 6.
Code errors are highlighted in yellow so that you can
easily identify them.
If you have chosen XHTML as your document type, you can fix
these by simply right-clicking anywhere in Code view and selecting Apply XML
Formatting Rules. When you do that, Expression Web will automatically apply the
correct formatting rules and most (if not all) of these problems will disappear.
For example, in Figure 6, Expression Web is complaining because the <meta> tags
shown are not properly closed. After reformatting, the code looks like Figure 7.
Once XML formatting rules are applied, the <meta> tags
no longer show a code error.
Other code problems may require a little more work to
resolve. If you have a lot of pages and a lot of errors, don't expect miracles.
Determine how much work you have to do and decide whether or not you want to
take it on. In some cases, it might be easier to just redo the Web site in
Lagniappe: What About
One of the first questions I see FrontPage users ask
regarding Expression Web is how they are going to replace the FrontPage form
handlers. I've got good news. You don't have to! Expression Web offers the same
form handlers that were available in FrontPage. You can save form results to a
file, a database, or send it to e-mail. Keep in mind, however, that your server
will require the FrontPage Server Extensions for this to work.
Copyright 2006, Jimco Software and Books
All rights reserved.