Section 6.4. Manipulating Styles

6.4. Manipulating Styles

As with anything in Dreamweaver, styles are easy enough to edit, delete, or duplicate; 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.

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


Note: Although this section focuses mainly on how to style your text, 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.5.

Dreamweaver 8 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 Rule 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.

  • Double-clicking the name of a style in the CSS panel also opens the Rule Definition window. This is a change from Dreamweaver MX 2004, which changed into Code view to edit theecck!raw CSS code. If you liked this behavior you can turn it back on by opening the Preferences window (Ctrl+U [ -U]), clicking the CSS Styles category, and selecting the last button "Edit using Code View."

    GEM IN THE ROUGH
    A Time to Design

    A Dreamweaver feature called Design Time style sheets lets you quickly "try out" different CSS style sheets while developing your Web page. Using the simple dialog box shown at bottom right, you can hide the (external) style sheets you've attached to a Web page and substitute in new ones.

    Design Time style sheets come in handy when working on HTML that, later on, you intend to make part of a complete Web page. Dreamweaver Library items are a good example; this feature (discussed in Chapter 16) lets you create a chunk of HTML that can be used by any number of pages on your site. When you update the Library item, every page that uses it is updated. A time-saving feature, for sure, but since a Library item is only part of a page, it doesn't include the <head> portion needed to either store styles or attach an external style sheet. So when designing a Library item, you're working in the dark (or at least, without any style). But using Design Time style sheets, you can access all the styles in an external style sheet and even preview the effects directly in Design view.

    You'll also turn to this feature when working with Dreamweaver 8's new XML tools, which let you add an "XSLT fragment "to a complete Web pageessentially letting you convert XML (like you'd find in an RSS news feed) into a chunk of HTML. But to accurately design these components , you'll need to use Design Time style sheets.

    To apply a Design Time style sheet to your Web page, choose Text CSS Styles Design Time; the Design Time Style Sheets window appears. Click the top + button to select an external style sheet to display in Dreamweaver. Note that clicking this button doesnt attach the style sheet to the page; it merely selects a .css file to use when viewing the page 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 works only with external style sheets; you can't use it to prevent Dreamweaver from displaying internal styles.


  • Right-click (Control-click) the name of a style in the CSS Styles panel and choose Edit from the shortcut menu, which also opens the Rule 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, and then use the Properties list (see below) to edit the style's properties.

FREQUENTLY ASKED QUESTION
Help, My Styles Don't Work!

I've just edited a CSS style, but the changes I made don't appear when I preview the page. Why?

When you edit a style located in an external style sheet, Dreamweaver opens the .css filein the background, where it then surreptitiously makes the change to the style. Unfortunately, the program doesn't save the file when it's done, so while the changes exist in the still-open .css file, the file safely saved on your hard drive doesn't yet contain the changes.

Therefore, if you preview a page on your site, and merrily click away to see how the newly edited styles look on your site's pages, you'll be sadly disappointed. Those pages are loading the .css file on your hard drive; they don't have access to the open file in Dreamweaver.

The method to this apparent madness: Dreamweaver is giving you a chance to undo changes you made to the external style sheet. Because the program hasn't closed the .css file, you can use the Edit Undo command to undo edits to the file. To do so, you must have that file open in front of youbut where is it? Just pull it forward by choosing from the list of all open files at the bottom of the Window menu.

If you find this arrangement more a nuisance than a benefit, you can turn it off. Open the Preferences window by choosing Edit Preferences (Dreamweaver Preferences on the Mac). Select the CSS Styles category and turn off the "Open CSS files when modified box. (Remember, if you turn this feature off, you won't be able to use Edit Undo to undo edits you make to external style sheets.)


6.4.2. Editing Styles with the Properties Pane

The CSS Rule 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 jockeys. Dreamweaver 8 introduces a new toolthe Properties paneto streamline the process of editing styles. The Properties pane, shown in Figure 6-8, displays a selected style's currently defined properties, as well as a list of other not-yet-set CSS properties.


Note: MX 2004 Veterans : The Properties List pane is nearly identical to the Rule inspector, which has been spruced up a little and moved into the CSS panel.

Select the style you wish to edit in the CSS Styles panel, and the Properties pane displays CSS properties in one of three different views: a "set properties" view, which displays only the properties that have been defined for the selected style (Figure 6-8); a Category view, which groups the different CSS properties into the same seven categories used in the Rule Definition window (Figure 6-9, left); and a List view, which provides an alphabetical listing of all CSS properties (Figure 6-9, right). Clicking the view buttons at the bottom-left corner of the CSS Styles panel, switches between these three displays (see the circled buttons in FigureS 6-8 and Figure 6-9).


Note: What do all of these CSS properties do? Turn to Section 6.7 for an explanation.
Figure 6-8. The "set properties" view of the Properties pane provides a clear view of a style's properties. You can quickly see which CSS properties are used by the style, delete or edit them, and easily add a new property by selecting its name from the property menu.

Property names are listed on the left, and their values are on the right. Figure 6-8 shows an example of a style for the <h1> tag, which lists 10 properties (for example, background-color , font-family ) and their corresponding settings (#FFFFCC, "Arial, Helvetica, sans-serif," and so on).

To add a new property, click the "Add Property" link at the bottom of the list, and select the property name from the pop-up menu. You set (and can edit) 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 (see 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"dashed" for the border-top-style property shown in Figure 6-8; 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 Properties pane 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 9.6).


Note: The Properties pane can only edit styles. You can add and remove properties with it, but you can't create, delete, or rename styles using it.

Even those not-so-experienced find the Properties pane helpful. First, it's the best way to get a bird's-eye view of a style's properties. Second, for really basic editing, such as changing the colors used in a style or assigning it a different font, the Properties pane is as fast as it gets.

To remove a property from a style, just delete its value in the right column. Dreamweaver then not only removes the value, but the property name as well from the style sheet. In addition, you can right-click (Control-click) a property name and select "delete" from the pop-up menu, or click a property name followed by the Trash can icon to banish it from your style sheet 178(see Figure 6-8).

Figure 6-9. The Properties pane's two other views are a holdover from MX 2004's Rule inspector, and aren't as streamlined or as easy to use as the "set properties" view pictured in Figure 6-8. Add new properties in these views by simply typing a value in the empty box to the right of the property namein the left view, in the empty box to the right of "background," for example.

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 (Window CSS Styles). Click the name of the style you wish to delete, and then click the Trash can at the bottom of the panel. You can also remove all of the styles in an internal style sheet (as well as the style sheet itself) by selecting the style sheetindicated by "<style>" in the CSS Styles panel (see Figure 6-1)and clicking the Trash can. If you "trash an external style sheet, however, you merely unlink it from the current document without actually deleting the .css file.


Tip: 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 shortcut 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 are still littered with orphaned code like this<span class="company">The National Exasperator</span>even though the text loses the styling. (See how to solve this problem using Dreamweaver's powerful Find and Replace tool on Section 18.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 includes a handy tool to simplify this process.

To rename a class style:

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

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

  2. 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.

  3. Type the new style name in the "New name"box .

    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.

  4. Click OK .

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

    However, if the style belongs to an external style sheet, Dreamweaver warns you that other pages on the site may 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.

  5. If you get cold feet, click Cancel to call off the name change, 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.


    Note: If you click No in the warning box that appears after step 4, Dreamweaver still renames the style in the external style sheet, but doesn't update your pages.
  6. 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 and is particularly useful if you use the Property inspector to set font colors, types, and sizes (see Chapter 3). In that case, you can use this feature to rename the non descriptive class namesStyle1, Style2, and so onthat Dreamweaver starts you off with.

Figure 6-10. The Rename Style tool 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.

6.4.5. Duplicating a Style

Dreamweaver makes it easy to duplicate a CSS style, which is 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 (Window CSS Styles), right-click (Control-click) the name of the style you wish to duplicate, and then choose Duplicate from the shortcut menu.

The Duplicate CSS Rule window appears (Figure6-11), 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.

Figure 6-11. The Duplicate CSS Style dialog box looks and acts just like the New CSS Rule 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.



Dreamweaver 8[c] The Missing Manual
Dreamweaver 8[c] The Missing Manual
ISBN: 596100566
EAN: N/A
Year: 2006
Pages: 233

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net