Adobe Dreamweaver CC 2015 - Manual (Page 228)

221
CSS
Last updated 6/3/2015
Use visual aids with non-CSS layout block elements
You can use a Design-time style sheet to display the backgrounds, borders, or box model for elements that aren’t
normally considered CSS layout blocks. To do so, you must first create a Design-time style sheet that assigns the
display:block attribute to the appropriate page element.
1 Create an external CSS style sheet by selecting File > New, selecting Basic page in the Category column, selecting
CSS in the Basic page column, and clicking Create.
2 In the new style sheet, create rules that assign the display:block attribute to the page elements you want to display as
CSS layout blocks.
For example, if you wanted to display a background color for paragraphs and list items, you could create a style sheet
with the following rules:
p{
display:block;
}
li{
display:block;
}
3 Save the file.
4 In Design view, open the page to which you want to attach the new styles.
5 Select Format > CSS Styles > Design-time.
6 In the Design-time Style Sheets dialog box, click the plus (+) button above the Show Only at Design Time text box,
select the style sheet you just created, and click OK.
7 Click OK to close the Design-time Style Sheets dialog box.
The style sheet is attached to your document. If you had created a style sheet using the previous example, all
paragraphs and list items would be formatted with the display:block attribute, thereby allowing you to enable or
disable CSS layout block visual aids for paragraphs and list items.
Working with AP elements
About AP elements in Dreamweaver
An AP element (absolutely positioned element) is an HTML page element—specifically, a div tag, or any other tag—
that has an absolute position assigned to it. AP elements can contain text, images, or any other content that you can
place in the body of an HTML document.
With Dreamweaver, you can use AP elements to lay out your page. You can place AP elements in front of and behind
each other, hide some AP elements while showing others, and move AP elements across the screen. You can place a
background image in one AP element, then place a second AP element, containing text with a transparent background,
in front of that.
AP elements will usually be absolutely positioned div tags. (These are the kinds of AP elements Dreamweaver inserts
by default.) But remember, you can classify any HTML element (for example, an image) as an AP element by assigning
an absolute position to it. All AP elements (not just absolutely positioned div tags) appear in the AP elements panel.