About the Live view feature in Dreamweaver

The Live view feature facilitates previewing your web pages as it would appear in a browser, without leaving Dreamweaver. Users can retain direct access to the code and edit the code. Any changes to the code are reflected instantly. It enables users to view the changed web page instantly. If the user edits CSS files, the current state of the file is maintained, but the CSS changes are applied. Users can also interact with the page and view JavaScript effects like rollovers without having to switch from Dreamweaver to a web browser.

Live view feature uses the system Flash Plug-in (%SYSTEM%/Macromed/Flash, /Library/Internet Plug-Ins/). At times, it can fallback to any Firefox version if the system version of the plug-in is not available.

A notification is displayed in the Information bar if the plug-in is not found. The CSS panel always shows the current relevant CSS for what is displayed in Live view, even if the source is generated from a different location. Users can add or remove style sheets. However, other edits to inline CSS or CSS in the <head> is locked. Rules in the CSS panel that cannot be edited are marked as read only.

You can use the Dreamweaver API for the following purposes:

  • Getting and setting the Design view mode

  • Getting and setting the Live view mode using the server

  • Getting Live view defaults

  • Getting and setting Live view dependents

  • Viewing the Live view parameters

For more information about these APIs, see "Live view functions" in the Dreamweaver API Reference.

A simple Live view example

In this example, you use Dreamweaver to create a command that creates a simple browser when the user clicks the command in the Commands menu. For specific information about creating commands before trying this example, see Commands on page 142. In Dreamweaver, open a new basic HTML file (this file is your Command definition file) and save the file as liveviewexample.htm. Your Command definition file looks like the following example:

<!DOCTYPE HTML SYSTEM "-//Adobe//DWExtension layout-engine 10.0// dialog"> <html xmlns="http://www.w3.org/1999/xhtml"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Browser Test</title> 
<script type="text/javascript"> 
var browserLoad = function(e) 
    var uri = document.getElementById("uri"); 
    uri.value = e.currentBrowserLocation; 
var promptToNavigate = function (e) 
    if( ! confirm(" Is it ok to go from \n" + e.currentBrowserLocation + " to page \n " + e.requestedBrowserLocation ) ) 
function initUI() 
    var browser = document.getElementById("browser"); 
promptToNavigate, true); 
    browser.addEventListener("BrowserControlLoad", browserLoad, true); 
function loadUri() 
    var uri = document.getElementById("uri"); 
    var browser = document.getElementById("browser"); 
function showSource(){ 
    var browser = document.getElementById("browser"); 
function commandButtons() { 
                            return new Array( "Close", "window.close()", 
                            "Load URI", "loadUri()", 
                            "Show Source", "showSource()" 
<body onLoad="initUI()"> 
<input id="uri" type="text" style="width:500px"> 
</p> <mm:browsercontrol id="browser" style="width:500px; height:300px;"/> </form> </body> </html>