Note:

The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

Design view gives you an idea of how your page will look on the web but does not render pages exactly as browsers do. Live view presents a more accurate depiction, and lets you work in Code view so that you can see changes to the design. The Preview in Browser feature lets you see how your pages will look in specific browsers.

Preview pages in Dreamweaver

About Live view

Live view differs from the traditional Dreamweaver design view in that it provides a more realistic rendering of what your page will look like in a browser, which is also editable. Live view does not replace the Preview in Browser command, but rather provides another way of seeing what your page looks like “live” without having to leave the Dreamweaver workspace.

You can switch to Live view any time you are in Design view. Switching to Live view, however, is not related to switching between any of the other traditional views in Dreamweaver (Code/Split/Design). When you switch to Live view from Design view, you are simply toggling the Design view between editable and “live”.

While Design view remains frozen once you enter Live view, Code view remains editable, so you can change your code, and then refresh Live view to see your changes take effect. When you’re in Live view, you have the additional option of viewing live code. Live Code view is like Live view in that it displays a version of the code that the browser is executing in order to render the page. Like Live view, Live Code view is a non-editable view.

An additional advantage of Live view is the ability to freeze JavaScript. For example, you can switch to Live view and hover over Spry-based table rows that change color as the result of user interaction. When you freeze JavaScript, Live view freezes the page in its current state. You can then edit your CSS or JavaScript and refresh the page to see the changes take effect. Freezing JavaScript in Live view is useful if you want to see and change properties for the different states of pop-up menus or other interactive elements that you can’t see in traditional Design view.

Preview pages in Live view

  1. Make sure that you are in Design view (View > Design) or Code and Design views (View > Code and Design).

  2. Click the Live view button.

  3. (Optional) Make your changes in Code view, in the CSS Styles panel, in an external CSS style sheet, or in another related file.

    Even though you can’t edit in Live view, your options for making edits in other areas (for example, in the CSS Styles panel or in Code view) change as you click in Live view.

    Note:

    You can work with related files (such as CSS style sheets) while keeping Live view in focus by opening the related file from the Related Files toolbar at the top of the document.

  4. If you’ve made changes in Code view or in a related file, refresh Live view by clicking the Refresh button in the Document tool bar, or by pressing F5.

  5. To return to the editable Design view, click the Live view button again.

Preview Live Code

The code displayed in Live Code view is similar to what you would see if you viewed the page source from a browser. While such page sources are static, providing you with only the source of the page from the browser, Live Code view is dynamic, and updates as you interact with the page in Live view.

  1. Make sure that you are in Live view.

  2. Click the Live Code button.

    Dreamweaver displays the live code that the browser would use to execute the page. The code is highlighted in yellow and is uneditable.

    When you interact with interactive elements on the page, Live Code highlights the dynamic changes in the code.

  3. To turn off highlighting for changes in Live Code view, choose View > Live View Options > Highlight Changes in Live Code.

  4. To return to the editable Code view, click the Live Code button again.

To change Live Code preferences, choose Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh OS), and select the Code Coloring category.

Freeze JavaScript

Do one of the following:

  • Press F6

  • Select Freeze JavaScript from the Live View button’s pop-up menu.

An info bar at the top of the document tells you that JavaScript is frozen. To close the info bar, click the close link.

Live view options

Besides the Freeze JavaScript option, there are some other options available from the Live View button’s pop-up menu, or from the View > Live View Options menu item.

Freeze JavaScript

Freezes elements affected by JavaScript in their current state.

Disable JavaScript

Disables JavaScript and re-renders the page as it would look if a browser did not have JavaScript enabled.

Disable Plug-ins

Disables plug-ins and re-renders the page as it would look if a browser did not have plug-ins enabled.

Highlight Changes in Live Code

Turns highlighting for changes in Live Code off or on.

Edit the Live View Page in a New Tab

Lets you open new tabs for site documents you browse to using the Browser Navigation toolbar or the Follow Link(s) feature. You must browse to the document first, then select Edit the Live View Page in a New Tab to create a new tab for it.

Follow Link

Makes the next link you click in Live View active. Alternatively you can Control-click a link in Live view to make it active.

Follow Links Continuously

Makes links in Live View continuously active until you disable them again, or close the page.

Automatically Sync Remote Files

Automatically syncs the local and remote file when you click the Refresh icon in the Browser Navigation toolbar. Dreamweaver puts your file to the server before refreshing so that both files are in sync.

Use Testing Server for Document Source

Used mainly by dynamic pages (such as ColdFusion pages), and selected by default for dynamic pages. When this option is selected, Dreamweaver uses the version of the file on the site’s testing server as the source for the Live view display.

Use Local Files for Document Links

The default setting for non-dynamic sites. When this option is selected for dynamic sites that use a testing server, Dreamweaver uses the local versions of files that are linked to the document (for example, CSS and JavaScript files), instead of the files on the testing server. You can then make local changes to related files so that you can see how they look before putting them to the testing server. If this option is deselected, Dreamweaver uses the testing server versions of related files.

HTTP Request Settings

Takes you to an advanced settings dialog box where you can enter values for displaying live data. For more information, click the Help button in the dialog box.

Preview pages in browsers

Preview in a browser

You can preview a page in a browser at any time; you don’t have to upload it to a web server first. When you preview a page, all browser-related functions should work, including JavaScript behaviors, document‑relative and absolute links, ActiveX® controls, and Netscape Navigator plug‑ins, provided that you installed the required plug‑ins or ActiveX controls in your browsers.

Before previewing a document, save the document; otherwise, the browser does not display your most recent changes.

  1. Do one of the following to preview the page:
    • Select File > Preview In Browser, and then select one of the listed browsers.

    Note:

    If no browsers are listed, select Edit > Preferences or Dreamweaver > Preferences (Macintosh), and then select the Preview In Browser category on the left to select a browser.

    • Press F12 (Windows) or Option+F12 (Macintosh) to display the current document in the primary browser.

    • Press Control+F12 (Windows) or Command+F12 (Macintosh) to display the current document in the secondary browser.

  2. Click links and test content in your page.

    Note:

    Content linked with a site root-relative path does not appear when you preview documents in a local browser unless you specify a testing server, or select the Preview Using Temporary File option in Edit > Preferences > Preview In Browser. This is because browsers don’t recognize site roots—servers do.

    Note:

    To preview content linked with root-relative paths, put the file on a remote server, and then select File > Preview In Browser to view it.

  3. Close the page in the browser when you finish testing.

Set browser preview preferences

You can set preferences for the browser to use when previewing a site and define default primary and secondary browsers.

  1. Select File > Preview In Browser > Edit Browser List.
  2. To add a browser to the list, click the Plus (+) button, complete the Add Browser dialog box, and then click OK.
  3. To delete a browser from the list, select the browser, and then click the Minus (-) button.
  4. To change settings for a selected browser, click the Edit button, make changes in the Edit Browser dialog box, and then click OK.
  5. Select the Primary Browser or the Secondary Browser option to specify whether the selected browser is the primary or secondary browser.

    F12 (Windows) or Option+F12 (Macintosh) opens the primary browser; Control+F12 (Windows) or Command+F12 (Macintosh) opens the secondary browser.

  6. Select Preview Using Temporary File to create a temporary copy for previewing and server debugging. (Deselect this option if you want to update the document directly.)

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy