beautypg.com

Change the highlight color of div tags, Visualizing css layout blocks – Adobe Dreamweaver CS3 User Manual

Page 171

background image

DREAMWEAVER CS3

User Guide

164

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.

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.

September 4, 2007