Introduction to Themes, Templates, and Webs

I'm new to FrontPage. What's a FrontPage Web?
A typical web site is simply a collection of files -- for the most part, HTML files and image files (.gifs, .jpgs). A "FrontPage Web" is virtually the same thing as a "web site;" just another way to refer to a web site made by FrontPage. Some FrontPage Webs have additional files that record information about the way your web is structured. FrontPage Themes can only be used with FrontPage Webs.

In the diagram to the right, you can see the files in a typical "web" folder. You'll notice that Microsoft Windows will often put a "globe" icon on a folder that is a "web." The dimmed folders are "hidden" folders that you will typically not see.

An important aspect of FrontPage Webs and how Themes work with them is the navigation structure (and related to that, FrontPage's navigation bars -- also referred to as link bars). [see diagram below] In Navigation View (accessed by clicking on the Navigation button in the Views bar), users may build the navigation structure of their web by dragging pages from the Folder List into the aqua area.

Some terms that you'll want to get familiar with:
Top-level pages describe the pages that are at the "top" of the tree, next to the Home page.
Child pages describe pages that are underneath a particular page. For example, "Get Started" and "Accessibility" are child pages of the "Read Me" page. "Read Me," "About Us," and "Catalog" are child pages of the Home Page.
Parent page describes the page that is linked above a group of pages (or the "stem" that branches out). In this case, "Read Me" is the parent page of "Get Started" and "Accessibility."
Parent Level describes the pages that are on the same level as the parent page (in this example, "Read Me," "About Us," and "Catalog" are on the Parent Level).
Child pages under home is pretty self explanatory -- this is the group that describes all the pages that are child pages of the Home page.

These different levels and groups of pages may then be used to define navigation bars throughout the site.

Introduction to FrontPage Link Bars (or "Navigation Bars")
One reason for FrontPage's popularity is that it can generate Navigation Bars. These Link Bars can be based on the navigation structure, or can be a "custom made" link bar. For example, you can tell FrontPage to automatically generate a navigation bar that has links to the "Child Pages Under Home." Or, you can create your own custom link bar that has links to selected pages (and even pages off of other web sites). With the integration of FrontPage Themes, FrontPage can actually generate a link bar that has button graphics that change on rollover. Typical web sites with this effect require some sort of JavaScript coding, but with FrontPage, the user can have the same effect with a few simple clicks. Not only that, but the user can change the links and text on the buttons and FrontPage will update all the navigation bars across the web. In other types of web sites, each button (not to mention the "rollover" buttons) has to be separately made in an image editor, and the user has to recreate the image if text needs to be changed.

Some technical details -- when a Navigation Bar using image graphics is built, FrontPage takes a "blank" button image (specified in the theme) and creates a new image with a text overlay. In the page, FrontPage builds the navigation bar for the user, including all needed JavaScript.

FrontPage can generate text link bars, as well -- in fact, this is the default if you're not using a FrontPage Theme. FrontPage 2002 offers users many different styles of text link bars -- for example, links can be separated with vertical lines, dots, brackets, etc.

We've mentioned FrontPage Themes a few times, and you're probably wondering what we're talking about...

What's a FrontPage Theme?
A FrontPage Theme is a collection of images and information. There are images for navigation buttons, horizontal rules, bullets, backgrounds, and page banners. Themes also come with font color information and font "style" information... for example, headings may have fonts, text color, size, and style (bold or italic) defined.

Applying a FrontPage Theme to a FrontPage Web enables the user to get graphic elements of web sites like rollover buttons, page backgrounds, matching font colors, etc., without needing to know anything about making their own graphics!

Why Have Templates?
While Themes allow a user to easily add some graphical elements into their web site, many people like layouts with more complexity, but don't know how to make the images, tables, and code that need to go into their site for that to happen. FrontPage Templates allow a user to have a more complex layout, thanks to the developer who put together the more complex code.

The beauty of integrating Themes and Templates together is that the user can have the complex layout that they want, with the "look" that they want (the layout combined with the Theme graphics, color, and font information), and still be able to use FrontPage Link Bars for easy site maintenance.

1. FrontPage Page Templates
A "page template" is a special folder containing one HTML file and related graphic files, plus some FrontPage information files. FrontPage uses these files to help a user create as many new pages as they want with the layout specified.

2. FrontPage Web Templates
A "web template" is a special folder collection of HTML pages, related graphic and other files, plus some FrontPage information files. FrontPage uses these files to help a user create a new FrontPage web -- or as many webs as they want. The initial new web has the pages and files -- and even navigation structure -- specified by the developer, but the user can then modify the web by adding or deleting pages, changing text, and changing the navigation structure.

Web templates are a great solution for people who know how to use FrontPage, but don't know how to use imaging programs and HTML to build their own web site. You get a great layout and ease-of-use in one package, and all you have to do is add your own content.

This article is from PixelMill.

Next: FrontPage Interface Tour