 |
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
- You
can "collect" webpage images from the World Wide Web. The
next steps will show you how to do that.
- Open
Netscape Navigator.
- Browse
several of your favorite webpages until you find a web graphic that
you would like to add to your webpage.
- Position
your cursor on top of the image.
- Hold
down the mouse button.
- Select
Save Image As from the menu that appears.
- 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).
- Navigate
to the folder where you saved the default.html webpage that you created
in the first activity.
- Click
the Save button to save the image.
- 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
-
Open the folder where you saved your default.html webpage.
- Double-click
on the default.html icon.
- After
Navigator has opened on the screen, select Edit Page
from the File menu.
- Your
webpage will open on the screen.
- Position
your cursor in an empty line on the webpage.
- 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.
- Click
on the Insert Image toolbar button (it has a square, triangle
and diamond).
- The
Format dialog box will appear with the Image tab selected.
- Click
on the Choose File button.
- A new
Look in: dialog box will appear.
- Navigate
to the folder where you saved the images.
- Double-click
on one of the images (or click once and then click on Open).
- The
Format dialog box will reappear on the screen.
- Click
on OK.
- The
image will appear on your webpage.
Changing the Dimensions of the Image
- Click
on the image and notice that highlighting appears around the image.
- Click
on the Format menu and select Image Info.
- The
Format dialog box will reappear.
- Click
the radio button in front of Custom Size.
- If you
click the little box in front of Constrain, you will see that the
Height and Width dimensions change together.
- 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
- Click
outside the image, press the space bar several times and type a short
description of the image.
- You
will notice that the text appears next to the lower right hand corner
of the image.
- Hold
down the Command key (open apple) and double click on the image.
- Click
on the Arrows next to the Image icon to the left of "To see wrapped
text... to view the text wrapping options.
- 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.
- You
can undo the changes you are making by selecting Undo from
the Edit menu.
- Click
on the File menu and select Save.
- Watch
the screen and notice that Composer is saving a copy of the images
to your floppy disk along with your webpage.
- Click
on the Preview button to view your webpage in Navigator.
|
 |