beautypg.com

Use design-time style sheets, Working with div tags – Adobe Dreamweaver CC 2015 User Manual

Page 224

background image

217

CSS

Last updated 6/3/2015

Use Design-Time style sheets

Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS
Designer.

Design-Time style sheets allow you to show or hide design applied by a CSS style sheet as you work in a Dreamweaver
document. For example, you can use this option to include or exclude the effect of a Macintosh-only or a Windows-
only style sheet as you design a page.

Design-Time style sheets only apply while you are working in the document; when the page is displayed in a browser
window, only the styles that are actually attached to or embedded in the document appear in a browser.

Note: You can also enable or disable styles for an entire page using the Style Rendering toolbar. To display the toolbar, select
View > Toolbars > Style Rendering. The Toggle Displaying of CSS Styles button (the right-most button) works
independently of the other media buttons on the toolbar.

To use a Design-time style sheet, follow these steps.

1

Open the Design-Time Style Sheets dialog box by doing one of the following:

• Right-click in the CSS Styles panel, and in the context menu select Design-time.

• Select Format > CSS Styles > Design-time.

2

In the dialog box, set options to show or hide a selected style sheet:

• To display a CSS style sheet at design-time, click the Plus (+) button above Show Only At Design Time, then in

the Select a Style Sheet dialog box, browse to the CSS style sheet you want to show.

• To hide a CSS style sheet, click the Plus (+) button above Hide At Design-Time, then in the Select a Style Sheet

dialog box, browse to the CSS style sheet you want to show.

• To remove a style sheet from either list, click the style sheet you want to remove, then click the appropriate Minus

(–) button.

3

Click OK to close the dialog box.

The CSS Styles panel updates with the selected style sheet’s name along with an indicator, “hidden” or “design,” to
reflect the style sheet’s status.

More Help topics

Style Rendering toolbar overview

Working with div tags

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

.

More Help topics

Video tutorial: Use div elements

Tutorial: How to use CSS to style divs and other layout elements