Operation Manual

272
Last updated 3/28/2012
Chapter 10: Previewing pages
Previewing pages
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.
Previewing pages in Dreamweaver
About Live view
Live view differs from the traditional Dreamweaver design view in that it provides a non-editable, more realistic
rendering of what your page will look like in a browser. 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.
For a video overview from the Dreamweaver engineering team about working with Live View, see
www.adobe.com/go/dw10liveview.
For a video overview from the Dreamweaver engineering team about working with Live view navigation, see
www.adobe.com/go/dwcs5livenav_en.
For a video tutorial on working with Live View, related files, and the Code Navigator, see
www.adobe.com/go/lrvid4044_dw.
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.