Intro to Frames
Frames are an advanced HTML technique that allow you to divide pages into separate sections that scroll independently, with each section displaying the contents of a separate HTML document. This online textbook is an example of the use of frames. (You can see another example at http://slumberland.org/gene/.)In each chapter, there is a menu bar on the left side of the window, and content on the right side. You can scroll the content on the right side up and down, and the menu will not move.
Frames are a bit different from the HTML you're used to. When you create frame pages, instead of creating a normal page with a BODY, you create a page called a FRAMESET. The frameset is merely a structure. It doesn't contain any content at all. Inside the frameset structure are FRAMES, which link to outside content. Then, when the frameset page is viewed in the browser, the outside content is displayed in the frames.
For example, this page that you see now is a frameset with three frames, the header frame, the menu frame, and the content frame. The header frame links to a separate page that contains a red background, and the words "Chapter Eight." The menu frame links to a separate page that contains a yellow background, and the menu. And the content frame links to a separate page that contains the content you're reading now. When you look at this page, you're seeing the result of four different pages.
Basic Frame Tags
Let's take a look at the basic frame tags before we try our hand at some frames.
- <FRAMESET> </FRAMESET>
- Contains the entire frameset structure itself. Attributes of this tag include: BORDER, ROWS, and COLS. If a page has a FRAMESET, it cannot have a BODY.
- <FRAME>
- This defines the contents of a frame within a frameset. Attributes of this tag include: SRC, MARGINWIDTH, MARGINHEIGHT, SCROLLING, and NORESIZE.
- <NOFRAMES> </NOFRAMES>
- Contains the text to be displayed by web browsers that don't support frames. It's important to use this, because if you don't, a browser that doesn't support frames will be completely unable to use your site.
A simple frames page
Now we'll try a simple frames document. First, you need to create a frames definition document, usually called a frameset. This contains the information that defines the structure of the frames themselves. The FRAMESET tag replaces the BODY tag completely.
The FRAMESET tag will need to contain either a COLS or ROWS attribute. (Not both!) This attribute tells the browser how many frames to split the window into, and how wide those frames need to be. You will specify them as either columns (COLS) or rows (ROWS, of course!). You can define them as a specific pixel width (such as "300"), a percentage of the total width of the window (such as "20%"), or as a wildcard (*). A wild card will take up as much space as possible in the window.
Here's an example of a the frameset tag used on the web page at http://slumberland.org/gene/:
|
This is a COLS frameset. The COLS attribute contains values for the columns in the frameset, separated by commas. In this case, there are two values: 175, and *. The browser parses this tag left to right. The first (left) column is 175 pixels wide. The second column is defined with a * -- this means that this column will fill up all the space that's left over.
Here's an example of what a COLS frameset like this might look like (not actual size):
A ROWS frameset is similar. Here's a typical ROWS frameset:
|
In this ROWS frameset, the ROWS attribute contains values for the rows in the frameset. There are three values this time: 75, *, and 20%. The browser parses this tag top to bottom. The first (top) row is 75 pixels tall. The second row, in the middle, is defined with a *, so it will fill up all the space that's left over after the other rows are defined. Then the third (bottom) row is specified to be 20% of the total height of the window. Unlike the 75 pixel tall row (which will always be 75 pixels tall), the 20% row will change size depending on the size of the window.
Here's an example of what a ROWS frameset like this might look like (not actual size):
Once you've set up the FRAMESET tag, you need to set up each frame within the frameset. You do this with the FRAME tag. For each column or row value in the FRAMESET tag, you will need a corresponding FRAME tag.
Each FRAME tag will contain a SRC attribute, that tells the browser what content to include in that frame. The SRC will usually be another HTML file. Remember, frameset pages never contain any of their own content -- they just link to other pages that contain content. The SRC attribute of the FRAME tag is used to do this.
Typical FRAME tags might look like this:
|
Since there are three values in the ROWS attribute of the FRAMESET tag, there also need to be three corresponding FRAME tags.
FRAME is not a container, so you don't need a /FRAME.
Here's another example, with a COLS frameset:
|
An exercise
At this point you know enough to make a basic frame page. Try to make a document that looks (roughly) like this drawing:
+--------------------------------------------------------------+ | This will be the main frame. | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | +--------------------------------------------------------------+ | This will be the menu bar frame. | | | | | +--------------------------------------------------------------+
The NOFRAMES Tag
The NOFRAMES container tag allows you to include HTML content as part of your frameset document. This way, people using browsers that don't support frames can still see content on your website. Otherwise, they'd see nothing but a blank page.
Typically, the NOFRAMES tag follows the FRAMESET. Here's an example:
|
Combining ROWS and COLS
You can only use ROWS or COLS in one frameset, not both. So if you need both rows and columns in your design, you'll need to "nest" your framesets -- kind of like nesting one table within another as we did in chapter six, but with some important differences.
The first step is to create the frameset tags for the outside frameset, the frameset that contains all the other framesets on your page. There's an easy rule of thumb to figure out which frameset this is, and which type of frameset to create first.
Look at your storyboard drawing (you should always draw your design out on paper first) and see if any frames in your design extend either the entire width or the entire height of your window. (This is the outside frameset, the one that contains ALL the other framesets on the page.) If the answer is yes:
- If the frame extends left to right, start with a ROWS frameset
- If the frame extends top to bottom, start with a COLS frameset
And if you can't decide, because no frame extends completely across the screen in either direction, start with a COLS frameset.
This textbook is a good example of a nested frameset. Look at the design of this page. You'll see that it's a frameset page with a row across the top, and two columns below that.
If you apply the rule of thumb above to this page design, we see that rule 1 applies -- there is a frame that extends left to right across the entire width of the window. So we need to start our page with a ROWS frameset.
|
Notice that the frameset has two frame values (70 and *) and so there are two frame tags, and two rows. The second frame in the frameset, the bottom frame, is the one that's going to contain two columns soon. So, for the time being, I've used a placeholder there -- an empty FRAME tag.
Since that second frame is going to contain two columns, it actually needs to contain a COLS frameset. In fact, that second FRAME tag needs to be replaced with a COLS frameset. So we'll take the placeholder out and replace it with a COLS frameset, containing two columns.
|
Notice that this nested frameset has two frame values, 120 and *. So this frameset has two columns, a left hand column 120 pixels wide, and a right hand column that fills the rest of the window. This entire frameset fits within the second row of the outside frameset.
Another exercise
Go ahead and try making a frame page. Try to make a page that looks like this structure:
+-----------+--------------------------------------------------+ | | | | | | | | | | | | | | | | | | | +--------------------------------------------------+ | | | | | | | | | | | | | | | | | | | +--------------------------------------------------+ | | | | | | | | | | | | | | | | | | | +--------------------------------------------------+ | | | | | | | | | | | | | | | | | | +-----------+--------------------------------------------------+
Naming and targeting frames
By default, when you click on a link in a frame, the results of that link will load in the same frame as the one you clicked in. Often, however, when you click on a link, you want to load the contents of that link in a different frame than the one you clicked in. To do this, you'll need to use the new TARGET attribute of the A tag, and a new ATTRIBUTE of the FRAME tag: NAME.
Give each frame in your frameset a frame name. This is done by adding the NAME attribute to the FRAME tag. You can name your frames anything you like, though it's best to keep it one simple word.
|
Once you've assigned each frame a name, then you just need to add the TARGET attribute to each link's A tag. The TARGET attribute's value will be the name of the frame that you want the link to load into. So, if you have a menu frame on the left side of your page that contains a list of links, and you want those links to load in the right frame (named "mainframe"), then each link in the left frame will need to have the attribute TARGET added to it's A tag, like this:
|
(Remember, these A tags aren't in the FRAMESET. They are on the separate HTML page that you're loading into one of the frames.)
If all tags in the page point to the same target, you can place the tag <BASE TARGET="targetname"> in the HEAD section of the page. Then all links clicked on that page will automatically target the same place unless defined otherwise.
There are some special TARGET values that you may need occasionally to get the target you want:
- TARGET="_self"
- Links with this target will load in the same frame the link was originally located in. This is the default setting, so you usually don't need to specify it. Here's an example of this target behavior: Click this link to see TARGET="_self"
- TARGET="_blank"
- Links with this target will open a new browser window to display the linked document. This can be a problem, because the site visitor might end up with a ton of unwanted open windows. Use with discretion. Here's an example of this target behavior: Click this link to see TARGET="_blank"
- TARGET="_top"
- Links with this target will "break out" of the current frameset and display alone in the browser window. This is the most handy target, and is frequently used. Here's an example of this target behavior: Click this link to see TARGET="_top"
Exercises
The exercises for this chapter are actually included earlier within the chapter text, marked "An exercise" and "Another exercise." Please do those exercises as you go along and read the text.
Questions for review
- What type of content can go in a FRAMESET?
- Does a frameset page have a BODY?
- What are the two types of framesets?
- How do you know how many FRAME tags to put in your frameset?
- What is the NOFRAMES tag used for?
- What is the rule of thumb for creating nested framesets?
- Why do you need to name your frames?
- What does TARGET="_top" do?