Other Connections Resources
Web Directories and Search Engines
On-Line Newspapers and other News Sources
Resources for Writing Instructors
Scholarship on Hypertext and Computer-Assisted Pedagogy
English Home Page
Allyn & Bacon Home Page
ab_webmaster@abacon.com
©1997 Allyn & Bacon
Like any HTML project, a frame-based design begins with an opening page. In frame structures, however, this opening page has two major components: the <FRAMESET> tag, which sets up the frame structure for the project, and the <NOFRAMES> tag, which provides an alternative for browsers that don't support frames. Frames
Remember that not all of your audience will be able to see your frames, so you might want to provide an alternative text version for them. You'll also need to experiment a bit as you develop your frame structures. As a way of demonstrating the basics, let's look at two popular models.
A Menu in a Bottom Frame
Here's an example of a structure that uses a frame at the foot of the screen to present a static menu of the site's contents.
The HTML for this example looks like this:
<HTML><HEAD>
</FRAMESET>
<TITLE>frames demo</TITLE>
</HEAD>
<FRAMESET ROWS="90%, 10%">
<NOFRAMES> I'm sorry, this project must be viewed with browsers that support frames.
</NOFRAMES>
</HTML>The first thing you should notice is that the <FRAMESET> command is placed after the <HEAD> of the HTML document. The <FRAMESET ROWS=90%,10%> tag determines that the structure of the page should be divided into two ROWS. This is accomplished by specifying how much space should be assigned to each of the ROWS; in this case 90% of the browser window is given to the first frame and 10% to the second.
Next, the sample shows how the structure of the page is further controlled with the <FRAME SRC> tag. This tells the browser what information to put into each of the rows. The first tag <FRAME SRC="primary.html" NAME=PRIMARY> specifies that the file "primary.html" should be loaded into the first frame. Like an HTML link, you can either specify a local file using relative link information or a remote file using a full URL.
The second frame in the structure is designated with the tag <FRAME SRC="menu.html" NAME=MENU>. This tag tells the browser to place the file "menu.html" in the second row of the frame structure. Note, also, that both of the frame source tags specify a name for each frame. The first frame is called "PRIMARY," and the second is called "MENU." You can call your frames whatever you like, but you'll need to provide a name for each so that you can control the way that files are loaded into the frames.
For instance, since the second frame in the structure acts as a menu for the site, you'll want to be able to specify that when users click on one of the terms in the menu, the appropriate file will be loaded into the "PRIMARY" frame. When you make your link to "Research" in the menu, you will specify which frame name you would like the file to load into by using the "TARGET" tag. The HTML will read:
<A HREF="research.html" TARGET=PRIMARY>Research</A>
This modified link command tells the browser to load the file "research.html" into the "PRIMARY" frame. There are other TARGET tags that let you control frame operations. If you use the <TARGET=_TOP> tag in the link you are creating, the browser will break out of your frames structure and load the specified page in its main window. If you use the <TARGET=_BLANK> tag, the specified page will be loaded in a new window.
The final thing to note about the sample shown in Figure A5.14 is the use of the <NOFRAMES> tag. In this case, we've simply inserted information that tells readers who are using a browser that does not support frames why the are unable to view the project. If you don't put any message into the <NOFRAMES> tag, these readers will see nothing but a blank page when they try to load your frames. Ideally you should provide an alternative version of your entire project so that people with limited technology will still be able to see your information. It's often easier to create a noframes version after a site is finished; you can usually retool the frame-based pages that you've developed fairly quickly.
A Menu in a Side Frame
The frame-based menu such as the example above is useful because it requires very little screen space. Using such a small frame, you can create a static menu for your site without detracting from the overall layout of the pages. However, this model is somewhat limited in the number of menu options that you can provide. If your site has more than a handful of major sections, you might be better served by placing them in a side menu.
Here's an example of a project that splits the screen into two columns. The HTML for this page looks like this:
<HTML><HEAD>
<TITLE>frames demo</TITLE>
</HEAD>
<FRAMESET COLS="25%, *">
<FRAME SRC="sidemenu.html" NAME="MENU" NORESIZE SCROLLING=NO>
<FRAME SRC="primary.html" NAME="PRIMARY" NORESIZE SCROLLING=AUTOMATIC>
</FRAMESET>
<NOFRAMES> I'm sorry, this project must be viewed with browsers that support frames.
</NOFRAMES>
</HTML>The side menu column on the left is created with the opening tag <FRAMESET COLS=25%,*>. Note that in addition to using the <COLS> tag to divide the page vertically, this command uses the "wildcard" or ( * ) symbol to designate the screen space allotted to the second frame in the structure. The initial frame will use 25% of the browser window for the first column. By using the ( * ) symbol, the tag tells the browser to give all the remaining space to the second frame. Additionally, you can specify an amount of space in absolute pixels by using an integer. If you knew that your side menu requires sixty-eight pixels to display all of its images, using the tag "COLS=68,*" would make your first frame exactly 68 pixels and give the rest of the space in the window to the second frame.
This example also shows how you can specify additional information about the frames in the <FRAME SRC> tag. The first frame in the sample is delineated with the
<FRAME SRC="menu.html" NAME=MENU NORESIZE SCROLLING=NO>
tag. If you don't specify against it, users can resize the frames in the window of the browser. The <NORESIZE> locks the frames into place. Additionally, the default specification will give frames scroll bars if there is more information than will fit in a frame window. By adding the <SCROLLING=NO> element to the tag, you can override this option.
You can also adjust the border elements of the frame structures you create to provide more sophisticated arrangements of elements within the window of the browser. For instance, if you eliminate the border on a frame, it is possible to create a menu that blends with the rest of your pages, but doesn't disappear when users scroll down in the main frame. To eliminate the border in a frame, add the <FRAMEBORDER=0> tag to your <FRAMESET> command. In your <FRAMESET> tag, you can adjust other border elements with tags like these:
<FRAMESET COLS="20%,80%" BORDERCOLOR=BLACK FRAMESPACING=30 FRAMEPADDING=20>
You can also adjust the spacing of the elements that will appear within an individual frame by adding attributes to the <FRAME> command with tags like these:
<FRAME NAME=BODY SCROLLING=NO SRC="body.html" MARGINWIDTH=10 MARGINHEIGHT=20>
These added elements will specify a margin of ten pixels for the width of your frame and twenty pixels for its height.
There are many additional tags that will add quite a bit of sophistication to your frame-based projects. You should also know that you can imbed frames within frames to create any number of different arrangements. The tags and information that we've offered here, however, allow you to set up these basic structures for your own pages and get you on your way toward creating more advanced arrangements. You'll probably need to experiment with the frame structures that you develop to arrive at a final design for a presentation. Remember that you can adjust the amount of "screen real estate" given to each frame and change the scrolling options for the various frames of the project. You can get more information about frames at http://home.netscape.com/assist/net_sites/frames.html