Publishers of technology books, eBooks, and videos for creative people

Home > Articles

  • Print
  • + Share This
This chapter is from the book

Previewing in a Browser

The page preview you see in Dreamweaver's Design view is useful, but it's no substitute for previewing your pages in real Web browsers. The reason is simple: the Design view shows one rendering of the HTML page, but Web browsers, which may be based on different rendering software (often called "rendering engines"), may show the same page differently. For example, you'll often see pages that look different in Internet Explorer 6 for Windows, Mozilla Firefox, and Safari on the Mac. That's because each of those browsers uses a different rendering engine, and they each lay out and draw pages differently ( Figure 3.26 ).

03fig26.jpg

Figure 3.26 You can see the difference in rendering the same page among different browsers here. Note that Internet Explorer 6 for Windows (top) fails to display the clouds next to the large page title, while Mozilla Firefox (middle) and Safari on the Mac (bottom) have no problem displaying everything on the page.

By default, Dreamweaver makes your computer's default Web browser the default browser for previewing pages, but you can change that if you prefer.

To preview a page in a Web browser:

  1. Save your page. Dreamweaver requires that the page be saved before it can create a preview. If you forget, you'll be asked with a dialog if you want to save. If you click No in this dialog, the preview will be of the last saved version of the page, not necessarily the latest version, so get used to saving before previewing.
  2. Press F12 (Opt-F12). The page opens in the default preview browser. or Choose File > Preview in Browser, then choose a browser from the submenu ( Figure 3.27 ).
    03fig27.jpg

    Figure 3.27 Choose the browser you want to use for the preview from the Preview in Browser menu.

    The page opens in the browser you selected. or Click the Preview/Debug in Browser button on the Document toolbar ( Figure 3.28 ). This brings up a pop-up menu with the browser choices available on your system.
    03fig28.jpg

    Figure 3.28 You can also choose your preview browser from the Preview/Debug in Browser button on the Document toolbar.

To set the browsers that appear in the Browser list:

  1. Choose File > Preview in Browser, then choose Edit Browser List from the submenu. The Preview in Browser category of Preferences appears ( Figure 3.29 ).
    03fig29.jpg

    Figure 3.29 You can choose which browsers on your system appear in the Preview in Browser list, and also set browsers as your primary and secondary preview browsers.

  2. Do one or more of the following:
    • To add a browser to the list, click the + button, then fill out the information in the resulting Add Browser dialog.
    • To remove a browser from the list, select the browser and click the – button.
    • To set a browser as the primary preview browser (this will cause it to open when you press F12 (Opt-F12)), select it and click the Primary browser button.
    • To set a browser as the secondary preview browser (this will cause it to open when you press Ctrl-F12 (Cmd-F12)), select it and click the Secondary browser button.
  3. Click OK to close the Preferences dialog.
  • + Share This
  • 🔖 Save To Your Account