Operation Manual

132
USING DREAMWEAVER
Creating pages with CSS
Last updated 3/28/2012
Z-Index Determines the stacking order of the content. Elements with a higher z-index appear above elements with a
lower z-index (or none at all). Values can be positive or negative. (If your content is absolutely positioned, it’s easier
to change the stacking order using the AP Elements panel).
Overflow Determines what happens if the contents of a container (for example, a DIV or a P) exceed its size. These
properties control the expansion as follows:
• Visible increases the container’s size so that all of its contents are visible. The container expands down and to the
right.
• Hidden maintains the container’s size and clips any content that doesn’t fit. No scroll bars are provided.
• Scroll adds scroll bars to the container regardless of whether the contents exceed the container’s size. Specifically
providing scroll bars avoids confusion caused by the appearance and disappearance of scroll bars in a dynamic
environment. This option is not displayed in the Document window.
• Auto makes scroll bars appear only when the container’s contents exceed its boundaries. This option is not
displayed in the Document window.
Placement Specifies the location and size of the content block. How the browser interprets the location depends on
the setting for Type. Size values are overridden if the content of the content block exceeds the specified size.
The default units for location and size are pixels. You can also specify the following units: pc (picas), pt (points), in
(inches), mm (millimeters), cm (centimeters), (ems), (exs), or % (percentage of the parent’s value). The abbreviations
must follow the value without a space: for example,
3mm.
Clip Defines the part of the content that is visible. If you specify a clipping region, you can access it with a scripting
language such as JavaScript and manipulate the properties to create special effects such as wipes. These wipes can be
set up by using the Change Property behavior.
4 When you are finished setting these options, select another CSS category on the left side of the panel to set
additional style properties, or click OK.
Define CSS style extension properties
Extensions style properties include filters, page break, and pointer options.
Note: There are a number of other extension properties available in Dreamweaver, but to access them, you need to go
through the CSS Styles panel. You can easily see a list of extension properties available by opening the CSS Styles panel
(Windows
> CSS Styles), clicking the Show Category View button at the bottom of the panel, and expanding the
Extensions category.
1 Open the CSS Styles panel (Shift + F11) if it isn’t already open.
2 Double-click an existing rule or property in the top pane of the CSS Styles panel.
3 In the CSS Rule Definition dialog box, select Extensions, and set any of the following style properties. (Leave the
property blank if it is not important to the style.)
Page break before Forces a page break during printing either before or after the object controlled by the style. Select
the option you want to set in the pop-up menu. This option is not supported by any 4.0 browser, but support may be
provided by future browsers.
Cursor Changes the pointer image when the pointer is over the object controlled by the style. Select the option you
want to set in the pop-up menu. Internet Explorer 4.0 and later, and Netscape Navigator 6 support this attribute.
Filter Applies special effects to the object controlled by the style, including blur and inversion. Select an effect from
the pop-up menu.