Creating a Frames Document - html

In the last section, you created a frameset document that looked like this:

We'll continue the lesson by seeing how to add hyperlinks to the document. So:

• Click on Add from the menu bar
• From the drop down menu, click Frames Document
• From the sub menu, click Add Source Pages
• The following dialogue box appears:

• Click on the button "Add source pages"
• The open dialogue box appears
• Navigate to where your Frames folder is. The two web pages you saved earlier, leftside.html and rightside.html, should appear

• To select more than one web page, hold down the Ctrl key on your keyboard and click on the file with your left mouse button
• Click on Open when both the leftside.html and rightside.html are selected
• Your dialogue box will then look something like this one:

• The first line of the text box under "Use these web pages for the source" is the absolute reference to your html pages. Here it's "C:\Frames", meaning the folder called Frames on the C drive
• Click the OK button
• The editor will then amend your Frameset code to look like this:

<Frameset Cols = "25%,75%">

<Frame NAME = frame1 SRC ="C:\Frames\leftside.html">
<Frame NAME = frame2 SRC ="C:\Frames\rightside.html">

</FRAMESET>

Note that the Editor has inserted the absolute reference to your web pages - "C:\Frames\leftside.html">. If you're uploading to the internet, or sending work to be marked, you need to change this to a relative reference.

The important attributes to note are the two NAME attributes - frame1 and frame2. We'll be using these in our targeting.

But you can now save this frameset document by clicking on File > Save As. Call it frameset1.html.

Click on View > View web page to see the results of your labour. You should have a frame document with two white pages in it. There should also be a grey bar running down the page, splitting your two frames into columns.

If you've got this far, congratulations - you have now created a frames page!

All right, so your frames page doesn't actually do anything. But the hard work is over. Only the targeting is left to do. For that, remember what our two columns are called? You're going to need those two names.

Posted in: free, html5, tricks