Webmastering / Frames Tutorial

Frames are an alternative type of display system: it allows you to divide the browser window up into distinct sections so that each contains a unique document.  Each frame displays simultaneously and displays its own separate content.

Here are some web sites examples that use frames:


Before we do an actual web project, to get you more comfortable, we'll do an introduction lesson on frames.

See the frames example

1) The Frames Page:

Make a new web for the project. Go to File / New Page or Web and select Page Template in the Task Pane. In the Frames Pages you have a choice of a few templates.

Choose Banners and Content.

A frames page like this one is just a container that holds other documents in each individual frame.  Like tables, you can move the frames or borders to get the exact shape you want.

Right Click on the right frame and click on the Frames Properties button.

Every frame has a Name (main for this one) and an Initial page which we'll load in a second. Click the Frames Page button and check off Show Borders. Take a look at the other controls and OK everything.

Loading the Documents:
As you can see from the buttons, there are two ways to place a document in a frame: The Set Initial Page is used to load an existing document and the New Page is to load a new blank documents. We'll try both.

Make a new document and save it as nav.htm and write the following on the page:

Main
Gallery1
Gallery2
Banner1
Banner2

Format the text and set the background color. This page will be loaded into the left frame. Click the Set Initial Page button in the left frame. The nav page should load into the left content frame.

For the others, we'll load new pages. Click each button and select New Page. It will load a new page in the top and right frame. Now, Save the document.

It will first ask you to name the two new documents you loaded in the top and right frame. It will give you a nice graphic prompt to show you which document you are about to save.

Name the top as banner1.htm and the right as main.htm.  It will then ask you to name the initial frames page.

Call it index.htm. In your Folder List, you should now have 4 documents.

Frames Page HTML:
With a frames page you get some new tabs at the bottom of the page.

Select the Frames Page HTML tab.

<frameset rows="64,*">
<frame name="banner" scrolling="no"
noresize target="contents"        src="banner1.htm">
<frameset cols="150,*">
<frame name="contents" target="main"
src="nav.htm">
<frame name="main"
src="main.htm">
</frameset>

This is the code for your index.htm frames page. Frames are a lot like tables: there are rows and there are columns. Notice the source (src) for each frame in the document.
 

 
 

   Main / Webmastering / Frames Introduction

tutorial [ 1 ] [ 2 ]