Free computer Tutorials
HOME Stay at Home and Learn

Web Design Tutorials

HTML Frames - Part Three
 
Computer Tutorials List

Beginners Computing
Microsoft Word
Microsoft Excel
Web Design
Cascading Style Sheets
Javascript
Visual Basic .NET
Beginners PHP

Excel 2007
Which Qualifications?

 

 

 
 

Creating a Frames Document (continued)

 

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

Frameset Code

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:

Add Source page dialogue box

  • 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

Open your Frame pages

  • 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:

Source Pages Opened in the Editor

  • 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.

<-- Back One Page Move on to the Next Part -->

<--Back to the Web Design Contents Page

View all our Home Study Computer Courses