Design and Deploy web sites with Macromedia Dreamweaver MX 1002004 and Contribute 3 training from the source [Electronic resources]

1.

In Dreamweaver's Files panel, expand the Templates folder if necessary and double-click life_lessons.dwt to open it for editing.

[View full size image]

This template design is pretty far along. The basic page layout is complete, with the introductory placeholder text used to explain the navigation process to the Contribute user. The sequential text links are also in place, although hashmarks (#) are used temporarily for the href attribute.

The first step in creating custom template expressions is to insert the associated template parameters.

2.

In Code view, locate the closing </head> tag, place your cursor just before it, and press Enter (Return). Add the following code:

<!-- TemplateParam name="pageName" type="text" value="infant_feeding" -->
<!-- TemplateParam name="pageNumber" type="number" value="1" -->
<!-- TemplateParam name="totalPages" type="number" value="10" -->

Note

Make sure not to place these template parameters in an editable region.

Extensibility is the basic concept behind defining a pageName template parameter with a default name. This template will be suitable for the series of tutorial pages on infant feeding. If you as a designer need to create another series, for, say, child's play, you can just change the pageName and totalPages default values, modify the body somewhat, and save the template under another name.

Note

The totalPages template parameter will be used to hide the link to the Next page when it's no longer desired.

3.

Switch to Code view and place your cursor in the link at the top right of the page for the Previous page. In the Property inspector, insert this code into the Link field:

@@(pageName + (pageNumber - 1) + '')@@

Select the Next link and, in the Property inspector's Link field, enter this code:

@@(pageName + (pageNumber + 1) + '')@@

Entering the code in the Link field inserts it directly into the desired href attribute with no additional encoding necessary. When evaluated in child pages, these template expressions will link to the page before and the page after the current page, as noted in the template parameters.

[View full size image]

Another template expression is added to the page to help orient users both at design-time and run-time.

4.

Select the first X in the phrase "Lesson X of X" and switch to Code view. Press Delete to remove the placeholder letter, and enter the following code:

@@(pageNumber)@@

Delete the second X in the phrase and enter this code:

@@(totalPages)@@

With Invisible Elements enabled, you'll see the template expression symbols. In the child pages, this will translate into the current page number and total page count in the current lesson for both the Contribute user and the Web page visitor.

Note

Template expressions can only be inserted directly into the code; they can't be entered via Design view.

The next task on this page is to make your navigation links a little more user-friendly. Currently, if the user is looking at the first page in the series and clicks the Previous link, she'll get an error because pageName0 doesn't exist. The same experience awaits the user on the last page of the tutorial series when she clicks the Next link. To avoid both those problems, you'll apply optional regionspowered by template expressionsthat hide those links when they're not needed.

5.

In Design view, select the text for the Previous link and its trailing hyphen (that is, Previous -). From the Insert bar's Common category, choose Templates: Optional Region. When the New Optional Region dialog box opens, click the Advanced tab. Select the Enter Expression option and enter this code in the associated area:

pageNumber != 1

Click OK when you're done. Next, select the Next link and its preceding hyphen (that is, - Next) and again choose Templates: Optional Region. On the Advanced tab, select the Enter Expression option and insert this code in the associated area:

pageNumber != totalPages

Click OK to complete the operation.

[View full size image]

Naturally, all the placeholder content on these pages needs to be replaced with actual content, but you can see how the navigation system works. To test the Next optional region, edit either created page and then change the pageNumber template parameter to 10. Whether you click Apply or OK, the Next region should disappear.