Adobe Dreamweaver CC 2015 - Manual (Page 360)

353
Previewing
Last updated 6/3/2015
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.
More Help topics
Edit in Live 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.
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.