Home > Articles > Web Development > Microsoft Expression Studio

This chapter is from the book

Displaying Web Pages in SuperPreview

SuperPreview (New!) makes it easy to view and compare a Web page or sections of a Web page in multiple browsers at the same time. SuperPreview gives you an array of tools—such as Selection and Panning Mode pointers, Layout modes (Side-by-side, Stacked, and Overlay), and Zoom, and Positioning Guides—to test and debug Web page issues across different browsers. After you compare a page or sections of a page in specified browsers, you can make adjustments in Expression Web back in Design view.

Preview Pages in SuperPreview

  • light-yellow-circle1.jpg Open and display the Web page you want to preview.
  • light-yellow-circle2.jpg Click the File menu, and then click Display in SuperPreview.

    The SuperPreview window opens.

  • light-yellow-circle3.jpg Click a browser icon to select a browser preview in the Baseline pane (left side) and Comparison pane (right side).
  • light-yellow-circle4.jpg Click an element to display the size and position of the element.
  • light-yellow-circle5.jpg To switch panes, click the Switch baseline browser location button.
  • light-yellow-circle6.jpg To add another comparison browser, click the Add button, and then click a browser icon.
  • light-yellow-circle7.jpg To switch between comparison browsers, click a browser icon in the Comparison browser selector.
  • light-yellow-circle8.jpg To view an element in the Document Object Model (DOM), click the DOM tab.
  • light-yellow-circle9.jpg To remove a browser, click the Close button in the browser selector.
  • light-yellow-circle10.jpg When you’re done, click the Close button on the program window.

Work with Web Pages in SuperPreview

  • light-yellow-circle1.jpg Open and display the Web page you want to preview.
  • light-yellow-circle2.jpg Click the File menu, and then click Display in SuperPreview.

    The SuperPreview window opens.

  • light-yellow-circle3.jpg Click a pointer mode button.
    • Selection Mode. Use to select individual page sections for comparison.

    • Panning Mode. Use to drag a page inside the browser view.

  • light-yellow-circle4.jpg In Selection Mode, click a highlighting mode button.
    • Box Highlighting Mode.

      Highlights the selected element in blue in the baseline view and green in the comparison view.

    • Lights-Out Highlighting Mode.

      Displays the selected element normally, while dimming out everything else.

  • light-yellow-circle5.jpg To show/hide the ruler, click the Toggle Ruler Visibility button.
  • light-yellow-circle6.jpg To show/hide guides, click the Toggle Guide Visibility button. Drag the horizontal or vertical ruler onto the page to create a horizontal or vertical guide.
  • light-yellow-circle7.jpg To show/hide the thumbnail display, click the Toggle Thumbnail Visibility button. Drag the shaded area in the thumbnail to display a region of the page.
  • light-yellow-circle8.jpg To change the layout, click the Vertical Split Layout, Horizontal Split Layout, Overlay Layout, or Single Layout button.
  • light-yellow-circle9.jpg When you’re done, click the Close button on the program window.
  • + Share This
  • 🔖 Save To Your Account