|
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.
|