Adobe Dreamweaver CC 2015 - Manual (Page 225)

218
CSS
Last updated 6/3/2015
Tutorial: Style the header and navigation menu
Laying out pages with CSS
Manage tag libraries
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.