IUPUI integrated images

Web by Design logo
Home Tutorials Resources Kudos CV



After over a decade of service to the web community, I have made the decision that Web by Design has served its purpose and lived a fruitful life. It is time to shutter the doors and move on. However, due to the fact that so many continue to reference this tutorial, I will keep it available for the near future.

Thank you for your support over the years. It has been a pleasure.


Creating Frames with FrontPage 2002 (XP)

Table of Contents


Frames are a way to structure Web sites so that separate components of the site can be navigated independently of one another. In many instances this organization is used so that navigation or a table of contents can be displayed consistently as various content pages are viewed. For this tutorial we will create a simple Web site with a left-side table of contents and a right-side contents. In the example below, notice that both the left and right sides of the page have scroll bars allowing a user to navigate the two sections independently. (While there is a way to remove scroll bars permanently, I don't recommend that for this reason: your monitor settings may allow you to view the site without the need of scrolling, but your reader's settings may not and it is very frustrating to know that a page is continuing and you have no way to scroll down to see the remainder of the content.)

Sample screen shot of a framed Web page

The element of frames that confuses many people is the number of files involved. For example, in the sample above, there are 3 files: one on the left (the table of contents); one on the right (the one titled Web Development); and the "control" file that tells how the layout is to be displayed. So, with that information, let's get started!

Back to Top

Getting Started

To begin, start FrontPage.

  1. From the menu, choose FILE : New : Page or Web. FrontPage XP will display the New Page or Web dialog box on the right of your screen.

  2. From the section "New from template," click Page Templates.

  3. Click the Frames Pages tab.The dialog box shown below will be displayed. To see a description and sample layout of each template, click once on the template icon; the description and sample are shown on the right.

Screen shot of Page Templates dialog box

  1. Click the "Contents" icon, then click OK. FrontPage will display the overall layout as shown in the sample below.

Screen shot initial frameset layout

  1. To adjust the proportions of the layout (for example, to widen the navigation frame), point to the window's edge (the divider between the frames) until the cursor becomes a two-headed horizontal arrow, then drag the window's edge until the display is the proportion you desire.

To create a new page that you want to add to the site, click the New Page button and build the page (if you need help, refer to a FrontPage tutorial); if you are using an existing page, click Set Initial Page (for more information, see Adding New Pages).

Back to Top

Adding Wallpaper and Background Colors

Using a background color on only the left frame (or using two different colors on the two frames) creates an effect that is jarring to the senses. Sample frameset with left frame only using background color
Using the same background color on both frames helps, but keep in mind that if your left frame requires a scroll bar, it will continue to act as a divider between the two frames. Sample frameset with both frames using the same background color
Notice that when you choose to use on both frames a wallpaper that provides the effect of a border or is patterned, it does not continue, but rather "starts over" leading to some rather weird effects if you're not careful. Sample frameset with both left and right frames using a border-type wallpaper
Using a wallpaper on the left frame that provides the effect of a border is an effective formatting technique. Notice, however, that this requires you use some technique (see next section) to "scoot" the text to the right so that the text doesn't overwrite the print, making the text hard to read Sample frameset with left frame using a border-type wallpaper
Usually the best choice, if you want to use just a little bit of color is to use a "fade" in the navigation frame and leave the right frame with a white background (or whatever color is your "background" behind the fade color). Sample frameset with both left and right frames using a border-type wallpaper

Back to Top

Managing Text Wrap

Also to be considered with left "contents" frames is that the narrow width of the frame often makes it difficult to manage text wrapping as shown in the example on the right. Notice that the "bullets" in this case are not true HTML bullets but rather are dashes. Sample navigation frame with text wrapping If you elect to use a dash or other keyboard symbol in your list as shown in the example on the right, you will need to work carefully with the text in order to minimize the wrapping. However, keep in mind that even if the wrapping appears acceptable on your computer screen, someone viewing your page may have different monitor settings and wrapping will occur when viewed on that computer. Sample navigation frame with text not wrapping
Using the bulleted list with "true" bullets is shown in the example on the right. Notice that this corrects the wrapping, however it leaves space both above and below the list as well as shortening the available line length. Notice the additional length added to this section of the navigation text as compared with the example above. Sample navigation frame using bulleted list

An additional consideration when using keyboard symbols rather than a true bulleted list is that you shouldn't press <Enter> to start a new line (which will place a blank line between each entry). Instead, you will need to press <Shift><Enter> to cause a line break.

Back to Top

Adjusting Layout to Allow for Border

As previously mentioned, if you choose to use a wallpaper that has a border effect (unless it's a fade that the text can be easily read over), you will need to "scoot" the text over so that it doesn't overwrite the pattern. The use of the keyboard spacebar is strongly discouraged when working with Web files because characters, including spaces, are proportional. This means that no matter how hard you try to align text, there will be some lines that won't quite be aligned correctly because the letters in each line are different widths. If you are only using one or two spaces however, as shown above in the Text Wrapping section, it usually won't be too bad—but that's the only time I advocate using the spacebar to control layout.

One option available to you is the Increase Indent tool: Screen shot of indent tool Each time you click the tool, the highlighted text (if working with multiple lines) or the current line will be indented. Notice that both the left and right sides indent, so you are shortening the available line length each time you indent.

A final option that will provide a bit more control over the spacing is to create a single row, two cell table. The left column will provide the "margin" space and the text will display in the right column. The example below shows the use of a table. Note: the dotted lines of the layout table in the left frame are only visible to the author, not the reader of the Web page.

Screen shot sample of use of table of layout

Back to Top

Saving Frameset Web Files

As with any work on a computer, it is important to save frequently to avoid the loss of a work in the event of a power outage or "computer crash." To save your new documents (remember in the example we are using, there are 3: a left frame, a right frame, and a control frame), from the menu, choose FILE : Save. The Save As dialog box will be displayed (see illustration below).

Screen shot of Save As dialog box

In addition to the folder choices of where to store your file (as is displayed anytime you save a new Windows-based document) there are some other important things to note:

After you have chosen the location to which you wish to save the file and verified or changed the file name (notice that FrontPage will use the .htm extension; if you want .html you'll need to add the "l"), click Save. FrontPage will immediately display the next frame for you to verify or change the name (it will remember where you want the files stored and put it with the first file). If you choose a different frames template, each time you click Save, FrontPage will "move" to the next frame in the frameset until you have saved all of the individual files.

After all of the individual files have been saved, FrontPage will present the overall frameset control file (notice in the example below that FrontPage displays a blue border around the entire frameset layout). FrontPage will attempt to name the file "index.htm"—you will need to know the guidelines for your Web server in order to name your main frameset file if this is your "home page."

NOTE: BEFORE clicking Save, notice above the File name text box is one called "Page title." As you create files, FrontPage titles them "new_page_1.htm," "new_page_2.htm," etc. This information will display in the colored band at the top of the browser window (as you're reading this tutorial, it reads "Web by Design: Creating Frames with FrontPage 2002 (XP)"). It is highly unlikely that you will want your page to be titled "new_page_1.htm," so it is important that you click the Change Title button and give your page a logical title. After typing the new title and clicking OK, click Save to complete the save process of your frameset files.

Screen shot of Save As dialog box for overall frameset file

Back to Top

Adding New Pages

You will find it easiest if you will create new pages as if you are not working with a frameset, then after they are built link them into the frameset as described in the section below.

To create a new frameset with existing pages, click "Set Initial Page." Then browse for the file you want to insert. Select it and click OK.

Back to Top

Linking Pages

To link from the left navigation frame to a page that will display in the right side,

  1. Highlight the text in the left frame that you want to be linked.

  2. Click the hyperlink tool: Screen shot of hyperlink tool

  3. In the Insert Hyperlink dialog box, select the file that you wish to link to, then click the Target Frame button.

  4. In the Target Frame dialog box, click the illustration for the right frame as shown in the illustration below (to indicate that you want the link to open in that frame), then click OK.

Screen Shot of Target Frame dialog box

  1. Click OK to complete the hyperlink process.

To link to a different Web site and have it open in a new window, follow steps 1-3 above, then in the Target Frame dialog box, click New Window, and complete the process as described above.

Back to Top