Designating Repeating Regions | Design and Deploy Websites with Macromedia Dreamweaver MX 2004 and Contribute 3: Training from the Source

So far, you've seen how editable regions allow content to be changed within a marked area and how optional regions are used to insert or remove a block of HTML. Dreamweaver's third type of template region is the repeating region. As the name implies, content within a repeating region can be duplicated, much like the repeat region server behavior copies and displays a marked area for each item in a recordset. The difference between the two comes down to design-time versus run-time. Template repeating regions are managed by the designer at design-timewhether in Dreamweaver or Contributewhereas the repeat region server behavior is handled by the application server at run-time.

When a repeating region is viewed in a child page at design-time, Dreamweaver displays a mini user interface above the marked area, in addition to the familiar border and tab. The mini user interface has four buttons: Add, Remove, Up, and Down. This interface is visible only at design-time and does not display in the browser.

Repeating regions in a template are typically a mix of both locked and editable content. Generally, a repeating region is applied to a table row, although it can be used with any repeating element, such as a list item. Wrapping a repeating region around an HTML element is much like applying an editable region; the only interaction is to provide a name for the repeating region. Within the repeating region, one or more editable regions are then created. The goal is to leave the outer structurethe <tr> and <td> tags, for examplein the locked area so that the structure remains the same while the enclosed content is changeable.

Repeating regions are so commonly combined with table rows that Dreamweaver includes a special object to hasten the process. The Repeating Table object inserts a user-defined table in which designated rows are wrapped in a repeating region. Each table cell within the repeating region includes an automatically named editable region. You'll work with a Repeating Table object in the following lesson in addition to applying a separate repeating region.

From Dreamweaver's Files panel, expand the Templates folder. Double-click hr_newsletter.dwt to open it for editing.

The task in this lesson is to add an events column to the Human Resources published newsletter template. All the events will be included in a table; as the number of events varies from month to month, the repeating region is a perfect tool to create a design-time configurable layout. The events table will be placed beneath the primary navigation bar.

Select any of the main buttons in the main navigation bar on the left side of the page. In the Tag Selector, select the <table> tag and press the right arrow key once. Press Enter (Return) twice to position the cursor below the navigation bar.

The events area will initially include a header, two content cells, and a footerall one column wide. The Repeating Table object allows the designer to specify where the repeating region starts and where it stops. In this case, only the second content cell will have a repeating region applied.

From the Insert bar's Common category, choose Templates: Repeating Table. In the Insert Repeating Table dialog box, set the following fields as shown:

Rows	4
Cell padding	3
Columns	1
Cell spacing	0
Width	152 pixels
Border	0
Repeating rows of the tableStarting row	3
Repeating rows of the tableEnding row	3
Region name	Events

After you enter all the desired values, click OK.

The table that is created matches the width of the navigation bar (152 pixels) but is otherwise distinguished by the special template regions automatically created. The third row includes an automatically named editable region within the <td> cell. The table row tag is wrapped by a repeating region. In Design view, you'll see the template region border and tab designating the repeating region. If you look at the code, you'll see this syntax:

 <!-- TemplateBeginRepeat name="Events" -->  <tr>   <td>    <!-- TemplateBeginEditable name="EditRegion1" -->     &nbsp;    <!-- TemplateEndEditable -->   </td>  </tr> <!-- TemplateEndRepeat -->

As with almost all automatically generated HTML objects, a little customization is necessary to blend the editable region within the Repeating Table element into the page.

Select and delete the content (a nonbreaking space) inside the newly created editable region; replace it with the placeholder phrase New Event. From the Tag Selector, choose the mmtemplate:editable tag. In the Editable Region Property inspector, change the Name field to eventListing.

Tip

Some template regions can be tricky to select. If you find that selecting the mmtemplate:editable tag in the Tag Selector does not display the appropriate Property inspector, try clicking the tab above the region.

Although it might appear pretty obvious when you're done what content should go in the editable region, any additional clue you can provide is always helpful to Contribute users.

Save your page before continuing.