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

6.4 Manipulating Styles

As with anything in Dreamweaver, styles are easy enough to edit, duplicate, or delete;
all you need is a map of the terrain.

6.4.1 Editing Styles

While building a Web site, you continually refine your designs. That chartreuse color
you assigned to the background of your pages may have looked great at 2 a.m., but
it loses something in the light of day.

POWER USERS' CLINIC A Time to Design A Dreamweaver feature called Design Time style sheets lets you "try on" different CSS sheets while developing your Web page in Dreamweaverat design time. Using the simple dialog box shown here, you can hide the (external) style sheets you've attached to a Web page and try on new ones. Design Time style sheets come in handy when you use the Tip in Section 3.3.2 for dealing with Navigator 4. You can use this method to preview the page using the linked external style sheet, but hide the styles from the style sheet attached with the import method. It's a great way to get a glimpse of what your Netscape viewers will see. Design Time style sheets are also a great way to see how your Web pages would look with radically different styleswithout actually altering the pages. Developers who use different style sheets for different Web browsers or different operating systems also use Design Time style sheets. This technique involves programmingusing either JavaScript or one of the server-side languages discussed in Part 6 of this bookto attach a style sheet to a page based on a visitor's browser or operating system. To apply a Design Time style sheet to your Web page, choose TextCSS StylesDesign Time; the Design Time Style Sheets window appears. Click the top + button to select an external style sheet to display in Dreamweaver. Note that this doesn't attach the style sheet to the page; it merely selects a .css file to use when viewing inside Dreamweaver. To properly view your page with this new style sheet, you may need to get an attached external style sheet out of the way. To do that, use the bottom + button to add it to the Hide list. Design Time style sheets apply only when you're working in Dreamweaver. They have no effect on how the page looks in an actual Web browser. That's both the good news and the bad news. Although Dreamweaver lets you apply class styles that you take from a Design Time style sheet to your Web page, it doesn't actually attach the external style sheet to the page. You have to attach it yourself when design time is over, or else your visitors will never see your intended result. Note that this method only works with external style sheets; you can't use it to prevent Dreamweaver from displaying internal styles.

Fortunately, one of CSS's greatest selling points is how easy it makes updating the
formatting on a Web site.

Although this section talks mostly about text styling, you can also use CSS styles to add background colors, background images, borders, and accurate positioning that can apply to images, table cells, and other page elements. For an example of a CSS style applied to an image, see the tutorial on Section 6.8.4.

Dreamweaver MX 2004 provides many ways to edit styles, some of which are new:

Select a style in the CSS Styles panel (Figure 6-1) and click the Edit Style button
to open the Style Definition window (Figure 6-3). (This is the same window you
used when first creating the style.) Make your changes and then click OK to return
to the document window. Dreamweaver reformats the page to reflect any changes
you made to styles used in the current document.

Right-click (Control-click) the name of a style in the CSS Styles panel and choose
Edit from the contextual menu, which also opens the Style Definition Window.
Make your changes to the style, and then click OK to return to the document
window.

Select a style to edit in the CSS Styles panel, then use the Rule inspector (Section 6.4.2)
to edit the style's properties.

Double-click the name of a style in the CSS Styles panel. If the style is part of an
external style sheet, Dreamweaver opens the CSS file in Code view with the cursor
at the first CSS propertyready for you to edit by hand. (You can edit internal styles the same way. Double-click an internal style on the CSS Styles panel, and the
page changes to Split viewsee Section 10.2where you can hand-edit the code.)

NOTE

Unless you're some sort of CSS guru and love to hand-code CSS, you should avoid this last option. If
you don't know what you're doing, it's easy to make mistakes and perhaps even ruin your style sheet.

6.4.2 Editing Styles with the Rule Inspector

The Style Definition window (Figure 6-3) can be a rather tedious way of editing CSS
properties. It's easy to use, but the categories and menus may slow down experienced
CSS users. Dreamweaver MX 2004 introduces a new toolthe Rule inspectorto
streamline the process of editing styles. The Rule inspector, shown in Figure 6-6,
presents all the CSS properties in a single, compact list.

To use the Rule inspector, first make sure the Tag inspector is open: choose Window
Tag inspector or press F9. Next, select the style you wish to edit in the CSS Styles panel,
which turns the Tag inspector into the Rule inspector. As you've probably figured out
by now, the Rule inspector is just another face of the Tag inspector (Section 10.4).

The Tag inspector has two different views: a category view, which groups the different
CSS properties into the same seven categories used in the Style Definition window
(Figure 6-6, left); and a list view, which provides an alphabetical listing of all CSS
properties (Section 6.7 for an explanation.

So that you can instantly grasp what properties you've already defined for a particular
style, Dreamweaver moves previously defined properties to the top of the list,
highlighting the property names in blue and listing the property settings to the right.

The Rule inspector provides a
fast way to edit style properties.
You can view the properties either
grouped by category (left)
or as one long alphabetical list
of properties (right).

Figure 6-6 shows an example for a class style called copyright. In the category view,
two font properties float to the top of the Font category: font-size and color. In the
list view, you can see that the style actually has settings for six different CSS properties
setborder-top-color to text-align.

You set the value of a particular property in the space to the right of the property
name. Most of the time, you don't have to type in the value. Dreamweaver provides
the tools you're likely to need for each property: the ubiquitous color box (Section 1.3.3)
for any property that requires a color, like font color; a pop-up menu for properties
that have a limited list of possible values, like the Text-align property shown in
Figure 6-6; and the familiar "browse for file" folder icon for properties that require
a path to a file.

Some other properties, however, require you to know enough CSS to enter them
manually, in the correct format. That's what makes the Rule inspector a good advanced
option for experienced CSS gurus. (If your goal is to become one, you can learn about
the different CSS properties starting on Section 6.7. Dreamweaver includes a built-in
CSS reference so you can sharpen your knowledge of this exciting technology, as
discussed on Section 10.5.)

NOTE

The Rule inspector can only edit styles. You can add and remove properties with it, but you can't
create, delete, or rename styles using it.

Even not-so-experienced users can find the Rule inspector helpful, too. First, it's
the best way to get a bird's-eye view of a style's properties. The list view is especially
helpful in this regard, since all of the defined properties are listed at the top of the
window. Second, for really basic editing such as changing the colors used in a style
or assigning it a different font, the Rule inspector is as fast as it gets.

6.4.3 Deleting a Style

At some point, you may find you've created a style that you don't need after all. Maybe
you redefined the HTML <code> tag, for example, and realize you haven't even used
the tag in your site. There's no need to keep it around taking up precious space in
the style sheet.

To delete a style, make sure the CSS Styles panel is open (WindowCSS Styles). Click
the name of the style you wish to delete, and then click the Trash can at the bottom
of the panel (Figure 6-1). If you "trash" an external style sheet, you merely unlink it
from the current document without actually deleting the .css file.

A faster way to delete a style is to right-click (Control-click) the name of the style in the CSS Styles panel and choose Delete from the contextual menu.

Unfortunately, deleting a class style doesn't delete any references to the style in the
pages of your site. For example, if you've created a style called .company and applied it
throughout your site, and you then delete that style from the style sheet, Dreamweaver
doesn't remove the <span> tags or class properties that refer to the style. Your pages will still be littered with orphaned code like this<span class="company">The National
Exasperater</span>even though the text loses the styling. (See how to solve this
problem using Dreamweaver's powerful Find and Replace tool on Section 19.3.)

6.4.4 Renaming a Class Style

While there are many ways to change the name of a style in a style sheet (open the .css
file in Code view and edit the name, for example), just changing the name doesn't do
much good if you've already applied a class style throughout your site. The old name
still appears in each place you used it.

What you really need to do is rename the style and then perform a find-and-replace
operation to change the name wherever it appears in your site. Dreamweaver MX
2004 introduces a handy new tool to simplify this process.

To rename a class style:

In the Style menu (or Class menu) on the Property inspector (Figure 6-4), choose
Rename.

The Rename Style window appears (Figure 6-7).

The Rename Style tool, new in
Dreamweaver MX 2004, is a fast
and easy way to change the name
of a class style even if you've
already used the style hundreds of
times throughout your site.

From the top menu, choose the name of the style you wish to rename.

This menu lists all class styles available on the current page, including external
and internal styles.

Type the new style name in the bottom field.

You must follow the same rules for naming class styles described on Section 6.2.
But, just as when creating a new class, you don't need to precede the name with a
periodDreamweaver takes care of that.

Click OK.

If the style whose name you're changing is an internal style, Dreamweaver makes
the change. Your job is complete.

However, if the style belongs to an external style sheet, Dreamweaver warns you that
other pages on the site might also use this style. To successfully rename the style,
Dreamweaver must use its Find and Replace tool to search the site and update all
pages that use the old style name. In that case, continue to step 5:

Click Cancel to call off the search-and-replace, or click Yes to open the Find and
Replace window, where you should click Replace All.

One last warning appears, reminding you that this action can't be undone.

Click Yes.

Dreamweaver goes through each page of your site, dutifully updating the name of
the style in each place it appears. This hidden gem is a great tool, but it's obviously
easier if you choose the right style name to begin with.

6.4.5 Duplicating a Style

Dreamweaver makes it easy to duplicate a CSS style, which can be handy when you've
created, say, an HTML tag style, and now decide you'd rather make it a class style. Or
you may want to use the formatting options from one style as a starting-off point for
a new style. Either way, you start by duplicating an existing style.

You can duplicate a style in two ways. The easiest method is to open the CSS Styles
panel (WindowCSS Styles), right-click (Control-click) the name of the style you
wish to duplicate, and then choose Duplicate from the contextual menu.

The Duplicate CSS Style window appears (Figure 6-8), where you can give the duplicated
style a new name, reassign its Type setting, use the "Define in" menu to move
it from an internal to an external style sheet, and so on.

The Duplicate CSS Style dialog box
looks and acts just like the New Style
box (Figure 6-2). You can select a
new style type, name it, and add
it to an external or internal style
sheet. The only difference is that the
duplicated style retains all of the CSS
properties of the original style.

When you click OK, Dreamweaver adds the duplicate style to the page or external
style sheet. You can then edit the new style just as you would any other, as described
on Section 6.4.

The second method involves the Edit Style Sheet window: choose TextCSS Styles
Manage Styles, or choose Manage Styles from either the Style or Class menu on the
Property inspector.

Either way, the Edit Style Sheet window appears (Figure 6-9, left). This window lists
all external style sheets attached to the page, and displays "<style>" if there is an
internal style sheet.

Double-click the name of the external style sheet to open a window displaying all
the styles in that style sheet (Figure 6-9, right). If the page has only an internal style
sheet, you'll see a window that lists all styles defined internally, much like that at right
in Figure 6-9.

The Edit Style Sheet
window (left) lists external
and internal style
sheets. Double-click a
style sheet to open its
edit window (right).
If you click Attach
here, you can attach
external style sheets to
an external style sheet.
This perfectly valid CSS
technique lets a Web
page link to a single
external style sheet that
can, in turn, reference
any number of other
style sheets.

Select a style from the list, then click Duplicate. The Duplicate CSS Style window appears,
as shown in Figure 6-8. At this point, proceed exactly as described above.

This method requires a few more steps than using the CSS Styles panel. But it lets you
duplicate multiple styles quicklywhen, for example, you've grasped the concept of
contextual selectors (Section 6.6.2) and have decided to convert all the class styles you
created to contextual selectors.