| If you've been using CSS for even a short amount of time, your style sheets probably won't be completely Contribute user-friendly. Many designers build their CSS styles while they're creating the look-and-feel of a site and employ their own conventions when naming styles. To broaden the usefulness of styles in Contribute, obscurely identified styles must be renamed to be more meaningful. Renaming a style is, at its core, a two-part operation. First, the class selector in the CSS style sheet is changed and the style sheet is saveda very straightforward procedure. The next part is far more com plex. Every instance of the class name must be altered in every page throughout a given site. For example, if you want to change the class name for the main heading style from .mh01 to .mainHeading, you have to set up a fairly elaborate search to cover all the circumstances. Luckily, Dreamweaver has a feature built in to handle both the simple and more complex aspects of renaming a CSS style. In the following steps, you'll see how to apply the Rename command in the CSS Styles panel to bring your style sheet into Contribute readiness. Tip Sharp-eyed observers might have noticed a Rename Style command in the Contribute Styles list. This function works only with auto-generated styles embedded in the page; it cannot be used to alter external style sheets or their assigned styles.
1. | In Dreamweaver's Files panel, select the goinghome.htm file that was previously checked in, and choose Check Out to make the most current version available. When the Dependent Files dialog box appears, click OK to include the dependent files; double-click goinghome.htm to open it when the checkmark appears next to the filename. Expand the css folder in the Files panel to verify that the attached style sheet, bg_ct.css, was checked out as noted with a green checkmark. If it wasn't, select the bg_ct.css file and choose Check Out.
Note Although Dreamweaver is good about checking out images as dependent files, attached CSS files are not always handled the right way automatically. | 2. | In the CSS Styles panel, expand the <style> and bg_ct.css entries, if necessary. Right-click (Command-click) the class .p1 and choose Rename. In the Rename Class dialog box, enter .firstParagraph in the New Name field and click OK.
The .p1 style being renamed is intended to be applied to the first paragraph in every section. The CSS style rule sets the top margin to 0 pixels, which effectively brings the paragraph closer to an <h2> subheading tag, if present. The new name, .firstParagraph, clearly indicates where the style should be used.
| 3. | Dreamweaver notes that the style to be renamed is defined in an external style sheet and can be applied to tags in multiple documents. Click Yes to use Dreamweaver's Find and Replace to automate the change.
Tip Dreamweaver's Find and Replace function is one of its true power tools. With it, the designer can quickly modify text, source code, individual tags, and even tag attributes in everything from a block of selected text to the full site. | 4. | Dreamweaver's Find and Replace dialog box opens with all the relevant fields automatically filled in. Note that the entire current local site will be affected because Dreamweaver searches any tag with a class attribute for a particular value, expressed as a regular expression. Verify that the Action is set to change the class attribute to another regular expression, representing the .firstParagraph name. Make sure that Use Regular Expression is selected and choose Replace All.
Regular expressions are high-powered wildcards that can be used to find and replace individual characters or text patterns.
 | 5. | Dreamweaver reminds you that this action cannot be undone in documents that are closed and asks for confirmation to proceed. Click Yes.
Dreamweaver quickly performs the search-and-replace operation and displays the results in the Results panel. You can check any individual change by double-clicking its entry in the Results panel; Dreamweaver opens the appropriate page and highlights the section affected.
| 6. | Choose File > Save All to store both the open affected files. From the Document toolbar, choose Check In from the File Management menu. If Dreamweaver asks whether you want to include dependent files, click Yes.
Your legacy CSS styles have now been altered to be more easily applied by Contribute users and published for their use.
|
|
