Creating Style Guides


Throughout this book, you looked for ways to help the Contribute user achieve a desired result. Templates expose only certain editable areas while locking others; settings in the role definition limit the size of images; and shared assets allow only specific resources to be included into pages. However, there comes a time when you have to expect that the content contributor will be on her own to create new pages with a great deal of information. Naturally, you want to support the user and continue to help her produce material that's appropriate.

One of the most helpful tools that you, the designer, can offer to a content contributor is a style guide. In the world of print, a style guide is a document that depicts and/or describes how the publisher wants an author to format content. The same style-guide concept translates very well to the Web. The user can see exactly what's expected, and the style guide can easily be printed through the browser if necessary.

To give you an idea of how to develop a style guide, let's create a simple one for the Bounty General site and then set it up in Contribute for easy retrieval.

1.

In Dreamweaver's Files panel, expand the admin folder and double-click style_sheet.htm to open it.

To save you some data entry, your lesson files for this book include a prepared sheet that includes the descriptions of major styles commonly used in the site. To make this style guide more useful, you need to apply the actual styles to the descriptions.

2.

Place your cursor in the Heading 1 description and choose Heading 1 from the Format list. Move your cursor to the Heading 2 description and choose Heading 2 from the Format list. Put your cursor in the firstParagraph description and select firstParagraph from the Style list. Leave the Normal description as is; with your cursor in copyrightInfo, choose that style name from the Style list. Finally, place your cursor in the legalNotice description and select legalNotice from the Style list.

Tip

Your style sheets should be informative and easy to understand. By applying the style to the descriptions, your users will get a clear picture of what's expected of them and why.

3.

Choose File > Save to store the modified file. From the Document toolbar, choose File Management > Put. If Dreamweaver asks whether you want to include the dependent files, click Yes.

Contribute includes a very handy feature that's often overlooked: bookmarks. The bookmark feature in Contribute works the same as Favorites in Internet Explorer or bookmarks in other browsers. In fact, every time Contribute launches, it automatically imports your bookmarks from Internet Explorer. As you'll see, bookmarks are especially useful for noting pages for quick access.

4.

In Contribute, select Home Pages > Design Deploy from your main toolbar. Click Choose to open the Choose File on Website dialog box; when it opens, expand the site root first and then expand the admin folder. Double-click style_sheet.htm to open it. After the page is displayed, choose Bookmarks > Add Bookmark; when the Add Bookmark dialog opens, verify that Bounty General Style Sheet is listed in the Name field. Click OK.

If you look under the Bookmarks menu now, you'll see that the Bounty General Style Sheet has been added. As a custom bookmark, it will always be available until removed.



Design and Deploy Websites with Macromedia Dreamweaver MX 2004 and Contribute 3(c) Training from the Source
Design and Deploy Websites with Macromedia Dreamweaver MX 2004 and Contribute 3: Training from the Source
ISBN: 032128884X
EAN: 2147483647
Year: 2006
Pages: 130
Authors: Joseph Lowery

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