Lab 6: HTML frames

Comp 150,

Goals:

Web pages

The goal is to create a hand-generated web page divided into three regions called frames. The layout is to be something like this:
Computer Superstore!!
menu

 

 

Main stuff goes here
One common use of this layout is to put a logo in the top region, a menu on the left, and put the primary content in the lower right. Of course, many other uses, and other divisions into frames, are possible. There are other ways to achieve this kind of layout: you can use CSS and named <div> areas, or you can use tables. The advantage of frames is that the subframes can have independent scrollbars.

The menu and main areas should have some CSS tweaking going on. Specifically, you should have at least two CSS definitions per file, not the same.

The way to do this is to start with an html file, by convention named index.html, that contains no <body> section. Instead, it contains a <frameset> declaration, that defines the layout of the three regions, and defines names for each region and the name of the html file that will be displayed in that region. Here is a frameset declaration that defines three regions laid out as above with region names head, menu, and main, and respective html files head.html, menu.html, and main.html. Note the name and src fields in each <frame> tag, which define the names in question. 

<frameset rows="140,*" frameborder="NO" border="0" framespacing="0">
    <frame name="head" src="head.html">
    <frameset cols="180,*">
        <frame name="menu" src="menu.html">
        <frame name="main" src="main.html">
    </frameset>
</frameset>
The definition of the bottom two regions is nested: we first define a top region that divides the page into the head region and the remainder (of respective heights 140 pixels and "*" pixels, that is, the rest of the page) and then instead of defining a second <frame> below that, we further subdivide the lower half into menu and main with the second <frameset> declaration. These two subregions have respective widths of 180 and "*", where "*" again means the remaining space available.

Save this into an html file, together with <html> and maybe <title> tags, and see what you get. Your browser will probably complain that it can't find head.html, menu.html, and main.html.

The next step is to create these other three files for the other three regions. Each should start out something like this (no <title> is needed): 

<html>
<body bgcolor="some-color-choice">
Hello there!
</body>
</html>
Use different bgcolor values and different text strings for each. If you're interested, the Loyola colors are maroon, "#990033", and gold "#FFCC33". Some pale colors are "#FFFFCC", "#CCFFFF", and "#FFCCFF".

Now let's put something into each region. For the top, how about a Loyola logo. Have head.html include the following IMG declaration:
    <img src="http://www.luc.edu/images/fhp_luc.gif">
You might want to add SCROLLING=no to the head frame (back in index.html), though this is optional.

For the menu column at the left, create at least three links, each in its own <p> paragraph. Use the form <A href="http://www.cs.luc.edu">, but to one of them add the extra TARGET="main" option (within the A tag; that is, before the final >), and to the other add TARGET="_top". See how all three links behave when clicked on. Your final result should look like 

<html>
<body bgcolor="???">
<a href="http://www.cs.luc.edu">click me<a>
<p>
<a href="http://www.cs.luc.edu" TARGET=???>click me too<a>
<p>
<a href="http://www.cs.luc.edu" TARGET=???>click me three<a>
</body>
</html>
Put whatever you want into the main region. Have at least some text in there; enough to demonstrate some CSS features.

When you're done, you should have four files: index.html, head.html, menu.html, and main.html. Mail all four of them to me (it's best to attach them all to one email).