| Templates have been around longer than Contribute, which means that there are a lot of old-style, single contentregion templates in use. The process to convert these legacy templates to Contribute-ready ones is different from what you might think. It's not really feasible to change a single editable region into numerous, more discrete ones. Although it's not difficult when working on the template itself, the difficulty occurs when the altered template is saved and the child pages need to be updated. The content in the existing editable region can go only in another single regionand if the new template uses multiple editable regions, none will be suitable. The alternative is to create a new template based on a child page of the old template. The first major step is to detach the child page from the original template; this action keeps the basic content but removes all template markup. From there, the page is saved as a template and new editable regions are defined. In addition to demonstrating how to detach a template and then rebuild it, this procedure includes some advanced techniques for editable regions. 1. | From Dreamweaver's Files panel, expand the company folder in the site root and double-click deanletter0804.htm to open it. Choose Modify > Templates > Detach from Template.
 Dreamweaver immediately detaches the child page from the template; in doing so, it removes all template-based markup from the page. Why not just save the child page as a template with a different name? As you'll see later in this lesson, that's the process used to create a nested templatewhich doesn't have the desired effect.
| 2. | Choose File > Save As Template. When the Save As Template dialog box opens, enter dean_letter_v2 as the name for the new template. Click OK when you're done. When Dreamweaver asks whether you want to update links, click Yes.
The next step is similar to what you've done before, marking editable regions for both body text and headings.
| 3. | Select the date August, 2004 at the top of the letter. From the Insert bar's Common category, choose Templates: Editable Region. Enter dateMonthYear in the Name field when the New Editable Region dialog box appears. Click OK when you're done. Change the selected text within the region to Month, Year by entering the new text first and then removing the placeholder text.
Note You should avoid highlighting the entire placeholder phrase in this case because Dreamweaver tends to also select and delete the surround tag (in this case, a <p> tag). In the preceding exercise, you saw how you could carefully select the contents of a heading tag to create an editable region. This type of selection is not feasible when the surrounding tags are <p>…</p> tags because Dreamweaver always automatically expands the editable region to include the opening and closing <p>…</p> tags. To get the desired effect, you have to physically manipulate the code.
| 4. | Select the newly entered placeholder text and switch to Code view. Highlight the opening <p> tag and drag it in front of this template code:
<!-- TemplateBeginEditable name="dateMonthYear" -->
This action effectively cuts and pastes the <p> tag. Now select the closing </p> tag and drag it after this template code:
<!-- TemplateEndEditable -->
The completed code block should look like this:
<p><!-- TemplateBeginEditable name="dateMonthYear" --> Month, Year <!-- TemplateEndEditable --></p>
Continue now by adding two editable regions for the body text.
| 5. | In Design view, select the paragraphs under the Welcome heading. Select Templates: Editable Region from the Insert bar's Common category and name this editable region welcomeText. Replace the existing text with this placeholder text:
Type text of welcome paragraphs here. Use several short paragraphs of an appropriate length. Type text of welcome paragraphs here. Use several short paragraphs of an appropriate length.
 Although you're repeating the message in the placeholder text, using two paragraphs instead of one ensures that <p> tags are used. It also has the added benefit of filling out the page a bit more and approximating the final look.
Note Enter the text manually; don't cut-and-paste it, or you won't get the <p> tags. | 6. | Select the paragraph below the heading Capital Growth Fund and choose Templates: Editable Region. When the New Editable Region dialog box appears, enter capitalFundText in the Name field; click OK to close the dialog box. Replace the existing text with the placeholder text:
Type text on capital growth fund here. Use several short paragraphs of an appropriate length. Type text on capital growth fund here. Use several short paragraphs of an appropriate length.
Tables are a particular challenge when it comes to editable regions. Again, the key is in the selection. You want to make sure that you're selecting just the content within a <td> tag. If the editable region wraps around a <td> or <tr> tag, you risk that your Contribute users will accidentally remove part of the table structure.
| 7. | Within the table, select each of the figures under the Participation and Funds Donated columns and create a separate editable region per the following table:
Selection | Editable Region Name |
|---|
34% | maternityParticipation | 38% | obstetricsParticipation | 56% | pediatricsParticipation | 27% | surgeryParticipation | 38.75% | averageParticipation | $76,234 | maternityFunds | $82,985 | obstetricsFunds | $77,005 | pediatricsFunds | $145,032 | surgeryFunds | $381,256 | totalFunds |
Although the initial application of the individual editable regions is tedious, it's time well spent. Your business users can now alter only the figures in the table, not the table structure itself or its format. You'll discover another benefit of applying editable regions in a table in this manner when you test the page in Contribute.
 | 8. | Choose File > Save to save the template. When Dreamweaver alerts you to the editable region inside of a block element, click OK to acknowledge. From the Document bar's File Management menu button, choose Check In to publish the page to your remote site. If asked whether you want to upload dependent files, click Yes.
Again, take the template for a test drive in Contribute to make sure that everything is as expected.
| 9. | Switch to Contribute and click New Page. When the New Page dialog box opens, click Refresh Templates to make sure that you have the latest versions. Expand the Templates folder under the Design_Deploy site and select dean_letter_v2. In the Page Title field, enter Test Page and click OK.
The date and body text areas of the new page should be completely editable, as shown before. The more interesting editable areas are those within the table.
| 10. | Select the value in the maternityParticipation editable region and replace it with another percentage value, such as 43%. Press Tab to move to the maternityFunds editable region, and replace that selected value with a dollar amount, such as $81,050. Press Tab to move to the next editable region and continue replacing the placeholder values. When you're done trying out the page, click Cancel. When Contribute asks whether you're sure you want to remove the draft, click Yes.
 Replacing content in a table with properly set up editable regions is extremely straightforward for the user. The editable regions can easily be navigated, much like a form.
|
|
