| Although the term templates has a very specific meaning in Dreamweaver, it's a bit more general in Contribute. In addition to supporting Dreamweaver templateswhich have locked and editable regions and are updateableContribute also has the capability to create pages from non-Dreamweaver templates. Non-Dreamweaver templates resemble cookie-cutter molds in that they provide a copy of a basic static Web page without any of the Dreamweaver template's special features. Contribute includes a great number of these non-Dreamweaver templates found under the Starter Web Pages category of the New Page dialog box. The Starter Web Pages group is organized by themes. The Basic Pages theme includes more than 60 CSS-styled pages for common content, such as résumés, meeting notes, and calendars. All the other themesBusiness, Community, Online Catalog/Store, Personal and Professional Servicesare composed of about 40 different sites, each of which includes five or more professionally designed pages. These sites are intended to be used as complete starter sites for small businesses, so they probably cannot integrate into your own designs. However, the Basic Pages theme includes numerous useful pages, simply designed. In this lesson, you'll learn how to integrate content from the Basic Pages theme into your own Dreamweaver template. In the previous exercises in this chapter, you always created a template in Dreamweaver and published it to Contribute. This exercise takes a slightly different tack and begins by creating a new page (a calendar) in Contribute and then bringing it into Dreamweaver for integration. A preliminary step is necessary to ensure the smooth integration of a non-Dreamweaver template into a standard Dreamweaver template. All the pages in the Basic Pages theme use an external CSS file. Normally, these files are stored in the same folder as the newly created page. In this sample site, however, all CSS files are stored in a folder called css in the site root. Almost all CSS management is typically handled in Dreamweaver, so you probably won't have assigned a file storage location for .css files in Contribute at this pointthat's your first task. 1. | In Contribute, choose Edit > Administer Websites > Design_Deploy. When the Administer Website dialog box opens, make sure that the Administrator role is chosen and select Edit Role Settings.
If you're following the lessons in this book in order, you'll remember having previously set up some file locations in Lesson 5. As in that lesson, you're choosing to modify the Administrator role for demonstration purposes only. In the real world, you could modify any other role, such as Writer.
| 2. | Click the File Placement category. Click Add to open the enhanced File Placement Rule dialog box. Enter .css in the File Type Extensions box. Select the "Specific folder on your website" option and click Choose. Navigate to the css folder; open that folder and click Select "css". When you're done, click OK once to close the File Placement Rule dialog box, click OK again to close the Edit "Administrator" Settings dialog box, and then click Close to end the Administer Website session.
Now when the CSS file is stored on the site through Contribute, it will automatically be saved in the CSS folder.
| 3. | From Contribute's main toolbar, click New Page. Under the Design_Deploy site, expand the Starter Web Pages entry first and then its subcategory, Basic Pages. Open the Calendars category and select October 2004. Enter Oct 2004 Events in the Page Title field and click OK to create the page.
 The page is very plain and styled only with CSS, with no graphics at all. Plain pages like this are far easier to fold into a pre-existing template design. But before you get to that stage, carry the simulation a step further and add some content to the new page.
| 4. | Place your cursor in the calendar cell under October 8 and enter this event listing: Bounty General 10th Anniversary; party TBA. Under October 27, insert the following text: Interdepartmental bowling tournament. Click Publish when you're done; if Contribute warns you that the page is unlinked, click Yes to continue. In the Publish New Page dialog box, leave the suggested filename and select Choose Folder. Double-click the company folder to enter it and click Select "company" when the button is available. When the Publish New Page dialog box is displayed again, click Publish.
It's important that the page be published, for two reasons. First, if the page were kept as a draft, the associated CSS file wouldn't be published to the server. Second, only published pages can be opened in Dreamweaver through Contribute's Edit Page Source in External Application command.
| 5. | After the page has been published, choose File > Actions > Edit Page Source in External Application. After Contribute displays the message that the page is currently being edited in Dreamweaver, switch to Dreamweaver.
So far, you have used only templates to generate child pages and then modify the editable content, but templates can also incorporate existing HTML pages. By applying a template to a Web page, you can merge the template's locked regions and the standard page's content. The restrictions are pretty tight, however. All body content in a static page must be placed in a single editable region in the body; likewise, all head content must go in an editable region in the head.
Designers just starting out with templates are often frustrated because they don't understand the limits for applying them. There are two keys to integrating a standard page and a template. First, the standard page should be pure body content without logos, navigation bars, or page footers; any of these nonbody types of elements are certain to be superfluous and need to be deleted. Second, the template used should have an editable region designed to hold the expected content. Again, this is design-time work, and a single editable region is not out of place here.
Applying a template to an existing page is a two-part process. The first part, actually applying the template, can be as simple as drag-and-drop. The second partdesignating where content on the page should appear in the templateis a bit more work, but Dreamweaver has a special interface designed to handle the chore: the Inconsistent Region Names dialog box.
| 6. | With the newly imported calendar page displayed in Dreamweaver, select the Templates category of the Assets panel. Drag the template named general onto the calendar page and release it. When the Inconsistent Region Names dialog box opens, select the Document body entry. From the "Move content to new region" list, choose mainContent. Next, choose the Document head entry and select head from the drop-down list. Click OK when you're ready.
The template is now applied to the content, and the calendar fits nicely on the page; even the CSS file attached to the calendar is incorporated. The new calendar page is ready to be put back online.
Keep in mind that the page was originally sent from Contribute to Dreamweaver for editing. The procedure for publishing the revised page is therefore different from the normal Put or check-in of files. In this situation, you simply save the file in Dreamweaver and then publish it in Contribute.
| 7. | In Dreamweaver, choose File > Save and then select File > Close. Switch to Contribute and click Publish. If you receive a warning about unlinked files, click OK to acknowledge it.
You may have noticed that before you published the page in Contribute, several other options were available. You could reopen the page for editing in Contribute, or send it back to Dreamweaver.
|
|
