Chapter 1

Understanding How Expression Web 4 Works

This page serves as the companion web page for Chapter 1 of Expression Web 4 Step by Step.

To use an application with such broad use scenarios and such a vast collection of interface elements effectively, it is imperative that you learn not only what features are available but where to find the tools to deploy those features from within Expression Web 4. After you understand the logic behind how Expression Web groups these various interface objects so you’ll be able to find what you are looking for quickly, and your comfort level will rise with much less effort than if you try to memorize the location of all the interface objects.

After completing this chapter, you will be able to:

  • Identify and use the Expression Web 4 user interface elements
  • Open a site
  • Use Site Views
  • Open a page
  • Use Page Views
  • Use the Snapshot Panel
  • Use Visual Aids
  • Use Browser Preview
  • Use Super Preview

Understanding the Expression Web 4 Interface

This section walks you through the Express Web 4 default screen layout so you can familiarize yourself with the various parts of the user interface.

In this chapter segment you will start Expression Web 4, take a clockwise tour of the default layout, and then exit Expression Web 4

Default Expression Web 4 UI

Opening a Site

An Expression Web 4 site consists of a logical grouping of folders that contain all the pages, images, and other files that make up the site. In most cases, the site also contains metadata that Expression Web 2 uses to recognize when files were changed, to update references to files you might have renamed or replaced, the locations to which the site has been published, and an array of other data the program can use for behind-the-scenes management.

In this chapter segment you will open and examine an entire site

Expressin Web 4 Site Open

Using Site Views

Expression Web 4 provides four basic views of a site. They’re designed to help you work with a site in efficient ways. These site views are helpful for designing a new site or understanding an existing site that you have opened with Expression Web. Folders view, the view used in the previous exercise, is the default view that Expression Web applies when the user opens a site.

In this chapter segment you will use Site Views to examine the sample site

Expression Web 4 Site View: Reports

Opening a Page

No matter how well or in how many ways Expression Web 4 helps you view the structure of a site, the site is made up of the files it contains. Expression Web provides a number of views for individual files within a site in much the same way that it provides different views of the site structure. These views are available when you have a page or pages open in the editing window.

In this chapter segment you will open pages in various ways

Expression Web 4 Design View

Using Page Views

Expression Web enables you to view individual pages in a number of ways. This functionality is intended to provide visual options that work well across a broad range of editing scenarios and for users of varying skill levels.

In this chapter segment you will use each type of page view within the Editing window

Expression Web 4 Split View

Using the Snapshot Panel

The Snapshot panel offers a true browser view of a webpage within the Expression Web user interface. Designers will find it much more convenient than previewing a page in a browser that requires them to exit and return to the Expression Web interface. Besides seeing a browser rendering within the workspace, the user can view the browser rendering in multiple versions of Internet Explorer (IE) and any number of browsers they have installed on their computers.

In this chapter segment you will use the Snapshot Panel

Expression Web 4 Snapshot Panel Side-by-Side

Using Visual Aids

Expression Web 4 provides a vast array of visual aids. Even though a WYSIWYG editor is helpful, true WYSIWYG isn’t the best way to look at webpages when you’re editing them. For a true WYSIWYG preview, you can view your page in a browser or by using another method such as the Snapshot panel or SuperPreview, which you will see discussed later in this chapter.

In this chapter segment you will use various visual aids within the Editing window

Expression Web 4 Visual Aids

Browser Preview

No matter how good the various page views look in Expression Web, they serve only to give the designer an idea of what their pages will look like in a browser. To that end, Expression Web contains a number of tools that allow you to view your page in a browser, at multiple sizes, and even in multiple browsers simultaneously.

In this chapter segment you will use Browser Preview and add alternative browsers to Expression Web

Some popular browsers that designers should consider adding so that they can check their work cross-browser in Expression Web:
Download and install as many of these browsers as you like. However, when you install them, pay attention to the installation dialogs. You don’t want to install extra toolbars and you don’t want to make changes to your system, such as modifying your default search engine or your default browser. If you do wish to make these changes, make them manually after you complete this chapter.
Multiple Browser Preview in Expression Web 4

Super Preview

SuperPreview can be one of a designer’s most powerful tools because it simplifies the process of debugging and verifying cross-browser rendering of webpages. With it, you can preview your pages in multiple browsers simultaneously. You can also compare a browser rendering to a composite mock-up image of the page, both side-by-side or in an overlay. It also provides tools to help diagnose the cause of cross-browser inconsistencies.

In Expression Web 4, SuperPreview includes SuperPreview Remote, which enables SuperPreview to show the designer a rendering of their page in a Safari browser running on a Macintosh operating system.

In this chapter segment you will compare Web pages in multiple browsers with SuperPreview

Expression Web 4 SuperPreview

Key Points

  • Opening a page is a completely different operation than opening a site and then opening a page within that site.
  • Expression Web uses metadata to enable many of its site management features.
  • Expression Web provides a number of site views to assist you in working with a site.
  • Expression Web provides a variety of page views and visual aids to assist you in working with Web pages.
  • Flexible browser preview options help you continually check your work in multiple browsers.
  • The Expression Web user interface is highly customizable and can be modified by the user to provide a layout that suits the specific editing task at hand.
  • SuperPreview helps diagnose cross-browser inconsistencies in ways that were previously not possible.
  • With SuperPreview’s Remote Preview, you can check the rendering of your pages in the Safari browser running on a Macintosh operating system.

You can easily make this a point to YOUR company OR hide it all together.