Click Real-time Preview in the Dreamweaver status bar.
Preview your web pages in Dreamweaver, in browsers, and on mobile devices.
Real-time preview allows you to preview your pages in the browser or on mobile devices and view the changes in the browser or device in real time as you code.
Live view gives you an idea of how your page will look on the web and lets you edit items in Code view.
Design view also gives you an idea of how your page will look on the web but does not render the page exactly as browsers do.
The Open in Browser feature lets you see how your pages will look in browsers. This is best for working with pages that use dynamic data from databases as this is not real-time.
Read on to learn more about the different types of preview options in Dreamweaver.
You can preview your web pages in real-time as you code or design them in Dreamweaver. This feature allows you to code and preview your web pages simultaneously on multiple browsers.
You can also preview your code in mobile devices in real-time as you code. For more information, see Preview Dreamweaver web pages on multiple devices.
Click Real-time Preview in the Dreamweaver status bar.
You have options to preview your web pages in real-time in a browser, or on a device.
If you want to preview your webpages on a device, see Preview Dreamweaver web pages on multiple devices.
To preview your web pages in the browser, click any of the available browser options.
You can edit the browsers that appear in this list. To add or remove a browser from this list, see Set browser preferences.
If you have a testing server, make sure you enable Automatically push files to testing server, while setting up the testing server.
The real-time preview works off the files in the testing server. Enabling automatic push to the testing server ensures you see the changes in real time.
If prompted, save the web page and its related documents.
A browser opens displaying the webpage.
Continue to code your page and watch the changes in the browser as you code.
You can switch between real time preview and preview in browser. Set preferences for the browser to use when previewing a site and define default primary and secondary browsers.
These browser preferences are then used regardless of whether you are previewing your site live with real-time preview, or you are opening the page in the browser.
Select File > Real-time Preview > Edit Browser List.
If you deselect the Default to Static Browser Preview option, realtime preview is disabled. You can use keyboard shortcuts of primary and secondary browsers to open preview in browser. Alternatively, you can use File menu or click the device preview icon at the status bar.
F12 (Windows) or Option+F12 (Macintosh) opens the primary browser; Control+F12 (Windows) or Command+F12 (Macintosh) opens the secondary browser.
Default to static browser preview This will allow users to choose the mode of previewing their files in browser. On checking the checkbox users can preview files using “Open in browser” from menus and using shortcuts. When unchecked Real Time Preview will be used for previewing files in browsers. By default the checkbox is unchecked and Real time preview will be used for previewing the files in browser.
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.
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.
To preview pages in Live view:
Make sure that you are in Design view (View > Design) or Code and Design views (View > Code and Design).
Click the Live view button.
(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.
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.
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.
To return to the editable Design view, click the Live view button again.
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.
Make sure that you are in Live view.
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.
To turn off highlighting for changes in Live Code view, choose View > Live View Options > Highlight Changes in Live Code.
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.
Do one of the following:
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.
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.
Before opening a document in browser, save the document; otherwise, the browser does not display your most recent changes.
Right-click the filename in the Document toolbar, and click Open in Browser.
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. For more information, see Set browser preview preferences.
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.
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.