Web Page Design

Frames

Using Frames on a Site

1. Open your Dreamweaver and create a new site called
YourNameMyFramesSite.
2. In this folder, create a subfolder called images.
3. Choose File>New>Framesets>Fixed Top.
4. Click on Create

Top Frame

Bottom Frame

5. In the title box type My Frameset.

6. In the Properties inspector:
a. Borders: Yes
b. Border Width: 5
c. Border Color: #FF0000.
d. Row Value: 120
7. Press enter.
8. Choose File>Save All
a. In the dialog box, in the File Name box, name the frameset file index.html.
b. Save it in your My Frames Site folder.
9. You will then be asked to save either the top or the bottom frame. IMPORTANT:
The frame that is outlined like the picture below is the frame you are about
to save. This one will be saved as bottomframe.html.
 Web Page Design
Frames

10. After you have named the first frame, the computer will automatically prompt you
to save the other frame. If it is the top frame, name it topframe.html. Pay
close attention to which of the frames has the outline!

11. Choose Windows>Frames to open the Frames Panel on the lower right side
of your window.
 Web Page Design
Frames

12. Click inside the frame labeled topFrame.

13. In the Properties inspector:
a. Scroll: yes
b. No resize: Unchecked
14. Go back to your main document window and click inside the Top Frame. Make
sure that the grey tab at the top of the window says “Top Frame” so you are
working in the right area.
a. In the Title box, type Top Frame.
b. In the Properties inspector, click the Page Properties button at the bottom of
the properties inspector section.
c. In the background color box, type #FFCC00
d. Click ok – Your screen should look similar to this.

15. WHILE STILL IN

THE TOP FRAME,
choose Insert>Image.
a. Go to MTComputers\Scook\WebImages0514 and select the
logo_mydiskdesigns.gif.
b. Save it to your site’s images folder that you just created
c. In the Alt text type MyDiskDesigns logo.
16. In the Frames Panel like #14 above, click in the frame labeled mainframe.
a. In the Properties inspector:
b. Scroll: yes
c. No resize: Unchecked
17. Go back to your main document window and click inside the Bottom Frame.
Make sure that the grey tab at the top of the window says “Bottom Frame”
so you are working in the right area.
a. In the Title box, type Bottom Frame.
 Web Page Design
Frames
b. In the Properties inspector, click the Page Properties button at the bottom of
the properties inspector section.
c. Set the Font Size to 18
d. In the background color box, type #99CCFF
e. Click ok – Your screen should look similar to this.

Note – this is how the files should

be set up in your panel.
>>>>>>>>>>>>>>>>>>>>>>

18. In Dreamweaver, click in the bottom frame.

19. READ THIS PART VERY CAREFULLY!!!!! You are figuring this out on your
own. I am NOT going to show you how!
a. In your MyDiskDesigns file that you worked on Tuesday and
Wednesday, go to the Privacy.html page that you created.
b. Copy the privacy text from the MyDiskDesigns file.
c. Paste the text into the bottom frame of the My Frames Site file.
20. Format the text for the words Privacy Policy only to 36 pixels bold.
21. Your screen should look similar to this.
22. SAVE ALL.
23. TURN IN YOUR FILE!
 Web Page Design
Frames
LEFT AND RIGHT FRAMES
1. Open Dreamweaver and create a new site called “YourNameFrames”.
2. DO NOT SAVE THE PAGE YET!
3. Choose Modify>Frameset>Split Frame Left.
a. This puts a vertical frame divider through your page.
b. What you are actually seeing are three pages in one: the frameset,
the left frame, the right frame.
4. Choose File>Save Frameset As and save the file as frameset.html. This
frameset will be the container for the other HTML files.
5. Click inside the left frame and select File>Save Frame As and save the
file as left.html. Make sure that you are saving it in your root directory
with your index.html.
6. Click inside the right frame and select File>Save Frame As and save the
file as right.html. Make sure that you are saving it in your root directory
with your index.html.
7. Select Window>Frames to open the frames panel. This panel will give
you a preview of your frameset.

8. In the frames panel click on the outermost border.

a. In the toolbar at the top of the document, enter in the Title Field: My
First Frameset
b. Press Enter.
9. Choose File>Save All.

Part 2 – Coloring Frames

1. With your index.html still open, click on the left frame and make sure
you see the BLINKING CURSOR.
a. Choose Modify>Page Properties. Set the:
i. background color #993300.
ii. text #FFCC33.
iii. links #FFFFCC
iv. visited links #CC9900
v. active links #FF0000
b. Click ok
 Web Page Design
Frames
2. Click on the right frame and make sure you see the BLINKING CURSOR.
a. Choose Modify>Page Properties. Make the:
i. background #FFFFCC.
ii. text #000000.
iii. links #990000
iv. visited links #669900
v. active links #FF0000
b. Click ok
3. Click on the middle dividing frame
border.
a. Make sure that the left frame
in the property inspector is
selected and enter the value
150 into the column setting
in the property inspector.
b. Press enter.

4. We will now turn off the dividing borders.

a. In the property inspector choose borders: no and border width 0
b. Choose File>Save All
 Web Page Design
Frames
Part 3 – Links and Targets
This exercise will show you how to insert a link into the left side page of the
frameset.
1. Create a new page called tools.html.
2. The page will look like this.
a. The images are under
MTComputers
\Scook\WebDesignImages\
b. You will need to insert the
header on the page and
type heading 1 for Bonsai
Tools.
c. You need to insert a table to
hold your images. The
width of the columns will be
approximately 260.
d. The description of the tools
will use heading 2, Arial
font, and black.

3. Go back to your frameset.html. Click inside the left frame and make
sure you see the blinking cursor.
a. Type the words Bonsai Tools. – Arial, Size 16
b. Highlight the words that you just typed and in your property
inspector click on the folder to the right of the word link.
c. Browse to the page that you just created called tools.html.
d. Click open – Bonsai Tools should now appear as an underlined link.
4. Make sure that your frames panel is open. If it is not, choose
Window>Frames to bring it up.
a. Notice that it reads (no name)
on both the right and left sides?
b. Click on the left side and it will
become outlined with a dark
line. The property inspector
should now display the setting
for the Frame Name field.
Enter left.
c. Click on the right side and look
at the property inspector
again. Enter right into the
frame name field.
d. The frames panel should now
read left and right in faded
letters.
 Web Page Design
Frames
5. Select the words Bonsai Tools in the left frame.
a. Click on the arrow next to the target field to access the pop up menu.
b. Select right from the menu.
c. The word right should pop into the target field.
6. When you preview your page in a browser and click on the link in the
left frame, the tools.html page will appear in the right frame.

Part 4 – Adding a Background Image

Adding a background image is similar to coloring a background of each
frame. There can be alignment problems when you add an image and the
frameset can make the background image so the entire image does not
show. This exercise will show you how to keep that from happening.

1. Click inside the left frame and make sure that you have a blinking
cursor to the right of the words Bonsai Tools.
2. Choose Modify>Page Properties.
a. Click the browse button to the right of the background image field to
browse to your images folder.
b. Select cascade.jpg.
c. Click open and then OK in page properties.
d. The image should appear in the left side of the frameset
3. Click inside the right frame and make sure that you have a blinking
cursor.
4. Choose Modify>Page Properties.
a. Click the browse button to the right of the background image field to
browse to your images folder.
b. Select cascade.jpg.
c. Click open and then OK in page properties.
d. The image should appear in the right side of the frameset.
5. Since the image is not even and has been cut off, you will establish the
size of the background image.
a. Click on the left.html frame again and make sure you see the
blinking cursor.
b. Choose Modify>Page Properties.
c. Click on the browse button to the right of background image to locate
the cascade.jpg symbol.
d. Make sure that you check the preview images checkbox in the select
image source dialog box.
e. Notice that the dimensions of the image appear now? Make a note of
those dimensions.
f. Click cancel twice to return to the document window.
6. In the frames panel, click on the outer border of the pane.
a. Enter the value Column: 250 into the Property Inspector and press
enter.
b. The left column should have shifted a bit to the right. Don’t worry if it
doesn’t look exactly right – there are more steps.
 Web Page Design
Frames
7. In the property inspector, click on the right column icon, at the right of
the panel.
a. Select Units: Relative.
b. Under border width type 0.
8. SAVE YOUR FILE.