Previewing Your Page in the Browser

Contact Us or call 1-877-932-8228
Previewing Your Page in the Browser

Previewing Your Page in the Browser

While you are editing a page in Design View, Dreamweaver attempts to give you a good reflection of how the page will appear in a browser, but that's not always possible (or even desirable). Dreamweaver does make it easy to view your page as it will appear in the browser either from within Dreamweaver itself or directly in one or more browsers.

Preview in Browser

Before previewing a page in a browser, you must first set up you Preview in Browser preferences in Dreamweaver:

  1. Select Preferences... from the Edit menu.
  2. From the Category list, click on Preview in Browser:You may already see one or more browsers in the Browsers list.
  3. To add a new browser to the list:
    1. Click the icon.
    2. Fill out the resulting dialog. For example:
  4. Repeat for every browser you want to be able to test. You can add as many as you like. Your primary and secondary browsers can be accessed with shortcut keys:
    • Preview in Primary Browser: F12 (Win) / Option+F12 (Mac)
    • Preview in Secondary Browser: CTRL+F12 (Win) / Command+F12 (Mac)
  5. To edit an existing browser in the list, select it and click the Edit... button.
  6. When you are done, your list might look something like this:
    • Notice that you can change your primary and secondary browsers by checking or unchecking the Defaults.
    • You can also check Preview using temporary file if you want to be able to preview files without saving them. We recommend that you leave this unchecked and instead use Live View (see below) if you ever want to see how a change will affect a page before saving.

Now you can easily preview your page in one or more web browsers either using the F12 shortcut key combinations listed above or by selecting Preview in Browser from the File menu:

Live

Live view makes it possible to view your page as it will appear in a browser from within Dreamweaver itself. Simply click on the Live button. For simple pages, you will not see much difference between Design view and Live view. In Live view, however, you will not be able to edit the page.

The Live View button in CS5 is now the Live button in CS6 and CC.

Next