adobe dreamweaver cs5 on demand part 41 docx

Applying a CSS-P Style Apply a CCS-P Style Open the Web page that contains text and/or graphics you want to apply an AP element style.. Click the Format menu, point to CSS Styles, and

Once you've created one or more styles with AP elements, it's a simple matter to apply those styles to existing elements within a Web page

For example, you can create a navigational system, and then attach an

AP element style that would control the element’s position, width, height, and Z-index You can apply AP element styles to text, groups of text, images, or virtually anything on a standard Web page Not only can the dimensions and position of an AP element be controlled by CSS-P styles; in addition there are options for controlling fonts, sizing, styles; even the insertion of a color or background image into the AP element

Applying a CSS-P

Style

Apply a CCS-P Style

Open the Web page that contains

text and/or graphics you want to

apply an AP element style

Select a group of text, or a graphic

element on the page

Click the Format menu, point to

CSS Styles, and then select the

appropriate style you want

The selected CSS-P style is

applied to the selected Web

object

3

2

Did You Know?

You can create styles by using the ID

of the AP element You can name an

AP element HeadLine (AP elements’

IDs are changed in the Properties

panel), and then create a customized

style named, #HeadLine (remember to

begin the name of the style with the #

sign) Any AP elements with the name

HeadLine (case is important) takes on

the style of the #HeadLine CSS-P style

2

Apply a Z-Index to an AP

Element

Open the Web page that contains

multiple AP elements you want to

modify

Open the Properties panel

Select one of the AP elements,

and then enter a value of 1 into the

Z-index box in the Properties

panel

Select another AP element, and

then enter a value of 2 into the

Z-index box in the Properties panel

Drag one of the AP elements so

that it overlaps the other AP

element

The AP element with the higher

Z-index is positioned on the top of

the other AP element

5

4

3

2

1

5

1

4 3

Did You Know?

The Z-index option works only when

AP elements overlap A single Web

page can contain any number of AP

elements So long as the AP elements

do not overlap, the Z-index is not

uti-lized However, when they overlap, the

Z-index determines what AP element is

on top of another

2

After you create a style, it's not locked in stone For example, you might create a style using a particular font, and later change your mind Or you might create a style using a color or background for the AP ele-ment, and later wish to change the style Editing CSS-P styles is a snap

in Dreamweaver, mainly because Adobe knows that sometimes you want to change your mind The easiest way to change the properties of the style is through the CSS Styles panel, and that's exactly where we're headed When you change a style, all elements currently assigned that style change to reflect the modifications

Modifying CSS-P

Properties

Modify CSS-P Properties

Open the Web page that contains

one or more styles you want to

modify

Open the CSS Styles panel

Click the All button.

Select the style you want to

modify

Click the Edit Style button.

TIMESAVER Double-click the

style you want to modify in the

CSS Styles panel

Use the categories to change the

following options:

◆ Type Click the Type category

to define basic font and type

settings for a CSS style

◆ Background Click the

Background category to define

background settings for a CSS

style

◆ Block Click the Block category

to define spacing and

alignment settings for tags and

attributes

6

5

4

3

2

1

5

3

4

Categories

2

◆ Border Click the Border

category to define settings,

such as width, color, and style,

for the borders around

elements

◆ List Click the List category to

modify list settings, such as

bullet size and type, for list

tags

◆ Positioning Click the

Positioning category to modify

the tag or block of selected text

into a new AP element using

the default tag for defining AP

elements as set in the AP

Elements preferences

◆ Extensions Click the

Extensions category to modify

filters, page break, and pointer

options, most of which aren't

supported in any browser or

are supported only in Internet

Explorer 4.0 and above

Click OK to save the changes, or

click Apply to view how the

changes impact the style before

saving

7

7

6

Did You Know?

It’s important to preview AP element

positioning Dreamweaver only

pre-views relative positioning when you're

working with a nested AP element or

have not set any top or left attributes

Therefore, always preview your pages

to visually verify that the positioning is

accurate

Using the CSS Box Model for Page Layout

The CSS Box model says that every HTML element in a document is a rectangle box You can create CSS styles that make boxes, one inside the other by using the Box category in the CSS Rule Definition dialog box This allows you to create a web page layout (multi-column) inde-pendent of tables Each box controls display properties, including Width and Height, Float, Clear, Padding, and Margins The Float prop-erty moves an element left or right and wraps content around it, while the Clear property prevents an element from wrapping The Padding property is the gap that separates the content of the style, such as space between an image and its border The Margin property is the outer space surrounding an element

For Your Information

After you create the AP elements you want, you can use the AP Elements panel and other commands to manage and work with AP ele-ments You can change the stacking order and place one AP element in front or behind another, hide some AP elements while showing others, move and align AP elements across the screen, and resize them indi-vidually or together

Working with AP

Elements

Work with AP Elements in the

AP Elements Panel

Open the Web page that contains

one or more AP elements you

want to modify

Click the Window menu, and then

click AP Elements to display the

AP Elements panel

Use the AP Elements panel to

change the following options:

◆ Show or Hide Click the Eye

icon column to show (open eye)

and hide (closed eye) elements

TIMESAVER Click the header

Eye icon at the top of the column

to show or hide all the elements

◆ Stacking Order Drag an

element up or down in the list

A line appears as you drag to

indicate the position

3

2

1

1

3

Stacking order

Show or hide

2

Did You Know?

You can prevent AP elements from

overlapping Select the Prevent

over-laps check box in the AP Elements

panel or click the Modify menu, point

to Arrange, and then click Prevent AP

Element Overlaps to select it

Move, Resize, and Arrange

AP Elements

Open the Web page that contains

one or more AP elements you

want to modify

Select the AP element you want

Use the AP Elements panel to

change the following options:

◆ Move Drag the AP element

handle (tab in the upper-left

corner) or the edge of the AP

element

TIMESAVER Use the arrow

keys to move an AP element one

pixel at a time

◆ Resize Drag one of the

selection handles or type

values for width (W) and height

(H) in the Properties panel

TIMESAVER Use Ctrl (Win) or

Option (Mac) and the arrow keys

to resize an AP element one pixel

at a time Use Shift+Ctrl (Win) or

Shift+Option (Mac) and the arrow

keys to resize by the grid snapping

increment

◆ Make Same Width or Height.

Select two or more AP

elements, click the Modify

menu, point to Arrange, and

then click Make Same Width or

Make Same Height.

◆ Align Select two or more AP

elements, click the Modify

menu, point to Arrange, and

then select an alignment

option All the AP elements

align themselves to the last

selected AP element

◆ Stacking Order Click the

Modify menu, point to Arrange,

and then click Bring To Front or

Send To Back.

3

2

1

1