Animated Ball UMUC Logo
http://polaris.umuc.edu/~flazarus/

  

The Mechanics of Web Page Design: Frames

Why frames? In a word, navigation. As I'm sure you have observed, this class module uses frames. On the left, the guide post remains in place as you move about, aiding with navigation among these pages. The top frame, also stationary, clearly indicates the part of the course you are working with. I think you will agree that this works. I hope so at any rate. There are additional reasons to use frames. One that is important to me is that frames significantly reduce page maintenance effort.

Now how to teach this "art" of frames. Why not just do it?

  1. The text (Musciano - HTML) is quite good, however you may also wish to check Jalfrezi frames or Web Reference for a more dynamic presentation.

  2. Next we need to generate 3 HTML files.
    • The side bar (sb.html)
    • The header (head.html)
    • The body (body.html)
      (For you Win 3.1 users the DOS file name extension is of course .htm)
    Using the simple template (not the enhanced) prepare these HTML files containing nothing in the body except the title, file name and date like so: side bar, header, body.
    Check View Document Source with your browser to see the format of my examples

  3. Now, prepare a "Frames" template. Note the differences from a standard template.

1. <!-- 07/31/96, FFL, 1st_fram.html, a generalized frames template -->
2. <HTML>
3. <HEAD>
4. <TITLE>
5. Mechanics of Web Page Design: Frames Template
6. </TITLE>
7. </HEAD>

8. <FRAMESET COLS="m*, n*, ...">
9. <FRAME SRC="file_nm.html">
10.      <FRAMESET ROWS="r*, s*, ...">
11.      <FRAME SRC="file_rs.html">

12. <NOFRAMES>
13. (This stuff between the NOFRAMES tags is for browsers that do not support frames. Perhaps I will place a comment such as "Sorry, but you need a frames aware browser to view this page.")
14. </NOFRAMES>

15. </FRAMESET>
16.      </FRAMESET>
17 </HTML>

 The purpose of all lines of the Frames template should be self evident except perhaps lines 8 through 11. Let us examine these.

8. This line sets the number and the width of the of columns to be presented. m, n, ... are integers where each i* presents a column of i units in width. For example

<FRAMESET COLS="3*,7*">

presents 2 columns the first is 3/10 of the page wide the second 7/10 wide.

9. A frame source file is required for each column except if the column is subsequently subdivided into rows. If a file is not referenced the the column space is left blank.

10. By nesting FRAMESETS, as shown, we can subdivide columns into rows.

11. We of course need a source file for each row that is not subsequently subdivided into columns.

The process is symmetric with columns and rows interchangeable. The order of the "code" is important since the process is linear with the browser responding to each line in order.

Now the hard part. Fill it out. Make it work. Like so: Frames
  
An exercise for students: Prepare an argument for the use of frames and one against their use. Support each argument by at least one citation. You distance folks please post this exercise to our class mailing list.

Back to the Mechanics Index
Back to 'Constructs'