Frames Code

Frames Code

Frames basically split your screen into 2 or more section and load a designated webpage into each section. Here is some code that would divide the screen into a small left section and a large right section. This type of frame use is very common because the small left section can be a menu and the right section can be the webpage you get when you click a link in the menu. The idea is that the menu is always there on the left while the right side changes as the visitor clicks on links in the menu.

<HTML>

<HEAD>

<TITLE>PowerPoint 2002 XP Tutorial</TITLE>

</HEAD>

</frameset>

</HTML>

The cols=”20%, 80%” attribute simply sets the width of the columns by the percentage of the screens total width. Note that you could divide the screen into 3 (or more) columns by saying something like cols=”20%,20%,60%”. Just make sure it all adds up to 100%.

Notice there is no body tag. A common mistake is to put one in. If you do you’ll get absolutely nothing on the page.

The frameborder attribute can be set to yes or no. Yes sets a border and it’s width is determined by the border attribute which is set to 0 above. It can be set to any whole number and that’s the number of pixels wide the border will be. You could add bordercolor="#FFFFFF" to set the color of the border.

The scrolling="yes" simply puts in scrolling arrows to allow the user to scroll up and down or left and right if the page loaded into that frame doesn’t fit. By setting it to ‘no’ you won’t get the scrolling arrows which take up space. You’d better be sure it all fits then.

On the seventh line down there is name="right". That basically names the right frame right which is necessary for this menu concept to work right. The links in the menu need to refer to right so that the page the link loads will load on the right side. Without this little parameter, when the visitor clicks on a link in the menu, the menu itself would be replaced by the page the link loads instead of the right side as intended. Here is the code for a link in the menu…

<a href="pp.htm" target="right">The Right Side Task Pane </a>

…Notice it is just like standard link code except for target="right” which specifies that pp.htm loads on the right side because we named the right frame right in the 7^th line above. By the way, you can name it anything you want. I used right because it seemed to make intuitive sense for the example.

You may want to spit a screen horizontally in ‘rows’ instead of columns. Notice the only real difference here is rows instead of cols. Here’s an example of making a little top frame and a large bottom frame.

<HTML>

<HEAD>

<TITLE>Some Title</TITLE>

</HEAD>

</frameset>

</HTML>

Complex Frames

You may want your screen divided up into rows and columns say like this…

This would be generated by a frames page that first divides the screen up into two rows with code like this…

<HTML>

<HEAD>

<TITLE>Some Title</TITLE>

</HEAD>

</frameset>

</HTML>

where top.htm is the webpage that loads into the top frame and bottom.htm is the page that loads into the bottom frame. Giving you this…

Then make the code for bottom.htm yet another frames page with code something like this…

<HTML>

<HEAD>

<TITLE>PowerPoint 2002 XP Tutorial</TITLE>

</HEAD>

</frameset>

</HTML>

Then, finally, you would get the result of…

Frames and Search Engines

If you are concerned about your site getting listed in search engines frames can sabotage that effort. Why? Because if your main, “home” page is a frames page it has no real content other than the frames code. Search engines often rank the returns on a search by how many times the keyword used in the search appears in the website. If your website is selling herbs the word herbs may appear frequently in the web pages that you frames code calls up but not at all in the frame code on the main page itself. If you want the ‘frames’ look and functionality but don’t want to actually use frames because of this problem with search engines try using tables code to divide up the screen. Make a template web page with the same tables code that provides a menu section on the left and the body of info on the right. Have every link in the menu go to another web page with the same table on the left showing the same menu but the stuff on the right will have the new page’s content.