Appreciating HTML Frames - dummies

By Janine Warner, Ivonne Berkowitz

Frames add innovative navigation control because they enable you to display multiple HTML pages in one browser window and control the contents of each framed area individually. Designers commonly use frames to create a page with two or more sections and then place links in one section that, when selected, display information in another section of the same browser window.

Web pages that use frames are split into separate sections — or individual frames. All the frames together make up a frameset. Behind the scenes, each frame of the frameset is a separate HTML file, which makes a page with frames a little complicated to create, even with Dreamweaver. If you choose to create your frame files in a text editor, you have to juggle multiple pages, working on each frame one at a time, and you can see what you’re creating only when you preview your work in a browser. The visual editor in Dreamweaver makes creating frames a lot easier because you can view all the HTML files that make up the frameset at the same time and can edit them while they are displayed in the way in which they appear in a browser.

As a navigational feature, frames enable you to keep some information constant, while changing other information on the same page. For example, you can keep a list of links visible in one frame and display the information each link brings up in another frame.

Frames look great to many designers, but they’re also very controversial. Although frames give you some great navigational features, they also open up a range of design problems and aren’t always the best way to organize your site.

For example, you can create as many frames as you want within a browser window. Unfortunately, some people overuse them and create designs that are so complex and broken up that they’re neither aesthetically appealing nor easily navigable. Putting too many frames on one page can also make a site hard to read because the individual windows are too small. This has led many Web surfers to passionately hate frames. Moreover, some sites that rushed to implement frames when they were first introduced have either abandoned them or minimized their use.

A more problematic aspect of frames is that they’re not backward-compatible for very old or purely text-based browsers, which means that if a visitor uses an older browser that doesn’t support frames, they won’t see anything — that’s right, they get a blank page — unless you use a special tag called the <NOFRAMES> tag to create an alternative page to supplement your framed page. Fortunately, Dreamweaver automatically inserts a <NOFRAMES> tag in all frameset pages and makes it very easy to add the alternative content for viewers with browsers that don’t support frames.

Goin’ for guidelines

Here’s a list of guidelines to follow when using frames:

  • Don’t use frames just for the sake of using frames. If you have a compelling reason to use frames, then create an elegant and easy-to-follow frameset. But don’t do it just because Dreamweaver makes it easy to do.
  • Limit the use of frames and keep files small. Remember that each frame you create represents another HTML file. Thus, a frameset with three frames requires a browser to display three Web pages, and that can dramatically increase download time.
  • Turn off frame borders. Newer browsers support the capability to turn off the border that divides frames in a frameset. If the section has to be scrollable, the border is visible no matter what. But if you can turn the borders off, your pages look cleaner. Frame borders are thick and an ugly gray in color, and they can break up a nice design. Use them only when you feel that they’re really necessary.
  • Don’t use frames when tables are better. Tables are often easier to create than frames and can provide a more elegant solution to your design needs because they’re less intrusive to the design
  • Don’t place frames within frames. The windows get too darned small to be useful for much of anything, and the screen looks horribly complicated. You can also run into problems when your framed site links to another site that’s displayed in your frameset.
  • Put in alternate <NOFRAMES> content. The number of users surfing the Web with browsers that don’t support frames becomes smaller every day. Still, it’s a good idea to show them something other than a blank page.

Trying out the Split Frame command

When you create a frame page in Dreamweaver, it’s important to realize that the file you are starting with is the frameset file — the file that doesn’t show up in the browser but merely instructs the browser how to display the rest of the frames and which pages to use as content for each frame. When you edit the content of any of the frames in the frameset, you’re not actually editing the frameset file, but the files that populate the framed regions within the frameset. Normally you’d have to edit the files separately, but Dreamweaver makes it a lot easier to design with frames by letting you edit the content of each frame in the context of the frameset as it looks in a browser.

You can create frames in two ways in Dreamweaver. The first way is achieved by splitting a single HTML file into two sections, which then become individual frames. When you do that, Dreamweaver automatically generates an untitled page with the <FRAMESET> tag and then additional untitled pages that are displayed in each of the frames within the frameset. Suddenly you’re managing several pages, not just one. This is important to understand, because you have to save and name each of these pages as a separate file, even though Dreamweaver makes it look like you’re working on only one page that’s broken into sections.

You should always save your HTML files first before inserting anything into them; however, the opposite is true when you are working with frame files in Dreamweaver. Wait until after you’ve created all the frames in your frameset and then save them; otherwise, it gets a bit too complicated and confusing to track your files.

To create a simple frameset in Dreamweaver, follow these steps:

1. Choose File –> New.

A new page opens.

2. Choose Modify –> Frameset –> Split Frame Left.

The page splits into two sections. You can also choose Split Frame Right, Up, or Down. Split Frame Left or Right divides the page vertically. Split Frame Up or Down divides the page horizontally.

3. Click inside the right frame area to make it active.

4. Choose Modify –> Frameset –> Split Frame Up, Down, Left, or Right to divide the page again.

5. Click on any of the bars dividing the frames to select the bar and drag it until the page is divided the way you want.

6. To edit each section of the frameset, click inside the frame that you want to work on.

You can type, insert images, create tables, and add any other features just as you would to any other page.

7. If you were following along with these steps for practice and don’t want to save your frameset at this point, choose File –> Close to close the file. When asked if you want to save the changes, choose No.