Export (0) Print
Expand All
0 out of 1 rated this helpful - Rate this topic

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.

Ee371310.alert_note(en-us,Expression.30).gifNote:

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.

Ee371310.45734cd3-0411-4ae7-bb6a-c761807e9153(en-us,Expression.30).png

Ee371310.edef891a-6b74-4192-8f7f-5079614b9112(en-us,Expression.30).png

The Baseline view shows you how your page is displayed in your development browser.

Ee371310.957413f8-28e0-4dc7-a144-0598679350b9(en-us,Expression.30).png

The Comparison view displays your page the way it renders in the comparison browser.

Ee371310.13f14333-cc5f-457a-863b-ccd449500941(en-us,Expression.30).png

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.

Ee371310.0a66dad8-587c-4ccb-86ee-5e9cd1ef8c68(en-us,Expression.30).png

The Baseline browser selector lets you choose your development browser as the baseline browser.

Ee371310.9c26150c-cd15-44bb-bf69-ff72093d3d71(en-us,Expression.30).png

The Comparison browser selector lets you choose up to eight comparison browsers. You can quickly switch between comparison browsers by clicking their respective icons.

Ee371310.8f73ae30-de6d-49a5-afe3-12a0a84d80a2(en-us,Expression.30).png

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.

Ee371310.3ca58ea1-12d2-4379-9b89-e415efd03ca4(en-us,Expression.30).png

The Tag display shows detailed information about an element when you move your mouse pointer over it or click it.

Ee371310.0ca213c6-20bb-4cd9-9acd-ebc60a53c6bf(en-us,Expression.30).png

The Browser Size lets you select a fixed browser view size to compare how your pages render at different resolutions.

Ee371310.alert_note(en-us,Expression.30).gifNote:
The minimum Browser Size is 640 x 480.
  • With a page open and selected in Expression Web, click the Display in SuperPreview iconEe371310.79c275f9-6a28-4b9c-879e-07293f26da55(en-us,Expression.30).png. Alternatively, from the File menu, click Display in SuperPreview, or press SHIFT+F12. The currently selected page is displayed in SuperPreview.

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

  • Click Selection ModeEe371310.d199852e-cbc2-477b-8ea7-eea123597e00(en-us,Expression.30).png to choose the Selection Mode pointer. Use Selection Mode to select individual page sections for comparison.

  • Click Panning ModeEe371310.8fa3c504-33cb-4104-8259-dc4e1ba4c305(en-us,Expression.30).png 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 ModeEe371310.cdb48f6d-b3f6-4edd-83d8-ebe8f442e2c6(en-us,Expression.30).png 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 ModeEe371310.f9530007-c580-4380-868a-796ecc4c0169(en-us,Expression.30).png displays the selected element normally, while dimming the rest of the page.

Click Toggle Ruler VisibilityEe371310.da527daf-6515-4f4d-9fa0-d95298000b14(en-us,Expression.30).png 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 Ee371310.2f540d66-99fb-450b-abc9-843f488ca7aa(en-us,Expression.30).png 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 Thumbnail VisibilityEe371310.f80659b2-fa76-4b08-97ac-459f2012835b(en-us,Expression.30).png to turn the thumbnail display on and off.

SuperPreview offers four layout modes:

  • Vertical Split LayoutEe371310.f46e9840-e5ae-48fe-993c-af355898c5f8(en-us,Expression.30).png compares browser views arranged side by side.

  • Horizontal Split LayoutEe371310.b941d0c0-e348-45d2-9df2-d921b6989891(en-us,Expression.30).png compares one browser view to another that is underneath it.

  • OverlayLayout Ee371310.2a95255f-ce44-4494-a7b2-ebcec9a152a5(en-us,Expression.30).png compares browser views in overlay mode.

  • SingleLayout Ee371310.f42cb246-2097-4520-a676-1046e25cef91(en-us,Expression.30).png 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 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 Ee371310.31665cc2-3483-4f04-91fc-029a20d1d7a9(en-us,Expression.30).pngAdd to add additional browsers to the Comparison view. Click Switch baseline browser locationEe371310.c219a564-2cba-4f7e-a680-e793f1816be1(en-us,Expression.30).png to swap the Baseline and Comparison browser views.

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

Ee371310.alert_note(en-us,Expression.30).gifNote:

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

Select the level of magnification or enter a magnification value.

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback

Community Additions

ADD
Show:
© 2014 Microsoft. All rights reserved.