Exercise: Frames

Back in 1995 Netscape introduced a method of putting more than one html page on the screen at the same time known as frames. Frames soon became all the rage and even Explorer began to support them. When the HTML 4.01 standard was released it contained frames. For a while in the late 90s it seemed everyone was using frames.

But then the worm turned. Frames began to fall out of favor as weaknesses became more evident: for one, it is difficult to bookmark a page in a frameset; creating links to pages within framesets is also a pain. And there are accessibility issues. Today frames tend to be looked-down upon, even scorned by "serious" developers.

Despite this, frames when used wisely still offer advantages over standard html pages. For one, it is easy to create persistent elements (like navigation menus) by placing them in a frame that does not move or change. Frames also make it easier to add new pages or sections to the site—instead of having to add the new links to every single page, they only need be added to a single navigation page.

In this exercise you will create a mini web site using frames.

Procedure

Web pages that use frames actually consist of multiple html pages. Therefore, we must create at least three different html pages: a separate page of each frame and one controlling "frameset" page. In this exercise we will make 6 pages: a frameset, a navigation page, and 4 content pages (note that although our frameset will contain two frames, it is possible to have three, four, or more frames in a frameset).

To begin we'll need a root folder to contain this mini site. Create a folder called famesExercise and put it in your class root folder.

Now let's quickly build our various pages; we'll keep 'em simple for now. Create a new html page. On it write "Red Page" and color the body background red (you can use either a style sheet or bgcolor attribute). Save the page into the folder as red.html.

Create three more pages called blue.html, green.html and yellow.html. Obviously you'll want to change the text and background colors accordingly.

Now make a navigation page. Basically create a new html page with four links: one to the Red Page, one to the Blue Page, etc. Save this page as navigation.html (save it before you link the pages).

Now comes the key ingredient: the frameset page. The frameset is a special html page that contain no content in and of itself; rather it supplies structure to the page. The frameset defines the number, size and name of the various frames to be used on the page. In this case we are going to create to columns—one for navigation and one for content.

A frameset page looks like a standard html page except it has no <body>. Instead, it has <frameset> tags. So to create a frameset start with a standard html page, but take out the <body> tags. In their place add:

</frameset>

Framesets can be divided into columns, rows (or both). The attribute "cols" defines columns. If you wanted horizontal rows you would use the "rows" attribute. The value of the attributes determine the size of the columns (or rows). In this case "180" means the first column will be 180 pixels wide. The asterisk (*) means "whatever is leftover," so you typically will use that for your final measurement. A three column frameset might look like this: cols="150, 400, *". You can also use percentages in place of pixels, and you can mix and match, so the following is perfectly valid: cols="120, 50%, *".

To create horizontal rows you'd follow the same procedure: rows="140, 40%, *" for example. It is also possible to have both rows and columns in a frameset, but that's a little more complicated. Refer to your HTML text book (p.442) for more information.

Before we go any further, save this page as index.html (make sure your saving it inside your framesExercise folder so you don't overwrite your class index page!).

Now we need to add the <frame> tags. These specify what html pages are initially loaded into the various frames. In addition we will give each frame a unique name that we can target with a link. Between the <frameset> tags add:

<frame src="redPage.html" name="main" />"

The first column/frame will contain the "navigation.html" page and has been given the name "menuColumn." The second column/frame will start with the redPage and has been given the name "main."

Now we need to go back to the navigation.html page one more time and add one more modification. Currently, if you were click on any of the links on that page the linked page would load in the frame occupied by the navigation page rather than the frame with the redPage. We need to add a target to the links to specify which frame is to change. To each link add target="main". The results will look something like this:

<a href="greenPage.html" target="main">Green Page</a>

<a href="yellowPage.html" target="main">Yellow Page</a>

Return to your index page and preview in a browser. Does it work?

Customize your page: use your own photos; add styles; design the page.

Point Breakdown

10 pts	Went well above and beyond and created something special.
9 pts	Went above and beyond requirements (customized the photos/pages; added styles, etc.).
8 pts	Did what was required.
7 pts	Missing one or more required elements or contains one or more errors.
0–6 pts	Poor showing; mostly incomplete or full of errors.

VCA225 Digital Production

Exercise: Frames

Procedure

Point Breakdown