Chapter 8: Frames
Frames allow you to display multiple webpages in a single window by dividing it into sections. Individual webpages are then loaded into each frame.
The concept of creating frames is rather complex to grasp at first since the coding is more involved than for most other webpage functions. It is recommended that you use BestAddress HTML Editor's Frame Creator Wizard to develop your frame-based website. To start it, choose Wizards from the File menu.
If you intend to use frames, you should note that not all browsers support them. If you do decide to use frames in your website, be sure to read the section at the end of this chapter on overcoming this problem.
Creating the Foundation
To begin, you will need to create a special kind of webpage that will become the container for all the other webpages. This webpage is called a frame page. The frame page does not contain any content itself but simply defines the size and positioning of each individual frame as well as specifying what webpage is displayed in each.
The construction of a frame page involves the use of the <frameset> and <frame> elements. To begin with you use the <frameset> and </frameset> elements. Between these you add a <frame> element for each frame you want to work with. The following example demonstrates how you would divide the browser window into two frames:
<frameset>
|
Horizontal Division
You then need to specify if you want the frames to divide the screen horizontally or vertically.
To divide the screen horizontally, use the rows= attribute in the <frameset> element. For example, the following code divides the browser window horizontally into two sections, both occupying half of the available size:
<frameset rows="50%,50%">
The following example demonstrates the entire layout of a frame page containing two frames. Note that there are no <body> elements. In this example, the frames are arranged horizontally, with the top frame occupying 20% of the browser window and the second occupying the remaining 80%:
<html>
|
If you load the above frame page into a browser, it will look something like this:
Vertical Division
To vertically divide the web browser window, specify percentages using the cols= attribute in the <frameset> element. The following code segment demonstrates two divisions, the left being 20% and the right being the remaining 80%:
<frameset cols="20%,80%">
Adding Content to Frames
At the moment, all the frame pages we've looked at so far only contain the basic layout of the frame divisions. They still need to be populated with webpages. As mentioned earlier, each individual frame will contain a separate webpage. To do this, you will need to use the src= attribute in the <frame> element. The following example is an extension of the code shown earlier:
<html>
|
In the example above, the webpage TopPage.html will be displayed in the top frame division while BottomPage.html will be displayed in the bottom division.
Frames and Hyperlinks
When one of your webpages contains a hyperlink, you will need to tell the web browser where the page should appear. Some browsers cause the link to display in the entire window while in others it might display in the wrong division you intended.
To avoid this problem, you will need to give each of your frames a name and then specify in which frame the hyperlink should be opened.
To name a frame, use the name= attribute. For example:
<frame src="heading.html" name="siteheading">
Lets take a look at the previous example again, this time with all the frames named.
<html>
|
With the frames named, you can set the frame in which a link will load by adding the target= attribute to the link. For example:
<a href="LinkedPage.html" target="bottom">A hyperlink</a>
As you can see, the target= attribute's value is set to "bottom", which is the name of the bottom frame. By clicking this link, the page will therefore be loaded into the bottom frame.
It isn't necessary to add the target= attribute to every link. If you have a page with many links that all point to the same frame, you can add the following element between the <head> and </head> section of the page containing the links:
<base target="TargetFrameName">
There are also three values that can be added to the target= attribute:
_self makes the new page load into the same frame that contains the link.
_top loads the new page into the entire browser window.
_blank displays a new browser window in which the frame is displayed.
Frame Layout Options
There are three extra attributes that you can add to the <frame> elements to change the way each frame operates:
noresize Prevents the site's visitor from changing the size of the frame.
scrolling= This attribute's value can either be set to yes or no. It specifies whether a scroll bar appears if the page's content won't completely display in the area available. It can also be set to auto to tell the browser to only display scroll bars when necessary.
frameborder= Set this attribute's value to 0 to prevent a border from being displayed at the edge of the frame.
More Complex Frames
You can create more complex frames by combining horizontal and vertical frames. For example, you can divide the web browser window into two horizontal sections, and then divide the lower section into two vertical sections. The following example demonstrates this:
<html>
|
Supporting Non-Frame Browsers
As mentioned at the beginning of this chapter, some browsers do not support frames. To solve this problem, add a <noframe></noframe> section to the bottom of your frame page. The following example demonstrates this:
<html>
|
If an older browser visits your site, it will read through your frame's page, picking our the sections it understands. Even through it does not understand the <noframe> and </noframe> elements, it will display the text between them.
Create Frames-based Sites Easily
As mentioned at the beginning of this article, if you intend to create your own frames-based website, consider using BestAddress' Frames Wizard - it will guide you through the process visually, providing a large number of options and making the overall task much easier and trouble free.
Where to from here?
Learn how to create tables in Chapter 9: Tables.
