Many Web sites today use frames as a navigation aid. Often the frame on the left contains links that load content into the frame on the right. Many configurations of frames are possible. In this lesson you will build a simple two-frame Web site with a navigation frame on the left and a content frame on the right. Your new Web site will help you navigate among the 14 lessons you have completed up to this point.
Type the code below into any text editor and save it with the name "lessonframes.html" in your "mySite" folder. You may view the completed lesson in a new window by clicking here . After you create this page, create the other two pages that follow, then open this page in your Web browser.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My XHTML Lessons</title>
</head>
<frameset cols="200,*">
<frame src="lessonnav.html" name="leftFrame" scrolling="no" noresize="noresize" />
<frame src="lessonhome.html" name="mainFrame" />
<noframes>
<body>
<p>This site requires a frames-compatible browser.</p>
</body>
</noframes>
</frameset>
</html>
Next create the page that loads in the left frame. Save it with the name "lessonnav.html" in your "mySite" folder.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lesson Navigation</title>
</head>
<body bgcolor="white">
<b><a href="lessonhome.html" target="mainFrame">XHTML
Lessons</a></b>
<ol>
<li><a href="lesson01.html" target="mainFrame">A
Basic Page</a></li>
<li><a href="lesson02.html" target="mainFrame">Colors</a></li>
<li><a href="lesson03.html" target="mainFrame">Unordered
Lists</a></li>
<li><a href="lesson04.html" target="mainFrame">Ordered
Lists</a></li>
<li><a href="lesson05.html" target="mainFrame"> Links
within a page</a></li>
<li><a href="lesson06.html" target="mainFrame">Links
to Other pages</a></li>
<li><a href="lesson07.html" target="mainFrame">Links
to Other Sites</a></li>
<li><a href="lesson08.html" target="mainFrame">Physical
Styles</a></li>
<li><a href="lesson09.html" target="mainFrame">Preformatted
Text</a></li>
<li><a href="lesson10.html" target="mainFrame">Table
Tag</a></li>
<li><a href="lesson11.html" target="mainFrame">Horizontal
Rules</a></li>
<li><a href="lesson12.html" target="mainFrame">Font
Tag</a></li>
<li><a href="lesson13.html" target="mainFrame">Special
Characters</a></li>
<li><a href="lesson14.html" target="mainFrame">Images</a></li>
</ol>
</body>
</html>
Next create the page that loads in the right frame. Save it with the name "lessonhome.html" in your "mySite" folder.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML Lessons Home Page</title>
</head>
<body>
<h1>Lessons in XHTML</h1>
This small site contains the XHTML lessons from MakePages.com I have completed.
Use the frame on the left to navigate among the lessons.
<div align="center"></div>
</body>
</html>
Now that all three pages are complete, open "lessonframes.html" in your Web browser.
The frameset document "lessonframes.html" defines two frames. The left frame is called "leftFrame" and the right frame is called "mainFrame". By including target="mainFrame" in all the links in "lessonnav.html", we are able to load content into the "mainFrame" by clicking on links in the "leftFrame".
Some additional details:
The !DOCTYPE tag is slighlty different for frameset documents.
The <frameset> tag has several attributes. The cols attribute sets up two columns. The first is 200 pixels wide and the second takes up whatever space is left in the window. These two columns represent the two frames. A <frame> tag is then entered for each of the two columns. The src attribute of the <frame> tag tells the browser which page to load in that frame.
The content contained by the <noframes> </noframes> tag pair is only seen by browsers that don't support frames. Use this content to direct visitors to download a current browser or direct them to an alternative site.
A note about borders: You can eliminate the borders by adding the following attributes to the outermost <frameset> tag.
<frameset cols="200,*" frameborder="0" framespacing="0">
If you do this, however, the code will not conform to strict XHTML guidelines. The page, however, will render correctly in all the major Web browsers. Here lies the problem today. The W3C has not defined a standard way to indicate frame spacing and border attributes within a frameset. As a result, Web browser manufacturers have introduced their own tags to allow designers to control these attributes. The attributes shown above will control border and spacing attributes for framesets in all major Web browsers today.