Testing Web Pages with SuperPreview: Module 2

Defining Baseline Browsers and Comparing Image Mockups

In this module, you’ll get a closer look at SuperPreview’s baseline browser feature. You’ll also learn how to import an image mockup, and compare it to your web page.

Defining a Site in Expression Web
You’ll begin this module by defining a site in Expression Web 3.

1. Open Expression Web 3 and from the Site menu in Expression Web, choose Open Site.
2. In the Open Site window that appears, click the Browse button.
3. Navigate to the folder 02_SuperPreview_baselinebrowsers. Click Open, and click Open again in the next window that appears.
4. In the Site View tab, double-click default.html to open this page in Expression Web.
   
   
   

Displaying a Page in SuperPreview
Next you’ll display the completed html file in SuperPreview.

1. Choose File > Display in SuperPreview. Although you’ll be viewing this page in SuperPreview as an integrated feature of Expression Web, it can also be used as a standalone application.
   
   
   
   SuperPreview in Vertical Split view, IE8 set as the baseline browser and no comparison browsers selected.
   
   Note: If you currently have comparison browsers loaded, you should clear them out for this exercise. To do this, click on the ‘X’ within the Comparison Browser selector.
2. You can see in the bottom-left of your SuperPreview screen that the baseline browser is currently set to Internet Explorer 8. Notice the page previews as it would in Internet Explorer 8, but since you’re in Vertical Split View, you can also see multiple browsers listed to the right in the comparison screen. You’ll take advantage of the Open Image button, which is displayed along with these browser choices.