adobe dreamweaver cs5 on demand part 41 docx

ptg
248 Chapter 10
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
1
1
3

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
From the Library of Wow! eBook
ptg
Chapter 10 Creating Page Layouts Using CSS-P 249
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
From the Library of Wow! eBook
ptg
250 Chapter 10
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.
◆ Box. Click the Box category to
define settings for tags and
attributes that control the
placement of elements on the
page. You can change width
and height, float, clear,
padding, and margins.
6
5
4
3
2
1
5
3
4
6
Categories
2
From the Library of Wow! eBook
ptg
Chapter 10 Creating Page Layouts Using CSS-P 251
◆ 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
From the Library of Wow! eBook
ptg
252 Chapter 10
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.
From the Library of Wow! eBook
ptg
Chapter 10 Creating Page Layouts Using CSS-P 253
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

2
3
From the Library of Wow! eBook