Webpage Creation 101: Frames Layout

Creating a Webpage with a Frames Layout

Preliminaries

Frames, when used well, can be a great asset to your site. They are relatively easy to implement once you get the hang of it, but to design a page with them requires some thought beforehand. Frames can be used to put a menu on one side of your page so that readers do not have to go back to your main page to look at additional pages; they can be used to place a logo or banner at the top of all your pages, without your having to type out the code for it on every page of your website. There are lots of other uses for frames, limited only by your own design capabilities.

In order to create a framed page, you need at least three files:

Two (or more) regular html files, and
one "frames master" file.

The "Frames Master"

The "frames master" file is the one which will display the final look of your framed page. The basic outline of the code for this page is as follows:

Code:	Remarks:
<HTML> <HEADING> <META NAME="name" CONTENT="Charlie Puck"> <TITLE>My Site</TITLE> </HEADING>	...insert all heading META tags, etc here...
<FRAMESET COLS="30%, *">	This tag specifies the layout of the frames.
<FRAME NAME="name_you_choose" SRC="webpage.html" >	This tag identifies the document that will go into the frame specified as well as the name of the frame. Frames are named in order to make linking references easier. Each frame gets a seperate tag and are listed from top to bottom, left to right. More on this later.
<NOFRAMES> <BODY> It appears that your browser does not support frames. Check out my "no frames" site <A HREF="noframes.html">here </A>. (or some such text.) </BODY> </NOFRAMES>	This displays only if the reader's browser does not support frames. This part is coded the same way as any other web page.
</FRAMESET> </HTML>

The FRAMESET Tag

There are several attributes that you can put in the FRAMESET tag which will help determine the layout of the frames on your page. Each tag will divide your page however many times you wish either horizontally or vertically.

COLS="x, y, z, etc"	This specifies the number of columns and their widths. Replace x with the width in pixels of the first (left-most) frame, y with the width in pixels of the second frame, and so forth. You can also specify the widths in percentage of the screen (eg., COLS="40%, 60%"). Alternately, you can specify one of the frames with an asterisk (*). This says that the frame will take up the remainder of the page.
ROWS="x, y, z, etc"	This specifies the number of rows and their heights. Replace x, y and z, etc as specified above.
BORDER="m"	This specifies the width of the border between the frames. If you want no border, use BORDER=0 (zero).
BORDERCOLOR="#XXXXXX"	This specifies the colour of the border. Refer to the Defining Colours lesson to refresh on how to specify colours.
FRAMESPACING="m"	This specifies the spacing between the border and the content of the frame of the border between the frames. "m" is in pixels.

The FRAME Tag

The attributes within the FRAME tag include:

NAME="name_of_frame" By giving each frame a separate name, it will be easier to tell the browser where to direct your links. Make sure that your frame name is simple (preferably only one word long) so as to avoid confusion. Examples will follow.

SRC="webpage.html" This specifies which webpage file will go into the frame.

TARGET="target_name" This tells the browser where to direct your links. The default is to open the page in the frame the link is currently in. The different possibilities will be listed for you below.

SCROLLING=YES This specifies whether the frame will have a scrolling bar or not. If you do not want the frame to scroll, simply replace "yes" with "no".

NORESIZE If you do not want people to be able to resize your frames, you can put this into the code.

Targets

Different targets you can use either in the <FRAME> tag or the <A HREF> tags are:

TARGET="parent"	This opens the link in the frame that originated the link (i.e., the one the link is written in. This is the default if no target is specified.
TARGET="frame_name"	This will direct the link to open in the frame that you named "frame_name" (or whatever name you gave it).
TARGET="top"	This opens the link in the same window, but takes away the frames setup.
TARGET="blank"	This sends the new page to a new window which the browser opens.
TARGET="_new"	Similar to "blank", only the browser give the new window the name "_new" (or whatever other name you choose to give the window -- provided it is not one of the above names). Any other links that are directed to TARGET="_new" will open in the same window that is now named "_new".

Laying out your frames

As stated before, you must list the FRAME tags in your code from top to bottom and from left to right.

For example, let's say I want to make a frames page with two frames. The one on the left will be a webpage index where a list of links to the rest of the site will be placed. The one on the right will be the page where the linked pages will be displayed.

"index"
Frame "main" frame

Code:
<HTML>
<HEAD>
<META NAME="Author" CONTENT="Kat Lai">
<META NAME="Description" CONTENT="Learning how to create frames in your web page.">
<META NAME="Keywords" CONTENT="HTML, help, Webpage creation, Hypertext, tutorial, frame, format">
<TITLE>Frames Example 1</TITLE>
</HEAD>
<FRAMESET COLS="20%,*">
<FRAME NAME="index" SRC="frameindex.html" TARGET="main" BORDER=1>
<FRAME NAME="main" SRC="main.html">
</FRAMESET>
<NOFRAMES>
<BODY BGCOLOR=#FFFFCC TEXT=#000000 LINK=#990000 VLINK=#98B3C8 ALINK=#E10300> Your browser doesn't seem to support frames. To view these examples, look into downloading the latest version of either your present browser, <A HREF="http://www.netscape.com">Netscape Communicator</A> or <A HREF="http://www.microsoft.com">Internet Explorer</A>. </BODY>
</NOFRAMES>
</HTML>

To see this example, click here.

If you put the mouse over the borders of the frames and click and drag, you will be able to resize the frames.

For another example, let's say that that instead of a vertical index as above, you prefer one that is horizontal and sits at the bottom of your page. Also, you don't want people to be able to resize your frames, and you want your frames border to be green

"main" Frame

"index" frame

Code:
<HTML>
<HEAD>
<META NAME="Author" CONTENT="Kat Lai">
<META NAME="Description" CONTENT="Learning how to create frames in your web page.">
<META NAME="Keywords" CONTENT="HTML, help, Webpage creation, Hypertext, tutorial, frame, format">
<TITLE>Frames Example 2</TITLE>
</HEAD>
<FRAMESET ROWS="*, 15%" BORDERCOLOR=#108010>
<FRAME NAME="main" SRC="main.html" NORESIZE>
<FRAME NAME="index" SRC="frameindex2.html" TARGET="main" BORDER=1 NORESIZE>
</FRAMESET>
<NOFRAMES>
<BODY BGCOLOR=#FFFFCC TEXT=#000000 LINK=#990000 VLINK=#98B3C8 ALINK=#E10300> Your browser doesn't seem to support frames. To view these examples, look into downloading the latest version of either your present browser, <A HREF="http://www.netscape.com">Netscape Communicator</A> or <A HREF="http://www.microsoft.com">Internet Explorer</A>. </BODY>
</NOFRAMES>
</HTML>

To see this example, click here.

Now, let's make it a little more complicated. Let's say that you want a page that hasa vertical index frame, a main page, and a frame where you can put a banner (an ad or your own). We will also have no frame border between frames, and we will ensure that the banner frame cannot scroll.

Let's look at two possible layouts for this. First, the banner frame is in the top row with the index and main frames in the bottom one in two separate columns:

"banner" Frame

"index" frame "main" frame

Code:
<HTML>
<HEAD>
<META NAME="Author" CONTENT="Kat Lai">
<META NAME="Description" CONTENT="Learning how to create frames in your web page.">
<META NAME="Keywords" CONTENT="HTML, help, Webpage creation, Hypertext, tutorial, frame, format">
<TITLE>Frames Example 3</TITLE>
</HEAD>
<FRAMESET ROWS="15%, 85%" BORDER=0>
<FRAME NAME="banner" SRC="banner.html" SCROLLING=NO>
<FRAMESET COLS="20%, 80%" BORDER=0>
<FRAME NAME="index" SRC="frameindex.html" TARGET="main">
<FRAME NAME="main" SRC="main.html">
</FRAMESET>
</FRAMESET>
<NOFRAMES>br> <BODY BGCOLOR=#FFFFCC TEXT=#000000 LINK=#990000 VLINK=#98B3C8 ALINK=#E10300> Your browser doesn't seem to support frames. To view these examples, look into downloading the latest version of either your present browser, <A HREF="http://www.netscape.com">Netscape Communicator</A> or <A HREF="http://www.microsoft.com">Internet Explorer</A>. </BODY>
</NOFRAMES>
</HTML>

To see this example, click here.

Next, the index frame is in one column, and the main and banner frames are in the second in two separate rows:

"index" Frame "main" frame

"banner" frame

Code:
<HTML>
<HEAD>
<META NAME="Author" CONTENT="Kat Lai">
<META NAME="Description" CONTENT="Learning how to create frames in your web page.">
<META NAME="Keywords" CONTENT="HTML, help, Webpage creation, Hypertext, tutorial, frame, format">
<TITLE>Frames Example 4</TITLE>
</HEAD>
<FRAMESET COLS="20%, 80%" BORDER=0>
<FRAME NAME="index" SRC="frameindex.html" TARGET="main">
<FRAMESET ROWS="85%, 15%" BORDER=0>
<FRAME NAME="main" SRC="main.html">
<FRAME NAME="banner" SRC="banner.html" SCROLLING=NO>
</FRAMESET>
</FRAMESET>
<NOFRAMES>
<BODY BGCOLOR=#FFFFCC TEXT=#000000 LINK=#990000 VLINK=#98B3C8 ALINK=#E10300> Your browser doesn't seem to support frames. To view these examples, look into downloading the latest version of either your present browser, <A HREF="http://www.netscape.com">Netscape Communicator</A> or <A HREF="http://www.microsoft.com">Internet Explorer</A>. </BODY>
</NOFRAMES>
</HTML>

To see this example, click here.

Return to the HTML Lesson Guide
Read the next Lesson: Creating Forms

This page created by Kat Lai.
Feel free to e-mail me with any comments or questions.

NAME="name_of_frame"	By giving each frame a separate name, it will be easier to tell the browser where to direct your links. Make sure that your frame name is simple (preferably only one word long) so as to avoid confusion. Examples will follow.
SRC="webpage.html"	This specifies which webpage file will go into the frame.
TARGET="target_name"	This tells the browser where to direct your links. The default is to open the page in the frame the link is currently in. The different possibilities will be listed for you below.
SCROLLING=YES	This specifies whether the frame will have a scrolling bar or not. If you do not want the frame to scroll, simply replace "yes" with "no".
NORESIZE	If you do not want people to be able to resize your frames, you can put this into the code.