Chapter Three - Lesson Two - Frames

Frame Targeting - linking to "new windows" and "breaking free" from frames

When using frames, you need to make sure that all of your links on your pages are targeted to the desired frame that you want the new page to load into. If you have already viewed the website with it's new frame structure before reading this section, you will have noticed that when you click on the navigation buttons in the left frame, that the new page loads into that same frame and replaces the page file that held the buttons. This is a common error that occurs when frames are created for a site that has already been developed as a non-framed site. The buttons.html file now needs to be modified so that the navigation buttons will have their links targeting the "main" frame instead of the "buttons" frame.

Before you link the buttons to the main frame, you will first see how to target a new window and how to break free from a frame.

Open up your buttons.html file and type in the target information for opening up a new window as shown below, for the about us button. Next, view the website again and click on the About Us navigation button and see how the browser reacts.

With the above code, the browser will open up a new window with the linked page loaded into it. This is a very popular way of linking one website to another. By linking your website to other sites in this manner, you will ensure that the viewer will come back and see your site again before he leaves the internet. When the viewer closes his browser window, he will be faced with the original window that still has your site loaded.

If you do not wish to have your links set to open up a new browser window then the viewer follows them, then you can use the option of having your links set to break free of your site's frame structure when the links are for pages that are not part of your own website. Reset your About Us link so that it will break free of your frame structure and go pack to the parent frame as shown below.

With your links set to go to the parent frame, the viewers will break free from your frames and continue to surf the internet from the original browser window.

Now you will set the navigation buttons on your site so that the links will be targeting the main (right) frame. As with the two examples above, all you need to do is name the frame to be targeted. Set the new target for the home, about us and order form links. Do not set the target information for the e-mail link because it is already set to activate the browser's e-mail function.

Your new pages will now be loaded into the main frame of the website. If you go to the About Us page, you can click on the link within the text in the top section of the page that takes you to the order form page. Since this hyperlink does not have a frame target specified, the new page is loaded into the same frame as the one that you are leaving.

When viewing the website this time, you will notice that when you go to the order form page by either following the link from the About Us page, or by clicking on the navigation button in the left frame, that the page does not quite fit the right hand frame, and that you have to scroll the frame to view the whole page. This is an example when it is better to set your target to break free from the frames so that it will have a full window to layout the page. You do not want to open up a new window with this link because the only navigation link you have on the order form page is the "back to homepage" button at the bottom of the page. Clicking on the "back to homepage" button will result in the site's index page being loaded into this new window, and the viewer consequently having two browser windows open with the same website loaded. You will also be unable to use the browser's "back" button on the menu bar because since this is a new window and this is the first page loaded, there isn't a previous page in this specific window to go back to.

Go back into both the buttons.html, and the aboutus.html files and reset the links for the order form page so that they both target the parent frame instead of the main frame. Once you have done this, you will be able to navigate through your website without hyperlink target errors.

Your finished buttons.html file, with the appropriately targeted hyperlinks, should now read like this:

<HTML>
<HEAD>
<TITLE>Navigation Buttons</TITLE>
</HEAD>
<BODY BACKGROUND="backgrnd.gif">

<A HREF="home.html" TARGET="main">
<IMG SRC="homebutton.gif" WIDTH=88 HEIGHT=70 BORDER=0></A> 

<A HREF="aboutus.html" TARGET="main">
<IMG SRC="aboutusbutton.gif" WIDTH=88 HEIGHT=70 BORDER=0></A> 

<A HREF="orderform.html" TARGET="_parent">
<IMG SRC="orderformbutton.gif" WIDTH=88 HEIGHT=70 BORDER=0></A> 

<A HREF="mailto:[email protected]?Subject=Request for more information">
<IMG SRC="emailbutton.gif" WIDTH=88 HEIGHT=70 BORDER=0></A> 

</BODY> </HTML>

With what you have learned and accomplished in the first three chapters of this tutorial, you can now create your own personal homepage that has all the same functional elements as what 80 percent of the personal homepages on the internet today have. The next chapter will show you how use a few of the most popular page enhancements that you may want to consider using for your own website.

Hosted by www.Geocities.ws