frames : 

displaying several html pages inside one browser window

The primary advantage of a frames based web page is that one part of the web page can stay fixed, while other parts of the page change. For example, in a two frame page, a menu page can be fixed on the left hand side of the page in a frame. When the user clicks on a menu link, the menu remains, but the content, which is in a frame on the right, changes based on the menu selection.

• In this example, frameset.htm tells the browser to display two frames: left_menu.htm and right_page1.htm. There is no content in the frameset.htm file. It only defines how the frames will be laid out in the browser window.
  
  
• left_menu.htm is a separate html file that contains the content for the left frame in the browser window. In the example, links in left_menu.htm target the frame on the right, causing a new HTML page to be loaded into the right frame when the link is clicked.
  
  
• right_page1.htm is a separate html file that contains the content for the right frame in the browser window.

These three separate HTML files, the Frameset and the two content html files, are all needed to show the one "page". The Frameset is never visible, but is the URL used to display this page. For instance, the URLS of various files for this page are:

The individual files:

• left_menu.htm
• right_page1.htm
• right_page2.htm
• right_page3.htm

The frameset that puts them all together:

• frameset.htm

Note that when you select different pages to be displayed on the right hand side, the displayed URL stays the frameset URL. This is one downside of frames, in that the user does not see the URL of the current page.

A major benefit of frames is the ability for a link in one frame to load a new HTML file in a different frame. For example, a link in the left menu frame can change the contents of the right frame. Targeting is the special method for making a link affect a different frame. By default, a link changes the content of the page or frame that contains the link. But you can target another frame for any link. In this case, the targeted frame gets the new HTML file specified in the link. To make this possible, each frame in a frameset must be named. Links with targets use these names to specify the frame where the new page should be loaded.

The frame names you use should be all lowercase, with no spaces. Note that there are several special target names that start the the underscore "_". You should not use the to name frames, but instead, use them in your target to do the following:

• _blank - opens a new browser window for the specified URL.
• _parent - this is appropriate to use if you have a frameset nested in another frameset. The specified URL will replace the parent frameset of the current frame.
• _self - This is the default if no target is listed. The specified URL will be placed in the current frame or, if there is no frameset, the specified URL will fill the current window.
• _top - clears the current browser window of all framesets, and fills the entire window with the new URL.

As you've seen, there are many files to keep track of when you use frames. This can be confusing, and means that you need to be very organized when saving, naming, and placing your files on the disk. A few suggestions:

• As soon as you have the frames formatted in Dreamweaver, save all the files: the frameset and each HTML file in a frame
• Save all the files in the same directory
• Name the files in a way that indicates where they go. For example, HTML files that go in the top frame should start with the word top. For example, top_titlepage.html.
• Keep in mind that if several different HTML files are displayed in one of the frames on a page, each file has a different name, and only one of them is displayed when the frameset page first opens. This default page is the one referenced by the frameset.
• When you use FILE>OPEN IN FRAME... the frameset is updated to to use newly opened file as the default file for that frame. For example, if right_page1.htm was in the right frame, and you use FILE>OPEN IN FRAME to open right_page2.htm, the frameset will now open with right_page2.htm first. So if you are editing several pages within a frame, always use FILE>OPEN IN FRAME for the default page last. As a better alternative, edit the other pages in a normal window outside the frameset.
• Once you've set the file names, don't use FILE>SAVE AS to resave your files. Many people make the mistake of writing over the different pages that are displayed in a frame by using SAVE AS.

In Dreamweaver, do the following:

1. Open the Frames window by selecting WINDOW>FRAMES
2. Create a new document
3. Create a new frameset by selecting MODIFY>FRAMESET>SPLIT FRAME LEFT
4. Add additional frames as needed
5. Save the frameset by selecting FILE>SAVE FRAMESET
6. Save the HTML file for each frame by clicking in each frame and selecting FILE>SAVE
7. To set the properties of the frameset, select the Frameset by clicking on the outermost border in the Frames palette:
   1. Set the title of the frameset by editing the Title box in the document window. The frameset title is the only one that displays for the user, and you must have the frameset selected to set this title rather than the title of one of the frames. Setting the page titles of the individual frame pages does nothing.
   2. Set the visibility of frameset borders in the property inspector
   3. Set the width of the frameset borders in the property inspector (note that if you want the borders to be completely invisible, you must also set the individual frames to have no borders and have margins of zero).
   4. In the right hand corner of the Property Inspector, click in each frame, and set the frame to percent or pixels. Usually, the left hand frame is set to a fixed size with pixels, and the right hand frame is set to a variable size with percent. This allows the user to change the size of the browser window, changing only the size of the right hand frame.
8. To set the properties of each frame, click in the middle of a frame in the frame palette. For each frame:
   1. Give the frame a target name by typing it into the Frame Name box in the property inspector.
   2. Set the frame to be resizable or not by checking or unchecking the No Resize box. If you want one frame to be resizable, you usually need to make all the frames resizable.
   3. Set the scrolling to be on, off, or auto for the frame with the Scroll pull-down.
   4. To completely eliminate borders in the frames, set the Borders to No, and set the margin height and width to zero.
9. Create a link in one frame that changes another frame:
   1. Make the link
   2. Set the target of the link in the Property Inspector to the name of the frame you want to change
10. To force a link to replace the entire browser window rather than an individual frame, set the target to "_top"

frame notes

Adding a frame.

To add another frame to the current frameset, press the alt key, and drag a new frame border from an existing frame boarder. Drag to the left, right, up or down. Or, use the one of the four MODIFY>FRAMESET>SPLIT commands to create a new frameset inside the current frameset.

Deleting a frame.

Delete a frame by dragging the frame border to the next frame border or edge of the screen.

Frames sub-palette in the Insert palette.

This palette allows you to quickly create a frame layout, with many of the frame attributes set to commonly desired settings. The blue box indicates the frame that will resize when the browser window is made bigger or smaller. The other frames are set to stay one size, regardless of the browser window size.

Create a framed website with three frames, similar to the example discussed above. The site should have the following shape:

The menu frame should have 4 links that target and change the right hand frame. I.e. each link should put a page into the right hand frame.

• The default page for the right hand frame
• A different local page
• Another different local page
• A page from an outside website

all materials on this web site © copyright 2003, Philip van Allen