Dreamweaver tutorial: Live View in Dreamweaver
What you’ll learn in this Dreamweaver Tutorial:
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.
Related files in Dreamweaver
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
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
Continue to the next Dreamweaver Tutorial: Photoshop smart objects in Dreamweaver >