Home >> Software Help >> Dreamweaver >> Frames

Frames in Dreamweaver

Frames allow you to display more than one HTML file in a single browser page. To do this, use the frameset tag and make sure you name each frame.


Here the file left.htm is in a frame named leftFrame, main.htm is in a frame named mainFrame.
<html>
<head>
<title>My Frameset</title>
</head>

<frameset cols="80,*" frameborder="NO" border="0" framespacing="0">
<frame name="leftFrame" scrolling="NO" noresize src="left.htm">
<frame name="mainFrame" src="main.htm">
</frameset>
<noframes><body bgcolor="#FFFFFF">

</body></noframes>
</html>


top.htm is in a frame named topFrame and main.htm is in a frame named mainFrame
<html>
<head>
<title>Another Frameset</title>
</head>

<frameset rows="80,*" frameborder="NO" border="0" framespacing="0">
<frame name="topFrame" scrolling="NO" noresize src="top.htm" >
<frame name="mainFrame" src="main.htm">
</frameset>
<noframes><body bgcolor="#FFFFFF">

</body></noframes>
</html>


This one is a little more complicated. Notice how the code uses nested framesets to descibe this set up.
<html>
<head>
<title>3 frame frameset</title>
</head>

<frameset rows="*" cols="172,*" frameborder="NO" border="0" framespacing="0">
<frame name="leftFrame" scrolling="NO" noresize src="left.htm">
<frameset rows="141,*" frameborder="NO" border="0" framespacing="0" cols="*">
<frame name="topFrame" noresize scrolling="NO" src="top.htm">
<frame name="mainFrame" src="main.htm">
</frameset>
</frameset>
<noframes><body bgcolor="#FFFFFF">

</body></noframes>
</html>

How to Set up Frames in Dreamweaver:

Dreamweaver makes it very easy to set up your initial frameset. Be sure to follow these instructions carefully.

1. File --> New

2. In the Objects Pallete, change the display from Common Objects to Frames


3. Select the type of frameset you want

4. Show the Frames Window by going to Window-->Frames

5. You can make some adjustments by dragging the window out for a larger side frame if you want.

6. *** BEFORE YOU ADD ANY CONTENT, GO TO File--> Save All

7. You must save each HTML page and the frameset before working with your frameset, by going to Save All, Dreamweaver will walk you through saving each page in your frameset. You will notice a striped box around the file to be saved.

In this example, first you will save the entire frameset. You will probably call this default.htm unless you have a seperate front page.

After you name your file and click save, Dreamweaver will highlite another frame and repeat the process.

 

Now the right frame is highlited, save this as another file name.

 

 

Do the same thing for the left frame.

 

8. Once all of your files have been saved, you can begin working in the frameset.

HELPFUL TIP: Whenever I work in a frameset, like with this site for example, I never work on the content files while inside the frameset. After I set up the frameset, I save it as default.htm and close it. For the rest of the files in the site, I open them individually and work like normal. This avoids massive confusion.

In order to click on links and have them open in another frame, you must target the frame where you want the file to open.

One of the links on the left of this page, has the following code:

<a href="Communication/siteplanning/main.htm" target="main">Site
Planning</a>

The file main.htm is not a frameset. There is only one frameset, default.htm. Main.htm is a regular file that opens inside the frame named main.

BEWARE OF BAD FILE PATHS!!! You should always view the source of your frameset to make sure that the links are relative.

In this example, I have selected the main frame. Notice how the path says: file://D/WEBCLASS/Sapnar/right.htm

This is bad... the correct path should just say right.htm

 

More on Targeting

WATCH MOVIE: Frame Targeting

Quicktime Movie from Lynda.com explaining frame targeting and set up.