Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Revealing Coding with Inspect
Seems like those spies from Adobe flushed out all my teaching techniques and integrated them into Dreamweaver CS5. More likely, many of us who teach and consult in Dreamweaver evolved similar approaches, and the brain trust at Adobe came up with solutions to the challenges we've been addressing.
In this case, I was trying to show students how to identify code in Code view that corresponded to components in Design view. My old trick was to have the students select some text or other objects in Design view and then switch to Code view. Whatever content the student had selected in Design view was selected in Code view, revealing the relevant code. Then the student could study the code, learn from it, or edit it.
New to Dreamweaver CS5, Inspect view is a nicer, cleaner, and more interactive way to associate coding with Design view content. When you click the Inspect button in the Document toolbar, Dreamweaver automatically toggles to Live view—meaning that Design view simulates a browser. Clicking a link in Live view doesn't let you edit that link; instead, it opens the link. In short, Live view is very similar to testing your page in a web browser.
If you hover over objects with Inspect turned on, Dreamweaver generates colored boxes to identify controlling code—CSS or HTML. You can see much of this code in the Property inspector or the CSS Styles panel, as shown in Figure 4.
)
Figure 4 Inspecting relevant HTML and CSS coding in Inspect view.
Switching to Split view with Inspect active provides even easier access to code—displaying hovered-over objects on the Design side of the split view, with corresponding code on the other side (see Figure 5).
){kind=small}
Figure 5 Inspecting selected objects in Split view.