Up and Running with Frontier Web Site Management
by Matt Neuburg
Author of the book Frontier: The Definitive Guide

Prev | TOC | Next


Site Outline and NextPrev

Navigational aids

When you published the whole site and opened one of the HTML files in the browser, you probably noticed immediately that our site has a major flaw. You can't get from one page to another! We have provided no links from page to page within the site.

Frontier makes it easy to provide such links. In this chapter and the next, we'll talk about ways to do this.

It is common experience that providing readers with a good repertoire of ways to navigate your site easily and intuitively can be crucial to their experience of your Web material.

Two common aids to navigation are the site outline, where you give a table of contents whence readers can link to any page of the site, and "Next" and "Prev" links which let readers click to proceed forward back through a linear arrangement of your site. Frontier provides tools that make it easy to create both of these kinds of navigational aid.

Previous and Next links

We'll start with the NextPrev mechanism, which automatically creates "Next" and "Prev" links. The first step is to let Frontier make a list of your pages in an outline, so you can arrange them in the desired order; that's how Frontier will know what counts as "next" and "previous" for each page.

From the Web menu, choose Build NextPrev List. Frontier now forces you to type the name of your site table, which may seem rather infuriating, especially since you're probably right there in the table; but go ahead and type myFirstSite, and click OK.

You are presented with an outline showing all your site's pages.

There may also be some pages listed that don't exist at all in your site; for some reason, this routine thinks you want an "index" entry for every subtable in your site. Just delete these, since they don't correspond to anything real.

(If they do correspond to something real, you may have to correct the capitalization for them. For example, if your site is "myFirstSite" and the default.html entry ends "myfirstsite.default", you must fix this manually to say "myFirstSite.default" or things won't work later on.)

Okay, the painful part is over. Now for the fun part.

You should now have a list of three pages. Arrange it in the desired order, which in this case I suggest should put secondPage in the middle.

Now go into our #template and put in a line just before the {bodytext} line that says:

<p>{linkPrev("Previous")} | {linkNext("Next")}</p><hr>

The syntax here is fairly obvious. We are creating two macro calls; the material in quotes is the text that will actually appear in the browser, and that text will be turned into a prev link or a next link by the appropriate macro.

Now publish the entire site, and look at default.html in the browser. Click the "Next" link repeatedly to cycle through the pages of your site. You now, with very little effort, have quite a sophisticated little site; I'll leave you to play with it for a while.

Images instead of words

You probably are already dreaming of modifying the NextPrev mechanism to make it even cooler. For instance, a common question is how to make the "next" and "prev" links be from clickable graphics instead of text. It's easy; you've probably already guessed how to do it.

Suppose you have two images, called "prev" and "next". Then, in the template, all you need is lines that look, for example, like these:

<p>{linkPrev(imageRef("prev"))}
{linkNext(imageRef("next"))}</p><hr>

Room for improvement

You can probably think of lots of ways you'd like to customize this whole mechanism.

For instance, you probably think that the cyclical arrangement of the links isn't right (where the last page leads to the first, and vice versa). You'd probably prefer to prevent the "next" and "prev" links from being active if there is no next or previous page.

This isn't hard to implement with a finalfilter routine, or by creating modified versions of the linkNext and linkPrev macros, but you're going to have to write UserTalk scripts in order to do it, so this tutorial is not the place to discuss the matter further. Still, I hope you're drooling over the possibilities.

Site outline

Let's learn about the site outline feature next. Go into myFirstSite.default and add, at the end, a line which says:

{outlineSite()}

Publish the whole site, and examine default.html in the browser. You can see that links to the other two pages have been added.

But, the truth is that we aren't yet getting our money's worth out of the outlineSite macro; it is even cooler than we think. With outlineSite, we get to include a #subtext directive in each page; these will become descriptions in the outline. Try it out. To secondPage, add a line at the start which is something like this:

#subtext "Illustrating how to embed an outlined list."

And to fourthPage, add a line at the start which is something like this:

#subtext "Shows how to make a table out of an outline."

Now publish the default page again, and look at default.html in the browser. Cool, eh?

Note: the capitalization of "#title" and "#subtext" must be exactly as shown here, or outlineSite won't work.

Here are some final considerations on OutlineSite. First, you get some directives we haven't used. #siteOutlineHeadFont is where you give an entire <font> tag for the titles of the pages; for instance, the default is <font face="helvetica,arial" size=+0>. If this seems like too much for you, then don't use it; just let the default take over. #siteOutlineSubtextFont works similarly.

Also, #siteDefaultName lets you state the name of the default page. If you don't give this directive, the #defaultFileName directive (or the setting in user.html.prefs.defaultFileName) is used. Neither the stated default page nor the page we are actually rendering (if they are different) are included in the list.

Another thing is that you can hand outlineSite an argument so that it outlines a particular table rather your whole site. If you say:

{outlineSite(@user.websites.myFirstSite.someSubTable)}

then only the things in the someSubTable table will be listed.

Further arguments let you describe the resulting layout: the width (in pixels) of the resulting table, and how big (in pixels) each indentation level should be. To outline your whole site with designated values for these, you could say:

{outlineSite(maxWidth:500, indentPixels:30)}

A slight infelicity of outlineSite is that it sorts the page names alphabetically by #title. This may not be what you want. Also, the HTML that outlineSite produces is not without its faults. (It might be better if it were rewritten to use the cadillac renderer, rather than reinventing the wheel in such a clumsy way.) Nevertheless, at least it shows the sort of thing that can be done. It is not hard to write your own macro which does the sort of thing outlineSite does, but customized to suit your tastes.


Prev | TOC | Next

All text is by Matt Neuburg, phd, matt@tidbits.com.
For information about the book Frontier: The Definitive Guide, see my home page:
http://www.tidbits.com/matt
All text copyright Matt Neuburg, 1997 and 1998. ALL RIGHTS RESERVED.
No one else has any right to copy or reproduce in any form, including electronic. You may download this material but you may not post it for others to see or distribute it to others without explicit permission from the author.
Downloadable versions at http://www.ojai.net/matt/downloads/webTutorial.hqx and http://www.ojai.net/matt/downloads/webTutorial.zip.
Please do not confuse this tutorial with a certain other Frontier 5 tutorial based upon my earlier work.
This page created with Frontier, 2/11/2000; 7:00:03 PM.