| This has been a big project, but you're in the final stages. In this section, you'll apply the newly defined CSS and begin to add content to the events table. Next, you'll apply a second repeating region to add even more flexibility to your design. Finally, you'll save the page in Dreamweaver, post it to the remote site, and test in Contribute. 1. | Place your cursor in the top cell of the table and enter the heading EVENTS. From the Property inspector's Style list, choose eventHeading to format the cell. In the table's bottom cell, enter this text: Info at x4523. Again, choose eventHeading from the Style list.
Events listings are slated for the two middle cells. Let's first format the cell already wrapped in a repeating region.
| 2. | Place your cursor in the eventListing editable region, and choose eventListing from the Property inspector's Style list.
The remaining cell will contain a reference to an ongoing eventa concertfollowed by bulleted list description. To maintain a consistent layout while allowing for changes in the calendar from month to month, we'll use a combination of editable regions and repeating region.
| 3. | Place your cursor in the cell underneath the Events header and, from the Property inspector's Style list, choose eventListing. In the same cell, enter the following text:
Concerts Every Friday at 7:30 in Auditorium
Press Enter (Return) to create a paragraph and, from the Property inspector, select Unordered List. In the table cell, enter this placeholder text: DateMusic Type. Press Enter (Return) and then enter the same text again.
Tip You might find it necessary to temporarily turn off the Invisible Elements by choosing View > Visual Aids > Invisible Elements so that you can see the table cell clearly. If you do, be sure to repeat the step to toggle the Invisible Elements back into view. At this point, you should see a brief paragraph description followed by two bulleted list items. The next step is to add editable regions to each of the list items.
| 4. | Select the text in the first bullet and from the Insert bar's Common category, choose Templates: Editable Region. In the New Editable Region dialog box, enter firstConcert as the Name and click OK. Select the text from the second bullet and follow the same procedure to create a new editable region; name this region moreConcerts.
With this design, there will always be at least one bullet item. All remaining bullets are to be generated from the second editable region, which you will enclose in a repeating region in the next step. To ensure exact placementand to compensate for an undesired Dreamweaver actionit's best to apply the repeating region while in Code view.
| 5. | Place your cursor in the moreConcerts editable region and select the <li> tag in the Tag Selector. Switch to Code view and choose Templates: Repeating Region. In the New Repeating Region dialog box, enter Concerts and click OK. In addition to the code for the repeating region, Dreamweaver also adds a closing </ul> and an opening <ul> tag. Locate these two newly added tags above the following template comment and remove them:
<!-- TemplateBeginRepeat name="Concerts" -->
Dreamweaver adds the </ul> and <ul> tags to create two separate unordered lists. Because we want to maintain a single unordered list, those tags must be deleted.
In Design view, you should now see three editable regions and two repeating regions.
Tip To see what the page looks like without the template region borders and tabs, select View > Visual Aids > Invisible Elements so that there is no checkmark next to Invisible Elements. All of your hard work is about to pay off; we're ready to put the necessary saved files onto the remote site for testing in Contribute.
| 6. | From the main menu, choose File > Save All; if Dreamweaver alerts you to the editable region inside of a block tag, click OK. While hr_newsletter.dwt is the current document, select Put from the File Management button on the Document toolbar. If the Dependent Files dialog box opens, click Yes. In the Files panel, expand the css folder if necessary. Select the bg_filter.css file and click Check In.
With the combination of editable and repeating regions, there's a lot more to test in Contribute now, so let's get started.
| 7. | In Contribute, click New Page. If you had Contribute open while working in Dreamweaver,click Refresh Templates when the New Page dialog box opens. Expand the Templates folder under the Design_Deploy site and select hr_newsletter. In the Page Title field, enter Test Page and click OK.
As with the view of the template in Dreamweaver, you'll notice the various repeating and editable regions in the Events table. You'll also see, for the first time, the mini user interface above each of the repeating regions. Let's work in the calendar section first.
| 8. | In the firstConcert editable region, replace the placeholder text with this text: 11/5 - Jazz.In the moreConcerts editable region, delete the placeholder text and insert 11/12 - Bach. Inthe Repeat: Concerts editable region, click the Add (+) button to add another instance of the repeating region below the current cursor position. In the new instance of the moreConcertseditable region, press Delete to remove the highlighted text and enter 11/19 - Holiday Choir.
 Just as you add new instances of a repeating region by clicking the plus sign in the mini user interface, click the minus sign to remove the currently active instance. An instance is considered active if the cursor is inside the region instance. All repeating regions work in the same way, whether they were manually applied (like Repeat: Concerts) or inserted automatically (like Repeat: Events).
| 9. | Select the text in the editable region labeled eventListing (within the Repeat: Events region) and delete it. In its place, enter the following text: 11/24 - Thanksgiving staff celebration. In the Repeat: Events interface, click Add (+) to create another event instance. Replace the placeholder text with this content: 11/9 - Ethics in Medicine lecture. With your cursor still in the Ethics in Medicine instance, click the up triangle.
 The two buttons on the right of the mini user interface are for reordering repeating instances. The down triangle moves the active instance below the next instance, and the up triangle puts the active instance above the preceding instance.
To see what the page looks like without the template region borders and tabs, you either have to publish or preview the page. Because we're just testing this page, let's preview it.
| 10. | Choose File > Preview in Browser. Contribute informs you that the preview will be placed in a temporary folder on the site and removed when no longer needed; click OK to acknowledge. Review the page in your browser after Contribute finishes posting it. When you're done, close the browser. In Contribute, click Cancel. Confirm that you want to delete the new page by clicking Yes when prompted by Contribute.
|
 Although inserting repeating regions is a somewhat detailed and meticulous task, consider the alternative. If the entire Events area were left open to be modified in one large editable region, how many Contribute users do you think would be technically savvy enough to successfully add new events in the proper format? |
