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

Prev | TOC | Next


Exploring the Examples

Render a page right now

To give you a feel for what a Web site consists of in Frontier, and what it means to render a Web page, Frontier comes with some examples you can experiment with immediately.

First, start up your browser (either Netscape Navigator or Microsoft Internet Explorer); Frontier looks to see what browser is running, so that it knows who to talk when it wants to display a formatted Web page.

Back in Frontier, show the About Window.

Choose Websites from Frontier's Main menu. This is where Web sites live. From the "samples" subtable, open "randomStuff". Make sure you can see both the About Window and the "randomStuff" window, and make sure the "randomStuff" window is frontmost.

From the Web menu, choose Preview Page. Watch the About Window -- the number of threads goes up to 2, then comes back down to 1. When that's happened, switch to your browser. This Web page was generated by "rendering" the text in websites.samples.randomStuff.

Now switch back and forth between your browser and Frontier, examining the differences between websites.samples.randomStuff and what the browser shows. The document websites.samples.randomStuff is designed to show off the main features of the rendering process, so that you can see some of what Frontier can do.

We'll quickly run through these without explaining them; the rest of this tutorial develops fairly detailed discussions on every feature demonstrated here, and much more.

By the way, there are actually not two but three representations of this Web page to consider: (1) the unrendered page inside Frontier, websites.samples.randomStuff; (2) the rendered text document containing HTML tags and other things Frontier added during rendering, which is now sitting somewhere on your hard disk; and (3) the formatted representation of those HTML instructions, which is what your browser actually shows. We're going to ignore (2) for now, though, and just concentrate on (1) and (3).

Note: You may be tempted, as we go along, to make changes in websites.samples.randomStuff and choose Preview Page again, to see what difference they make. But on some computers and some browsers, the browser doesn't load a new version of a file automatically after you choose Preview Page; you have to choose Refresh to see your latest changes. You'll need to remember this throughout the tutorial.

Another Note: If, like me, you think it's an incredible pain having to switch manually to the browser every time you preview a page, Jump to user.webBrowser.bringToFrontOnPreview and set it to true. This will cause Frontier to bring the browser to the front for you after it has loaded a previewed page.

Still Another Note: And did you know you can assign a keyboard shortcut to Preview Page? Hold down the option [alt] key and choose Preview Page. A window appears; at the bottom left is a popup menu. Examine the popup to see what shortcuts are already assigned. Choose Set Command Key and type just the desired key into the dialog box (don't hold the command-key [ctl]) -- I use the backquote. On Windows you may have to quit Frontier and start it up again at this point to get command-keys working.

A quick tour

Every paragraph of the document tells us about a different Frontier feature. Don't try to understand each feature now! Just enjoy the tour. Remember, we've got the entire remainder of this tutorial in which to study the features in detail.

In the browser, both the window's title bar and the first line within the window show that this Web page has been named after you! How did that happen? It's a little tricky, so hang on to your hat.

First, notice the first paragraph of websites.samples.randomStuff, where a "#title" for the document was declared involving user.prefs.name, which is an entry in the database where Frontier stored the name you gave it when you first started it up. (You can navigate to user.prefs.name if you like and confirm that this is true.)

Second, notice that both at the beginning and the end of what's in the browser is some stuff that didn't come from websites.samples.randomStuff at all: the "Welcome to..." at the start, and the horizontal rule and "This page was last built..." at the end.

To see where that material came from, choose Websites from the Main menu, and open the item called "#template". Choose Expand Everything from the Outliner menu. Sure enough, there's the "This page was last built..." material; and although it's hard to tell, the third line is responsible for the first line in the browser (you see how it's saying something about an <h1> version of the title?).

Every Web page is automatically embedded into a #template as it is rendered, which gives you an opportunity to provide uniform matter to go at the start and end of each page.

It also can impose some uniform formatting; for instance, every paragraph of text (everything after the big title) is blockquoted, and this too was done by the #template.

The thing to understand is that any page living in websites.samples would automatically have this sort of formatting and this sort of starting and ending matter. That's the power of a template. (To see that what I'm saying is true, try this: select websites.samples.default and choose Preview Page. Do you see? Different internal text, but same beginning, same end, same general look.)

Next, notice that the paragraphs from websites.samples.randomStuff have come out as separate paragraphs in the browser. As you know, this requires <p> tags, since returns alone don't cause a new line when a browser interprets HTML. But there are no <p> tags in websites.samples.randomStuff.

Frontier has inserted these <p> tags; in particular, it has put a <p> wherever it found two returns in a row in websites.samples.randomStuff.

What now? The first paragraph in the browser has a stylistic enhancement, an enlarged first letter. This was done by a "filter", in particular by websites.#filters.pagefilter.

A filter is a place where you can place commands to be run before or after the page is rendered, to customize the look of your page. Every Web page is passed through the filters, which again gives you an opportunity to give your pages a uniform look automatically; any page living in websites.samples will have this enlarged first letter when it is rendered. (Again, compare your renderings of websites.samples.default and websites.samples.randomStuff to see that this is so.)

The next paragraph has green bold text, which, as you can see, comes from <font> and <b> tags in websites.samples.randomStuff. The point is to show you that HTML tags you place in your pages in Frontier remain in the resulting HTML.

This stands in significant contrast to a typical WYSIWYG HTML-generation tool, where if you typed <b> it would appear in the browser as the literal phrase <b>, not as an HTML command, because your opening "<" would be replaced by "&lt;". A WYSIWYG tool thinks that only it should be in charge of making any HTML; whereas, although Frontier tries to help you by generating some HTML if you want the help, its basic orientation is one where you stay in control of your own HTML.

The third paragraph contains live links, even though we don't see this in websites.samples.randomStuff; the fourth paragraph tells you why.

This feature is the "glossary": words and phrases in quotes, such as "Netscape", were replaced by the value of the corresponding entry in user.html.glossary (go ahead and look in it), and those entries, in this case, are complete anchor tags surrounding some text.

Clearly, if we know we're going to refer to "Netscape" with a live link at many places in a document or documents, this can save us a mess of typing (and from having to get the HTML exactly right every time, too).

The sixth and seventh paragraphs show how URLs and email addresses are turned into live links during the rendering process. In websites.samples.randomStuff, you see just a URL and an email address; Frontier has surrounded these with anchor tags generated from them.

In the next paragraph, the number after the words "curly braces" is generated each time the page is rendered, by running the UserTalk instructions contained in curly braces in websites.samples.randomStuff.

If you return to websites.samples.randomStuff and choose Preview Page again, you'll likely see a different number in the browser when the page is rendered again, because the instructions tell Frontier to generate a random number, and Frontier obeys these instructions anew during each rendering of the page.

Anything UserTalk can do can be done as part of a Web page. That's called a "macro".

The next paragraph contains another example; the ten "ha"s don't literally appear in websites.samples.randomStuff; what appears there is a UserTalk instruction for making them.

Okay, that's your lightning introduction. Next, you're going to do it for yourself.


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; 6:59:52 PM.