Lesson 3.4: Frames

Purposes of Frames

Frames can be very useful and can also be very easily misused. Many people mistakenly use frames when they should be using tables instead. Frames are used mainly for navigational purposes since it allows multiple pages to be displayed on one screen. Therefore, frames can be used to allow the navigational content of a page to always remain visible. However, for the simple division of pages, tables should be used instead.

Anatomy of Frames

Frames are created by making a frameset and at least two webpages. The frameset is simply a page that only contains instructions for the browser on how to break up the page into sections and which webpages to display in those sections. The following picture, for example, is a Dreamweaver page divided into four frames, with a different page in each of those frames:



The frameset is the outmost part of the page. In this example, it tells the browser to break up the page into four sections, and then display a webpage in each section.

The following picture is an example of frames in use. The page is divided into three frames: one on top and two on the bottom. It basically takes 4 html pages to create this framed webpage: 1 for the frameset (telling the browser how to divide up the page and which pages go where), and 3 pages to go into the frames.

Creating Frames

To create frames using Dreamweaver, first start a new page. Then go to Insert > Frames and choose how you would like your page to be divided: with the frame on the left, on the right, top, bottom, etc. If you would like to add more frames, i.e. divide the page up into more sections, click in the frame you want to divide and either go to Insert > Frames again or go to Modify > Frameset and then choose how you would like to split your frames. You can adjust the sizes of your frames by clicking on the frame dividing line and dragging it to where you want it to be.

To put content in the frames, you can either begin typing in them directly or place HTML pages you've already made in them. To place already-made HTML pages in frames, click in the frame you want to place it in and then go to File > Open in Frame.

Saving the Files

Saving can be a bit complicated with frames. Keep in mind that the frameset page is the outside page that tells the browser what goes where, and the inside pages are all normal HTML pages.

• If you go to File > Save All Frames, it will prompt you to save everything: both the frameset and the pages it contains. Pay attention to what it prompts you to save. It will prompt you to save the frameset with a default name similar to "UntitledFrameset.htm." Normal pages will have a default name similar to just "Untitled.htm." If the frameset is your main page, you should name it index.html so that the browser will open that first when going to your URL.

• To save individual pages, click on the page you want to save and go to File > Save Frame As (or File > Save Frame if you've already saved it before.) If you're given the option to Save Frameset instead of Save Frame, make sure you've clicked in the frame of the page you want to save.

• To save the frameset itself, click on the frameset border or any of the frame dividing lines so that a dotted line appears around the page. Then go to File > Save Frameset As.

Linking from Frame to Frame

Since frames are mostly used for navigational purposes, you will want to be able to link from frame to frame, so that clicking on a link in one frame will open up a page in another. To do so, you must first name each frame.

To name your frames, first open up the Frames Properties window by going to Window > Frames. This will bring up a window with a diagram of your frames layout on it. To name a frame, click on its corresponding box in the diagram.

Doing so will bring up the Frames Properties in the Properties toolbar.

To name the frame, enter a name (no spaces) into the Frame Name text box. In the above example, the default name entered by Dreamweaver is "mainFrame"; you should change it so that you can better remember which frame is named what.

To link from one frame to another:
1. Create the link as usual, i.e. highlighting the text if you want to make a text link or creating an imagemap if you want to link from an image.
2. Enter the link's page name or URL into the Link text box as for a normal link.
3. From the Target drop-down menu, choose the name of the frame that you want the new page to open up in when in the link is clicked on. The name of the frames you have named should appear below the default selections of _blank, _parent, etc.

Clicking on that link in a browser should now open up the page in the designated frame.

Congratulations! You have now finished the tutorial.