Share via

Displaying pages in SuperPreview

  • Article

SuperPreview simplifies the process of testing and debugging layout issues across different web browsers. Use SuperPreview to view your pages in multiple browsers simultaneously, or to compare how a page renders in a browser to a mock-up image of the page.

You can preview ASP.NET or PHP web pages by using Microsoft Expression Development Server. The Expression Development Server is installed when you install Microsoft Expression Web. If you have to repair or reinstall Expression Development Server, see Installing Expression Development Server.

For more information about previewing ASP.NET or PHP web pages, see Previewing an ASP.NET page and Previewing a PHP page. For information about using a custom URL for preview, see Preview pages in a browser.

Note

You must use Microsoft Internet Information Services (IIS) to preview ASP (not ASP.NET) pages. For information about using a custom URL for preview, see Preview pages in a browser.

To display a page in SuperPreview

  • With a page open and selected in Expression Web, click the Display in SuperPreview icon Ee371310.79c275f9-6a28-4b9c-879e-07293f26da55(en-us,Expression.40).png. Alternatively, from the File menu, click Display in SuperPreview, or press SHIFT+F12. The currently selected page is displayed in SuperPreview.

    Note

    The first time you use SuperPreview, the page will not display. In this case, select a baseline browser, close SuperPreview, and then click the Display in SuperPreview icon Ee371310.79c275f9-6a28-4b9c-879e-07293f26da55(en-us,Expression.40).png again.

Pointer modes

The two SuperPreview pointer modes change how you interact with SuperPreview:

  • Click Selection Mode w4_sp_selection to choose the Selection Mode pointer. Use Selection Mode to select individual page sections for comparison.

  • Click Panning Mode w4_sp_panning to select the Panning Mode pointer. Use Panning Mode to drag a page inside the browser view. In this mode, the mouse wheel changes the magnification of the browser views. You cannot select page sections in Panning Mode.

DOM highlighting

You can move the pointer around the page to highlight different sections of the page. Click on a section to select it. The section's HTML tag name, its class or ID name, and its size and position attributes are displayed in the status bar. SuperPreview offers two DOM highlighting modes:

  • Box Highlighting Mode w4_sp_box highlights the selected element in blue in the baseline browser view. The selected element is highlighted in green in the comparison browser view.

  • Lights-Out Highlighting Mode w4_sp_lights_out displays the selected element normally, while dimming the rest of the page.

Ruler display

Click Toggle Ruler Visibility w4_sp_ruler to turn the ruler display on and off. The ruler display must be on to create positioning guides. For more information about positioning guides, see "Positioning Guides," later in this topic.

Thumbnail display

Use the thumbnail display to quickly select a region of the page.

Click Toggle Thumbnail Visibility w4_sp_thumbnail to turn the thumbnail display on and off.

Positioning guides

You can add positioning guides to help you evaluate the positioning of multiple elements in a page:

  • Click the horizontal ruler to create a horizontal guide that you can drag to a location on the page view. While the guide is selected, the vertical distance from the guide to the upper-left corner of the page is displayed in pixels. Drag the guide out of the page display to remove it.

  • Click the vertical ruler to create a vertical guide that you can drag to a location on the page view. While the guide is selected, the horizontal distance from the guide to the upper-left corner of the page is displayed in pixels. Drag the guide out of the page display to remove it.

  • Click Toggle Guide Visibility w4_sp_guide to show or hide the guides.

Layout modes

SuperPreview offers four layout modes:

  • Vertical Split Layout w4_sp_vertical_split compares browser views arranged side by side.

  • Horizontal Split Layout w4_sp_horizontal_split compares one browser view to another that is underneath it.

  • Overlay Layout w4_sp_overlay compares browser views in overlay mode.

  • Single Layout w4_sp_single displays a single browser view.

DOM view

Click the DOM tab to turn the DOM tree display on and off.

You can see where an element is in the Document Object Model (DOM) tree. If you're using the vertical-split or horizontal-split layout view, you can select an element in either browser view, and the DOM view will be updated to display the attributes for the selected browser view. Alternatively, you can select an element in the DOM view to update the browser views.

Selecting the layout pane display

To select a Baseline or Comparison browser, choose from the list of the supported browsers that are installed on your computer. You can also choose an image view mode to compare a browser view against a comprehensive layout (comp) image.

You can use SuperPreview to display pages in the following versions of Internet Explorer, depending on which versions you have installed on your computer:

  • Internet Explorer 8   Preview in Internet Explorer 8, available only if Internet Explorer 8 is installed).

  • Internet Explorer 8 → 7   Preview in Internet Explorer 8 running in Internet Explorer 7 compatibility mode (available only if Internet Explorer 8 is installed).

  • Internet Explorer 7 → 7   Preview in Internet Explorer 7 running in compatibility mode (available only if Internet Explorer 7 is installed).

  • Internet Explorer 7   Preview in Internet Explorer 7.

  • Internet Explorer 6   Preview in Internet Explorer 6.

You can choose up to eight Comparison browsers that you can quickly switch between by clicking their respective icons.

Click Add Ee371310.31665cc2-3483-4f04-91fc-029a20d1d7a9(en-us,Expression.40).png to add browsers to the Comparison view. Click Switch baseline browser location Ee371310.c219a564-2cba-4f7e-a680-e793f1816be1(en-us,Expression.40).png to swap the Baseline and Comparison browser views.

Location

Type the URL or the file path for the web page that you want to preview.

Note

The default page is not displayed when you type a file path. You must explicitly include the default page file name, for example:

C:\inetpub\wwwroot\default.html

Page interaction mode

Microsoft Expression Web SuperPreview allows you to preview web content that requires user authentication.

Click w4_sp_interactive (Use page interaction mode to log on to secure sites and navigate to the page that you want to preview) to display the Page interaction mode screen.

For details about using Page interaction mode, see Viewing secure website content.

The SuperPreview online service

The Microsoft Expression Web SuperPreview online service is a service that extends the capability of SuperPreview to include support for additional browsers and operating systems.

Click SuperPreview online service w4_sp_remote to enable remote browser previews.

Note

If the SuperPreview online service has not been enabled on this computer, the SuperPreview online service icon (w4_sp_remote) is not displayed. Click w4_sp_remote to start the SuperPreview online service sign-up process.

For more information about activating the SuperPreview online service, see Activating SuperPreview online service.

Zoom

Select the level of magnification or enter a magnification value.

Options

Click Options w4_sp_prefs to open the Options dialog box.

The following options are available in the Options dialog box:

  • Server status   Click Check Status to see the status of the SuperPreview online service.

  • Packaging   Select Always package web pages for remote browser previews to include all the asset files for your page in a package. This can help with page rendering problems, especially if your site is on an intranet.

    Note

    This may reduce rendering performance for remote browsers.

  • Account management   Set the following account management options:

    • Deactivate   Click to disable the SuperPreview online service on this computer.

    • Delete account   Click to delete your SuperPreview online service account.

    Warning

    Deleting your SuperPreview account disables all instances of the SuperPreview online service associated with the e-mail address you used to activate your account. If you delete your SuperPreview online service account, you will have to complete the sign-up process again for every computer associated with the deleted email address to reactivate the SuperPreview online service.

See also

Concepts

Activating SuperPreview online service
The SuperPreview workspace

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.