By: Sheri German
Page 1 of 3
In this second article about the new features in Dreamweaver CS5, we'll look at some of the new ways Dreamweaver will help you troubleshoot your layouts. You'll wonder how you ever lived without CSS Inspect, or without the ability to enable and disable properties with the click of a button in the CSS Styles panel. You'll marvel at the new capabilities in the Style Rendering Toolbar, and become addicted to the new online service, BrowserLab. So much cool stuff. Where to begin? How about CSS Inspect....
As the name suggests, Inspect is a feature that lets you, well, inspect the properties and box model for your elements by hovering your mouse around the page.
Below you'll see an image of how the workspace is set up before Inspect is turned on.
Image 1: The Workspace before turning on Inspect
Once you click the Inspect button, you'll get a choice of two links, one to "Switch Now" and the other to get "More Info". The "Switch Now" immediately switches you to the optimum workspace for using Inspect. Clicking "More Info" brings up a dialog box that tells you how the workspace will change, and then gives you the opportunity to switch to those settings. After you use "More Info" once, you'll probably want to turn it off and go straight to "Switch Now".
Image 2: After clicking the Inspect button, you'll see a More Info link that tells you what Inspect mode works best
As promised, the workspace switches to split view, opens the CSS Styles panel to Current mode, and enables Live View and Live Code.
When you hover your mouse over any element, Dreamweaver highlights it in the markup and displays the relevant CSS in the CSS Styles panel. In the image below, the mouse is hovering over the h1 in the mainContent div. The hovered element turns light blue in Design View and Code View.
Image 3: Hovering the mouse over the h1 heading in the mainContent Div
In the next image, the mouse hovers over the logo image in the header.
Image 4: Hovering the mouse over the logo image
Clicking on an element turns off Inspect so that you can edit it.
Image 5: Clicking an element turns off Inspect and lets you edit it