From FrontPage to Expression Web

In this article

Making the Move

Working With Your Web Site

What Works and What Doesn't

Finding Problems

Fixing Problems

Creating More Problems

Lagniappe: What About Forms?

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.

If 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:

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.

Rest 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 as well.

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.

Figure 1

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.

Finding Problems

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 Expression Web.

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.

Figure 2

Compatibility reports in Expression Web make finding problems fast and easy.

To run the Compatibility Reports, select Tools, Compatibility Reports in Expression Web.

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 current page.

Figure 3

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.

Fixing Problems

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; border-right-width:1">

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.

Figure 4

The Style dialog can often clue you in on CSS incompatibilities.

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.

If you want to use the latest standard, choosing XHTML 1.0 Transitional is a good choice.

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.

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.

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.

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 Expression Web.

Lagniappe: What About Forms?

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.