by Craig Walker

Frames, You love 'em or you hate 'em!

What is a frame? A frame is when the web page is split into 2 or more independently operating web pages. This website is a framed website. Notice how the left menu remains stationary when you scroll the right side. If I add too many more menu items on the left, it will also have a scroll bar. Each frame is a separate web page capable of linking, changing pages, graphics and anything a single web page can do.

Most browsers today can view framed web pages. There are a few rules I like to follow when using frames.

• Link to a new window for offsite page links

• Design pages for no horizontal scroll bars

• Try to avoid tiny frames

• Too many frames are not easy to browse

Some people just don't like frames because their browser does not support viewing frames, they do not like tiny windows, or because a lot of framed pages just go too far. I've seen framed pages with 8 different sections where you can only see one line at a time of an option menu or something. I don't think that is very friendly.

I like to use frames in moderation, 2 or maybe 3 frames on a typical framed page. The goal would be frames for convenience and ease of viewing. The lesson page area is big and easy to view. It was designed at 800 x 600 screen resolution, but it can also be viewed at 640 x 480 without too much distortion of the original design. If you check it out at 640 x 480, there are horizontal scroll bars on a few of the pages, but that is only for about 20 pixels of a couple graphics. That was all by design for flexibility. That is a very important consideration when using frames. It looks good on mine, but how will it look on theirs?

Creating frames is really simple. It is very similar to lists and nested lists. You use a frameset tag to create a multi part frame page. Then you can divide either of those parts into multiple parts by nesting another frameset within the other frameset.

Got it? Don't matter. We are only going to create a 2 part page here. For more about frames, see the Frames Guide

We are going to put the 3 web pages we contructed in a framed format with a page menu on the side, similar to this tutorial format.

Here is the frames code. Create the document below and save it as index.htm in your buildweb folder.

WOW! That was almost painless, wasn't it? Go ahead and open your index.htm file in your browser. Don't worry that the browser can't find the myside.htm file. We haven't made that page yet. It will be next. I'll go ahead and explain the frames tags now, but there is another page to write after the explainations.

Did you notice how cramped things got when you opened my page by clicking the link under the code? One framed page inside another can be a frustrating and all around unpleasant experience for your viewers. When linking to an off site page, it is polite to link to a new window so they can view the page as it was intended by the creator.

Frames tags explained, as used:

<FRAMESET COLS="158,*" BORDER="0" FRAMEBORDER="0"> </FRAMESET>

The FRAMESET tags start and stop a frameset. That is all pretty easy to understand. Within the FRAMESET tags you set the perameters for your frames. You can specify rows, columns, height, width, whatever suits your needs.

We only used one frameset, which divided the page into 2 separate pages. We could divide the original page into any number of pages, or either separate page into multiple pages. We didn't, but you can find out how in the Frames Guide.

We used COLS="158,*" to create 2 columns. The first column, which will be our menu frame, is 158 pixels wide. The second column, was given a wildcard width, *, which says to create this column with any remaining page width. We could have specified COLS="158, 642", which would have given us 800 pixels wide like my screen resolution, but what about the person looking at 640 x 480. The wildcard gives your page flexibility. The controls are there if you really want to be exact but think about your audience.

The BORDER=0 FRAMEBORDER=0 options gives us no frame or border line separating the two page frames. It is very similar to the Tables Border option. This works in most browsers. More on that in the Frames Guide

<FRAME SRC="myside.htm" NAME="side">

Within the 1st FRAME tag we did two things. 1st we told the frame which page to load by default at startup, SRC="myside.htm", the side menu page. Next we gave the frame a name, NAME="side". We will use the name to reference the frame for linking purposes. Then of course we did the same for the 2nd FRAME tag which controls the, you got it, the 2nd frame.

Next we will make the side menu page. Create a new page using the code below and save it as myside.htm. I like to include the word side in the file name because it will be easy to recognize in my directories as the side menu file. This will of course be the side menu in the narrow frame on the left.

Click the link under the code to see my page. Use the BACK button to return here.

Now open your myside.htm file in your browser. Looks kind of funny in the middle of the page, huh? Not to worry.

Now open your index.htm file. Does it look like this?

No Frames Mode gives the viewer an option to view your website without the frames. Some viewers prefer it that way even though their browsers support frame viewing. We can accomplish this by setting the TARGET="_blank" option in the link tag. The other TARGET options are discussed in the Frames Guide. If you do this, your viewers need page menus and links. We accomplished this with our single page links, at the bottom of each page, that takes the viewer to the next page.

Frames are really neat tools, but are just one of those things that you love or hate. I don't think anybody will complain about an intelligently constructed framed website though. Don't abuse the power.

What's next? Use what you have learned to create personalized pages for your family and friends to view. Email Me

Here's another project you might want to do. I don't like to waste time linking to @home, AOL, Netscape, Microsoft, or anywhere else when I first start my internet session. With a dial-up (phone) connection to the internet you will still have to dial in and log on. I have a custom home page that sits on my computer and it is the first page to load when I start Netscape. It is a framed page and has links to several places I like to go on the internet. It loads fast and is easily reached by hitting the Home button on the toolbar. You can select your personal home page in the options or preferences section and have it automatically load first when you start your browser. Might be fun and practical.

Here is a picture of my home page. Design one to fit your needs. You can see I like Cartoon Network and Nick Jr and My 7 year old son likes Matrox, Anand Tech, and other technical stuff.

See the Frames Guide for more frames options.

by Craig Walker