Hands On HTML

May 26
07:33

2008

Sandra Prior

Sandra Prior

  • Share this article on Facebook
  • Share this article on Twitter
  • Share this article on Linkedin

Believe it or not, there was a time when people used browsers before frames were invented. All versions of Internet Explorer and Mozilla Firefox can cope with frames. Here's how to add frames to your site.

mediaimage

The Frame Game

Good use of frames can make your website easier to navigate and impress your friends.

Like porn sites and slippers,Hands On HTML Articles frames are one of those things that nobody will admit to liking but everybody does. They’ve been used and abused by webmasters the world over, and have recently seemed to fall out of favor, with many major sites abandoning their use, which is a shame because frames, when used properly, can be very useful, especially in aiding site navigation.

The basic idea of frames is to subdivide your browser window into several smaller windows. Typically one window will contain navigation information for the site which will remain static, while another (usually larger) frame will load the pages selected from that menu. They do have their disadvantages; they can be a little tricky to keep track of, and visitors are unable to bookmark individual pages within the frameset. But for navigation and displaying static information like ad banners, they’re hard to beat, and their more exotic features can really spice up your site. So let’s throw caution to the wind and get framed right up with a look at the basics.

Make a Sketch

The key to designing pages with frames is planning. It’s a good idea to sketch out the layout of your frames with (gasp) a pen and paper, to get the layout clear in your head. For starters we’re going to build a traditional frameset, with a small navigation frame on the left, and the main contents frame on the right. After that we’re going to add another frame across the top to contain an ad banner.

Before we create our frames, it’s a good idea to make the files that will be loaded into the left and right frames when the page is first visited. Create two HTML files – ‘left.htm’ and ‘right.htm’ and ‘main.htm’. To make it absolutely idiot-proof, lets make the left frame green.

And the frame white:

The page that holds the information about the frames is called a frameset. It differs slightly from your normal HTML page in that the information it contains (apart from the and tags) relates to frames only.

The tag defines the frame information and divides the browser windows into columns (left to right) or rows (top to bottom). These are represented by the COLS and ROWS attributes. Define the size of these in pixels (or you can use percentage values if you wish), and start with the value of the left (for columns) or top (rows) frame first.

The tag defines the name and location of the page to be loaded into these columns or rows. It has the NAME attribute to identify the, er, name of your frame (call them something obvious, because its easy to get confused) and the SRC attribute, which points to the address of the HTML page to be loaded into that frame. Again they start from left to right for columns, top to bottom for rows.

So a basic frameset dividing the page into two columns would look something like this.

Basic Frameset Example

Name the file with a normal .htm suffix and preview it in your browser. Now change the COLS attribute to ROWS and see what happens.

Let’s add a further frame for the ad banner. We still need two columns, but the right hand column now needs a second frameset, itself containing two rows – one for the ad frame, the other for the main content frame.

Create another HTML file called ad.htm and color it yellow:

The ad banner will be 90 pixels high, and the right frame will take up whatever’s left in the browser window, indicated by the asterisk sign *.

Now we need some navigation links in the left frame to call the pages and display them in the right frame. Create a list of links in the left frame and hyperlink them to the pages you wish to call in the normal way. You’ll find that they load into the same frame which we don’t want.

To get a link to load a page into a specific frame requires use of the TARGET attribute of the tag. The value of the attribute is the NAME you define for it in the frameset. In our example, the frame we want to display our pages was named ‘white’. So to get a page to load into the white frame, just add the following to your normal link tag.

FISH

The page ‘fish.htm’ will load into the frame ‘white’. Smart.