Frames are a relatively new addition to the Internet scene. They were first introduced in Netscape 2.0, and soon many other browsers will support them. You cannot view frame sets directly in FrontPage, but the package includes an easy way to develop them.
You can think of a frame as multiple pages in one. They really are what the title of this chapter implies: pages with split personalities. Each region of a framed page displays a separate page that is scrollable, just like any other Web page.
Figure 14.1 shows a basic diagram of how frames and pages connect together. A frame set is a special kind of page that is divided into multiple sections, called frames. The page at the top of Figure 14.1 designates the frame set. You assign it a URL, just as you would any other page. The frame set gets loaded first when a user navigates to the URL. Next, the frame set loads the pages referenced by source URLs, and it displays each page in a separate frame.
Figure 14.1 : A simplified diagram of what a frame set does.
Each frame within the frame set has a source URL. Figure 14.1 shows three source URL pages on the second row. The navigation bar (navbar.htm), section 1 (section1.htm), and subject 1 (subject1.htm) load into the frame set when the user navigates to it for the first time.
For the source URL, use the name of the page that you want to display first in the frame. It can belong to a page, a file, or another frame set in your web. If one of the frames in the frame set contains another frame set, the initial frame is called a parent frame, or the master frame that displays another frame set within it.
Target frames are applicable when you create links from a framed page to another framed page. You must designate in the source frame's properties the frame in which the target page displays. To do this, assign a default target frame in the page properties of the originating page-that is, the page from which you are linking. The target frame is not the URL of the page to which you are linking. Instead, it is the name of one of the frames in the page, such as left, right, top, or bottom.
Take a look again at Figure 14.1. The frame set first loads into your browser, dividing the viewing window into three sections named topframe, left, and right. The source URLs then load into their respective frames.
The first source URL, the navigation bar, initially displays in the top frame. The navigation bar contains links to four section pages, indicated by solid lines in Figure 14.1. The navigation bar page also includes a default target link of left, indicated by a dotted line. This instructs the browser to load the linked pages in the left frame in the frame set.
The second source URL, section 1, initially displays in the left frame of the frame set. Each section contains links to different subjects, indicated by solid lines in Figure 14.1. Each section page includes a default target link of right, which displays the section's subject matter in the right frame of the frame set.
The third source URL, subject 1, initially displays in the right frame of the frame set. The subject pages do not need default target frames associated with them. When the user clicks links in the subject pages, the new subject matter appears in the same frame.
One frame, such as a navigation bar or a table of contents, is commonly used to link to other pages that display in another frame. This makes for easier navigation through a site. Instead of having to return with a link or the Back button in a browser as with standard web pages, the table of contents displays in its own frame while its links appear in another frame.
Frames also work well for an online book. The table of contents for each section of the book can appear in one frame, the content of each chapter in another frame, and footnotes for a page in yet another frame.
A formal presentation is another good candidate for frames. The outline of the presentation appears in one frame and the graphics in another. You can use a third frame in the set for navigation buttons.
Frames offer you great flexibility in displaying pages. Don't let your Web site rely totally on that flexibility, though. Many people use browsers that are not compatible with frames. Others use different browsers at different times for various reasons. For example, a user might prefer the way one browser views mail and newsgroups over another, and that choice might not have frame compatibility.
It is frustrating to browse the Web and find someone talking about a great site. You want to check it out, so you navigate to the page. A message pops up that reads, "Your browser is not frame-compliant. You cannot see this site unless you use a frame-compatible browser." It gives you no clue about which browser to use, and there is no way to exit out unless you use the Back button in your browser.
Be considerate to those out there who do not have frame-compatible browsers or who do not use them all the time. Provide alternatives for navigating to the pages that you display within the frames. Otherwise, you might potentially lose visitors to your site.
Because a frame set involves multiple pages that are linked together, you must have a web open to save the pages when they are created. Open a web in the FrontPage Explorer before you create pages with the Frames Wizard. You can select a predefined frame template, or you can design your own.
To create a frame set:
Figure 14.2 : Use the Choose Technique panel to choose
a frames template or to design your own.
Several frame templates have already been built for you. To use one of these predefined templates, select the Pick a Template option in the Choose Technique panel of the Frames Wizard. The steps are
FrontPage comes with six frame templates. They are
Banner with nested Table of Contents
Main document plus footnotes
Navigation bars with internal Table of Contents
Top-down three-level hierarchy
Nested three-level hierarchy
Simple Table of Contents
Try to create one of the templates to find out how it works. You will learn a lot. The following sections describe what frame template produces.
The Banner with nested Table of Contents frame set generates four pages, as shown in Figure 14.5. They are
The Main document plus footnotes frame set generates three pages. They are
The Navigation bars with internal Table of Contents frame set generates five pages. They are
The Top-down three-level hierarchy frame set generates four pages. They are
The Nested three-level hierarchy frame set generates four pages, as shown in Figure 14.6. These pages are similar to those in the Top-down three-level hierarchy frame set, but the frame layout differs slightly. The pages are
Figure 14.6 : The Nested three-level hierarchy frame set displays three pages.
The Simple Table of Contents frame set generates three pages. They are
If the frame set templates provided with the Frames Wizard do not strike your fancy, you can design your own frame sets. Indeed, designing a frame set can help you better understand how frame sets and frames work.
You need to create the frames that are initially displayed in the frame set before you use the Frames Wizard to create the frame set. Save these pages to the currently opened web. You do not have to worry about that for this project because the CD that accompanies this book contains pages for you to work with. This project builds an online book that is displayed in four different frames. Two frames are used as navigation links-one for navigating through the sections of the book and the other frame for navigating to other pages in the web that are not contained in the frame set. The third frame displays the contents for each section of the book. The fourth frame displays the chapter contents. These are simple pages with generic links that help you see how frames work together.
Now you can build the frame set. The steps are
| File | Content |
| botbar.htm | Bottom navigation bar |
| topbar.htm | Top navigation bar |
| chap01.htm | Chapter 1 |
| s1toc.htm | Section 1 table of contents |
| alttoc.htm | Alternate table of contents for the frame set |
| chap02.htm | Chapter 2 |
| chap03.htm | Chapter 3 |
| chap04.htm | Chapter 4 |
| chap05.htm | Chapter 5 |
| chap06.htm | Chapter 6 |
| chap07.htm | Chapter 7 |
| chap08.htm | Chapter 8 |
| chap09.htm | Chapter 9 |
| chap10.htm | Chapter 10 |
| chap11.htm | Chapter 11 |
| chap12.htm | Chapter 12 |
| s2toc.htm | Section 2 table of contents |
| s3toc.htm | Section 3 table of contents |
| s4toc.htm | Section 4 table of contents |
| s5toc.htm | Section 5 table of contents |
| TIP |
Don't go overboard on the number of frames in your frame set. Keep in mind that some people browse the Web with low screen resolutions. |
| Attribute | Value |
| Name | top |
| Source URL | topbar.htm (the top navigation bar) |
| Margin Width | 2 |
| Margin Height | 2 |
| Scrolling | Auto |
| Not Resizeable | Unchecked |
| TIP |
Because the navigation bar contains only a single line of text, you can set scrolling to No if you want. Choose Auto if the contents of the frame are too large to display in the height of the frame. It is generally a good idea to leave the Not Resizeable field unchecked, in case the user wants to resize the frameset to fit a smaller window. |
| Attribute | Value |
| Name | cleft |
| Source URL | section1.htm (section 1) |
| Margin Width | 2 |
| Margin Height | 2 |
| Scrolling | Auto |
| Not Resizeable | Unchecked |
| NOTE |
| When you create a similar frame set of your own, you need to complete the Default Target Frame field for each page that is referenced in the links here. For example, all the section table of contents pages on the CD have their default target frames set to cright. Use the File | Page Properties command for each page to enter this value. |
| Attribute | Value |
| Name | cright |
| Source URL | chap01.htm (chapter 1) |
| Margin Width | 2 |
| Margin Height | 2 |
| Scrolling | Auto |
| Not Resizeable | Unchecked |
| NOTE |
You do not need to specify a default target frame for any of these pages. When a user clicks any links that appear in these pages, the new page displays in the same frame. This enables you to create links between chapters. |
| Attribute | Value |
| Name | bottom |
| Source URL | botbar.htm (the bottom navigation bar) |
| Margin Width | 2 |
| Margin Height | 2 |
| Scrolling | Auto |
| Not Resizeable | Unchecked |
| NOTE |
_top is one of four special names that are recognized by browsers. It causes the browser to remove the frame set and to display the referenced links from the bottom navigation bar in a full window. If you have pages in your web that are not displayed in frames, such as a home page, use this technique to exit the frame set. Place the _top default target frame on any page that contains links to pages outside your site. |
Now you can generate the content of the alternate table of contents. Figure 14.11 shows a portion of the alternate page. It begins by mentioning that these pages appear in links. It also tells the user where to download a frame-compatible browser.
As for the links on this page, you want to include links to the pages that do not have default target frames associated with them. If your alternate table of contents includes links to pages that have default target frames specified, the browser might load the page in a new window.
In the pages that you just completed, the chapters pages do not reference target frames. You can include them in the alternate table of contents. You also should add links to some of the other pages in your web and put copyright or footer information on the page.
It is easy to generate the content for this page. Copy the contents of each section page to the clipboard and paste them in the alternate table of contents page. Then mention that this table of contents was loaded because the user did not have a frame-compatible browser. Provide links to sites where the user can download a browser that can handle frames.
To see how your frame set looks, open a frame-compatible browser, such as Netscape 2.0. Enter a URL similar to the following, replacing the server name and web name with the one you created your frame set in:
http://localhost/yourwebname/chap14fs.htm
The browser loads the frame set. It should look like the one in Figure 14.12.
Figure 14.12: How your frame set actually looks.
This frame set does not have to be used for a book. Figure 14.13 shows the same frame set being used with graphics for the top and bottom navigation bars and an image map for the table of contents. As you can see, the content is all up to you.
When you design a frame grid, you assign each frame in the frame
set a name, such as top, cleft, cright,
or bottom. Typically, you assign a name that describes
the frame's location in the frame set. Four frame names have special
meanings. They are described in Table 14.1.
| Name | Description |
| _blank | Loads the referenced page in a new window |
| _parent | Loads the referenced page in the parent frame if the current frame is one that has a parent frame |
| _self | Loads the referenced page in the same window as the link |
| _top | Removes the frame set and displays the referenced page in the full browser window |
You can edit a frame set after you create it. For example, you might want to remove, add, or rename frames. The steps are
You added default target frames to the frame set that you created
in this chapter
while you used the Frames Wizard. You also can add or edit a default
target frame. The steps are
It is possible to display another page in your web inside one of the frames in a frame set. The steps are
If you have a clickable image, you do not necessarily have to assign a default target frame for each hotspot link that appears on the page. When you set the default target frame in a clickable image, you can use the Image Properties dialog box to assign a global default target frame. This means that all links in the clickable image that do not have target frames associated with them are associated with the global default target frame.
To add a default target frame to a clickable image:
You also can add a target frame to a hotspot when you create it. Immediately after you draw the hotspot, the Create Link dialog box appears. Choose the Current Web tab, and specify the target frame, as in Figure 14.15.
Figure 14.15: You can specify a target frame in the Create Link dialog box.
You now know what frames are and what they do. It is time to hit the ground running and develop some frame sets of your own.
In this chapter, you learned how to give your pages multiple personalities by using frame sets. With the Frames Wizard, you designed a frame set and learned how to include page content in specified frames. You even learned how to use the same content for people who do not use frame-compatible browsers.
More challenging projects with frames await. In Chapter 17, "Real-Life Examples," you design a frame set into which you will insert multimedia content in Chapter 22, "Real-Life Examples."
|
| Can I put anything I want into frame sets? |
|
| More or less, yes. You can insert picture presentations, animations, video files, Java applets, forms (such as those used in the discussion groups), and even links to your favorite sites. Exercise caution when you use links to other sites in your frame pages, however. When you include a link to a page on someone else's site, assign it a default target frame _top. Otherwise, the pages at the other sites are displayed in your frame set. This gives the illusion that the pages from the other sites are part of your site. The user will continue down the Net with those pages displaying in your frame. You can see what a mess that might cause. |
|
| When I divide pages into frames, how large should I make the graphics? |
|
| The resolutions most commonly used when browsing the Web are 640 x 480 and 800 x 600, with the latter being most common. In 640 x 480 resolution, Netscape's viewing screen measures close to 626 by 278 pixels. I nternet Explorer's measures 610 by 312 pixels; release 3.0 will support frames. In 800 x 600 mode, Netscape's screen measures 786 by 398 pixels, and Internet Explorer measures 764 by 408 pixels. You can use these figures to estimate sizes for graphics. Alternatively, design your frame set and open it up in a frame-compatible browser. Using a screen capture program, take a screen shot of the frame set exactly as it appears in your browser at each resolution. That way, you can determine the exact measurements for your graphics. The hard part is deciding whether you want to design your graphics for 640 x 480 resolution or for 800 x 600 resolution. It is probably best to design for 640 x 480 resolution. |
|
| How many frames can I put in a page? |
|
| As many as you want. Remember, though, that some users display pages at lower resolutions. You do not want to use so many frames that the content of your pages becomes unreadable. If your frame sets contain many sections, check them out at 640¥480 resolution before you put them on the Web. |
