|
|
|
|
|
|
|
 |
 |
 |
 |
 |
|
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.)
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!
To begin, start FrontPage.
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).
| 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. |  |
| 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. |  |
| 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. |  |
| 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 |  |
| 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). |  |
| 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. |  |
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. |  |
| 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. |  |
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.
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: 
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.
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).
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.
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.
To link from the left navigation frame to a page that will display in the right side,
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.
Return Home