Dreamweaver tutorial: Live View in Dreamweaver

What you’ll learn in this Dreamweaver Tutorial:

  • Exploring Live View
  • Using Related Files
  • Understanding the Code Navigator

This tutorial provides you with a foundation for working with Adobe Dreamweaver Live View. It is the first lesson in the Adobe Dreamweaver CS5 Digital Classroom book. For more Adobe Dreamweaver training options, visit AGI’s Dreamweaver Classes.

Adobe Dreamweaver Tutorial: Live View in Dreamweaver

Experience tells you that visual web editors often display differently from the browsers they’re emulating. As script-driven interactivity gains popularity, the need to accurately design the different states of your page (including menus, panels, and interface elements) has become increasingly important. The static nature of Design view in Dreamweaver might no longer meet users’ advanced needs.

Dreamweaver’s Live View mode uses the WebKit rendering engine (which is also the basis for the Safari web browser and Adobe AIR) to give you a more accurate preview of your page, usually just as a browser would render it.

Live View enables you to interact with your pages.

When you select Live Code while in Live View mode, you can see, in real time, how visually changing your page affects the code behind the scenes. You can preview your code as classes are added and removed using JavaScript, as dynamic content is inserted using Spry, and much more.

It’s one thing, however, to preview these states, and another to effectively work with them. The Freeze JavaScript button (or the F6 key) freezes your page in a particular state (for example, with a menu locked open and a hover effect in place). You can then edit those interactively displayed elements directly in Dreamweaver, without having to use the Preview in Browser feature (F12) and your favorite web browser.

Related files in Dreamweaver

Web-based projects are becoming more complex than ever before, and you often find that even a single page is composed of a variety of assets. These assets can include Cascading Style Sheets (CSS), external JavaScript files, or even server-side includes. Dreamweaver CS5 has a feature that will help you be much more effective at designing and managing sites and applications with multiple assets.

The Related Files bar runs across the top of your document window, just below the document tabs. The bar shows you all the various files that combine to create your finished page. Switch between these files using the Related Files bar without losing the visual preview of their parent page. Design view (or Live View) always shows the parent file, but you can now edit any of the related files without losing their important visual context.

The Related Files bar shows you the various files that are part of your
finished page.

Code Navigator in Dreamweaver

Using the Code Navigator, you can easily jump to any of the related files (including the specific rules within) that combine to create the final display of a selected element. It is not necessary to look through multiple style sheets to find a specific rule. It’s now just a context menu-click away in Dreamweaver. With the Code Navigator, when you hover over a CSS rule you are able to see the properties and values and click on them to navigate to that specific code. As with related files, you an do this without losing the visual context that’s so important to creating interactive experiences.

The Code Navigator allows you to easily jump to any
of your related files.

Continue to the next Dreamweaver Tutorial: Photoshop smart objects in Dreamweaver >