Building Template Navigation Links


The preceding section showed how template expressions could be used to code elements within a page automatically. In this section, you'll see how template expressions can be applied to create navigation links among Web pages. Most pages within a site are linked from a variety of other pages to create the interconnectedness of a true web. Certain sections of a site, however, are intentionally linked from one page to the next in a series. Sequential navigation is a real boon for tutorials and extended articles. However, creating such links to the previous and next pages is a burdensome and error-prone taskunless you build your links with template expressions.

The exact procedure for creating sequential links with template expressions varies according to your site structure and requirements. In the following example, two separate template parameterspageName and pageNumwill be created in the template. For each series of tutorials, the Contribute user needs to change only one value: pageNum. The values of those template parameters will then be programmatically combined in the template expressions to automatically build the href attribute for the actual links.

1.

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

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) + '.htm')@@ 

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

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

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.

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.htm 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.

Note

You don't have an option in namingDreamweaver just picks up the expression as the name.

The first optional region you inserted is now set to display only if the pageNumber template parameter is not equal to 1; when the current page is the first page, the Previous link disappears. The second optional region, on the other hand, is hidden if the current page (pageNumber) is the same as the total number of pages (totalPages), thus removing the Next link on the last page of the tutorial series.

The hard work is done. Time to move everything over to Contribute for testing.

6.

Choose File > Save to store the template file; when Dreamweaver alerts you to the editable region placed inside a block element, click OK. From the Document toolbar, choose File Management > Put; if asked whether you want to upload dependent files, click Yes.

To test this template thoroughly, a slightly different procedure needs to be followed. Instead of just creating a single test page in Contribute, you'll need to create a minimum of two pages. Moreover, to fully experience them, you'll need to publish the pages and test them in the browser.

7.

In Contribute, click New Page. If you've 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 life_lessons. In the Page Title field, enter infant_feeding1 and click OK.

The entire area you've been working on in this lesson is locked, so it appears much as the end user will see it, without template regions or Invisible Elements. This first page in the series uses the default values, sofor our test purposesit's ready to be published.

8.

Click Publish; when Contribute warns you that the page is unlinked and asks if you want to proceed, click Yes. In the Publish New Page dialog box, click Choose Folder. When the Choose Folder dialog box is shown, open first depts and then pediatrics; click pediatrics. On your return to the Publish New Page dialog box, click Publish. If Contribute congratulates you on your accomplishment, click OK.

Now you're ready to build the next page in the series.

9.

Follow the procedure in step 7 to create a new page with the Page Title of infant_feeding2; click OK when you're done.

Of course, the navigation links on this page need to be modified before it can be published.

10.

Click the Template Properties link in the message bar. When the Template Properties dialog box opens, select the pageNumber entry and change the value from 1 to 2. Click OK to confirm the update.

Some gratification is immediate: The optional regions, as well as the current page number display, all seem to be working as designed. However, you won't know whether the links are working until you publish the page.

11.

Click Publish, again choosing Yes when notified about the unlinked page. You won't need to specify the folder again because Contribute remembers the last directory chosen. In the Publish New Page dialog box, click Publish to complete the process.

Testing your pages couldn't be easieryou don't even have to preview them in a browser!

12.

With infant_feeding2.htm displayed in the Contribute browser, click the Previous link. When infant_feeding1.htm appears (and the Previous link disappears), click Next to move to the next page in the sequence.

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.



Design and Deploy Websites with Macromedia Dreamweaver MX 2004 and Contribute 3(c) Training from the Source
Design and Deploy Websites with Macromedia Dreamweaver MX 2004 and Contribute 3: Training from the Source
ISBN: 032128884X
EAN: 2147483647
Year: 2006
Pages: 130
Authors: Joseph Lowery

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net