Dreamweaver makes it relatively easy to use frames. You do not need to program framesets and frames by hand. Most of the frame properties can be set by clicking property boxes. We will create a document with frames.

What Are Frames?

Frames are separate windows that appear inside a web page. Each frame is made up of a separate HTML page.

In addition to the individual HTML pages that make up the web page with frames, there is another HTML page that doesn't display. It is called the Frameset. Its purpose is to direct the display of the pages that make up the web page with frames.

Even though the Frameset doesn't display, it is obviously very important to a web page that uses frames.

Creating Frames

Activity-------------------------------------------------------------------------------
Open a new  Dreamweaver window by clicking the File menu, New. 

From the View menu, select Frame borders to show the frame borders.  A strong outline appears around the inside of the document window. These are the frame borders. You will use the frame borders to create the frames. 

Hold down the Alt key, place the mouse over the left border and drag the left hand border toward the right.  Make the left frame narrower than the right.

Click inside the right hand frame to select it.  From the Modify menu, select Frameset, then Split Frame Down.  A new frame border will divide the right hand frame into top and bottom.  Now there are three frames.

Selecting Frames and Framesets, Adding Text

Selecting a Frame

To select a frame so that its properties can be modfied, press the Alt key and click inside the frame. A dotted line surrounds the inside of the frame that is selected. The HTML of that frame (page) is visible in the HTML inspector window.

Selecting the Frameset

To select the frameset, click on a frame border. The HTML of the frameset document is visible in the HTML inspector window.

Activity--------------------------------------------------------------------------
Click inside the top frame and type and format some text for a web site title. 

Click in the left most frame and type some index text.

Click in the main frame and type some text.

Saving Frames and Framesets

To save a frameset file, choose File, Save Frameset As. You will be prompted for a name. Many framesets are called index.html, because their information is used to display the framed pages.

To save a frame document, click in a frame and choose File, Save. You will be prompted for a name.

Naming Frames

To be able to target documents into frames, it is important to give frames names.

The name of a frame is different from the name of the HTML file. Every HTML file has a file name, but not every HTML page has a name associated with a frame.

Use the Property editor to name frames. Alt click the frame you wish to name. The property editor will change to reflect the properties of the frame.

On the left side an empty box called Frame Name. Type a name.

It is always best to select a descriptive name for the frames you create.

Use the frames Property editor to specify other properties of the frame as well. Such as scroll bars, resize or no resize, borders, border color and margins.

Activity--------------------------------------------------------------------------

Alt click inside each of the three frames.  The Property Box now shows the frame properties.  Name each frame by typing a name in the blank box underneath the word "Frame". 

Save each individual frame as left.html for lefthand frame, top.html for the top frame, and "main.html" for the largest frame. 

Save the frameset for your document as frameset.html. 

Notice that the Property Box allows you to change other properties such as border color, etc.

Using Links in a Frame

Often the left frame is used as an index that remains visible, while the big frame changes content when one of the links in the index is clicked. 

This link shows an index frame on the left.  Clicking one of the topics causes the main frame to load a new document.  Dreamweaver can help with the details of "targeting" a document to a particular frame.

Targeting is very important. If links inside framed documents are not targeted correctly, you might have the awkward situation where a large document is loaded into the small menu frame on the left side!

Activity--------------------------------------------------------------------------

Select some text in the left frame. 

If the Properties Box is not open, open it from the Window, Properties menu.

In the link box, type in the URL of a page that you would like to load in the main frame.  For example, you could type http://www.yahoo.com to load Yahoo's main page into the main window. 

Now, in the Target drop down box, select the main frame to target the new document into the main frame. 

From the File menu, select Save All.  Try your  frame from the File menu, select Preview in browser.

Return