Taking a Peek at a Page in a Web Browser

As you create pages in the Expression Web Design view, the pages look kind of like how they appear when viewed with a Web browser. In technospeak, this similarity is called WYSIWYG (pronounced "wizzy wig"), which stands for What You See Is What You Get.

Monitors and windows: Size does matter

In the world of print design, readers don't get to determine the page sizes of the books or reports they read. Barring differences in visual acuity, what one reader of a print document sees is pretty much identical to what every other reader sees. Not so in Web design. The size of the "page" (if you can call an electronic Web document a page) is determined by two factors: the visitor's monitor resolution (how many pixels a monitor can display) and the size of the visitor's browser window.

Both these factors vary from user to user. Therefore, you can never be sure what "size" your Web page will be when it appears on your visitors' screens. You can, however, by using a handful of different tools, get a sense of what your page looks like in different situations:

• The Preview In Browser feature helps in this regard, by enabling you to see how your page looks in several different browsers without ever leaving Expression Web.

• Using the built-in ruler, you can design your page with an eye toward keeping the page width narrow enough to fit within standard browser window sizes without the need for pesky horizontal scroll bars. Choose View Ruler and Grid Show Ruler to make the ruler appear.

• Expression Web has another tiny feature you may not have even noticed yet. In the lower-right corner of the Expression Web workspace window, you see two numbers separated by an X. Click those numbers to reveal a menu containing a range of pixel values that simulate, in Design view, several resolutions and browser window sizes that visitors commonly use. For example, the menu item 760 x 420 (800 x 600, Maximized) shows how a page would look if viewed in a maximized browser window on a monitor with 800 x 600 resolution.

As you design your pages, keep an eye on this feature to be sure that your pages look good to a wide range of visitors.

We say "kind of like" because, although the folks at Microsoft have done a great job of making Expression Web Design view as close to WYSIWYG as possible, it's no substitute for looking at your pages in a real Web browser, such as Internet Explorer or Mozilla Firefox. Previewing your pages in a Web browser gives you a more accurate representation of how your pages will appear to your visitors after the site has been published. Expression Web enables you to quickly preview your pages in several browsers.

Tip 

Trying to keep track of which browsers are the most popular with Web surfers is like trying to make the waves in the ocean stand still. For this reason, we recommend previewing your pages with the latest versions of the most popular browsers, which at this moment are Microsoft Internet Explorer 6 (and version 7) and Mozilla Firefox (although Opera and Netscape are popular enough to warrant giving them a glance). The insight you gain about how different pages might look in different browsers is worth the extra bit of effort that installing the extra browsers requires. (Of course, you can see how your pages look inside Windows-based browsers only; keep in mind that pesky display variations occur across operating system platforms as well. After you publish your finished site, ask your Mac- and Unix-using friends to give the site a once-over to be sure that everything's kosher.)

If you want to find out which browsers are winning the popularity contest this month, check out this link at W3Schools: http://www.w3schools.com/browsers/browsers_stats.asp. Or simply type browser statistics in your favorite search engine. You end up with a plethora of sites that track browser use, monitor resolutions, and many other handy stats. You can download different Web browsers from http://www.Download.com at http://www.download.com.

To preview your page in a Web browser, click the Preview in Browser button on the Common or Standard toolbar. Or press the F12 key.

To pick a specific browser to view your page, follow these steps:

1. Choose File Preview in Browser.

   The Preview in Browser menu expands to display a range of preview options and monitor resolutions, as shown in Figure 2-3.

   
   Figure 2-3: The Preview in Browser menu.

   A monitor's resolution refers to the number of pixels the monitor can display on-screen. The larger the number, the higher the resolution of the picture and the more "real estate" a monitor can display.

2. From the menu, choose the name of the browser and the resolution size you want to use.

   If the browser you want isn't listed on the drop-down menu, choose More Browsers (at the bottom of the list). In the Preview in Browser dialog box that appears, select the browser from the list, and click the Preview button.

   If you haven't yet saved your page, a Microsoft Expression Web dialog box pops up, prompting you to do so. In the dialog box, click Yes to save the page. After saving the Web page, Expression Web opens your page in the browser and window size of your choice.

To edit the page, return to Expression Web by clicking the Expression Web button on the Windows taskbar (or press Alt+Tab to switch between open windows). Make any changes you want, and then save the page. To view changes, click the Preview in Browser button again or switch back to your browser and click the browser's Reload or Refresh button.

Tip 

The first time you click the Preview button or press F12, Expression Web picks your default Web browser. The next time you use these shortcuts, it chooses the last browser (or browsers) you picked.

Adding a browser to the list

If you don't see the browser you want in the list, that's no problem. As long as you already installed a browser on your computer, you can add it to the list of preview options. To do so, follow these steps:

1. Choose File Preview in Browser Edit Browser List.

   The Edit Browser List dialog box appears.

2. Click the Add button.

   The Add Browser dialog box appears.

3. In the Name text box, type the browser name as you want it to appear in the list.

   Tip 

   It's useful to include the version number (such as Internet Explorer 7, Opera 9), especially if you're adding multiple versions of the same browser.

   To add the browser, find its program file (also called an executable file), which is the name of the browser plus the extension .exe (opera.exe, firefox.exe, or iexplore.exe, for example).

4. Next to the Command text box, click the Browse button.

5. Navigate to the location of the browser's program file by using the selections in the Add Browser dialog box.

   A browser is usually installed in the Program Files folder, in a subfolder with its name (for example, C:/Program Files/Opera). For example, to locate Opera, go to the Program Files folder, find and open the Opera folder, and then click Opera.exe, as shown in Figure 2-4.

   
   Figure 2-4: Click to select the browser you want to add.

   Note 

   Your version of Windows may be set to hide the .exe extension. If this is the case, click the main program icon.

   Tip 

   If you can't find the browser program file you're looking for, use Windows Search to look for it on your computer (for example, search for the file opera.exe).

6. Click the Open button.

   You end up back at the Add Browser dialog box, where the full path of the browser appears in the Command text box.

7. Click OK.

Previewing by using more than one browser

Expression Web lets you preview your page in a bunch of browsers at one time so that you can compare what your page looks like in each one. And you get to choose which browsers you want to use.

To tell Expression Web which browsers to open, follow these steps:

1. Choose File Preview in Browser Edit Browser List.

   The Edit Browser List dialog box appears.

2. In the Browsers section, check or uncheck the browsers you want to use by clicking in the little box to the left of the browser name.

3. In the Additional Window Sizes area, select or deselect the window sizes you want to use.

4. Click the OK button.

To preview your page in these browsers, choose File Preview in Browser Preview in Multiple Browsers. Your page opens in all the browsers you told Expression Web to use.