pixel.gif (42 bytes)home | online guides | listserve | web discussion board | reference

webpage design: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
pixel.gif (42 bytes)
Adding Graphics to Your Webpage
pixel.gif (42 bytes)
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 mouse button.
  6. Select Save Image As from the menu that appears.
  7. Rename the image if you find that the existing name is too long or is not descriptive (remember to use less than eight letters with no spaces to to keep the .gif or .jpg file suffix).
  8. Navigate to the folder where you saved the default.html webpage that 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

  1. Open the folder where you saved your default.html webpage.
  2. Double-click on the default.html icon.
  3. After Navigator has opened on the screen, select Edit Page from the File menu.
  4. Your webpage will open on the screen.
  5. Position your cursor in an empty line on the webpage.
  6. 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.
  7. Click on the Insert Image toolbar button (it has a square, triangle and diamond).
  8. The Format dialog box will appear with the Image tab selected.
  9. Click on the Choose File button.
  10. A new Look in: dialog box will appear.
  11. Navigate to the folder where you saved the images.
  12. Double-click on one of the images (or click once and then click on Open).
  13. The Format dialog box will reappear on the screen.
  14. Click on OK.
  15. The image will appear on your webpage.

    Changing the Dimensions of the Image

  16. Click on the image and notice that highlighting appears around the image.
  17. Click on the Format menu and select Image Info.
  18. The Format dialog box will reappear.
  19. Click the radio button in front of Custom Size.
  20. If you click the little box in front of Constrain, you will see that the Height and Width dimensions change together.
  21. 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.

    Wrapping Text Around the Image

  22. Click outside the image, press the space bar several times and type a short description of the image.
  23. You will notice that the text appears next to the lower right hand corner of the image.
  24. Hold down the Command key (open apple) and double click on the image.
  25. Click on the Arrows next to the Image icon to the left of "To see wrapped text... to view the text wrapping options.
  26. Click on OK to see how your choice changed the way the text is displayed next to the image. Note: you may need to click on Preview to view these changes.
  27. You can undo the changes you are making by selecting Undo from the Edit menu.
  28. Click on the File menu and select Save.
  29. Watch the screen and notice that Composer is saving a copy of the images to your floppy disk along with your webpage.
  30. Click on the Preview button to view your webpage in Navigator.

 

pixel.gif (42 bytes)

Fresno Pacific University | School of Professional Studies 
Website maintained by Bob Jost | Copyright © 1999-2000 All rights reserved