Using CSS for Page Layout Working with Floating and AP - New Perspectives on Adobe Dreamweaver CS5, Comprehensive - page 223

◗

2. Click the selection handle of the apDiv1 and move it down below the navigation
text in the Document window.

◗

3. Move the TICKETS AP div back to its original position.
The apDiv1 is still nested and moves back to the right side of the screen.

◗

4. Close the page without saving. You do not want to save the new nested AP div.
◗

5. Collapse the CSS Styles panel group.

Next you will inspect CSS code with CSS Inspect.

Inspecting CSS Code with CSS Inspect
The CSS Inspect is another tool that Dreamweaver has developed to help you work
with complex CSS code. CSS Inspect works with Live View to enable you to identify
HTML elements and their associated CSS styles. The tool works similarly to frequently
used developer tools like Firebug and Web Inspector, but the Live View integration of
CSS Inspect enables you to debug from within the Dreamweaver environment. You will
enable CSS Inspect and examine the home page.

To examine the code in the Home page with CSS Inspect:

◗

1. Open the index.html page, click the Inspect button at the top of the Document
window. A bar appears at the top of the Document window indicating that
“Inspect mode is most useful with certain workspace settings.”

◗

2. Click Switch now to enable Dreamweaver to switch to the most useful workspace
settings, then minimize the Insert panel and the Files panel and adjust the CSS
Styles panel, if necessary, to optimize display.

◗

3. Move the mouse over the NextBest Fest Home page heading. The heading is
highlighted in Design view, the h1 tag is highlighted in the Code pane, and
CSS rules affecting the selected text are displayed in the CSS Styles panel. See
Figure 4-43.

Inspect view is most useful
when you have the CSS
Styles panel open to the
Current view, Live View
and Live Code enabled,
and the Document window
in Split view.