The main frame page is the page that people will see first when they come to your frameset. Think of it the way you would think of the index.html page on a non-framed Web site.
Step 1: Create the Main Page HTML
Open your favorite text editor to a blank page. Save this page as main.html.
Step 2: Write the HTML
Again, start with your basic HTML tags:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>My First Framed Page</title>
</head>
<body>
This page is more likely to have the title appear, as it is the page that is referenced in your noframes page.
Step 3: Add a Headline
As I said above, think of this page as the index.html page for your frameset. So, you would want to have a headline on your page:
<h1>My First Framed Page</h1>
Step 4: Add Links
Links on this page don't need targets (unless you want them to open in a different frame), so you can write them as you normally would. Remember that some developers don't like it when you open their page in your frameset, so it is polite to target external links to the special target _top. This tells the browser to open the link in the same browser window, but without any of your frames.
Build your index page with information that is relevant and interesting.
<p>
I have been writing HTML for 3 months now, and I felt that it was time for me to build a framed page. This is the result.
</p>
<p>
You can see some <a href="photos.html">photos of me and my family</a> or just <a href="about.html">learn more about me</a>.
</p>
<p>
I learned to write frames from the <a href="http://webdesign.about.com/od/frames/a/aabg012100a.htm" target="_top">Frames Tutorial</a>. Now <b>you can too!</b>
</p>
Step 5: Add Navigation on the Main Page
Finally, you should include alternative navigation on your main page, so that your pages remain accessible to people with browsers that can't view frames.
<p>
<a href="main.html">main</a> |
<a href="photos.html">photos</a> |
<a href="about.html">about me</a>
</p>
Step 6: Close the Page
Then close the page like you would any other HTML document:
</body>
</html>
Step 7: Save and Upload All the Pages
And don't forget to save it. Now, you can write the other two pages for your frameset (photos.html and about.html) and you'll have a fully-functional frameset.
Once you upload these pages to your Web hosting provider you'll be able to tell all your friends about your new “framing” ability.
