DREAMWEAVER CS3
User Guide
164
Look for the highlighting to see the border.
•
Click inside the
div
tag, and press A (Windows) or 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
