Lesson 10 - Framesets

DW Cover

Dreamweaver makes it super easy for you make a frameset. Having said that, what the heck is a frameset?

What are Framesets?

Framesets are a 'picture within a picture' view through your Web browser. You get to see more than one page at once, and can even navigate through an entire website without having to hit the 'back button'. Framesets are a very early implementation in HTML, and have been around for over a decade. While many designers would just as soon never have to deal with frames, they do serve a valuable purpose, and anyone who uses a Web based email service has used frames.

When I first taught HTML 10 years ago I included frames as part of our required elements, and developed a number of tutorial files that helped students work though the construction of frames. If you don't know what frameset code looks like, or if it's been a while, you should take a look at the files below. (Right click to download the zipped archive).

Frameset Files

Example 1

Take a look at a series of very basic files and framesets. Starting with frame_1 you can see how 5 files, called cell_1.htm, cell_2.htm, cell_3.htm, cell_4.htm, and cell_5 .htm, are all combined into one file. Next you'll look at frame_2.htm, similar to frame_1.htm, but includes a scroll frame. In frame_3.htm, we add a header and a footer to the frames.

Frame Example

Example Deconstructed

In the design view you can see that there are a total of five frames, the first column has two rows and the second column has three. Looking at the code view you can see how this is done.

The outer frameset defines two frames arranged as columns. Inside the left column there is another frameset that defines two frames arranged as rows. Inside the right column there is another frameset that defines three frames arranged as rows.

The src attribute in the <frame> tag is the name of the html page that will be loaded into that frame.

Notice that the <frameset> tag is used in place of the <body> tag. The <noframes> tag contains content that is displayed to the user if their browser does not support frames. The following example shows what might be displayed to the user.
<noframes>
  <body>
    <p>This site uses frames and your browser does not support them.</p>
  </body>
</noframes>
  

Next, we'll see how we can target our links to load pages into a named frame.

Example 2

The final frameset we look at is both straightforward to code, but somewhat complicated to explain. In directory.htm, we create a list of links (companies) in a file called companies.htm. When you click on a link in the scrolling list, you target the page to appear in the right hand frame of directory.htm. Each of the 20 company pages can appear in that names frame. We also have a header and a footer, called top.htm and bottom.htm. Take a look at these files and see if you can follow how the framesets are coded. Then load them into Dreamweaver, and follow how you navigate to each file in order to make changes. Try 'sand boxing' these files in a folder (back it up) and make changes to the individual files.

Edit the Frame Documents:

There are several ways to edit the documents that comprise the frameset.

From the Design Pane click on the frame and the document that is associated with that frame will be loaded. Look at the Code Pane to see this. To edit the document that defines the frames just click anywhere on the border in the Design Pane.
Another way to do this is to bring up the Frames Panel from the Window menu on the Dreamweaver menu bar, Window>Frames. From there you click on the frame to select the document that is associated with that frame. To select the frameset click on the border that surrounds the frameset.

Below is the directory.htm frameset loaded into Dreamweaver.

Frames Example of Companies

Here is what it looks like in the browser

Frame Example in Browser

While you might not ever design a site with frames (never say never) I guarantee you that someday you will be maintaining a website that uses frames, and then you'll be very happy that you took this time to learn how to use them. And even happier that you have a tool like Dreamweaver to make changes and edits to the frameset files.

When to use (or not use) Framesets

So when do you design with frames, and when wouldn't you? Use frames when you know your site visitor will do a lot of exploring back and forth between a linked list and a small target page, and especially when you don't want them to be using the back button. Frames take up space, so unless you have a huge monitor, or one with ultra resolution, recognize that frames can significantly reduce the amount of space you can work with on a page.

Resources

Using Frames - Adobe Website
Select Frames and Framesets - Adobe Website

* click the link below to continue with this lesson *
Frameset Tutorial

Top