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

 

 

The Rutgers Frontpage Kit

Who is this Document for?

This document is for people who want to create a set of web pages that

• follow a format similar to the Rutgers web site.
• are linked together using the automated tools in Microsoft FrontPage 98.

It assumes that you are willing to learn a little about how FrontPage works. However example pages are given. If you like the examples you don't have to spend much time dealing with more arcane HTML facilities such as tables. However you will need to to spend time in two kinds of things:

• Deciding on the set of pages you want, and working in the FrontPage Explorer window to define those pages and the links between them. Some examples are given below.
• Editing individual pages. If you use the examples, you won't have to do anything fancy with tables or links. You'll use commands in FrontPage similar to those in a word processor.

There are three basic approaches to produces web pages, in order of increasing complexity:

• Copy someone else's or use a prepared template, and just change the text.
• Use a tool such as FrontPage that automates many of the details, and start from examples.
• Create your own pages from scratch.

This document describes the intermediate approach.

What is the Rutgers Frontpage kit?

This page describes a kit for use with Microsoft Frontpage 98 at Rutgers. It includes a Rutgers "theme", and a few relevant images. It is roughly modeled after the format of the OIT pages (such as this one and the OIT main page). Unfortunately Frontpage does not contain the right facilities to duplicate the actual format used with www.rutgers.edu and these pages. However this kit should give a fairly close approximation.

This kit will probably only work in the PC version of Frontpage.

Before we go any further, let's look at the results

To see an example generated with this kit, take a look at the Web Science department home page. There are two different versions. They only differ in the appearence of the links in the left and top margins:

• Example 1 uses Front Page's "buttons" for labels. This gives something that looks close to the "official" Rutgers web pages. However pages take longer to load, because there is a separate image for each label.
• Example 2 uses text labels. These pages are faster to load. However they only look as intended in Netscape 4 and Internet Explorer 4. Earlier browsers will see the links as the wrong color. The links will also be underlined. (Note that this is true of the "real" Rutgers pages also.)

Feel free to use whichever form you prefer. My inclination is to use the second form.

How to get the kit

The kit contains three parts: a Rutgers "theme", a set of images, and a set of example pages. The "theme" does most of the work. Once it is installed, you choose it the same way you would choose any of the builtin themes. There are also a few images, which you may want to use in building your page.

The easiest way to install it is to create a new web using it. You'll probably want to print these instructions. If you have them next to you when you're in the program, you'll find that they are easy to follow. Just looking at them here they don't make much sense.

• In the FrontPage Explorer, pull down File and choose "New", then "FrontPage Web". In section 1, choose "Import an existing web". In section 2, assign a name for the new web. It should be a name you're not using.
• Click OK. Frontpage will create an empty web.
• It will now put you into the box labelled "Import Web Wizard - Choose Source". Choose "From a WorldWide Web site". In Location, specify "http://rucs.rutgers.edu/example1/download.html" or "http://rucs.rutgers.edu/example2/download.html" (Don't type the quotation marks.) Use example1 if you want the labels that use buttons, and example2 if you want text labels.
• Click Next.
• You'll now get a box "Import Web Wizard - Choose Download Amount". The defaults should be OK, although I would be inclined to unselect the two Limit boxes.
• Click Next.
• You'll now get a box congratulating you. Click on Finish.
• Frontpage will now copy the Rutgers theme and images into your new web.
• When you open this new web, you'll want to select the Rutgers theme for it. In the FrontPage Explorer, choose the "Themes" icon near the bottom left.
• You'll now see a list of themes. "rutgers" should be in the list. Choose Rutgers, and then "Use Selected Theme".
• Click on Apply.
• You'll get a dialog box asking if it is ok to download the rutgers theme. Say yes.
• Your new web is now set up to use the Rutgers theme.
• The only thing that will show in the "Explorer" is the top-level page, labelled "Web Science". You'll probably want to make the other two major examples visible, by linking them to the top level page. Make sure you are showing the "Navigation" view, by clicking on the Navigation button on the left of the Explorer.
• You'll now see a large window on the top that shows only the "Web Science" page, and a list of files below it. With your left mouse button, select "courses.htm", and drag it right under "Web Science". You'll see that the Explorer automatically attaches it. Then select "101.htm" and drag it right under "Courses".
• Pull down the Tools menu and select "Recalculate Hyperlinks". If you don't do this, you won't be able to edit the home page.

Using the examples to construct your own pages

Once you have the kit, you can use it to construct your own pages. The easiest approach is to use the example pages as a basis for your own. If you would prefer to do your own page design, see More Details about the FrontPage Toolkit.

Start by thinking about what pages you are going to want. For a course, you might want a main page with summary information about the course. It would point to a syllabus, a set of assignments, and a set of reference material. Obviously you don't have to use this exact structure. This is just an example. In this example you probably want three levels.

                         main page

      assignments        syllabus      reference material

      assign 1                         first title
      assign 2                         second title
         .                                 .
         .                                 .
         .                                 .

You do not have to get everything the first time. FrontPage lets you add new pages. When you do, all the navigation bars and other links will be updated. If you decided later to add another section on Exams, that would be easy.

The first thing to do is to set up the overall structure in the Explorer window. I assume you're starting out with a new web created using the instructions above. Make sure you're in the Explorer window, and that you have selected "Navigation". If the steps above worked, the largest portion of the window will show three folders, with lines between them:

                            Web Science

                              Courses

                            Web Sci 101

You'll use this example as the basis for your own pages: The "Web Science" home page will become your home page. The "courses" page will become your second level pages: assignments, syllabus, and reference material. The "Web Sci 101" example page will become the individual assignment and reference pages.

Select "Courses" with the right mouse button, and choose "copy". That puts a copy of "courses" (and everything below it) in the "clipboard".

Select the main page with the right mouse button, and choose "paste". That will give you a copy of "courses", which you can use for syllabus. Do the same thing again (i.e. select "courses" and do a copy, then select the main page and do a paste). That will give you another copy, which you can use for "reference material".

You've now got a structure that looks like this:

                        Web Science

           Courses       Copy of Courses      Copy of Courses

           Web Sc 101    Copy of Web Sc 101   Copy of Web Sc 101

You can now adjust the names. Click on the name of each page, and type in the name you want. You don't need anything under Syllabus, so you can delete that "Copy of Web Sc 101". (Select it with the right mouse button and choose Delete.) When you've finished you'll have something like this:

                         My Course

           Assignments   Syllabus         Reference Material

	   Jan 6                          Physical constants

Now you can start editing the individual pages. Double-click on each page. That will bring up the page editor. I'm not going to give instructions on how to use it. (It's hard to give instructions for a mouse-based process in writing.) But it's a lot like a word processor, so it shouldn't be hard for most people to figure out.

The example pages normally have a summary section at the top, and a two-column section where most of the content goes. You don't have to follow this structure. If you like, you can delete all of the existing material in the example. However that structure is a good one for many pages. If you want to use it, you should replace the existing text, but don't do anything to disturb the dotted lines that determine where things go.

Where you have a whole list of things such as assignments, I recommend that you get one of them set up properly. Then copy it to give you a start on the others. Suppose you've got the Jan 6 assignment right. In the Explorer, select Jan 6 with the right mouse button; choose Copy; Select "Assignments" with the right mouse button; choose Paste. That will give you a copy of Jan 6 attached to "Assignments".

                         My Course

           Assignments   Syllabus         Reference Material

     Jan 6   Copy of Jan 6                Physical constants

You'll rename "Copy of Jan 6" to "Jan 9" or whatever, and do that for each assignment. Similarly, get Physical constants right, and copy it to give you a starting point for other reference pages. If you're ready to do a bit more of your own page design, see More Details about the FrontPage Toolkit.

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