Support for Microsoft® Expression Web 3 Software

×

Please Note:

FrontPage 2003 is no longer supported for Fpweb.net managed hosting clients. However, we continue to offer online help & support resources for Microsoft® FrontPage in our expansive Support Achive.

Microsoft® Expression Web 3 - FrontPage Evolved.

Summary of changes

FrontPage is being replaced by Microsoft® Expression Web, a professional Web authoring tool with features that help you design, develop, and maintain exceptional standards-based Websites. Expression Web’s interface is similar to FrontPage, making it easier for FrontPage users to transition to Expression Web, but Expression Web comes with many new, different tools--and the ability to customize the interface layout--to help Web designers and developers work more efficiently.

FrontPage users who are interested in bringing their Websites to higher levels of sophistication and standards compliancy will find Expression Web an invaluable tool for developing Websites.

Why has FrontPage been discontinued?

After ten years of being an award-winning Web authoring tool, FrontPage has been discontinued. FrontPage has been among the most popular what-you-see-is-what-you-get (WYSIWYG) Website creation tools since Microsoft® released FrontPage 97 in late 1996. With its innovative use of server-side script and familiar user interface, FrontPage enabled users to create Websites quickly and easily.

As the Internet industry has grown, so has the level of sophistication of the average Website, and so have the expectations of Web designers and developers regarding the tools at their disposal. More and more, the industry is moving toward standards-based Web design as defined by the World Wide Web Consortium (W3C). FrontPage served a significant need during its product lifetime. However, as the Web has evolved, so have the needs and expectations of Web designers and developers regarding tools such as FrontPage.

Microsoft® Expression Web, a professional Web authoring tool with features that help you design, develop, and maintain exceptional standards-based Websites.

With Expression Web and FrontPage installed on the same computer, you can continue to manage your FrontPage Website and use the new tools and features included in Expression Web to take your FrontPage to the next level by transitioning to standards-based practices.

Differences between FrontPage and Expression Web

Expression Web builds on FrontPage 2003 technologies to provide an unprecedented level of support for creating standards-based Websites. However, one of the objectives of Expression Web is to help you create high-quality Websites based on today’s standards and technologies. This means that non-standards-compliant features and functionality that were familiar tools in FrontPage do not exist in Expression Web. Building standards-compliant sites with Expression Web

Web Components in Expression Web

One of the first things you might notice as a FrontPage user is the absence of Web components in Expression Web. While Web components were an important feature in early versions of FrontPage, they were also code heavy (resulting in slow download times), difficult to customize, and they generated proprietary code that was far from standards-compliant. Much of the functionality that FrontPage Web components provided are now provided in new and often easily customized ways by Web-based services. For example, there are now multiple sites that make it possible to store, sort, and share your photographs in ways that were not possible when the Photo Gallery component in FrontPage was developed.

If your existing site uses Web components, you can still edit those components using Expression Web. However, you won’t be able to add new Web components. For more information on working with existing Web components in Expression Web, or to find new and better ways to provide similar functionality, see the section entitled Working with FrontPage Web components with Expression Web

FrontPage Server Extensions

FrontPage Web components relied on FrontPage Server Extensions, a set of proprietary scripts that were installed on the server. FrontPage 2003 had already started the move away from FrontPage Server Extensions, supporting only those Web components that were compatible with the FrontPage 2002 Server Extensions.

Expression Web does not require any server-side technology such as FrontPage Server Extensions. However, you can use Expression Web to manage and even modify your FrontPage Website, including those sites that reside on servers that have FrontPage Server Extensions installed. As noted earlier, you will no longer be able to add new Web components that rely on FrontPage Server Extensions using Expression Web. For more information on working with existing Web components in Expression Web, or to find new and better ways to provide similar functionality, see the section entitled Working with FrontPage Web components with Expression Web

Themes and Shared Borders

Themes and shared borders offered quick and easy ways to style pages and keep the look and feel consistent throughout a Website. However, they created proprietary code that was not standards-compliant and, having been held over from earlier versions of FrontPage, were woefully out-of date. In fact, both themes and shared borders were being phased out of FrontPage 2003. Neither themes nor shared borders exist in Expression Web, but you can still edit existing pages with FrontPage themes or shared borders applied. With new cascading style sheet (CSS) tools, Dynamic Web Templates, and ASP.NET master pages, you’ll also find that Expression Web has a number of options that offer much of the functionality that themes and shared borders provided, but with more power, more control, and the ability to create standards-compliant code. For more information on managing your theme-based and shared border-based FrontPage sites in Expression Web, see the section entitled Themes and Shared Borders

Introducing Expression Web

Expression Web is designed for creative professionals. Experienced WYSIWYG Web designers will also appreciate the extensive features of Expression Web. No technical background is required to start using Expression Web. Convenient task panes and menus help users build attractive and compelling Web pages without knowing any markup or server code.

Standards-based Websites

When you use Expression Web to create and manage your Website, you have a variety of tools at your disposal to help ensure that your Website conforms to the latest W3C specifications. For example, once you have chosen a target standard for your Website, real-time standards validation alerts you to errors that break your chosen standard. For more information, see the section entitled Building Standards-Based Websites with Expression Web

Sophisticated CSS tools and support

Expression Web supports the creations of CSS-based Websites through the use of sophisticated CSS tools. In addition, the Expression Web rendering engine provides a preview of your CSS-formatted site in Design view. The CSS tools in Expression Web can help you format your Websites by using CSS, even if you have little or no prior knowledge of CSS.

ASP.NET support

Expression Web is the first WYSIWYG Web design tool to support the ASP.NET 2.0 release. If your Web host or ISP supports ASP.NET 2.0, you can take advantage of the power of ASP.NET 2.0 by using tools such as ASP.NET master pages, drag and drop ASP.NET controls, no-code data binding, and the ASP.NET Development Server, which allows you to preview your ASP.NET site directly on your computer. This built-in support for ASP.NET makes Expression Web a powerful choice for building Websites on the .NET platform.

The Expression Web Interface

If you are familiar with FrontPage, then you will find Expression Web easy to use. Like FrontPage, Expression Web includes a Folder List, the Website tab, Design, Code, and Split views, as well as many of the same toolbars where they were located in FrontPage 2003. However, Expression Web also has many new and powerful features that take Expression Web to the next level of Web design. To help you become more familiar with Expression Web, the following sections introduce three particular features:

  • Task panes
  • Visual aids
  • CSS tools

Expression Web Task Panes

FrontPage 2003 had a single task pane that displayed a variety of tools, including the clipboard, themes, new file options, and more, depending on your context. With Expression Web you can have multiple task panes open at a single time and you can change the location and size of each task pane to suit your needs. When you arrange the task panes in a layout that works for you, Expression Web automatically uses this layout the next time you start the program.

By default, task panes are on the left and the right, with the Design surface in the center.

In addition, task panes can be docked in the left column, right column, or below the editing pane. They can also float independently on top of your screen, or stack together with other task panes.

You can find every task pane on the Task Panes menu. Some of the new task panes available in Expression Web include:

  • CSS Properties task pane:
    Allows you to view and edit any CSS property that has been set for a particular element on a page.
  • Tag Properties task pane:
    Allows you to view and edit any attributes of a particular element.
  • Apply Styles task pane:
    Shows all of the available styles on a page’s style sheets and allows you to apply them to an element with one click.
  • Manage Styles task pane:
    Allows you to organize, move, rename, and otherwise manage styles defined in a style sheet.
  • Accessibility task pane:
    Shows results of running the Accessibility Checker.

Web Standards and Expression Web

Web standards refer to a list of standards or recommendations established by the W3C for creating and publishing Websites. These standards are generally agreed to be best practices for Website development and take into consideration such issues as accessibility for people with disabilities, cross-browser compatibility, and platform compatibility. When Websites conform to W3C standards, they are more likely to be accessible to a greater number of people using diverse devices, browsers, and platforms. Expression Web features state-of-the-art tools for ensuring that your Websites are compliant with these standards.

As accessibility and Web standards have become more important, the way Websites are built has changed as well. How your content is marked up--the HTML--is as important as the design (the presentation or display) of the site.

Building Standards-Based Websites with Expression Web

This section covers best practices for creating a standards-compliant, accessible Website when working with Expression Web.

Meaningful markup

Separating content from the presentation--in other words, separating the markup and text from the visual display--is a fundamental principle in building standards-compliant Websites.

Style Sheets Instead of HTML for Formatting and Layout

You may not be ready to immediately transform your table-based layouts into CSS based layouts. However, to create an accessible, standards-based website, it’s still a good idea to begin using CSS to apply styles to your web content. If you are using tables for layout, make them more accessible by using as few tables and table cells as possible, and make sure that your tables make sense if a text-to-speech reader were to read the contents of the table across each row and down the page. (For more information on how to make layout tables more accessible, see the Tables for layout section of the W3C’s Web Content Accessibility Guidelines. For more information on how to begin using CSS to create table-free layouts, see CSS Layout Techniques for Fun and Profit.)

Helpful resources for learning CSS

Checking for Compatibility and Accessibility

Expression Web also helps you to meet Web standard and accessibility guidelines in the Compatibility and Accessibility task panes. Both task panes run reports when you click the green arrow. You choose what specification you want to test the site against. When the report is complete, the errors are then listed, making it easier to locate and address each one.

For example, in the Accessibility Checker, you can select the range of pages that you want to check and then select the specific guidelines that you want to test your site against. You can then set the report to show errors (compliance errors), warnings (potential problems), or a manual checklist (issues that require human verification).

Similarly, the Compatibility checker allows you to select the range of pages to check and for which standards to test.

Online Website Validation Tools

Apart from testing your site against the various Web standards, you should also use Expression Web to test your Website in multiple browsers. Install the various browsers you want to test your site against. To add them to your browser list, on the File menu, click Preview in Browser, and then click Edit Browser List. After adding the browsers, you can then open the Web page that you want to check, and then on the File menu, click Preview in Browser. After that, select the browser and resolution that you wish to test your site against.

Working with FrontPage Web Components in Expression Web

FrontPage included many Web components, also called webbots, that enabled a lot of common functionality which beginning Web designers saw on other sites and wanted to add to their own sites. As mentioned earlier, Web components don’t exist in Expression Web. Web components were notorious for not being standards-compliant and very difficult to customize. For FrontPage users transitioning to Expression Web, the good news is that Web components that require FrontPage Server Extensions (FPSE) will continue to work as long as the site remains on a server with FPSEs. In addition, almost all of the components can be edited in Expression Web by double-clicking the component in Design view.

Even though Expression Web supports your pre-existing Web components, you might want to consider moving away from FrontPage Web components for several reasons. First, they produce invalid code; second, your ability to customize Web components is severely limited; third, FrontPage Server Extensions have a limited life span; and fourth, you can’t add new components using Expression Web. This section explains how to edit FrontPage Web components you may have in your site and also provides resources and suggestions to get functionality similar to that provided by unsupported FrontPage Web components.

The Insert Web Component Dialog Box

In FrontPage, you inserted Web components by clicking the Web Components command on the Insert menu to display the Insert Web Component dialog box.

The following paragraphs address each of the components as they appear in the Insert Web Component dialog box.

Hit Counter

The FrontPage Hit Counter Web component inserted a component that tallied and displayed the number of times the page was visited. If you have a FrontPage Hit Counter component in your site, you can still modify it by using Expression Web and double-clicking on the component. However, you cannot add a new hit counter component to a page.

It is worth noting that all standard hit counters, not just the FrontPage hit counters, are notoriously unreliable when it comes to getting accurate information about the number of visits to your site. The solutions below are more likely to provide you with more accurate information about traffic to your Website.

Photo Gallery

The FrontPage Photo Gallery component provided an easy way to insert a photo gallery with clickable thumbnails into a page. Existing photo galleries can be modified in Expression Web by double-clicking on the component.

The Photo Gallery Web component, in addition to being dependent on FrontPage Server Extensions, also generated invalid markup, and it was difficult to customize the display beyond a few built-in layout options.

Instead of using the Photo Gallery Web component, you can create your own photo gallery by optimizing the photographs for the Web yourself and creating a custom layout in Expression Web. You can also select from the other popular photo gallery services and solutions, including but not limited to:

  • Flickr: A free online photo gallery service. You can store your photos online and add information about each photo, which you can then display on your site.
  • Gallery: A free, open-source application that allows you to manage digital images and publish them to the Web.

You can also use your favorite search engine and use a key phrase such as “online photo album” or “Website photo gallery.”

Link Bars

FrontPage Link Bars provided a user-friendly way for you to maintain, manage, and edit navigation bars without having to modify every page. Link Bars provided graphical navigation buttons with easy-to-edit text. They were also used in conjunction with Navigation view to reorder and rename link bars, as well as to add new links.

The Link Bar Web component provided three types of link bars: a bar with custom links, a bar with next and back links, and a bar based on navigation structure. Each of these used FrontPage Server Extensions to maintain the navigation structure and/or sequence of pages.

You can still edit the properties of an existing FrontPage Link Bar--including style, page levels to display, and orientation--in Expression Web, but without Navigation view, you cannot create additional links or reorder existing links, nor can you automatically create navigation for a specific sequence of pages without creating those links within each page.

You can, however, easily create a custom link bar, save the link bar in a separate page, and then save it as an Include Page. That way you can maintain your navigation in a single page rather than having to maintain the links in every page in which the navigation is included.

The following will help you create your own navigation that you can use in place of a custom link bar.

Replacing a FrontPage Link Bar with your own links

You can easily create a list of links in Expression Web by using text links and CSS. In this example, you will create a link bar, and then create pages to link to by using the Insert Hyperlink dialog box. You may want to use your existing link bar as a guide for creating the following link bar.

  • Create a new page in the practice Website that you created for the page banner by clicking File, and then clicking New. In the New dialog box, on the Page tab, click General and then click HTML. Click OK.
  • To create the list, do one of the following:

For a horizontal list of links, copy the following code by selecting it and pressing CTRL+C. Note that each text item is separated with the pipeline character (|).

<p>Home | About Me | Photo Gallery | Contact Me</p>

For a vertical list of links, copy the following code by selecting it and pressing CTRL+C. Although you can use paragraph breaks or line breaks between each link to create a vertical list, a bulleted list format is a more semantic and standards-friendly way to create Website navigation.

<ul>
  <li>Home</li>
  <li>About Me</li>
  <li>Photo Gallery</li>
  <li>Favorite Links</li>
  <li>Contact Me</li>
</ul>

Select each text item (Home, for example) and press CTRL+K to open the Insert Hyperlink dialog box. In the Insert Hyperlink dialog box, in the Link to column, click Existing File or Web Page. In the Look in column, click Current Folder. In the main window, click Default.htm. Repeat for each page.

Note: All of the hyperlinks in the above example will link to Default.htm. If you want to create a new page for each link, in the Link to column, click Create New document. In the Name of new document box, type a name for your new document (for example, About.htm for the About me link). Under When to edit, check the Edit the new document later checkbox. Click OK. Repeat for each link.

FrontPage Themes

If your existing site uses FrontPage themes, it will still have the theme applied when you open it in Expression Web. However, the Page Banner and Link Bar Web components do not exist in Expression Web, and themes relied heavily on those components for the design, structure, and navigation of a Web page. In addition, FrontPage Navigation view, an essential feature for adding new pages to the Link Bar and applying the Page Banner to those pages, doesn’t exist in Expression Web. So, while you can continue to edit your existing pages that have themes applied, you can no longer add new pages to the Link Bar Web component, nor add a Page Banner Web component to new pages. Given the limitations of FrontPage themes both in FrontPage and in Expression Web, you may want to consider creating your own theme by designing your own styles from scratch.

The good news is that if you have been using FrontPage themes, you have actually been using style sheets without realizing it.

If you want to move away from FrontPage themes, first remove the current theme. Open your site in FrontPage. Press and hold the CTRL key and then, in the Folder List, click all of the pages to which a theme has been applied. Click Format, and then click Themes. In the Themes task page, click the arrow to the right of No theme, and then click Apply to selected pages to remove the theme(s) assigned to those pages.

Shared Borders

If your site already uses FrontPage Shared Borders, you can continue to use and edit them in Expression Web. However, shared borders were already being phased out in FrontPage 2003 in favor of Dynamic Web Templates. With Expression Web, you have the option of transitioning to a newer, more enhanced version of Dynamic Web Templates. If your site is hosted on a server that supports ASP.NET, you can also use ASP.NET Master Pages.

Other FrontPage Server Extension-based Features

There are other FrontPage features that relied on FrontPage Server Extensions that are not found in the Insert Web Component dialog box and which are not part of Expression Web. This section gives a quick summary of the discontinued components and a few alternatives.

Database Connections

FrontPage supported database creation and management by using the Database Interface Wizard. The Database Interface Wizard doesn’t exist in Expression Web. Instead, data integration has been designed to use the latest Web technologies, allowing you to integrate data not only from a variety of databases but also from XML data files. As with other FPSE-based features, you can continue to manage your existing database connection in Expression Web. However, if you want to create new database connections, you may want to review the following resource: Rich Data Presentation and Powerful Server Technology training videos

Expression Web is distinctly different from FrontPage, boasting powerful CSS management and editing tools, built-in standards compliancy, browser compatibility and accessibility checkers, run-time ASP.NET support, and both Dynamic Web Templates and ASP.NET master pages. The major differences between Expression Web and FrontPage all have to do with allowing Web developers to create compliant, scalable, and accessible Websites that meet today’s standards.

Expression Web was designed to allow FrontPage users to support, maintain, and improve their FrontPage Websites. Most of the FrontPage Web components can be easily modified in Expression Web. This document has also provided alternatives for those FrontPage users seeking to move away from Web components and create sites standards-compliant Websites. Expression Web’s interface is similar to FrontPage, making it easy for FrontPage users to transition to Expression Web, but it comes with many new tools--and the ability to customize the interface layout--to help Web designers and developers work more efficiently.