Graphics will make your text-only webpage much more colorful and interesting. In this activity, you will learn how to add graphics and a background image to your webpage. Follow these steps.

Collecting Online Graphics

1. You can "collect" webpage images from the World Wide Web. The next steps will show you how to do that.
2. Open Netscape Navigator.
3. Browse several of your favorite webpages until you find a web graphic that you would like to add to your webpage.
4. Position your cursor on top of the image.
5. Hold down the right mouse button (Mac: hold the mouse button).
6. Select Save Image As from the menu that appears.
7. Rename the image if you find that the existing name is not descriptive (remember to use lowercase letters and a short file name).
8. Navigate to the folder where you saved the webpage you created in the first activity.
9. Click the Save button to save the image.
10. Collect several more images using the same procedure.

Note: Most of the images on the Web are in the public domain and can be downloaded by web designers. However, if you see a trademark or copyright notice on or near a web image, you should not download the image.

Adding Graphics to Your Webpage

11. Open the folder where you saved your first webpage.
12. Double-click on the yourname webpage that you created in the first activity.
13. After Navigator has opened on the screen, select Edit Page from the File menu.
14. Your webpage will open on the screen.
15. Position your cursor in an empty line on the webpage.
16. Note: The graphics you add to your webpage will always be inserted at the current location of your cursor. It is wise to allow yourself a little bit of "working room" when adding graphics. You can always go back later and remove the empty lines on the webpage.
17. Click on the Image toolbar button.
18. A dialog box will appear.
19. Click on the Choose File button.
20. A new Look in: dialog box will appear.
21. Navigate to the folder where you saved the images.
22. Double-click on one of the images (or click once and then click on Open).
23. The Image Properties dialog box will reappear on the screen.
24. Click on OK.
25. The image will appear on your webpage.
    
    Changing the Dimensions of the Image
    
    
26. Click on the image and notice that black lines appear around the image.
27. Move the cursor slowly across the image and notice that as your pass over the black line, the cursor changes from an arrow to a two-sided arrow.
28. If you click and hold the mouse button when it is a two-sided arrow, you can drag the mouse to resize the image.
29. If you move the cursor down to the bottom right corner of the image you can resize both the horizontal and vertical dimensions of the image at the same time without losing the image's proportions.
    
    Changing the Image Alignment
    
    
30. If you click on the Alignment toolbar button, you can move the image to the center or the right side of the screen.
31. Clicking on the Increase and Decrease Indent buttons move the in lesser degrees.
32. You can undo the changes you are making by selecting Undo from the Edit menu.
    
    Wrapping Text Around the Image
    
    
33. Click outside the image, press the space bar several times and type a short description of the image.
34. You will notice that the text appears next to the lower right hand corner of the image.
35. Right-click (Mac: Command - Click) on the image and select Image Properties from the menu that appears.
36. Select one of the Text Alignment and Wrapping Around Images options by clicking on the appropriate button.
37. Click on OK to see how your choice changed the way the text is displayed next to the image.
38. You can undo the changes you are making by selecting Undo from the Edit menu.
39. Click on the File menu and select Save.
40. Watch the screen and notice that Composer is saving a copy of the images to your floppy disk along with your webpage.
    
    Another Way to Change the Image Dimensions
    
    
41. Hit the Enter key several times to move the cursor down to an empty spot on the webpage.
42. Click on the Image toolbar button again.
43. Click on the Choose File button.
44. Since you have already been to the clipart folder on the desktop, Composer should take you right back to that folder.
45. Select another image and click on Open.
46. Click on OK and the new image will be added to your webpage.
47. Right-click (Mac: Command - Click) on the new image and select Image Properties.
48. Notice the Dimensions section of the dialog box.
49. The current dimensions (in pixels) are shown in the Height and Width boxes.
50. Change one of the numbers and notice that the other number automatically changes too. This is a handy way to resize the image without having to use the tricky two-sided arrows.
51. You can return the image to its original size by clicking on the Original Size button.
52. Notice that you can also change the Space Around Image features by adjusting the numbers in the three boxes. This feature will allow you to determine the space around images that are inserted next to text or other images.
53. Clicking on the Alt Text button will open a new dialog box that allows you to add text that will be displayed while the image is loaded by the Navigator.
54. Save the changes you made.
55. Click on the Preview button to view your webpage in Navigator.
    
    
    

Website maintained by Bob Jost | bjost@josts.net | last revised July 30, 2000

Copyright © 1997-2000 by Bob Jost.  All rights reserved. No part of this website may be
transmitted, stored or recorded in any form without written permission from the author.