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

Working with div tags
To the top
Insert and edit div tags
CSS layout blocks
Working with AP elements
Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS Designer.
(Creative Cloud users only): Seven new semantic tags are available when you select Insert > Layout. The new tags are : Article, Aside, HGroup,
Navigation, Section, Header, and Footer. For more information, see
Insert HTML5 semantic elements from the Insert panel .
Insert and edit div tags
You can create page layouts by manually inserting div tags and applying CSS positioning styles to them. A div tag is a tag that defines logical
divisions within the content of a web page. You can use div tags to center blocks of content, create column effects, create different areas of color,
and much more.
If you’re unfamiliar using div tags and Cascading Style Sheets (CSS) to create web pages, you can create a CSS layout based on one of the pre-
designed layouts that come with Dreamweaver. If you’re uncomfortable working with CSS, but are familiar with using tables, you can also try using
tables.
Note: Dreamweaver treats all div tags with an absolute position as AP elements (absolutely positioned elements), even if you didn’t create those
div tags using the AP Div drawing tool.
Insert div tags
You can use div tags to create CSS layout blocks and position them in your document. This is useful if you have an existing CSS style sheet with
positioning styles attached to your document. Dreamweaver enables you to quickly insert a div tag and apply existing styles to it.
1. In the Document window, place the insertion point where you want the div tag to appear.
2. Do one of the following:
Select Insert > Layout Objects > Div Tag.
In the Layout category of the Insert panel, click the Insert Div Tag button .
3. Set any of the following options:
Insert Lets you select the location of the div tag and the tag name if it is not a new tag.
Class Displays the class style currently applied to the tag. If you attached a style sheet, classes defined in that style sheet appear in the list.
Use this pop-up menu to select the style you want to apply to the tag.
ID Lets you change the name used to identify the div tag. If you attached a style sheet, IDs defined in that style sheet appear in the list. IDs
for blocks that are already in your document are not listed.
Note: Dreamweaver alerts you if you enter the same ID as another tag in your document.
New CSS Rule Opens the New CSS Rule dialog box.
4. Click OK.
The div tag appears as a box in your document with placeholder text. When you move the pointer over the edge of the box, Dreamweaver
highlights it.
If the div tag is absolutely positioned, it becomes an AP element. (You can edit div tags that aren’t absolutely positioned.)
Edit div tags
After you insert a div tag, you can manipulate it or add content to it.
Note: Div tags that are absolutely positioned become AP elements.
When you assign borders to div tags, or when you have CSS Layout Outlines selected, they have visible borders. (CSS Layout Outlines is
selected by default in the View > Visual Aids menu.) When you move the pointer over a div tag, Dreamweaver highlights the tag. You can change
the highlight color or disable highlighting.
When you select a div tag, you can view and edit rules for it in the CSS Styles panel. You can also add content to the div tag by simply placing
your insertion point inside the div tag, and then adding content just as you would add content to a page.
View and edit rules applied to a div tag
1. Do one of the following to select the div tag:
274