Frames Exercise

Framesets and Frames

In HTML, a frameset file shows multiple html files simultaneously, each in its own portion of the browser window, each of which is called a frame.

Framesets often include many image and html files. In order to more easily manage the files needed for this frames exercise, make a new folder and name it "frames". Inside of it, create an additional new folder and name that folder "images".

Next, get the files you'll need for the exercise. Open each link below and save each file in your new "frames" folder, keeping the same file name. As you do, also save the image files from each page in your new "images" folder that you created inside of the "frames" folder. Close each file after you have saved both the file and the images in it.

J03_center.html
J04_left_A.html
J05_left_B.html
J06_right.html

Now, open the frameset file. This is the file that defines the size and amount of frames. It also specifies which files are displayed within those frames:

J02 frameset.html

It should look something like this:

Unlike most html files we've saved, in order to see and then save the code of a frameset file in Notepad, you need to use the browser's menu and then select: View > Source. Right-clicking won't show you the code unless you right-click very precisely on one of the dividing lines between the frames.

Once opened, just to be sure you're looking at the frameset file, look in the code for the FRAMESET tag. There isn't much code in a FRAMESET file, so the FRAMESET tag ought to be easy to spot. It ought to be just after the closing HEAD tag.

Save the frameset file in your frames folder. Now, check to make sure that you have all 5 of the html files listed above in your frames folder.

Also, the following image files ought to be in the images folder that's in your frames folder. Be sure that all files have retained the same names as listed here. If you don't have all of the image files, then click on any of the following links and the respective image file should open in a new browser window. Then you can save it from there:

LtBLUEboombox.gif
smTrLAVNRbomb.gif
smTrROSEblocks.gif
smTrROSEbrush.gif
smTrTEALcity.gif
TrROSEballoons.gif

The Frameset

If it isn't already, open the frameset file in your browser:

J02_frameset.html

Using the browser's menu, select: "View > Source":

<html>
  <head>
    <title>I've Been Framed!</title>
  </head>
  <frameset cols="25%,50%,25%" rows="*"> 
    <frame src="J04_left_A.html" name="leftframe">
    <frame src="J03_center.html" name="centerframe">
    <frame src="J06_right.html" name="rightframe">
  </frameset><noframes></noframes>
</html>

Let's dissect the code. Get your scalpel ready! Top

Standard Tags

First of all, we have the standard opening and closing HTML tags. Under the opening HTML tag is a pair of HEAD tags that encloses a pair of TITLE tags with the page's title "I've been framed!". So far, this is all standard HTML code. But now it starts to be quite different than what you're used to. You may notice there are no BODY tags. Top

Frameset and Frame Tags

Instead of body tags, there is a pair of FRAMESET tags nesting 3 FRAME tags. Let's analyze the tags and their attributes.

The FRAMESET tag has attributes that define how many columns and/or rows there will be in the frameset. Each of the individual sections created after dividing up the window into columns and rows is called a FRAME.

In the sample FRAMESET code above we see the attribute COLS=. This is how columns are created. The amount of columns is determined by how many size values are listed after it, separated by commas.

In this case we have three percentages listed in the following sequence: 25%, 50%, 25%. Because there are three items in this series it means that there will be three columns, which is what you should see. Top

Columns and Rows; Nesting Framesets

Rows are created in the same manner but using the ROWS attribute. The code syntax is just like COLS. The COLS and ROWS attributes can be used alone or in combination with one another, in which case you will have both columns and rows of frames in the browser window. You can also nest framesets inside of other frames. Top

Percentages

Measurements can be given in pixels or percentages. When a percentage is used it specifies the percentage of the browser window that will be occupied, regardless of the window's size. A setting of 50% would mean half the browser window, no matter how big or small anyone makes the the browser window.

The exception is when you have used pixels to define the size of one of the other rows or columns in the frameset. In that case, if you specify an attribute value of 50% for one of the remaining respective rows or columns, it would take up half of whatever space remained.

In the frameset file that you opened (J02_frameset.html), the widths of the columns are specified as percentages of the browser window as follows: 25%, 50%, 25%. If you alter the size of the browser window, all the columns will get narrower or wider relative to the size of the window.

However, the two outer columns will both remain equal in width and the center column will be twice as wide as either of the outside columns no matter what size the browser is. Try it: vary the width of the browser window and see what happens.

Top

Asterisks

The other frame size specification is the asterisk. It's similar to the percentage measurement in that it refers to a proportion of the browser window. A single asterisk means "fill up however much of the screen is not claimed by any other measurement". Top

Exercise:

Using File -Save As... in Notepad, save the frameset file as J02_yourlastname.html. Save the new file in your frames folder.
Open this new file in your browser. It should look the same as the frameset you were looking at before.
Using Notepad, make the following revisions, and after each of the following steps, save the file and look at it in the browser before moving on. Don't be surprised if you have trouble seeing the changes you made. If you do have problems seeing changes as you work, then see the sections below called "Seeing Changes"* and "Purging Cache"**.
Change the percentages of the outer frames from 25% to 15% each. Leave the inner frame at 50%. Put a comma after the second 15% and then an asterisk; close the quotes. See if this creates another frame. You ought to have 4 frames in a row now and the code for it should be:
```
<frameset cols="15%,50%,15%,*" rows="*">     
```
Add content to the new frame by copying the code of the last FRAME tag and its attributes and pasting it underneath the last of the original three FRAME tags, but before the closing FRAMESET tag. Change its NAME attribute to "farrightframe". Your FRAME code should now look like this (the added code is in bold, including the comma and asterisk in the first line):

 <frameset cols="15%,50%,15%,*" rows="*">      
     <frame src="J04_left_A.html"  name="leftframe">
     <frame src="J03_center.html"  name="centerframe"> 
     <frame src="J06_right.html" name="rightframe">
     <frame src="J06_right.html" name="farrightframe">      
 </frameset>

Save the file and check it in your browser. You ought to see the same content in both right frames, but the far right frame ought to be the equivalent of 20% of the width which is slightly wider than the first and third frames from the left which are each 15%.
Next, change the middle 50% to an asterisk. The code for your opening frameset tag should now look like this:

 <frameset cols="15%,*,15%,*" rows="*">

View the difference in the browser. The 2nd and 4th columns ought to be the same size and each the equivalent of 35% of the browser's width.
Now, add to the FRAMESET tag the attribute BORDER=0. This should make the dividing lines disappear (but not the scroll bars). Scroll bars automatically appear if the content of the frame is not accommodated by its size. You can see at least some of the scroll bars appear and disappear by making your browser window very small and then very large. (Note that scroll bars can be turned off using the individual frame attribute: SCROLLING="NO").
Now, divide the browser's window into two rows by changing the FRAMESET tag's ROWS attribute to: ROWS="*,*". You should now have two rows of 4 frames each, and the rows should be equal heights.
Add content to the additional frames by copying all four FRAME tags and all their attributes and then pasting them beneath themselves but before the closing FRAMESET tag.
Modify the new row's frames' NAME attributes so that they are different than the top row's. Preface each new frame name with the letters" Bottom". See the bold letters below. Your frameset code ought to then look something like the following:

<FRAMESET BORDER=0 COLS="15%,*,15%,*" ROWS="*,*">      
  <FRAME SRC="J04_left_A.html"  NAME="leftframe">
  <FRAME SRC="J03_center.html"  NAME="centerframe">
  <FRAME SRC="J06_right.html"  NAME="rightframe">
  <FRAME SRC="J06_right.html"  NAME="farrightframe">
  <FRAME SRC="J04_left_A.html"  NAME="bottomleftframe">
  <FRAME SRC="J03_center.html"  NAME="bottomcenterframe">
  <FRAME SRC="J06_right.html"  NAME="bottomrightframe">
  <FRAME SRC="J06_right.html"  NAME="bottomfarrightframe">
</FRAMESET>

Modify the first link in the file: J03_center.html. Change it from the URL of the "Phobia" site into a URL of your choosing. To do this, open the file:
```
 J03_center.html
```
Change the "target" of the second link in the J03_center.html file so that it opens in the bottom far right frame. You ought to be able to figure out how to do this by looking at the code for the target of the second link and then changing the code accordingly.
You now probably have a frameset that looks like pandemonium! Well, the idea was to get you to be familiar with the HTML code used to create frames, not to create a work of art. Save and close the J03_center.html file.
Online students: send me your frameset file: J02_yourlastname.html with all the changes you made to it. Also send me the revised J03_center.html file. It is not necessary to send me any of the other files.

I hope you had some fun and learned something. This has been an opportunity to exercise your new HTML skills in addition to learning about FRAMES. Top

Addendum

* Seeing Changes

Browsers are usually set to "cache" (pronounced "cash") the files they display so that they don't have to be downloaded again. This means that if you request a page that you have downloaded before, the browser will probably show you the cached (saved) files that were saved on your hard drive rather than going to the trouble of downloading the original files all over again.

When you are in the process of developing or creating web pages, you will want to defeat this setting so that you can see revisions instead of older, saved pages. But even when you change browser settings to do this, sometimes the browsers won't follow the settings.

To changes, first try hitting the "refresh" button. If that doesn't work, then close the browser window and use the browser's File menu to open the file again. If that doesn't work, then purge the browser's cache (see next paragraph) or try quitting the browser application altogether and then reboot (restart) it. Even then strange things can happen, such as the browser no longer sees the image files. Keep trying. Top

** Purging Cache

You can modify the browser's cache settings. How this is done can vary from browser to browser. With Internet Explorer on Macs, you will find the settings in the Advanced section of Preferences. On a PC running Internet Explorer 5, you will find the settings using the following chain of menu selections:

Tools > Internet Options > General > Temporary Internet Files >
> Settings > …then select: Every Visit to the Page.

To purge (completely delete) the cached files with I.E. v.5 for PC's:

Tools > Internet Options > General > Temporary Internet Files >
> Delete Files > OK

Top