Ross Sheppard High School
Web Page Design and Construction
Student Learning Guide
Getting Started with Visual Page

1. The purpose of this project is to introduce you to the use of a Web publishing program. There are many different type of Web publishing programs, but you will be using one called "Visual Page".
   
   
2. Create a new folder on your personal drive called First Web Page. Save everything to do with this project in that folder.
   
   
3. Find the Visual Page icon on your desktop shown below:

   or run the program from the Network Applications folder form the network. (You may have to fine the file looking for Symantic Visual Page)

4. 
   
   
5. Double click the icon to start Visual Page. The main workspace will appear as shown in the illustration below:
   
   
   
   
6. Visual Page is very similar to any other Windows program; you should be able to find most of the choices in the Menu Bar.
   
   
7. The first thing you should do when starting a new Web page is to name that web page. To do this, right click anywhere on the new page, then select Page properties:
   
   
   
   
8. The following window will open:
   
   
   
   
9. In the space under Page title, type the name of your page. In this case, type your name, then the word index as shown in the example below:
   
   
   
   
10. Next, select the background colour of your Web page by clicking on Background in the Colors section. A colour palette will appear:
    
    
    
    
11. Choose the colour from the palette. While you can use any colour you wish for a Web page, it is always best to use a colour that will contrast with your text so the page is easier to read. For now, choose white as your background colour.
    
    
12. If you wanted to use a background image instead of a background colour, you could click on the Background image button and navigate to the image you wished to use. Note: the image must be saved on your personal drive in the same folder that you are creating the Web page in. For now, do not use a background image.
    
    
13. Once you have named the page and selected the background colour, click the Apply button:
    
    
    
    
14. Now, it is time to save your work. Just as in any other Windows program, click File on the Menu Bar, then select Save. Navigate to the folder you wish to save your Web page in, then click Save:
    
    
    
    
15. Save this Web page as Index.
    
    

    The first Web page on any Web site must be called Index or the Web server will not display the correct page. Although this does not seem important now, it will be very important when you host your Web page on a Web server for others to see. An alternative name to Index is Main.

16. Next, create a heading or title for the Web page. Type your name, then add Web Page to the text:
    
    Norman's Web Page
    
    
17. Be sure to substitute your own name in the text above.
    
    
18. Use the appropriate tools to make the text bold, centered, red, and Extra Large. Save your Web page frequently.
    
    
19. Next, type a paragraph introducing yourself. Make the text for this paragraph the default text size, plain (not bold), and black.
    
    
20. Now it is time to view your work in a browser. To do this, click View on the Menu Bar, then select Open in viewer.
    
    
    
    
21. The next skill you will learn is how to add graphics to your Web page.
    
    
22. First minimize the window and insert three graphics of your choice, into the folder called "First Webpage".
    You may copy these from the handout folder on the server called "Heslinga/Clipart"
23. 
    
    
24. To add a graphic, click the Insert Image tool.
    
    
    
    
25. Navigate to the First Web Page" folder.
    
    
26. Find your image, then click Open. This will place the selected image onto your Web page:
    
    
    
    
    
27. Next, centre the image by pressing the Center tool.
    
    
28. Enter a text alternative. As a good Web designer, you must always provide a text alternative in case the image does not appear on the page. Do this by using the Image Properties.
    
    
29. To access the Image Properties, right click on your image. The window shown below will open. This would be a good time to make sure the "image name is shortened to the exact name of the image. Even thought Visual Page puts the entire path to the image, we want to strip everything away except the actual name of the file. We need to do this because we will be moving the project folder to differnt places. (Note the Alternate Text field)
    
    
    
    
30. Note that you can change other image properties with this window as well. All images on your Web pages require a text alternative.
    
    
31. Add a horizontal line below the image by clicking the Insert Horizontal Line tool:
    
    
    
    
32. Add a second graphic
    
    
33. Next, a third graphic - separated by a horizontal line from the previous graphic.
    
    
34. Now, you will learn how to create a link on your Web page. A link allows you to click on an image or some text and go to another Web site.
    
    
35. On a new line, type the name of a Web site that you want to link to. You may choose any Web site as long as it meets the Acceptable Use Policy for this school.
    
    
36. Once you have the Web site name typed, highlight the name:
    
    
    
    
37. Next, click on Edit on the Menu Bar, then select Link to . . .
    
    
    
    
38. In the Window that opens, type in the entire URL of the Web site you want to link to:
    
    
    
    NOTE: you must include http:// in the URL
    
    
39. If you want the new Web page to replace your page, then click OK. If you want to open the new Web page in a new window, then select that option at the botom of the dialog box. Click OK when done.
    
    
40. Save your Web page and view it in a browser. Try your link.
    
    
41. Visual Page has a built in spell checker that can help you make sure the spelling on your page is correct. Just like any other spell checker, though, it can not distinguish between such words as to, two, and too. To the spell checker, all of these words are spelled properly - but you may have used them incorrectly, so it is still your responsibility to ensure proper word usage, grammar, and spelling. To spell check your Web page, click Edit on the Menu Bar, then select Check Spelling. Use the spell checker as you would any other.
    
    
42. Save your Web page after you have checked the spelling.
    
    
43. Look at your Web page with a critical eye to the placement of all elements on the page - move images, change font sizes, and make other changes that will enhance (Make it look better) the design of the page.
    
    
44. Click here to see the marking guide for this project.
    
    
45. When you have completed this project, Put the folder with all parts in your "Hand In" Folder, on your personal drive space for marking.
    
    
46. You will be needing a photograph of yourself for the next assignment. Please make sure you bring one from home for next period.