Displaying pages in SuperPreview
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.
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 . Alternatively, from the File menu, click Display in SuperPreview, or press SHIFT+F12. The currently selected page is displayed in SuperPreview.
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 again.
The two SuperPreview pointer modes change how you interact with SuperPreview:
Click Selection Mode to choose the Selection Mode pointer. Use Selection Mode to select individual page sections for comparison.
Click Panning Mode 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.
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 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 displays the selected element normally, while dimming the rest of the page.
Click Toggle Ruler Visibility 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.
Use the thumbnail display to quickly select a region of the page.
Click Toggle Thumbnail Visibility to turn the thumbnail display on and off.
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 to show or hide the guides.
SuperPreview offers four layout modes:
Vertical Split Layout compares browser views arranged side by side.
Horizontal Split Layout compares one browser view to another that is underneath it.
Overlay Layout compares browser views in overlay mode.
Single Layout displays a single browser 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 to add browsers to the Comparison view. Click Switch baseline browser location to swap the Baseline and Comparison browser views.
Type the URL or the file path for the web page that you want to preview.
The default page is not displayed when you type a file path. You must explicitly include the default page file name, for example:
Page interaction mode
Microsoft Expression Web SuperPreview allows you to preview web content that requires user authentication.
Click (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 to enable remote browser previews.
If the SuperPreview online service has not been enabled on this computer, the SuperPreview online service icon () is not displayed. Click to start the SuperPreview online service sign-up process.
For more information about activating the SuperPreview online service, see Activating SuperPreview online service.
Select the level of magnification or enter a magnification value.
Click Options 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.
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.
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.
Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.