Free computer Tutorials
HOME Stay at Home and Learn

Web Design Tutorials
 
Computer Tutorials List

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

Excel 2007
Which Qualifications?

 

 

 
 

HTML Frame Targeting

 

Once you have your FRAMESET tags all set up, you can move on to stage 2 - Targeting.

The whole point of having a frames document is so that your visitors don't have to jump from page to page in your web site. When they click on one of your links, you can keep them on the same page. The page they would have been taken to when the link is clicked on will now be displayed in one of your frames.

To insert a web page into one of your frames, you add a TARGET attribute to the link itself. A normal hyperlink will look like this:

<A HREF = "Page2.html">Click here for exciting news</A>

When that link is clicked, the entire page that the user was looking at will disappear. This Page2.html will then take its place.

But in a frames document, you don't want the entire page to disappear. You want this Page2.html to appear in one of your frames. In our example, we had a frames document split into two columns. When a link on the left was clicked on, a new page appeared on the right hand side.

The reason it did this is because a TARGET attribute was added to all of those links on the left hand side (and the ones on the right). The TARGET attribute uses the NAME value from your FRAMESET document. When we split our page into two columns, we gave each column a NAME. The NAME of our first column, the 25% one, was frame1. The NAME of our second column was frame2. To get the web page called Page2.html to appear in the right hand column, we use the NAME of the right hand column in the link, right after the TARGET attribute. Like this:

<A HREF = "Page2.html" TARGET = frame2>
Click here for exciting news
</A>

The link is practically the same. The only difference is that TARGET attribute. We're now saying to the browser "When you bring me the web page called Page2.html, don't fill the whole window with it. Instead, put it into the frame column that has the NAME frame2."

And that's the key to frames - Using a NAME from your FRAMESET code to TARGET a particular Column or Row.

OK, that's enough theory. Let's use the HTML Editor to create a frames document for us.

First, let's create two pages to go in our frames, and a few pages for the links - five in all. You can do this quite easily with your editor. To create five web pages quickly, do this:

  • Start your HTML Editor and create a new web page in the normal way. Set a white background colour.
  • Click File > Save As
  • Create a folder for your web page, call it Frames
  • Type leftside.html as the filename
  • Click Save. You'll be returned to your HTML Editor
  • Click File > Save As
  • In the filename box, type rightside.html for the name of your second page. Then click Save
  • When you get back to the editor, click File > Save As again
  • Save the web page as page1.html, and click Save
  • Click File > Save As yet again, and this time save the web page as page2.html. Click Save
  • Create a fifth web page called page3.html

You will now have created five web pages very quickly, and we have everything we need to start creating our frames document.

To create your FRAMESET document using your Editor, do this:

  • Click on Add from the menu bar
  • From the drop down menu, click Frames Document
  • From the sub menu, click Add a Frames Document
  • The following dialogue box will appear

Click here to see the Frames Dialogue Box

  • We're creating a frames document in Columns, so click the box next to "Frames in Columns"
  • The following appears

Frames in Columns

The first figure, 2, is how many Columns you want. The default value is fine for us. The next two boxes are the percentage figures. The default is to have the first column take up 30 percent of the frame and the second column 70 percent.

  • Change the 30 to 25, and the 70 to 75
  • Click the Preview button
  • You'll see that square in the middle change to this:

Preview the Frame

The line represent the border between your two columns. Play about with the numbers and click Preview to see what happens.

When you're happy, click the OK button. The following code will be inserted into your Editor.

The Frameset Tags

As you can see, the Cols have been set to 25 percent and 75 percent. Note the two FRAME tags. The NAME itself and the SRC are blank. We can use the Editor to set the pages going into our two columns, and set the NAME value. Because this page is getting a bit long, we'll continue the lesson in the next part.

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

<--Back to the Web Design Contents Page

View all our Home Study Computer Courses