Displaying pages in SuperPreview
SuperPreview simplifies the process of testing and debugging layout issues across different web browsers. View your pages in multiple browsers simultaneously or view how a page renders in a browser and compare it to a mock-up image of a 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 need 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 or 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. See Preview pages in a browser to use a custom URL for preview.
The Baseline view shows you how your page is displayed in your development browser.
The Comparison view displays your page the way it renders in the comparison browser.
The quick position display shows you the size and position of the selected element. If there are differences in the size or position of the selected element, the altered value is highlighted.
The Baseline browser selector lets you choose your development browser as the baseline browser.
The Comparison browser selector lets you choose up to eight comparison browsers. You can quickly switch between comparison browsers by clicking their respective icons.
The DOM tree view shows you where an element is in the DOM tree. You can click on an element in the DOM view to select it in the browser views.
The Tag display shows detailed information about an element when you move your mouse pointer over it or click it.
The Browser Size lets you select a fixed browser view size to compare how your pages render at different resolutions.
The minimum Browser Size is 640 x 480.
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.
In Selection 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.
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 Thumbnail Visibility to turn the thumbnail display on and off.
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 views, 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. Or, you can select an element in the DOM view to update the browser views.
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 additional browsers to the Comparison view. Click Switch baseline browser location to swap the Baseline and Comparison browser views.