Frames : Building the Content Pages
In Part A, we created the frameset page for viewing other HTML pages. In this part of the demo we will create two documents that will be 'called' into the separate frames of our frameset.
We need to create the two documents, one for each frame of the frameset:
- Create each of the following pages. (You can copy and paste from the samples below.)
- Save each under its own name in your Frames folder.
- control.html
- display.html
- info1.html
- Make sure your frame.html file is saved in your Exercise 6 folder with these files!
Page One : control.html
|
|
<html>
<head><title>Frameset Control Page</title>
<style type="text/css">
body { background-color: #F9CB9D;
font-family: arial, helvetica, sans-serif;
color: #007755; }
a:link { color: #000000; }
a:visited { color: #FFCCC; }
</style>
</head>
<body>
<p>This is the document called "control.html". It has all the links in it.</p>
<p> <a href="info1.html" target="display">Information 1</a> </p>
<p> <a href="info2.html" target="display">Information 2</a> </p>
<p> <a href="info3.html" target="display">Information 3</a> </p>
<p>Go back to the original page displayed. </p>
<p> <a href="display.html" target="display">Display Page</a> </p>
</body>
</html>
|
Remember that these links can be any files, as long as they target="display".
Page Two : display.html
|
|
<html>
<head><title>Frameset Display Page </title>
<style type="text/css">
body { background-color: #FFFDDA;
font-family: arial, helvetica, sans-serif; }
h1 { color: red; }
</style>
</head>
<body>
<h2>Frames Are</h2>
<br />
<h1>Great for Interactivity</h1>
<br /><br />
What you see now is actually 3 separate files.
<p>In Part A we created the frameset page named frames.html. In that file we named the left frame - frame name="control". We named the right frame - frame name="display".
</p>
<p>In the left frame we want to view a specific page: frame src="control.html"</p>
<p>In this frame we want to view a specific page: frame src="display.html".
The pages in this window will change when a link in the left frame navigation is clicked.
</p>
</body>
</html>
|
These two files are "called" by the original Frameset file named frame.html and viewed in the left and right frames respectively.
And just to make our first link work properly, here is the code for the information 1 link.
Page Three : info1.html
|
|
<html>
<head><title>Information 1</title>
<style type="text/css">
body { background-color: #FFDDFF;
font-family: arial, helvetica, sans-serif;
color: #4A2885; }
h2 { color: #2D73B9; }
</style>
</head>
<body>
<h2><strong>1</strong> </h2>
<hr />
<p>Your content for Information 1 goes here!</p>
<p>This can be any content you want to see when you click on the Information 1 link in the Control window on the left.
</p>
</body>
</html>
|
Be sure to create a few more pages to link to, so you can see how your frames page works.
If you want, you can link to your first exercises.
Just be sure to either load those files again inside your exercise 6 folder or you can use an absolute url to the school server.