Dreamweaver CS5: The Missing Manual

Live View

Dreamweaver includes a built-in web browser-like view of your web pages. Called Live View, this new feature lets you view a web page just as you would in a web browser; you can interact with the page and preview your designs without leaving Dreamweaver. It’s not perfect, however. Since Adobe based the feature on Apple’s WebKit (the engine behind the Safari and Chrome web browsers), you don’t really see how the page will look in the most common web browser: Internet Explorer. So it’s not the best tool for previewing and troubleshooting CSS designs—you still need to test using real browsers for that.

However, Live View is perfect for working with Dreamweaver’s Spry widgets, and in particular, seeing how Spry Data pages look and work. To activate Live View, in the document toolbar, click the Live View button (circled in Figure 13-33). Once activated, the page functions like a real web page—you can try out JavaScript objects like Spry widgets, see how CSS-based rollover effects (Styling Links) look, and so on.

You can’t, however, continue to edit the page in Live View—you can’t, for example, select or move HTML around the page. But if you’re comfortable with hand coding, you can choose Split view (see Code View) and get a side-by-side view of the raw HTML and the design’s Live View. You can also edit HTML in Code view, click back to the live Design view, and immediately see how the changes you made affect the final design.

Figure 13-32. Dreamweaver provides different options ...