Introducing Frames

Introduction

A frame is a way to freeze a part of your website so that it’s always visible while your visitors click through the rest of your pages. Frames break your page into different areas called Panes. Each pane is filled with a separate HTML document. This is really useful if you want to have a title on the top of your webpage that never goes away or a list of links running down one side. We’re going to set up a very simple set of frames.

Frameset

The first thing you need is a frameset. The frameset is a “control file” that specifies the overall structure of the frames. It contains references to other files that will be displayed in the table structure it defines. While all of our previous web pages have contained a body, a frameset does not have any contents of its own.

The following example demonstrates the basic structure of a frameset page:

Example 1 
<html>
<head>
	<title>My Frames Page</title>
</head>
<frameset rows="80,*">
	<frame name="Header" src="name.html">
	<frame name="Main" src="main.html">
</frameset>
</html>

Let’s look at Example 1. The frameset tells the browser we’re starting a webpage with frames. rows tells the browser that we want the two panes of our frame to stack up on top of each other. 80 tells the browser that the top row should be 80 pixels high. The * tells the browser that the second row should fill up all the space that’s left after the 80-pixel top row. Then we have two lines of frame code that tell the browser to look for two other HTML documents to fill in the panes. Each of these panes has a name. Then we close all our code.

Panes

The page listed in Example 1 is not complete by itself. It depends on the existence of two other web pages that are displayed in the two panes (the sections of the frame). Since no path is specified, the referenced files name.html and main.html must exist in the same folder as the frameset.

Practice:

  1. In your practice folder, create a file called frameset.html.
  2. Copy and paste the code from Example 1 into this document and save it.
  3. View the file. You should see two panes with errors, since the referenced files are missing.
  4. Create name.html and center a level-1 heading with your first and last name in it.
  5. Refresh your browser and make sure you can see your name in the first pane.
  6. Change the code in your frameset.html document so that the second pane is filled with one of you previous assignments. You will have to specify the path to the file, navigating your folders.
  7. Refresh and make sure that your paths are correct and everything shows up correctly.

Frame Margin

The frame tag allows you to specify the margins between the edge of the pane and the page that is displayed inside it. The properties are called marginwidth and marginheight. For example:

<frame name="MainPage" src="main.html" marginwidth="50" marginheight="50">

Frame Borders

You have the option of changing the border size and color of your frames. To change the thickness of the borders, use the border property of the frameset tag. To change the color of one or more borders, specify the bordercolor property of the frameset tag or one of the frame tags. For example:

<frameset border="10" bordercolor="#FFCC00">

The default border width is 5 pixels. If you specify less than 5 pixels, the frame will be displayed without borders.

Practice:

  1. In your practice folder, open frameset.html.
  2. Add a margin of 75 pixels around the main pane.
  3. Change the borders to a width of 8 pixels.
  4. Change the border color to dark green.