| Under certain conditions, what you see is not what you get. Take, for example, the case of dynamically loaded style sheets. Many developers use JavaScript or application server code to include the proper CSS file for the currently visiting browser. With this system, when someone comes to the site on a Macintosh using Safari, one style sheet is used; a different CSS file is included when another person visits using Internet Explorer 5.5 on Windows. Such a page environment is great at run-time: Everyone gets the Cascading Style Sheets optimized for their platform and browser. What about at design-time? Neither Dreamweaver nor Contribute can display dynamically allocated style sheets in their standard editing mode. How is the content contributor expected to style pages correctly if no CSS styles are available? Contribute incorporates an advanced feature that solves this problem: design-time style sheets. In Dreamweaver, you can set up any number of CSS style sheets to be included and rendered during the design phase. The code to show the design-time style sheets is not actually written into the page, so it is not interpreted by the browser. Likewise, you can also hide any given style sheet during design-time. Beginning in Contribute 3, design-time style sheets assigned in Dreamweaver are rendered as expected when the pages are edited in Contribute. Design-time style sheets can also be used to expose conditional page regions, concealed by default. One example of this technique is to create a style rule named .memberContent, which is applied to text that only members of the site are intended to see. At run-time, logged-in members would be served the correct style sheet. The use of a design-time style sheet that overrides the CSS property display, so that it is set to block rather than hidden, displays paragraphs styled as such and allows them to be edited in Contribute. In the following steps, you'll attach a general design-time style sheet so that your users view the page properly while editing, and then add a separate style sheet to reveal hidden content. 1. | From Dreamweaver's Files panel, expand the site root and the depts folder. Open the pt folder and double-click the index.htm file to open it.
No style sheet has yet been attached to this page. Eventually, another member of the Web team will add the necessary dynamic code for serving the proper CSS. However, to work with the page easily, both here and in Contribute, a design-time style sheet is needed.
| 2. | In the CSS Styles panel, select the Options menu in the panel group's menu bar and choose Design-time. When the Design Time Style Sheets dialog box appears, click Add (+) above the "Show only at design time" list. In the Select File dialog box, navigate to the css folder in the site root and choose bg_ct.css. Make sure that the Relative To option is set to Document rather than Site Root. Click OK once to close the Select File dialog box and again to close Design Time Style Sheets.
 The content is quickly laid out and formatted according to the style sheet. The paragraph for members vanished when the design-time style sheet was applied; the content is inside a <div> tag with a class of .memberContent that has a display property set to hidden. You'll now create a special style sheet to reveal that content.
| 3. | Choose File > New to open the New Document dialog box. Select the Basic category from the left column and CSS in the right column. Choose Create to make the new page. Select File > Save; when the Save As dialog box appears, navigate to the css folder in the site root and save the file as bg_member.css.
A separate CSS file is used to specifically set a style that will normally be set dynamically. You don't want to modify the general CSS file, bg_ct.css, because it's attached to other pages.
| 4. | From the CSS Styles panel, select New CSS Style to begin the defining process. In the New CSS Style dialog box, make sure that the Selector type option is set to Class and enter .memberContent in the Name field. Click OK when you're ready. When the CSS Style Definition dialog box opens, click the Block category. From the Display list, choose Block and click OK.
One final element is necessary to make sure that our newly added style rule is adhered to, regardless of the order applied. The key word !important ensures that an attribute's value takes precedence over any other rules applied to the same selector.
| 5. | In the CSS document, place your cursor after the code display: block, but before the closing semicolon. Enter the keyword !importantbe sure to include the initial exclamation mark. When you're done, choose File > Save to store the file.
Let's put to use the CSS file just constructed, by adding it to the design-time style sheet.
| 6. | From the CSS Styles panel, choose Design-time from the Options menu. In the Design Time Style Sheets dialog box, click Add (+) above the "Show only at design time" list. When the Select File dialog box appears, select the just-saved bg_member.css in the css folder. Click OK once to close the Select File dialog box and again to close Design Time Style Sheets.
Your final task in Dreamweaver is to put all the necessary files on the remote site.
| 7. | From the Files panel, select all three files that you've been working with (index.htm in the pt folder, and bt_ct.css and bg_member.css in the css folder) and choose Check In. When the Dependent Files dialog box opens, click Yes to ensure that all files are published.
In addition to transferring the selected files, Dreamweaver is also automatically copying the Design Notes files. These files, hidden in _notes folders and ending in the file extension .mno, are generally used to hold information about their associated files. In this instance, they also contain design-time CSS detailsdetails that can now be applied in Contribute.
| 8. | In Contribute, select Choose. Navigate to the pt subfolder in the depts folder and select index.htm. Click OK to open the file in Contribute's browser; note that no CSS is applied. Choose Edit to open the page for modifying. Place your cursor at the end of the second paragraph that begins, "A free class…" and add this sentence: Please call x5522 to reserve a place. Select Publish to post the altered page to your site.
|
 In our imaginary work scenario, the Web team developer next takes the current page and adds the server-side logic for inserting style sheets. Design-time style sheets smooth the workflow by allowing the content contributor to work independently of the developer (and vice versa). |
