Preview pages in a browser

Article
10/10/2017

To help you design your pages in Microsoft Expression Web, you can preview how web pages will look in different web browsers and window sizes. The window sizes you can choose match standard screen resolutions of 800 x 600, 1024 x 768, and 1280 x 1024. Expression Web automatically selects the value that matches your current screen resolution, as well as available lower values. Window sizes that are greater than your current screen resolution are unavailable.

Note

In Design view, you can set a page size to approximate what your page will look like in different size browsers. For more information, see Add or modify a page size.

To preview a page in a browser

Do one of the following:

Press F12.
On the Common toolbar, click Preview, or click the arrow next to the button to select a browser.
On the File menu, point to Preview in Browser, and then click the browser and window size you want.

Note

You must save your page before you preview it in a browser.

To preview a page in the Folder List panel

Select the file and then press F12.

To always save Web pages before previewing

On the File menu, point to Preview in Browser, and then click Edit Browser List.
In the Edit Browser List dialog box, select the Automatically save page before previewing check box.

To add a Web browser to the browser preview list

On the File menu, point to Preview in Browser, and then click Edit Browser List.
Click Add.
In the Name box, type the name of the Web browser as you want it to appear in the browser preview list.
In the Command box, type the name and path of the .exe file for the Web browser, or click Browse to locate the file.
Click OK.
Under Additional window sizes, select the check boxes next to the values that represent the window sizes you want to enable.

Note

The default window sizes match standard Microsoft Windows screen resolutions of 800x600, 1024x768, and 1280 x 1024. Expression Web automatically selects the value that matches your current screen resolution and available lower values. Window sizes that are greater than your current screen resolution are unavailable.

Previewing ASP.NET or PHP web pages

You can preview ASP.NET or PHP web pages by using Microsoft Expression Development Server. The Expression Development Server installs when you install Expression Web. If you need to repair or reinstall Expression Development Server, see Installing Expression Development Server. For more information on previewing ASP.NET or PHP web pages, see Previewing an ASP.NET page or Previewing a PHP page.

To use Microsoft Expression Development Server to preview pages

On the Site menu, click Site Settings.
In the Site Settings dialog box, on the Preview tab, select Use Microsoft Expression Development Server.

Previewing sites by using a custom URL

When you preview a web page, Expression Web passes to the browser the URL through which you opened your site. For example, if you opened your site with FTP, when you preview a page, Expression Web sends the FTP-based URL to the browser. Because web servers return different content depending on the protocol of the URL, you need to provide Expression Web with a separate preview URL that uses HTTP protocol to access your web pages. For example, if you opened ftp://ftp.example.com/, you could then create http://www.example.com/, point it to the same physical location, and set Expression Web to use that custom URL.

You may want to use a custom preview URL to preview the following types of sites:

A site you opened with FTP, for example, ftp://ftp.example.com.
A site you opened on a different computer through a UNC path, for example, \\myserver\wwwroot\example.
A site you opened through a different port than you want to preview through, for example, http://www.example.com:9999.
A site you opened with a different security level than you want to preview through, for example, https://www.example.com.
A site that uses different authentication than you want to preview with, for example, http://username:password@www.example.com.

To provide a custom URL for previewing pages

On the Site menu, click Site Settings.
In the Site Settings dialog box, on the Preview tab, in the Preview using custom URL for this Web site box, type your custom URL.