Dreamweaver.MX.1002004.The.Missing.Manual [Electronic resources] نسخه متنی

6.2 Creating Styles

You begin most CSS-related tasks in the CSS Styles panel, which is the command
center for creating styles (see Figure 6-1). To open it, choose WindowCSS Styles
(or press Shift-F11).

NOTE

If you're used to Dreamweaver MX, you'll find that Dreamweaver MX 2004 introduces significant
changes to how you create and use styles. The CSS Styles panel (Figure 6-1) now only displays CSS styles;
you can no longer use it to apply styles. In addition, it now lists all styles, not just class (or what Dreamweaver
used to call custom) styles.

The CSS Styles panel lists the names of all
styles available to the page, including external
and internal style sheets. In this example, one
external style sheetglobal.csscontains five
styles. The top three are tag styles (notice that
the names match various HTML tags), while
the bottom two are class styles (note the period
at the beginning). There's also one tag style
defined in an internal style sheetthe one listed
below "<style>." Click the - icon to the left of
the style sheet to collapse the list of styles, hiding
them from view.

6.2.1 Phase 1: Set Up the CSS Type

To create a new style, click the New Style button on the CSS Styles panel (see Figure 6-1), or choose TextCSS StylesNew CSS Style. The New CSS Style dialog box
appears (Figure 6-2), where you begin the process of creating your new style:

Selector Type. Click the appropriate radio button for the kind of style you're creating:
Class (to create your own style from scratch) or Tag (to create an HTML tag
style that Dreamweaver will automatically apply to each occurrence of the tag).
See the facing page for a discussion of these two types.

The third type offered here, Advanced, lets you create advanced style types such
as IDs, pseudo-classes, and contextual selectors. (These are discussed beginning
on Section 6.6.)

Name. If you clicked the Class button, type a name for the new style, to replace
Dreamweaver's bland default name (.unnamed1). All class styles begin with a
period, according to standard Cascading Style Sheet convention.

If you're in a desperate hurry, you can leave the period out. Dreamweaver adds it automatically when it puts the style in the style sheet.

Class style names must begin with a letter, too, and can only contain letters and
numbers. Dreamweaver lets you know if you use any invalid characters for the
name.

If you chose Tag instead, select the HTML tag you want to redefine from the Tag
pop-up menu (which appears when you click the Redefine HTML Tag button).

If you're an HTML guru, you may find it faster to type the tag (minus the brackets) in the Name box. For example, if you want to create a style for all unordered (bulleted) lists, type ul.

If you clicked the Advanced button, Dreamweaver lets you type any valid CSS
selector type (Section 6.2.2). You'll use this feature for some advanced CSS tricks, but
you can also use it just to create a tag or class style.

Define In. Click This Document Only if you want the styles to apply only to the
current Web page (creating an internal style sheet, as described on Section 6.1.2). To
create a new external style sheet, choose New Style Sheet File from the Define In
pop-up menu. This option not only creates a new external CSS file (which you
can save anywhere in your site folder), but adds the necessary code in the current
document to link it to that file.

If you've previously linked this document to an external style sheet (Section 6.1.2), that style sheet's name will appear in the pop-up menu, indicating that Dreamweaver
is going to store the new style in this style sheet file.

If you create a bunch of internal styles in a particular page, and later realize you'd like to turn them into an external style sheet that you can use in other pages, you're in luck. Dreamweaver has a command for this very task. Open the page containing the internal styles you want to reuse and choose FileExport Export CSS Styles. A dialog box opens, letting you save the file as an external style sheet. Don't forget to add the .css extension to the end of the file name.

In the New CSS Style dialog
box, you choose a type of
style and give it a name.
The label next to the naming
box changes depending on
the type of style you choose.
In this example, since Class
is selected, the Name label
appears; if you choose the
Tag option, it changes to Tag
(or Selector, if you're using
the Advanced option).

If you indicated that you want to create an external style sheet, clicking OK makes a
Save Style Sheet As dialog box appear. Navigate to your site's folder and type a name
for the new external CSS file. Just as HTML files end in l, CSS files end in .css.

If you'll be using this style sheet for all of the pages in your site, you might want to save it in the root folder of your site and give it a general name like site_styles.css or global.css. (You don't have to type the .css file name extension, by the way. In this case, Dreamweaver adds it.)

No matter what "Define in" option you selected, clicking OK eventually brings you
to the Style Definition window.

6.2.2 Phase 2: Defining the Style

The CSS Style Definition window provides access to all of the formatting options
available to you and your Web page text and graphics (see Figure 6-3). A blow-byblow
description of these various options begins on Section 6.7.

h1 { font-size: 24px; color:
#003399}

.company { font-size: 24px;
color: #003399}

Once you've defined the style, click OK in the Style Definition window. Dreamweaver
adds the style to the specified style sheet, and makes it appear in the CSS Styles panel
(Figure 6-1).

For ultimate formatting
control, Dreamweaver
lets you set 67 different
Cascading Style Sheet
properties from the
CSS Style Definition
window. To learn about
these options, see Section 6.7.

The real trick to creating a style is mastering all of the different properties available,
such as borders, margins, and background colors, and then learning which ones work
reliably in the different browsers.