Adobe Dreamweaver CC 2014 v.13 - Manual (Page 197)

To the top
Click the border of the div tag.
Look for the highlighting to see the border.
Click inside the div tag, and press Control+A (Windows) or Command+A (Macintosh) twice.
Click inside the div tag, then select the div tag from the tag selector at the bottom of the Document window.
2. Select Window > CSS Styles to open the CSS Styles panel if it is not already open.
Rules applied to the div tag appear in the panel.
3. Make edits as necessary.
Place the insertion point in a div tag to add content
Click anywhere inside the tag’s borders.
Change the placeholder text in a div tag
Select the text, and then type over it or press Delete.
Note: You can add content to the div tag just as you would add content to a page.
Change the highlight color of div tags
When you move the pointer over the edge of a div tag in Design view, Dreamweaver highlights the borders of the tag. You can enable or disable
highlighting as necessary, or change the highlight color in the Preferences dialog box.
1. Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2. Select Highlighting from the category list on the left.
3. Make either of the following changes and click OK:
To change the highlighting color for div tags, click the Mouse-Over color box, and then select a highlight color using the color picker (or
enter the hexadecimal value for the highlight color in the text box).
To enable or disable highlighting for div tags, select or deselect the Show checkbox for Mouse-Over.
Note: These options affect all objects, such as tables, that Dreamweaver highlights when you move the pointer over them.
CSS layout blocks
Visualizing CSS layout blocks
You can visualize CSS layout blocks while you work in Design view. A CSS layout block is an HTML page element that you can position anywhere
on your page. More specifically, a CSS layout block is either a div tag without display:inline, or any other page element that includes the
display:block, position:absolute, or position:relative CSS declarations. Following are a few examples of elements that are considered CSS layout
blocks in Dreamweaver:
A div tag
An image with an absolute or relative position assigned to it
An a tag with the display:block style assigned to it
A paragraph with an absolute or relative position assigned to it
Note: For purposes of visual rendering, CSS layout blocks do not include inline elements (that is, elements whose code falls within a line of text),
or simple block elements like paragraphs.
Dreamweaver provides a number of visual aids for viewing CSS layout blocks. For example, you can enable outlines, backgrounds, and the box
model for CSS layout blocks while you design. You can also view tooltips that display properties for a selected CSS layout block when you float
the mouse pointer over the layout block.
The following list of CSS layout block visual aids describes what Dreamweaver renders as visible for each:
CSS Layout Outlines Displays the outlines of all CSS layout blocks on the page.
CSS Layout Backgrounds Displays temporarily assigned background colors for individual CSS layout blocks, and hides any other background
colors or images that normally appear on the page.
Whenever you enable the visual aid to view CSS layout block backgrounds, Dreamweaver automatically assigns each CSS layout block a distinct
background color. (Dreamweaver selects the colors using an algorithmic process—there is no way for you to assign the colors yourself.) The
assigned colors are visually distinctive, and are designed to help you differentiate between CSS layout blocks.
CSS Layout Box Model Displays the box model (that is, padding and margins) of the selected CSS layout block.
View CSS layout blocks
You can enable or disable CSS layout block visual aids as necessary.
190