Site Development: Frames

Publish date:
Social count:

Site Development: Frames

Frames are another way (in addition to, or instead of, tables) to arrange your page's content. They are often used in these situations:

·You have a table of contents that you would like visible at all times.

·You would like your main banner logo to be visible at the top of the browser screen at all times.

·You would like navigational buttons to be accessible at all times.

There are many different frame options. Below are schematics of only a few of them:

You can make from two to as many frames as you would like. Frames break up the whole browser window into individual browser windows with their own properties, including separate scroll bars if necessary.

Frames work in a way unlike usual web pages. The initial page is just a page to define the frames, kind of like the framework of a house being built. With the house, you can see where the kitchen and bathroom will be, but not what they look like or what is contained inside them. The frameset page says where the frames are, and what to fill them with. In this case, it fills the frames with other web pages.

The frameset page sets the dimensions of each of the frames, and where they are located. Note that special care must be taken to make sure your frames look the same in all browsers, as Microsoft Internet Explorer and Netscape Navigator (two examples of many browsers used on the Internet) will use your frameset attributes differently.

<title>My Web Site In Frames</title>

<frameset framespacing="0" border="false" frameborder="0" cols="250,*">

<frame name="nav" src="navigation.htm" target="main" scrolling="auto">
<frame name="main" src="main.htm" target="_self" scrolling="auto">

<p>This page uses frames, but your browser doesn't support them.</p>



Let's go through this one line at a time.

·<html> tags open and close the page.

·<head> tags for the title and other header information.

·<frameset> opening and closing tags to tell the browser that this is a frames page. There is space of "0" pixels (no space) between the frames. Border="false" (no border around the frames). Frameborder="0" (same thing, for other browsers). Columns, from left to right, are 250 pixels, and * pixels, meaning the remainder of the browser window.

·Starting from left to right, defining the frames themselves. The first frame's name is "nav" and the second frame's name is "main." -- this is so you can reference each frame from anywhere in the site. The "src" is what the frames page will put into each frame, in this case it puts "navigation.htm" in the left-most frame and "main.htm" in the right-most frame. The targets are which frame to load the page in when a link is clicked on. When you click in the left-most frame, it loads pages into the "main" frame, and links clicked on in the "main" frame load into that same frame ("_self"). Scrolling is set to "auto" meaning that scrollbars will appear if they are necessary.

·<noframes> is an area that will be read by the browser if it is incapable of displaying frames. Many of them still are, so be aware of this! Here is the body where you would have your entire site written for those browsers. In a sense it's like writing two versions of your site.

There is a lot more to frames than just this. Each link has to have an additional reference to the frame it's supposed to load into, and you have to be very careful to keep things organized and working. If you would like to use frames, you should look for tutorials on the web.