Dreamweaver CS5: The Missing Manual

Live Code

Live Code works in conjunction with the Live View option discussed in depth on Live View. (The short version: Live View lets you see what an in-progress web page actually looks like in a browser…right within Dreamweaver.)

The Live Code button (see Figure 11-16) makes Dreamweaver jump to Split view, with the page’s Design view in one half of the window, and the underlying HTML in the other half. When in Live Code view, the HTML appears with a yellow background, and, as with Live View in general, you can’t edit any of the HTML of the page. So what is Live Code for? Or, more accurately, who is it for?

Hear ye! Hear ye! Calling all JavaScript programmers.

Much of today’s JavaScript programming manipulates the HTML of a page to make elements appear or disappear. For example, programmers often make forms more useable by adjusting the options the site displays based on selections the visitor makes. If someone checks the “married” button on a form under a question about marital status, for example, JavaScript can make the page display a new set of questions, ones that apply just to a married person. In other words, JavaScript actually changes the page’s HTML.

Live Code gives JavaScript programmers a glimpse into those changes. It lets you see if a JavaScript program correctly changes how a page looks. If you’re a JavaScript programming type, you probably know about the DOM (or Document Object Model). Live Code gives you a direct view into the DOM—into how a browser sees the underlying ...