Previous Page TOC Next Page



14


Using Frames and the Frames Wizard


by William Robert Stanek

With frames, Netscape took one of the most powerful features of popular publishing applications and incorporated it into HTML in grand style. Frames enable you to create documents with multiple windows and, in doing so, open the door for an entirely new way to publish for the Web. Each frame is a mini-page within your Web publication. You can add scroll bars to a frame, enable users to manipulate the size of a frame, and add frames for permanent headers, footers, and menu bars. Hypertext references within frames can contain pointers to any window defined on the page or can launch an entirely new full-sized window. You can even create frames within frames.

Frame-Enhancing Your Documents


Frames enable you to create documents with multiple windows. Although Netscape Navigator 2.0 and 3.0 and Internet Explorer 3.0 are currently the only browsers that support frames, this will change quickly. There are plans to incorporate frames into the HTML 3.2 specification, and other browsers plan to support frames in their next major releases.

The best thing about frames is that they finally provide a way for Web publishers to easily create unique pages for users with Netscape-enhanced browsers. With frames, you can specify a section of a document that is used by frame-capable browsers and a section of a document that is used by browsers that cannot use frames.

Within the framed area of a page, you can nest frames. Each frame is identified by a unique source. The source can be any type of document, but they are typically HTML pages. The contents of each mini-window usually comes from a separately defined HTML document merged into a common window using Netscape frames. Some frames have horizontal and vertical scroll bars. Readers can use these scroll bars to read the additional material contained in the document.

You do not have to frame-enhance all the pages at your Web site. A key concept in designing publications for frames is to define frames only on the main page that readers use to access the publication. This can be your home page or any top-level page at your site. Using a top-level page reduces the amount of work you must do to frame-enhance your site and enables you to use frames as they were meant to be used.

To create a frame-enhanced page, you use the FrontPage Editor's Frames Wizard. You can launch the Frames Wizard by selecting New from the File menu or pressing Ctrl+N; then, in the New Page dialog box, click the Frames Wizard. This displays the Frames Wizard dialog box shown in Figure 14.1.

Figure 14.1. Starting the Frames Wizard.

As you can see from Figure 14.1, you can create a frame from a template or design a custom frame using a grid interface. Most Web publishers find that they want to use a template when creating a new Web site or a new section of an existing Web site. However, if you are frame-enhancing an existing Web site or section of your Web site, you probably want to design a custom frame.

The buttons at the bottom of the dialog box are standard throughout the frame creation process. At any time, you can move to the previous or next phase of the creation process using the Back or Next buttons. When you've fully defined the frame, the Next button is replaced with a Finish button. You can click the Finish button and the FrontPage Editor creates the frame-enhanced document you've designed.


TIP

Usually, when you frame-enhance existing pages, you want to save the old page format to a new location. Then, when you create your frame-enhanced page in the Frames Wizard, you can use the old page as the alternate document that is viewed in browsers not capable of displaying frames. If you are creating a new frame-enhanced page, you should create a page in the current web that can be used as the alternate document before you start the Frames Wizard.



Using the Custom Grid Interface


This section looks at how frames are created using the Frames Wizard custom grid interface. Even if you plan to use a template to create your frames, read this section to better understand how frames work. Each frame contains a separately defined document or resource. When you are creating a frame-enhanced document using the custom grid interface, each source document should already be defined.

Dividing a Browser Window into Frames


With the Frames Wizard dialog box open to the Choose Technique page, select Make a Custom Grid and then click the Next button. This displays the Edit Frameset Grid page shown in Figure 14.2.

Figure 14.2. Creating the frame using the grid interface.

At first glance, the way you divide a browser window into frames can seem confusing. This is because window frames are organized much like a table is, with each window divided into one or more rows and columns. You count the rows for a window as the number of horizontal frame partitions. You count the columns for a window as the number of vertical frame partitions.

Using the Rows field, you can define the number of rows to display in your browser window. The size of a row is expressed as a relative value, meaning it is based on the current window size. You can set the relative size of the row using the grid interface.

Using the Columns field, you can define the number of columns to display in your browser window. The size of a column is expressed as a relative value, meaning it is based on the current window size. You can set the relative size of the column using the grid interface.

The way columns and rows of frames are organized depends on how you make row and column assignments using the grid interface. Each column can have multiple rows, and each row can have multiple columns. To start the frame creation process, you select the number of columns and rows you want the document to contain.


TIP

By default, the Frames Wizard sets the number of rows and columns to two. At this point, do not worry about the size of the frames. First, decide on the number of columns and rows. You can break down each frame into smaller frames.


Next, you can break individual frames into smaller frames. To do this, select the frame by holding down the Shift key and clicking while the pointer is over the frame you want to select. After a frame is selected, you can break it down into smaller sections using the Split button.

Figure 14.3 shows a document being created with the Frames Wizard. This document is initially divided into one column and two rows. To divide the bottom row into two columns, you select the bottom frame and then click the Split button. By default, the Frames Wizard subdivides the frame into two rows and two columns.

Figure 14.3. Working with the grid interface.

To divide the bottom frame into two columns and only one row, you change the settings for the Rows and Columns field as shown in Figure 14.4. This activates the Merge button, which allows you to merge all the subframes back into one frame if you've made a mistake.

Figure 14.4. Splitting a selected frame.

With your document broken into frames and subframes, you can work on sizing the frames. As you can see from Figure 14.4, each frame is separated by a grid line. You can move these horizontal and vertical grid lines to resize any frames in your document. To do this, move the pointer to the grid line you want to resize. The arrow pointer changes to the resize pointer—a pointer with arrows on either end. If you press and hold down the left mouse button, you can drag the grid line to resize the frame. When you are done sizing frames, click the Next button to continue.

Defining Individual Frames


The next page in the Frames Wizard lets you define the source document for individual frames. As you can see from Figure 14.5, you click a frame to define its attributes.

Figure 14.5. Defining each frame.

The only field you must define for your frame-enhanced document to display properly is the Source URL field, which specifies the source document or object for the frame. If you do not specify a source URL, the frame appears as an ugly blank space in the window. FrontPage displays a warning if you do not name a source for any of your frames. When you see this warning, you should go back and add a source URL to any frame that does not have one. Because only Netscape-enhanced browsers can use your frames, the source you specify is usually a Netscape-enhanced document, such as Netscape Navigator or Internet Explorer.

In the Source URL field, you can enter the filename of a document in the current Web or click the Browse button, which opens the dialog box shown in Figure 14.6. As you can see from the figure, the Choose Source URL dialog box has three tabs: HTML Page, Image, and Any Type. The HTML Page tab lets you select a source document from a list of HTML documents in the current web. The Image tab lets you select a source document from a list of GIF and JPEG images in the current web. The Any Type tab lets you select a source document from a list of all the files in the current web.

Figure 14.6. Choosing a source URL.


CAUTION

Although the Frames Wizard lets you select document sources that aren't HTML documents, you generally should not do this. Instead, create an HTML document that includes the image or other resource. In this way, you can be sure the user's browser will display the image or resource properly and in a uniform way.


After you've specified a source document for the frame, you can edit the page immediately by clicking the Edit button. Other optional fields for frames include Margin Height, Margin Width, No Resize, and Scrolling.

Frame Margins

The Margin Height field controls the top and bottom margin sizes for the frame. The minimum margin size is 1. If you assign a margin size of less than 1, your browser displays the frame with a margin to ensure frame edges do not touch. If you do not assign a margin size, the browser uses a default margin size, which can vary. Consequently, you might want to assign a specific margin size for the frame's top and bottom margins.

The Margin Width field controls the frame's left and right margin sizes. The minimum margin size here is also 1. You set margin height and margin width in the Appearance area of the Edit Frame Attributes page shown previously in Figure 14.5.


TIP

Internet Explorer 3.0 supports cool enhancements that allow users to view frames without borders. If you are frame-enhancing your pages specifically for Internet Explorer 3.0, you might want to set the Margin Height and Margin Width field values to zero for all frames in your document, which is the trick you can use to get borderless frames. Keep in mind that borders and scroll bars are automatically added if the content of the frame is larger than the area dedicated to the frame. Minimize document content if you want to achieve borderless frames.



User Adjustment of Frames

Users can adjust frames in two key ways: using scroll bars and by resizing the frame. In general, users want to be able to manipulate your frames, especially if they are using a screen size other than the one you created the publication for. However, you can turn these features on or off using the Scrolling and Not Resizable fields.

By default, the browser decides whether a window should have scroll bars. If the entire source document is visible in the frame, the browser automatically displays the frame without scroll bars. If the entire source document is not visible in the frame, the browser automatically displays the frame with scroll bars.

Older browsers display both horizontal and vertical scroll bars regardless of whether both are needed. The Frames Wizard lets you set the Scrolling field to either Auto or No. You can override the default Auto value for the Scrolling field by setting the value to No, which ensures scroll bars are never visible.

By default, the size of all frames can be adjusted by the user. Users can adjust frames by moving the pointer over a frame edge, holding down the left mouse button when the resizing icon appears, and dragging the frame edge to a new position. You can turn the resizing feature off by setting the Not Resizable field. Keep in mind, though, that even a single frame that cannot be resized affects the adjustability of other frames in the window.

Targeting and Naming Frames

The Name field plays a key role in how your frames interact with other frames and windows. By default, hypertext references within a frame are targeted to the frame itself. This means that when you activate a link within a frame, the new document is usually loaded into the same frame. By naming a frame, you can target it from other frames on the page. To name a frame, you should use a key word that begins with an alphanumeric character, such as Main.

By default, all frames are unnamed. After you have assigned a name to a frame, that frame can be targeted by other frames. Usually, these frames are on the same page. For example, your page could have a main section named Main and a menu section targeted at the Main frame. In this way, when a user clicks a hypertext reference in the menu, the corresponding document is loaded into the Main frame.

To target a frame, you must set the Default Target Frame field in the Page Properties dialog box associated with the source page. The value for the Default Target Frame field should be the name of the frame you want to target. This means the Name field for each frame you are defining is very important and should be uniquely specified for all frames in a page.


TIP

An interesting way to set the Default Target Frame field is to target a name you haven't used elsewhere. If the target name is not a frame in the currently defined window, the browser opens a new window in addition to the current window. If the current window has two unnamed frames and one frame named Central1, setting a target of Window2 opens a new window.



Defining an Alternate Document


When you are done defining individual frames, click the Next button. As shown in Figure 14.7, you can then specify a source document that is displayed by browsers that are not capable of using frames. This source document must be defined in the current web.

Figure 14.7. Defining an alternate document.


TIP

You can resize frames on the Choose Alternate Content page. To do this, manipulate the grid just as you would on the previous page.


It is always a good idea to define an alternate source document. There is no point in creating a page that arbitrarily excludes a group of Web users. However, if you do not specify an alternate source, the Frames Wizard inserts a warning to users who cannot view the frame-enhanced document that tells them the page uses frames, which is a feature not supported by their browsers.

To specify an alternate source document, click the Browse button. The Frames Wizard then displays the Choose Source URL dialog box. Although this dialog box lets you specify source documents that are not in HTML format, you should rarely do so.


NOTE

All frame-enhanced pages should contain a fully defined alternate document. This document could simply contain your original page before you frame-enhanced it.



Saving the Page


After defining the alternate document, click the Next button. As shown in Figure 14.8, you can then save the page. Before you click the Finish button, you should specify a title and a page URL for your new frame-enhanced document.

Figure 14.8. Saving the page.

When you click the Finish button, the Frames Wizard creates the document and updates the current web. Sometimes this process takes longer than you'd expect, so be patient. After the page is created, you can view the page in a frame-enhanced browser such as the Netscape Navigator version 2.0 or higher or the Internet Explorer version 3.0 or higher.

Using Frame Templates


This section looks at how frames are created using templates defined in the Frames Wizard. Each frame contains a separately defined document or resource. When you are creating a frame-enhanced document using templates, each source document is generated automatically by the Frames Wizard.

With the Frames Wizard dialog box open to the first page, select Pick a Template and then click the Next button. This displays the template selection page shown in Figure 14.9.

Figure 14.9. Selecting a template.

The currently selected template is highlighted. You can select another template using the arrow keys or by clicking the template you want to use. Each template has unique characteristics, which are examined later in this chapter.

After selecting a template that meets your needs, click the Next button. This takes you to the Choose Alternate Content page. Define your alternate content just as you would if you were creating a page using the custom grid. Before you continue, make sure your frames are sized properly. When using templates, this is the only page on which you can resize frames.

After you've defined an alternate document source, click the Next button again. This takes you to the final page in the Frames Wizard. On the Save page, you can specify a title and a page URL for your new frame-enhanced document.

Template 1: Banner with Nested Table of Contents


The template shown earlier in Figure 14.9 creates a document with a banner at the top, a Table of Contents frame, and a Main frame. The Banner frame targets the Table of Contents frame and should contain the Main navigation links. When users click a link in the Banner frame, their browser loads the referenced document into the Table of Contents frame.

The Table of Contents frame targets the Main frame and should contain links to the main pages in the current section of the web or to all the bookmarks in Main frame's current page. When users click a link in this frame, their browser loads the referenced document into the Main frame.

The Main frame does not target any other frame and should contain the main information. When users click a link in this frame, their browsers load the referenced document into the Main frame, which overwrites the existing source document. You can change the default target for any frame by editing the page's properties.

Figure 14.10 shows the default contents and appearance of a document created with this template. As you can see, you need to edit the source documents the page is based on.

Figure 14.10. A frame-enhanced document based on template 1, the banner with nested table of contents.

Template 2: Main Document plus Footnotes


The template shown in Figure 14.11 creates a document with a Main frame and a scrolling Footnote frame. The Main frame targets the Footnote frame and should contain the main information for the document. When users click a link in the Main frame, the corresponding footnotes are displayed in the Footnote frame.

Figure 14.11. Creating a document with footnotes.

The Footnote frame does not target any other frame and should contain references for the main document. You can change the default target for any frame by editing the page's properties.

A document created with this template is shown in Figure 14.12. As with most frame templates, you want to edit the source documents for the frames before you publish your page.

Figure 14.12. A frame-enhanced document based on template 2, the main document plus footnotes.

Template 3: Navigation Bars with Internal Table of Contents


The template shown in Figure 14.13 creates a document with navigation bars at the top and bottom, a Table of Contents frame, and a Main frame. Navigation bars are usually image map banners. Both navigation bars target the Table of Contents frame and should contain the main navigation links. When users click a link in either navigation bar, their browsers load the referenced document into the Table of Contents frame.

Figure 14.13. Creating a document with navigation bars.

The Table of Contents frame targets the Main frame and should contain links to the main pages in the current section of the web or to all the bookmarks in the Main frame's current page. When users click a link in this frame, their browsers load the referenced document into the Main frame.

The Main frame does not target any other frame and should contain the main information. When users click a link in this frame, their browsers load the referenced document into the Main frame, which overwrites the existing source document. You can change the default target for any frame by editing the page's properties.

As you can see in Figure 14.14, this template creates one of the most useful frame-enhanced documents. Once again, you need to edit the source documents the page is based on before publishing the page.

Figure 14.14. A frame-enhanced document based on template 3, the navigation bars with internal table of contents.

Template 4: The Top-Down Three-Level Hierarchy


The template shown in Figure 14.15 creates a document with a top-down hierarchy split into three frames. The top frame targets the middle frame and should contain the main sections of your web. When users click a link in the top frame, their browsers load the referenced document into the middle frame.

Figure 14.15. Creating a document with a top-down hierarchy.

The middle frame targets the bottom frame and should contain links to the main subsections of the web or to all the bookmarks in the bottom frame's current document. When users click a link in this frame, their browsers load the referenced document into the bottom frame.

The bottom frame does not target any other frame and should contain the detailed information at your site. When users click a link in this frame, their browsers load the referenced document into the bottom frame, which overwrites the existing source document. You can change the default target for any frame by editing the page's properties.

The default document created with this template is shown in Figure 14.16.

Figure 14.16. A frame-enhanced document based on template 4, the top-down three-level hierarchy.

Template 5: The Nested Three-Level Hierarchy


The template shown in Figure 14.17 creates a document with a nested hierarchy split into three frames. The left frame targets the right top frame and should contain the main sections of your web. When users click a link in the top frame, their browsers load the referenced document into the right top frame.

Figure 14.17. Creating a document with a nested hierarchy.

The right top frame targets the right bottom frame and should contain links to the main subsections of the web or to all the bookmarks in the right bottom frame's current document. When users click a link in this frame, their browsers load the referenced document into the right bottom frame.

The right bottom frame does not target any other frame and should contain the detailed information at your site. When users click a link in this frame, their browsers load the referenced document into the right bottom frame, which overwrites the existing source document. You can change the default target for any frame by editing the page's properties.

A document using the nested three-level hierarchy is shown in Figure 14.18.

Figure 14.18. A frame-enhanced document based on template 5, the nested three-level hierarchy.

Template 6: Simple Table of Contents


The template shown in Figure 14.19 creates a document with a Table of Contents frame and a Main frame. The Table of Contents frame targets the Main frame and should contain links to the main pages in the current section of the web or to all the bookmarks in the Main frame's current page. When users click a link in this frame, their browsers load the referenced document into the Main frame.

Figure 14.19. Creating a document with a table of contents.

The Main frame does not target any other frame and should contain the main information. When users click a link in this frame, their browsers load the referenced document into the Main frame, which overwrites the existing source document. You can change the default target for any frame by editing the page's properties.

Figure 14.20 shows a document created with this template.

Figure 14.20. A frame-enhanced document based on template 6, the simple table of contents.

Targeting Frames and New Windows from Links


To ensure that you have maximum flexibility as a Web publisher, each link in your frame-enhanced document can have its own target frame. This allows you to target any frame in the current window or to open a new window if necessary. You identify a target frame using the name assigned to the frame when you created it.


TIP

To open a new window, you target a frame that does not exist in the current window. When the users click a link targeted to a new window, their browsers open a separate browser window and load the referenced document. If all your links in a particular page target this new window, the user can easily switch back and forth between the two windows.


There are two key ways to define a target for a link. The first way is to define the target frame when you are adding the link to the document. If you remember from Chapter 9, "Adding Features to the Page," you select the text or image that identifies the link and then either choose Link from the Edit menu or click the Link button. This opens the Create Link dialog box. In the Target Frame field, enter the name of the frame you want the link to target. You can also define a target frame for any link you've created by selecting that link and editing its properties.

You can also use the NAME and TARGET attributes to establish the current document's relationship to other documents. Currently, four relationships are defined:

_blank Load this link into a new, unnamed window.
_self Load this link over yourself.
_parent Load this link over yourself and reset the window.
_top Load this link at the top level.

Although all these relationships are useful, the most useful relationship is _parent. Using the _parent relationship, you can force the browser to reset the window entirely and avoid loading a frame document within the current frame. You want to use this relationship whenever you have a link that leads to a page containing frame assignments. For example, if lower-level documents reference your home page, you can assign the target of the link as _parent to avoid getting a frame within a frame.

Editing Frame-Enhanced Pages


For frame-enhanced pages, you should start the editing process from the FrontPage Explorer. Figure 14.21 shows the frame-enhanced documents I created as examples for this chapter. As you know, when you select a document in the Outline View, its structure and links are shown in the Link View.

Figure 14.21. To edit frame-enhanced documents, start in the FrontPage Explorer.

At the top level of the view, you see the source documents for each frame. To edit any of these source documents, double-click the appropriate document's icon in the Link View. This starts the FrontPage Editor with the source document loaded so you can edit it. To edit the properties of the frame-enhanced document, double-click its icon. This starts the Frames Wizard on the Edit Frameset Grid page.

Combined Frame Example


This section gives you an inside look at how I frame-enhanced the Virtual Press (TVP) Web site. The TVP Web site is organized into seven main areas, or publications:

When I frame-enhanced the TVP Web site, I made a conscious decision to create separate frame-enhanced pages for each of these seven main areas. Most of the visitors to the site do not start on the TVP home page. They start on one of the other main areas. If I had frame-enhanced only the home page, hundreds of thousands of visitors might miss out on the powerful features I added for users with frame-capable browsers. Frame-enhancing the seven top-level pages also enables me to give each area a unique look and feel.

In the series of examples that follow, you will see how the Internet Job Information Center (JIC) was frame-enhanced. You will also learn the design concepts that went into frame-enhancing the Internet's JIC. The top-level page is shown in Figure 14.22.

Figure 14.22. Internet Job Information Center, frame-enhanced.

The window shown in Figure 14.22 is divided into three frames. The first row is divided into two columns. The second row has a single frame that occupies the entire width of the window. Each frame has a document associated with it. The source for the small frame on the left side of the window is a document called vp.html. The source for the large, Main frame is a document called vpjic2.html. The source for the bottom frame is a document called fmenu.html. Finally, each frame was named so it could be targeted from other frames on the page. The side frame is called Vpside. The main frame is called Vpmain. The footer frame is called Vpfooter.

The vp.html document displays a title graphic. The vpjic2.html document contains the source for the Main frame and is a modified version of the original Job Information Center top-level page. The primary modifications were to remove the graphical logo at the top of the page and the links to other top-level pages because these links are unnecessary.

Although the fmenu.html document could have used a base target assignment, I did not use one when creating the page because of the mix of links to top-level pages and supplementary pages. Some links target the Main frame called Vpmain. Activating one of these links loads the associated document into the Main frame. Other links target a parent document. Activating one of these links causes the parent document to load over the current window. This ensures that a top-level document's frame assignments are not loaded into another frame on the page.

Creating Borderless Frames


Internet Explorer 3.0 supports enhancements that let users view frames without borders. A sample page using borderless frames is shown in Figure 14.23. Keep in mind that browsers that don't support borderless frames will display your document in a traditional frame style.

Figure 14.23. A page with borderless frames.

If you're frame-enhancing your pages specifically for Internet Explorer 3.0, you might want to use the optional FRAMEBORDER and FRAMESPACING attributes for the <FRAMESET> tag. The trick you can use to get borderless frames is to set both FRAMEBORDER and FRAMESPACING attributes to zero. Keep in mind that borders and scroll bars are automatically added if the content of the frame is larger than the area dedicated to the frame, so keep document content to a minimum if you want to get borderless frames.

Although setting two additional properties to zero might seem simple, you cannot do this directly in FrontPage. FrontPage launches the Frames Wizard whenever you try to open a frame-enhanced page. Instead, open the page containing the frame source references in your favorite word processor or text editor. Wherever you see a frame source reference, insert the following:




FRAMEBORDER=0 FRAMESPACING=0

A frame source reference using the <FRAME> tag with a SRC attribute looks like




<frame src="frtop.htm" name="top" noresize>

In your editor, you change this line of code to




<frame src="frtop.htm" name="top" noresize frameborder=0 framespacing=0>

Generally, there is one frame source reference for each frame used in your page. If your page has three frames, you need to change three frame source lines.

Summary


Following the frame model specified in Netscape enhancements to HTML, you can frame-enhance your Web publication or site. Frames are more than mini-windows within the larger browser window. In fact, they are the gateway to an entirely new way to publish on the Web. If you've ever wanted to add power features to your Web publications, frames provide definite starting points.

Previous Page Page Top TOC Next Page