لطفا منتظر باشید ...
Crafting Contribute-Savvy CSS
As you'll see later in this lesson, the Contribute administrator establishes the level of style usage for each role. Assuming that the content contributor is allowed to apply styles, what exactly is Contribute capable of? Like Dreamweaver MX 2004, Contribute 3 has fairly advanced CSS rendering facilities. The relevant CSS areas affect the overall look of the page (including background color and margins) and text.By default, the Contribute user has the ability to change a document's page properties. These properties include the background color, background image, default text values (font, text size, color), link colors, and margins. As you'll see in this lesson, CSS even allows you to remove these attributes from user control.Almost all text style rulessuch as font, text size, color, alignment, line indent, and line heightare rendered in Contribute as well as with modern browsers such as Mozilla and Safari. A few of the less commonly used text attributes, such as overline text decoration and small-caps variant text, are not handled correctly, but text styles are generally represented as expected.Contribute's primary tool for applying CSS rules is the Style drop-down list. The Style list consists ofat mostall the classes defined in CSS styles attached to the current page, and the six heading tags: <h1> through <h6>. The CSS and th109 listings can be disabled independently of one another; the CSS classes that are visible can also be controlled by a couple of different methods covered later in this lesson.
When formatting text, the key question is this: How does the content contributor know which style to apply where? A contextual approach provides the best answer. The main strategy is to give your CSS classes meaningful names that can be easily interpreted; it's far easier for a content contributor to know when to use a CSS style named .mainHeading than .mH01. Assuming that your Contribute users will also be applying some (but not all) of the general headings, you also want to handle the unused heading tags appropriately.The following procedure addresses both the page properties and text considerations when designing a CSS style sheet in Dreamweaver for use in Contribute. You'll be defining styles for basi107 tags (such as <body>, <p>, and <td>) and creating custom classes for specific document sections (such as those for copyright information and legal notices).| 1. | In Dreamweaver, open the Files panel and make sure that you're in the local Design_Deploy site. Expand the depts folder in the site root first and then the maternity subfolder. Double-click the goinghome file to open it.The goinghome document has a style sheet already attached (bg_ct.css), with a number of ID selectors defined for the page layout and a few other styles defined. Your first task is to make sure that the core page properties are specified so that they cannot be overridden by Contribute users. |
| 2. | From the CSS Styles panel, first expand the <style> tag and then the bg_ct.css entry. Select New CSS Style from the bottom of the panel. In the New CSS Style dialog box, choose the Tag selector type and then select body from the Tag list. Click OK after you finish. TipAlternatively, you can enter body directly into the list field. |
| 3. | When the CSS Style Definition dialog box opens, choose Verdana, Arial, Helvetica, sans-serif from the Font list in the Type category to set the default font for the document. In the Size field, enter 62.5% to make the basic font size equivalent to 10 pixels. Select the Background category and choose the Background Color swatch to open the color picker; select white (#FFFFFF) to set the background. Switch to the Box category and enter 10 pixels in the Top field of the Margin sectionmaking sure that the Same for All option is chosen. After you finish setting these values, click OK.Depending on your own Dreamweaver default font, you might see a change to the page. With the default font, background, and margins set, it's time to define the base text size for a variety of tags.NoteThe<body> font size is set to 62.5% of the default browser text size, which is almost always 16 pixels. This percentage value makes the basic size 10 pixels (16 X 62.5% = 10). With a base 10 value, you're ready to use a percentage-based text measurement system called ems that allows you to easily specify values while retaining accessibility standards. |
| 4. | Select New CSS Style to reopen the dialog box. Choose the Advanced selector type and enter the following comma-separated tags in the Selector field: p, td, ul, ol. Make sure that Define in bg_ct.css is selected and click OK when you're ready to proceed.The Advanced selector type allows a wide range of entries, including specifying multiple selectors at once. In this step, you're specifying a single style that applies to the <p>, <td>, <ul>, and <ol> tags. |
| 5. | In the Type category, set the following attributes: Size, 1.1 ems; Line Height, 1.4 ems; and Color, dark gray (#333333). Click OK.[View full size image] TipIf you use percentage-based values for text size and line height, users can increase the text size for improved readability through their browsers, if necessary.With these CSS additions, Contribute users can no longer change most of the attributes in the Page Properties dialog box; the page title and encoding type are still modifiable, as are the margins (the values assigned to the CSS margins are displayed, however). The next phase of our CSS style creation is devoted to creating a class that will appear in Contribute's Style drop-down list.TipAnother route to blocking the page properties from being changed in Contribute is to lock the <head> region of your page in a template with only an editable region nameddoctitle around the document title. |
| 6. | Choose New CSS Style from the CSS Styles panel to open the dialog box. Select the Class type selector and enter .copyrightInfo; click OK to proceed.When naming classes, the goal is to be as unambiguous as possible. The initial period in front of the name designates the style as a class. Next, you'll give the copyright line a distinctive look with a special font, as well as a bottom border that stretches the width of the containing <div> tag. |
| 7. | In the Type category of the Style Definition dialog box, choose Courier New, Courier, mono from the Font list. Select the Block category and choose block from the Display list.In the Border category, deselect each of the Same for All options; and set the bottom borderto solid, 1 pixel, dark blue (#000066). Click OK to confirm your choices.You'll see the effects of this style rule in just a moment; one last class is left to define. In addition to explicitly defined classes, Contribute also displays implicitly defined ones. An implicitly defined class is one that's declared in the context of defining another selector. For example, a style rule for .legalNotice strong affects the <strong> tag within any block element with a class of .legalNotice, even if .legalNotice is not individually declared. |
| 8. | Select New CSS Style and choose the Advanced selector type option in the New CSS Style dialog box. Enter the descendent selector .legalNotice strong in the Selector field and click OK to begin defining it. In the Type category of the Style Definition dialog box, set the Color attribute to red (#FF0000) and click OK.Before you can see the effects of these style sheet changes in Contribute, you need to save and transfer the files to the remote site. |
| 9. | Choose File > Save All to save both the current page and the attached style sheet. When the operation is complete, choose Check In from the File Management menu on the Document toolbar. If Dreamweaver asks whether you want to include dependent files, click Yes.Now that you have set up controls in Dreamweaver for the text and page properties, take a look at what the Contribute user will experience when styling her Web page. |
| 10. | In Contribute, select Choose. In the Choose File from Website dialog box, expand first the site root and then the depts folder. Within the depts folder, expand the maternity folder, and open goinghome by selecting it and clicking OK.The first thing you'll notice is that the page in Contribute's built-in browser looks almost the same as it does in Dreamweaver MX 2004. Because you checked in the file from Dreamweaver, you're ready to edit it in Contribute. |
| 11. | Select Edit Page to begin modifying the page. Choose the Style list to verify that both classes added (.copyrightInfo and .legalNotice) are available. Scroll to the bottom of the page and select the entire line, "Copyright © 2004 Bounty General, Inc." From the Style list, choose copyrightInfo. In the document, select the paragraph above the copyright line that starts with the words "Legal Disclaimer" and apply the legalNotice style from the Style list.[View full size image] Applying the .copyrightInfo style changes the font as well as adding an extended bottom border. Applying the legalNotice style brings a different change: The bold word turns red. To conform with modern Web practices, marking a word or phrase as bold actually uses the <strong> tag, and (as shown in the previous step 8) you defined the <strong> tag within a legalNotice class element to be red. |
| 12. | Choose Publish to put the revised page and style sheet on your site. View the page in the Contribute browser to verify the style changes.Let's recap the key points of this section:Contribute displays classes (both explicitly and implicitly defined) and headings in the Style list when in Edit mode.Define classes with meaningful names that indicate their use.Define CSS styles for the <body> tag's key attributesincluding font, background color, and marginsto prevent them from being accessible by Contribute users. |
![[View full size image]](/image/library/english/13879_04inf04_alt.gif;380137){kind=link}
![[View full size image]](/image/library/english/13879_04inf05_alt.gif;380137){kind=link}