Frames
|
When you see a page designed with frames, you probably think it's only one big file. In actuality, if you see a page with two frames, there are three files that make it up. One of those three files specifies the layout of the frames and their properties. The other two are actually HTML files that are "pasted" into the frames.
What will follow is a basic layout of what a frames document's HTML code (let's use a two frame page as an example) would look like:
<FRAMESET>
<FRAME>
<FRAME>
</FRAMESET>
Now let's break down each tag:
<FRAMESET>
- This tag, which starts off the frames, goes directly after the
</head> tag.
<FRAME>
- This tag shows what gets pasted into the first frame.
<FRAME>
- This tag shows what gets put into the second frame.
</FRAMESET>
- This ends the frames.
The next sections will show you how to get more out of your frames. At the end, there will be some examples of frames documents, and their HTML source codes.
This section will discuss the different attributes for the <FRAMESET> and <FRAME SRC> tags.
Attributes for both <FRAMESET> and <FRAME>
- BORDERCOLOR
- This specifies the border color. You'd use the same kind of color codes you would for the body tags.
- FRAMEBORDER
- By default, there is a frame border, but by using this, you can remove it altogether, or make it thicker. For Internet Explorer (IE), this attribute is set equal to a number, but for Netscape it's value is either yes or no. The only problem is, if you want no frame border, these aren't the only attributes you must add.
For Netscape you have to put not only FRAMEBORDER=no, but also BORDER=0 if you don't want a border. (You'll see more on the BORDER tag in the <FRAMESET> Attributes section.)
For IE, you have to put both FRAMEBORDER=0 and FRAMESPACING=0 if you don't want a border. (You'll see more on the FRAMESPACING tag in the <FRAMESET> Attributes section.)
Keep in mind that also, if you don't want frame borders, you also must specify this in the <FRAME> tag.
<FRAMESET> Attributes:
- ROWS/COLS
- These attributes tell how many rows or columns there are, and what their size is. For instance, if you want two columns, one of which is 20% of the window, and the other 80%, you'd type in:
<FRAMESET COLS="20%,80%">
You can also make these numbers pixels. If you want them to stand for pixels, you just type in the two values. Always make sure percentage values add up to 100%. If you wanted one more column, you'd add a comma (,) after the second number, and just type in the third. Keep in mind that the order you type the values in is the order they'll be displayed on the page. If you're not sure of what one of the number values for percentage or pixels would be, you can use an asterrisk (*) in place of one of the numbers. This would act as a "wild card", and is especially handly if you have more than two frames. For example, let's say we wanted one frame column to be 40 pixels, but we weren't sure of what the rest of the page's pixel value would be. You'd type in:
<FRAMESET COLS="40,*">
- BORDER
- This is a Netscape specific tag used when putting borders on your frames. It is set equal to a number value.
- FRAMEBORDER
- This is an IE specific tag that serves the same purpose as Netscape's BORDER tag. This too is set equal to a number value.
<FRAME> Attributes:
- SRC
- This is used the same way it is in the
<IMG> tag. (More on image tags.) It specifies what HTML file is "pasted" into the frame. For instance, if you wanted to put a file called frame1.html into a frame, you'd type in:
<FRAME SRC="frame1.html">
- NAME
- The purpose of naming each frame is for targeting purposes later on. (More on targeting.) Each frame would have a different name. Reusing the above example, let's say we wanted that same frame to be named frame1 (okay, not very creative, but...):
<FRAME SRC="frame1.html" NAME="frame1">
- SCROLLING
- This tells the browser whether or not the user can scroll within the frame. This attribute's value can be yes, no, or auto. Auto lets the browser decide whether it's necessary or not. So, let's say in our example that we've been using, that we want the SCROLLING to be set to auto. You'd type:
<FRAME SRC="frame1.html" NAME="frame1" SCROLLING=auto>
- MARGINWIDTH/MARGINHEIGHT
- These are Netscape specific tags. They set margins within the frame. MARGINHEIGHT would set equal margins at the top and bottom of the frame, and MARGINWIDTH would set margins at the right and left of the frame. This attribute would be set equal to a number value. Here's how it would look in a
<FRAME> tag:
<FRAME SRC="frame1.html" NAME="frame1" MARGINHEIGHT=2 MARGINWIDTH=2>
- NORESIZE
- This attribute tells the browser that the web page viewer can't resize the frame. Normally, if this tag isn't put in, anyone who views the page can resize a frame. Here's how it looks in the
<FRAME> tag:
<FRAME SRC="frame1.html" NAME="frame1" NORESIZE>
Although frames can add a special touch for a page, not all browsers can view them, particularly older browsers. It is a good idea to have alternative text on your page to alert the viewers with a non frames browser that your page is not viewable to them. (It is also suggested to have a non frames alternative to your site so everyone will be able to view it in some way or form.) This section will show the tags needed to give that alternative text.
Here is a sample layout of what you would put in your page:
<NOFRAMES>
<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#008080" VLINK="#0000ff">
<CENTER>Your browser does not support frames!</CENTER>
</BODY>
</NOFRAMES>
Keep in mind that the sentence I typed in is only an example. You can replace it with whatever you want. Also, the body tag's colors can be changed. You can see this in action in the examples section.
This section will go over 4 different frames documents, and their HTML source codes. You can customize each to fit your own needs. Keep in mind that the file names that are used in these documents are not the ones you will be using. You'll have to change the file names to suit your purposes, and also colors and text. Most of the attributes are not neccessary, so I will not be using them all. It is up to your own discretion whether to use them or not. This section is here to give a basic layout of different frames pages.
Click the links above each HTML source code to see how the frames would look. (Note that if you don't have a frames compatible browser you won't see the frames, but will instead see what's inserted between the <NOFRAMES> tags. Use your browser's back button to get back to this page after each example.
Example One: A two frames document with one small lefthand column and one large righthand column.
See how it would look
The Code:
<HTML>
<HEAD>
<TITLE>Frames Example 1</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
<FRAME SRC="side1.html" NAME="side" SCROLLING=auto NORESIZE>
<FRAME SRC="main1.html" NAME="main" SCROLLING=auto NORESIZE>
</FRAMESET>
<NOFRAMES>
<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#008080" VLINK="#0000ff">
<CENTER>Your browser does not support frames!</CENTER>
</BODY>
</NOFRAMES>
</HTML>
Example Two: A three frame document with one small lefthand column, one large middle column, and one small righthand column.
See how it would look
The Code:
<HTML>
<HEAD>
<TITLE>Frames Example 2</TITLE>
</HEAD>
<FRAMESET COLS="20%,60%,20%">
<FRAME SRC="side1.html" NAME="leftside" SCROLLING=auto NORESIZE>
<FRAME SRC="main1.html" NAME="main" SCROLLING=auto NORESIZE>
<FRAME SRC="side2.html" NAME="rightside" SCROLLING=auto NORESIZE>
</FRAMESET>
<NOFRAMES>
<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#008080" VLINK="#0000ff">
<CENTER>Your browser does not support frames!</CENTER>
</BODY>
</NOFRAMES>
</HTML>
Example Three: A two frame document with one large top row and one small bottom row.
See how it would look
The Code:
<HTML>
<HEAD>
<TITLE>Frames Example 3</TITLE>
</HEAD>
<FRAMESET ROWS="80%,20%">
<FRAME SRC="main1.html" NAME="main" SCROLLING=auto NORESIZE>
<FRAME SRC="bottom.html" NAME="bottom" SCROLLING=auto NORESIZE>
</FRAMESET>
<NOFRAMES>
<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#008080" VLINK="#0000ff">
<CENTER>Your browser does not support frames!</CENTER>
</BODY>
</NOFRAMES>
</HTML>
Example Four: A complex nested frames document. This has two columns: one small lefthand one and one large righthand one. The large righthand column is then further split into two rows: one small top row and one large bottom row. This makes a total of three frames.
See how it would look
The Code:
<HTML>
<HEAD>
<TITLE>Frames Example 1</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
<FRAME SRC="side1.html" NAME="side" SCROLLING=auto NORESIZE>
<FRAMESET ROWS="20%,80%">
<FRAME SRC="top.html" NAME="main" SCROLLING=auto NORESIZE>
<FRAME SRC="main1.html" NAME="main" SCROLLING=auto NORESIZE>
</FRAMESET>
</FRAMESET>
<NOFRAMES>
<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#008080" VLINK="#0000ff">
<CENTER>Your browser does not support frames!</CENTER>
</BODY>
</NOFRAMES>
</HTML>
Did you notice that on some of the above examples there were links on the side frame? Well, if you were to click one of those links, the page would come up in the main frame. Let's take another look at Example 1. This time click each of the links and see what happens:
Example 1
The way we do this is with targeting. Without targeting, if you click a link, it comes up in the frame it was clicked in. With targeting, the link comes up in whatever frame you specify. That's why we NAME out frames. (a href="#attrib">See more on NAME in the Attributes section.) Let's take a look at the source code for that frames document again:
<HTML>
<HEAD>
<TITLE>Frames Example 1</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
<FRAME SRC="side1.html" NAME="side" SCROLLING=auto NORESIZE>
<FRAME SRC="main1.html" NAME="main" SCROLLING=auto NORESIZE>
</FRAMESET>
<NOFRAMES>
<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#008080" VLINK="#0000ff">
<CENTER>Your browser does not support frames!</CENTER>
</BODY>
</NOFRAMES>
</HTML>
If you take a look at the part in red, you'll see that we named the small lefthand frame "side", and the large righthand frame "main". Also remember that the links themselves are not in the frames document, but in the one that gets pasted into it. If you look above, the document that was pasted into the "side" frame was "side1.html". There are two ways to target within this "side1.html" document. One is to put the following between the <HEAD> tags (not of the frames document, but in the "side1.html"):
<BASE TARGET="main">
This tells the browser that any links clicked within "side1.html" (which is in the "side" frame) would come up in the frame named "main". Got that? Now the other way to target, is to do it with each individual link. You can do this by adding TARGET="main" to your link tags. (More on linking.) Let's say the page being linked is "page1.html". It's going to be targeted to come up in the "main" frame. It would look like this:
<A HREF="page1.html" TARGET="main">Link</A>
Now, let's say there's a link in one of your documents that you don't want to show up in a frame. Remember how we chose to target the links to the "main" frame? Well, if you want the link to come up in a new browser window, you replace "main" with "_top". So it would be TARGET="_top" added to the link tag, or:
<BASE TARGET="_top">
|
