Theme Settings

Fonts

Unlike in a word processor such as Microsoft Word, you cannot specify fonts in point sizes in the HTML language. There are only seven settings, and they are controlled by the Web browser, not by the author of the page. By default the settings correspond to the following table:

When selecting a font for a theme, the typeface used needs to be relatively universal. A font that most people won't have installed on their system will make a poor choice for a theme. This means that, other than the normal Windows system fonts Arial, Times New Roman and Courier New, you should assume that not all users will have the font you chose for your theme. In that case, a substitution font is used. Whenever selecting a font for the body or for the headers, you should also specify which font(s) you would like to display if the first choice isn't available on the user's system. To specify the alternate font(s) you use a comma and the second (and third) name. For example:

Verdana, Arial, Helvetica

would specify the Verdana font as the intended choice for the theme. If Verdana is not installed on the user's system, the Arial font is used. Since Verdana and Arial are Windows fonts, you may want to specify a third choice for other platforms, such as Helvetica, which is standard on Macintosh computers.

The list of primary fonts from which to choose should be kept to those that ship with Microsoft FrontPage. These are:

• Arial
• Arial Black
• Arial Narrow
• Arial Rounded MT Bold
• Book Antiqua
• Bookman Old Style
• Brush Script MT Italic
• Century Gothic
• Century Schoolbook
• Comic Sans MS
• Courier New
• Garamond
• Georgia
• Haettenschweiler
• Impact
• Times New Roman
• Trebuchet MS
• Verdana

Default Font Substitutions

When themed pages are viewed on different browsers and platforms, the specified fonts may not be available. The FrontPage themes specify fonts in order of preference so that they degrade gracefully in such situations, as illustrated in the following table.

The graphics are what really makes these themes come to life. The quality of the graphical banners and buttons is the most important part of a theme. Consider the following when designing a theme:

• Choose a set of colors that go well together but do not overwhelm
  
  
• Use a set of basic graphics which are not too theme-specific and can thus be used on almost any page
  
  
• Integrate a set of active graphics that are lively and fun, but not annoying

The example below shows what a typical theme looks like:

What makes this theme a good choice is the use of the leaves concept. It is present throughout the theme in the pictures and colors, but it is subtle enough that the page does not become applicable only to botanists.

Text Overlays

None of the graphics specified in a theme should have text placed on them by default. FrontPage will add text to these graphics as needed. For example, the "Home" button will need to have a specified font, color, and alignment, but the word "Home" should not actually be placed on the graphic. The text is added at page save time because the page names and language of the text will vary depending on the Web site.

When defining a graphic that has text on it, such as the banner, the following must be specified:

• The font for the text
  
  
• The color of the text
  
  
• The horizontal alignment of the text
  
  
• The vertical alignment of the text
  
  
• Theme images that can have text overlays must be saved in the GIF format.

Transparency

The sizes for each of the graphics are specified by the theme. To design a button, bullet or banner that is smaller than this size, use transparent pixels to pad the image out to the specified size. Keeping all the images the same size is important because switching themes should not affect the pagination and layout of an HTML page.

Navigation bar buttons of all types (top-level, horizontal, and vertical) stack adjacent to each other; the edges touch. To have the buttons appear with some space between them, transparent padding can be used in the images.

Active Graphics (Animations & Hover Buttons)

Active Graphics take two forms. The GIFs that can be animated, and the hover buttons. Animations should be used sparingly to subtly convey the sense of a lively page, but not a loud and busy TV channel. For the GIFs that can be animated (banners, horizontal rules, bullets) only a one or two images per theme should be animated. The image format to be used is the GIF89a specification.

In order to define a hover button, you need to define the text properties just like you would for a normal button. However, instead of specifying just one button image, you specify three. One button image is used for the normal state of the button, the second image is used when the mouse hovers over the button, and the third image is used when the button is clicked and when the user reaches the page that the button pointed to. The effect of a "pushed" button is not necessarily a three-dimensional effect.

Anti-aliasing

If graphics are anti-aliased (smoothed), it is important to make sure they look good on both of the background colors as well as on the textured background. The color palette used for the anti-aliasing pixels in the image should closely match the color palette used for the background image or background colors. For example, an image that has been anti-aliased for a light or white background will look poor on a dark or black background.

Color Palette

All colors specified should be in the 216-color safe palette for Internet Explorer and Netscape Navigator Web browsers. These are the colors resulting from all RGB (Red/Green/Blue) combinations of 0, 51, 102, 153, 204, and 255. For table border colors, there are two settings required to create the 3D beveled effect - a light color and a dark color.

Theme INF Files

There are two files with the extension INF that control the properties and handling of a theme. Each theme has a theme-specific file <theme>.inf which contains directives applying just to that theme. In addition, the top-level file themes.inf contains directives which apply to all themes installed on a computer, or stored on a server. Directives in the theme-specific file override directives in the top-level file.

Theme-Specific INF File

The theme-specific INF file contains the following information:

For example, the contents of the arcs.inf file is:

[info]
title=Arcs
codepage=1252
version=01.01
readonly=true

Font Handling and Themes.inf

FrontPage themes specify which fonts to use for different portions of the author's web page. These fonts are assumed by FrontPage to be fonts to apply to web pages stored in the windows-1252 charset. The themes.inf file is used to specify how a font should be handled when web pages are stored in different charsets.

When FrontPage applies a theme to a web page, and no specification is available for the charset and font combination, FrontPage will output no font information. The absence of font information will allow the browser to use a default font when displaying the web page.

No directives are required for the charset windows-1252. FrontPage will use the fonts exactly as specified in the theme.

Acceptable values for <pitch> are "variable" or "fixed." Acceptable values for <family> are as follows:

This information allows FrontPage to provide a reasonable alternative font when the author does not have the specified font installed on their machine.

Important:: This font handling system is designed to avoid applying fonts to inappropriate charsets. If a new theme is created that uses a font not shipped with FrontPage, directives for that new font should be added to the theme's INF files before the new theme is applied to any charsets besides windows-1252. Alternatively, these directives could appear in the global themes.inf file.