Ross Sheppard High School
Web Page Design and Construction
Student Learning Guide
Using Frames on Web Pages

	When you have finished this project, you will be able to:
	describe how frames work
	describe the proper method of creating a Web page that uses frames
	use the target tag to control the position of a frame
	place a page within a frame
	place a page in full view
	describe the following terms: frames target column row scrolling resize

1. Before you start using frames and creating web pages that use frames, it is necessary to understand a little about them.
   
   
2. Up to now, you have been creating web pages that use a single window, or frame. However, it is possible to divide a browser window into more than one "window" or frame, as they are called. In fact, this page that you are now looking at contains two frames: the one on the left of your monitor use for navigation, and this frame, which contains the instructions.
   
   
3. Create a new folder on your personal drive called Frames. Save everything to do with this project in that folder.
   
   
4. You can use frames to divide the browser window into rows or columns – or both, if you wish. The diagram below illustrates this concept:
   
   
   
   
5. For this project, you will be working on a frames page that uses two columns. The frame on the left will be defined as Frame A and the frame on the right will be defined as Frame B.
   
   
6. Each frame width is defined as a percentage of the total viewing width of the monitor being viewed on. By using a per centage of the width, rather than the specific number of pixels, the widths of the frames will automatically adjust to the viewer's monitor. In other words, a viewer with a 17 inch monitor will see larger frames than a viewer with a 15 inch monitor.
   
   
7. The diagram below illustrates what your sample frames page will look like when you have finished setting up the frames in Visual Page.
   
   
   
   
8. Start a new project in Visual Page. Be sure to save it as Index.htm or Index.html.
   
   
9. Set the name of the page in Page Properties to index and the background to white.
   
   
10. To create the frames, click on Frame on the Menu Bar, then select New Frame Set:
    
    
    
    
    
11. When Visual Page creates the frameset, it divides the window in half. Adjust the frame size for the desired width by grabbing the divider bar and adjusting it:
    
    
    
    
12. Set the frame properties for each frame by right clicking anywhere in the frame.
    
    
    
    
13. Right click in the left frame, and set the following properties:
    • Name to Frame1
    • Width to 15%
    • De-select the resize option (does not allow the user to resize the frame)
    • Set the scroll bar to auto (will insert a scroll bar when the amount of text exceeds the height of the monitor)
      
      
14. Set the frame properties for the right frame.
    
    
15. All of the skills that you have learned for single frame pages apply to frame pages as well. Add some meaningful content to each of the frames.
    
    
16. In the left hand frame create a link that will make your previous page appear in the right hand frame. Do this by highlighting the link in the left hand frame.
    
    
17. Click Edit on the Menu Bar then select Link to.
    
    
18. In the window that opens, select the frame destination and browse to the name of the file that you want. In this case you will use the previous Web page that you created, but you could just as easily use a full URL.
    
    
    
    
19. To demonstrate your skill using frames, create a web page on a topic of your choice that demonstrates an understanding of frames as well as well as your knowledge of Web page design. This page must have content of substance, not simply links to cartoon pages or famous personalities.The frames page must demonstrate your knowledge of:
    • creating frames consisting 2 rows and 2 columns
    • creating three pages - 1 for each frame
    • use of opening a Web page in a new window
    • use of opening a Web page in a frame
20. In addition, your frames page must use the following:
    · Use of TABLE BORDER tag
    · at least 2 columns
    · at least 3 rows
    · at least 5 different cell colors
    · at least 2 font styles (NOT FONT FACES)
    · at least 2 font sizes
    · 2 cells must have multiple rows of text
    · 2 cells must contain URLs
    · at least 2 different alignments (left and center)
    · 2 cells must contain a graphic or icon
    · demonstrate row span and cell span
    · demonstrate good page design and layout
21. Click here to see the marking guide for this project.
    
    
22. Save the project folder in your "Hand In" folder on your personal disk space so that this project can be graded..