WARNING: This toolkit is years out of date. For tools to produce the current Rutgers format, please see http://toolkit.rutgers.edu.

 

  More Details about the Rutgers Frontpage Kit

This page is a continuation of The Rutgers FrontPage Kit.

What are the limitations of this kit?

The primary limitation of this kit is based on Frontpage's tendency to generate image files ("gifs") for navigation bars.

The top level Rutgers pages have a stripe down the left side with links in them, as shown here. The "real" Rutgers pages generate the links using normal HTML coding. Normal features of HTML are used to specify the color and other formatting details.

In Frontpage, collections of links like this are called "navigation bars". Frontpage generates them automatically, based on the structure of your document. When Frontpage generates a navigation bar, it normally creates a separate image for each link. Frontpage refers to these as "buttons". You can configure Frontpage to use text instead of buttons. But if you do, you won't be able to control the color and other formatting details in older browsers. I supply versions of the toolkit configured for buttons and text. They are in http://rucs.rutgers.edu/example1 and http://rucs.rutgers.edu/example2, respectively.

There are three main issues caused by the use of images:

• One goal of the Rutgers design was for pages to load quickly, even over dialups. To do this, the number of images is kept to a minimum. Pages that use an image for each link will load somewhat more slowly.
• Because of the way Frontpage generates the buttons, they are all the same size. In the normal Rutgers pages, words will be split across lines where needed. That can't happen with a button. This means that if the name of a page is too long, the text on the button will be truncated. Because of this problem, I've used slightly smaller fonts for the buttons than I normally would, to allow for long labels.
• If you want to mix the navigation bars that Frontpage generates automatically with additional entries that you supply yourself, you'll have to generate buttons compatible with the ones Frontpage generates. This kit includes instructions on doing that.

For these reasons, my inclination is to use the version of the kit that generates text labels.

What's in the kit?

There are three things in the kit. The first is the Rutgers theme itself. This gives you a collection of images and other setup. The instructions above tell you how to install this.

The second piece is a set of images. The instructions above put them in the Images subdirectory of your web. To insert an image pull down the Insert menu and choose Image. You'll get a list of known images. The images I supply should be in that list.

The third is a set of example pages.

WARNING: In order for the "theme" to work, you should have a font "Century Schoolbook" installed on your system. This font is used to generate the banners. If you don't have this font, the theme will still work. It will use Times New Roman or Times instead. (Every PC should have this.) However the look won't be the same.

This font choice is a compromise. The actual font used in the Rutgers top level is ITC Century. However most people won't have that font. Century Schoolbook is in the same family. The advantage is that it comes with Microsoft Office. Thus most people should have it available. (With Office 97, you have to install it from the CD. It's not installed by default when you install Office. It's in valupack\msfonts, or you can run the installation tool and install the optional fonts.)

Here is a list of the images included in the kit:

• rulogothome.gif This is a Rutgers logo, suitable for use at the top or button of a green stripe down the left margin. I assume you will make the image a link to the Rutgers main page, http://www.rutgers.edu. Thus it has text in the same style and size as the buttons that Frontpage normally generates. (A version without the text is available as rulogot.gif.) Notice the slight green fringes. This logo will look very bad on backgrounds other than green.
• rulogogray.gif This is a Rutgers logo, suitable for use on a white or light gray background.
• blank10.gif This is a transparent 10 pixel square. It's appropriate for use if you need to add spacing. (The Rutgers pages commonly use a 1 pixel square, and resize it to whatever size they need. Unfortunately 1 pixel is too small to show up in Frontpage, so once you've inserted it you'll never be able to select it for resizing.) NOTE: I've added a border so you can see it. The actual image doesn't have the border around it.
• lbutton.gif This is a blank image of the same size that the Rutgers theme uses for vertical buttons (i.e. buttons that are placed in a vertical stack, typically along the left margin). NOTE: I've added a border so you can see it. The actual image doesn't have the border around it.
• tbutton.gif This is a blank image of the same size that the Rutgers theme uses for horizontal buttons (i.e. buttons that are placed in a row, typically along the top of the page). NOTE: I've added a border so you can see it. The actual image doesn't have the border around it.

How to use the Rutgers Theme

The Rutgers theme has the following major pieces, in appropriate styles and color:

• A "banner", on which Frontpage will insert the title of the current page. There is a banner at the top of this page containing the words "Services Offered by OIT". There are actually two different styles of banner, depending upon the setting of "Active Graphics", as explained below. Here are two examples, with "Active Graphics" on and off, respectively:
  
  
  
• "Buttons", on which Frontpage will insert the names of links when it generates navigation bars. On this page, there is a navigation bar with links to a few important pages. Here is a typical button: As above, I've added a border that won't actually be present.
• A blue dashed line, which will be used in place of the usual bar when you insert a horizontal bar.
  
• Bullets, which will be used in place of the usual dots. The top level bullets are red. The next two are black.
  
• A background image, which contains a green stripe down the left side of the page. This is intended for pages where you want a navigation bar on the left. (The actual stripe is larger than the example below.)
• Various other color and style choices

There are two slightly different styles contained within the theme. Which style you get is controlled by the setting of "Active Graphics". When you choose a theme, you'll note a set of three checkboxes, labelled "Vivid Colors", "Active Graphics", and "Background Image".

In the Rutgers theme, "Active Graphics" is used to choose graphics appropriate for two types of page. With "Active Graphics" on, you get appropriate images for pages like the main OIT page. I use this style for the top one or two levels of a site.

For these pages you would normally enable "Background Image". That gives you a green stripe down the left side of the page. Normally you would put the Rutgers logo at the top or button of the bar, and put a vertical navigation bar down the stripe. If you use the "shared borders" feature, you would normally use only the left shared border on pages like this. To get the page title, you should place the cursor at an appropriate place (see the example below), pull down the Insert Menu, choose "FrontPage Component" and then "Page Banner".

The result is a page that has the following appearance in the upper left:

You may notice that the edges of the large "Computer Science" look somewhat jagged. That's because Frontpage doesn't use anti-aliasing when generating text. Once you have your pages finished, you may want to generate your own graphics for the largest titles. Here's the same example, except that I've generated the text in Microsoft Image Composer, using anti-aliasing (which it calls "smoothing"):

The actual theme will generate a slightly smaller title than this example. The jagged edges won't be quite as noticable, but they are still there.

With "Active Graphics" off, you get appropriate images for the page you are currently reading. I use this format for individual articles and other pages below the top one or two levels.

The banner has a blue dashed line under it, as this one does. Normally you would disable "Background Image" on these pages. You might want to put a horizontal navigation bar right under the banner, although that isn't necessary. If you use the "shared borders" feature, you would normally use only the top shared border on pages like this. I recommend that you left justify the banner and navigation bar. (Frontpage tends to want to center them. That's not appropriate for this style.)

The result is a page that has something like the following along the top:

You can use "Vivid Colors" as you like. It doesn't change much, except the color of the border around tables, and the heading colors.

How to mix your own text with Frontpage's navigation bars

Normally, you will let Frontpage generate navigation bars for you. However sometimes you'll want to add your own entry. As mentioned above, Frontpage generates images for each piece of text (unless you have set it to use text labels). This kit includes blank images that let you make text that looks like the "buttons" Frontpage generates.

To generate text that looks like Frontpage buttons, you start with one of the two blank images here, and then use Frontpage's text over image feature. Use lbutton.gif to match the buttons used in "vertical" navigation bars, and tbutton.gif to match the buttons used in "horizontal" navigation bars.

Here are instructions:

• Start by using "Insert Image" to insert the appropriate blank image in the place where you want the text. (Get that by choosing the Insert pulldown menu, and choosing Image.)
• Once you have inserted the image, select it with the mouse. At that point the Image toolbar will appear at the bottom of your screen.
• Choose the text tool from the Image toolbar (not the toolbar at the top of the screen). The text tool is labelled with the letter "A". A place for you to type will now appear on the image. Once you've started typing, you'll want to adjust the font and size to be compatible with the text generated automatically. (This has to be done after you've started typing.) Choose the font "Arial", and adjust the size as needed. Set "bold" as needed for compability with the text generated automatically.
• For the vertical bars, you'll want to move the text to the left edge of the image, so it lines up with the text generated automatically. To do this, click the icon for left justifying text. That will move the text to the left side of the space. However it will still be in the middle of the button. To get it to the left, use your mouse to pull the left edge of the opening to the left edge of the button.
• When you have finished typing the text, click with your mouse somewhere outside the button.

Last changed February 8, 1998 by hedrick@nbcs.rutgers.edu.