Nesting an internal frameset
Nesting internal framesets, or combining framesets is common to produce a single row at the top and/or bottom of the page with two columns in the center.
Click here to view example <html>
<head><title>Page Title</title>
</head>
<frameset rows="50,*,50"><frame name="top" src="top2.html">
</frameset>
<frameset cols="150,*"><frame name="left" src="menu2.html">
</frameset>
<frame name="right" src="main2.html">
<frame name="bottom" src="bottom2.html">
<noframes>No frames content goes here</noframes>
</html>
Create an Internal Nested Frameset
- Edit the lab05d.html file.
- Create the first frameset as rows 15%, *, 15%, no columns.
- Make the frame with heading.html the first row.
- Create a nested frameset using cols 150, * for the second row adding the same border attributes as in the first frameset.
- Keep the frames with navbar1 and main as the two columns.
- Be sure to close the column frameset.
- Make the last row the blank.html.
- Save the file as lab05e.html.
- View the file in the browser.
You can also include a frameset as the source for another frameset.
Click here to view example
<html>
<head><title></title>
</head>
<frameset rows="10%,*,10%">
<frame name="parenttop" src="blank.html">
<frame name="child" src="framesetf.html">
<frame name="parentbottom" src="blank.html">
</frameset>
<noframes>No frames content goes here</noframes>
</html>
- Edit the lab05e.html file.
- Change the first frameset to two rows *, 15%, with border and frameborder equal 0.
- Remove the first frame.
- Remove the second frameset.
- Keep the frame named main using lab05d.html (the last demo) as the source.
- Remove the nested closing frameset.
- Keep the last row with blank.html.
- Save the file as lab05f.html.
- View the file in the browser.
Review of the target attribute
Previously you learned about the target attribute that allows you to control where a link appears. By default a link will open in the same frame containing the link. The following are common built-in targets you can use. Also recall you can set your own default target using the base tag in the head section, which you can override by specifying a new target in the individual anchor tag.
- _self - opens link in the same frame (default)
- _blank - opens the link in a new window
- _top - opens the link at the top, replacing frames
- _parent - opens the link in the frame containing the current frameset. Only differenct from _top whien you nest framesets.
In order to control which frame a link appears, your frames must have a name that begins with an alphanumeric character (not the underscore as in the built-in target). Designers commonly create a frameset that contains a menu frame and a main or body frame, the following example illustrates the coding of this type of targeting.
Click here to view example In the frameset definition:
<frameset cols="150,*">
<frame name="menu1" src="menu1.html"> <frame name="body" src="body1.html">
</frameset>
In the menu1.html page:
<a href="body1.html" target="body">Link to page 1</a>
<a href="body2.html" target="body">Link to page 2</a>
<a href="body3.html" target="body">Link to page 3</a>
Click here to download lesson files
- Edit the navbar2.html file.
- Add anchor tags to link each button as follows.
- Link button1 to main.html target main.
- Link button2 to directions.html target main.
- Link button3 to specifics.html target main.
- Link button4 as a mailto link to your email address.
- Save your changes.
- View lab05g.html in the browser.
When using framesets, since users can optionally open individual frames separately, it's always a good idea to include at least a link in each content page back to the home page that reestablishes the menu frame.
Click here to view example <a href="frameseth.html" target="_top">Home</a>
- Edit the main.html, directions.html and specifics.html files.
- Add anchor tags to include a link back to the home page including the menu on each of the pages.
- Save your changes to each page.
- View lab05g.html in the browser.