Add Images to your Page

The WWW is a multimedia environment that provides authors with multiple modes for conveying meaning, including colour, sound, pictures, video, and text. A good WWWPage exploits this multiplicity of modes for meaning-making, aiming for readability, impact, consistency and aesthetic balance. Sometimes, finding the perfect picture or background image seems a task of Herculean proportions!

Let's just say, for the sake of momentum, that you have determined you need a picture of a pillbug (sowbug, woodbug) for your WWWPage. How to find that, for the first time, apparently elusive creature? Should you try to find a pillbug, pop it on the scanner or try to sketch it before it scuttles off? Probably not.

Chances are very good that the image you are looking for already exists on somebody else's WWWPage, and that the author of that page would be more than happy to "lend" it to you. Most people are flattered by this kind of request, are impressed that you asked (and didn't just raid their site) and give you permission to use their image. So how to find that pillbug with a Hollywood smile?

---

A primer on WWW Graphics

The graphics and icons that are displayed on Web pages are separate files that must be in either GIF or JPG format. Graphics in other formats can be converted to these formats by using any of several graphics programs, such as Adobe PhotoShop, Adobe PhotoDeluxe, or Graphic Converter, a shareware program that performs many useful image-editing functions. You can download Graphic Converter directly to your Mac by clicking here.

The choice between GIF or JPG formats is not especially critical. GIF is most efficient for graphics with no more than 256 colors (8 bit pixel depth), whereas JPG is most efficient for scanned photographs, captured video frames, and other pictures of natural objects. All else being equal, use the GIF format by default. However, you can use the JPG format if it results in a significantly smaller file size, in order to minimize the time it takes to view the pictures with a slow connection. Graphics in other formats, such as TIFF or EPS (encapsulated postscript), can not be displayed on-line.

---

Use Navigator and your favorite search engine to find a good picture of a pillbug (you get to determine what makes a picture "good" for the WWW).
 

1. The Navigator window should be sitting on the desktop. Find it and click on your Navigator window to bring it back up front.
2. If it seems to have disappeared, Click on the gold ship's wheel icon on the Component Bar labeled: Open a Navigator Window
3. Place your cursor in the long white rectangle next to Location
4. Type in the URL for Metacrawler http://www.metacrawler.com
5. Hit Return
6. Place your cursor in the long white rectangle next to Search
7. Type pillbug
8. Hit Search
9. Choose a likely source of images, and click on the link, as in the following example:
10. Common pillbug, crustacean (Armadillidium vulgare) of the order Isopod. The land-living pillbug is also commonly known as a wood louse. Related Article Common pillbug, crustacean (Armadillidium vulgare) of the order Isopoda http://comptons2.aol.com/encyc...opedia/ARTICLES/1002f97_P.html (Excite)

Top

Borrow images from another page

1. Place your cursor on the picture you wish to borrow
2. Press down the mouse button until a pop-up menu appears
3. Select Save this Image as......
4. Make sure the file will be saved to your current WWWPage folder
5. If the filename is obscure, such as 16789399.jpg, place your cursor in the filename box, and modify the name, e.g.: pillbug.jpg
6. Select Save

Short-list of WWW Pages with lots of image-files you can borrow, including bullets, clip-art, animated gifs and the like...

*

where, for free, you can create buttons like these, customized for your own purposes, and much much more.....

1. Place your cursor on the page more or less where you want the image to appear.
2. Select Insert > Image or Click on the toolbar icon labeled Insert image
3. Your cursor is popped into a rectangular box Image file name where you can type the name of the image file, e.g., "home.gif"
4. If you forget the file name, Click on Choose File
5. Scroll down the pop-up menu until you find your image file
6. Click Open
7. Make sure that only your file name is inserted in the Image file name box by editing out any extraneous characters using your cursor and the delete/backspace key.
8. That is, change:

   1. file:///hard%20drive/Mary%27s%20Text%20Files/home.gif to
   2. home.gif

9. Click OK

   The image will appear on your Composer screen more or less where you had placed your cursor. Composer provides several options for you to specify more precisely your image's final resting place. 

   ---

   The location of your image/s as displayed in your Composer window invariably changes, and sometimes quite dramatically, when your page is viewed in a Navigator window, which is how anyone browsing the WWW will see your page. So before you make any changes to your image's location, check how your page/image looks in a Navigator window.

Save your work! Netscape is a great program, but it does tend to freeze up and crash the computer at the worst moments. So get used to saving your work with GREAT frequency. And if you want to be sure you're saving, let the software save itself as follows:

1. Select Edit > Preferences > Composer
2. Select Automatically save page every > 2 minutes

Composer, by default, places your image more or less where your cursor is when you choose Insert Image. You can change the alignment of your image so that text wraps around the image, or so that the image is centered, left-justified and so on...
 

1. Select the image on your page by clicking on it.
2. To wrap text around the image, Click the Image button, or Select Format > Image info
3. Scroll through the options using the menu labelled "To see wrapped text..."
4. Click OK

Use a scanner to transform your image into an image file. Choose GIF or JPG as the format, if this option is available. If GIF or JPG are not available, choose TIFF or PICT or EPS, and then use GraphicConverter, or Adobe PhotoShop in order to transform your image-file into one of the two formats visible to WWW browsers - GIF or JPG.

At the point of scanning, pay attention to file size. The quality of your image, and its screen size will affect the eventual size of your image-file. Any image file over 50K will take too long to download, resulting in the all-too-familiar World Wide Wait phenomenon that sends your audience scurrying somewhere else, far too impatient to stick around for your bloated WWWPage.

Top

The graphics and icons that are displayed on Web pages are separate files that must be in either GIF or JPG format. Graphics in other formats can be converted to these formats by using any of several commerically produced and distributed graphics programs, such as Adobe PhotoShop (expensive, MAC/PC), Kai's PhotoSoap (modest $, MAC/PC), Adobe PhotoDeluxe (modest $, MAC/PC), or Paint Shop Pro (PC, http://www.jasc.com/pspdl.html) and Graphic Converter (MAC), shareware programs that performs many useful image-editing functions. You can download Graphic Converter directly to your Mac by clicking here.
Once you have scanned an image, you can play with it using a graphics program. Most graphics programs, whether shareware, modestly priced, or expensive will allow you to change an image's size, colour balance, sharpness, file format, as well as to crop an image, add text or experiment with special effects. 

To open a picture with Graphic Converter:

1. Launch (double-click on the icon of) Graphic Converter
2. Select Open from the File menu, navigate to the desired file, and
3. Double-click on the file name.

To save a graphic file in GIF format (best for simple graphics):

1. Select File --> Save As...
2. Select GIF from the Format menu, navigate to another folder if desired
3. Click Save.

To save a graphic file in JPG format (best for scanned photographs):

1. Select Picture --> Compression settings --> Still Image.
2. From the pop-up menu, select Photo-JPEG and Best Depth
3. Set the Quality to Medium or High, then
4. Click OK.
5. Select File --> Save As...
6. Select J PG from the Format pop-up menu, navigate to another folder if desired
7. Click Save.

Remember to put all of your .GIF and .JPG files in the same folder as the html files

Top

Use an image for a background instead of a solid colour
Lots of WWWPages - including this one - sport a background more complex than a solid colour. Pourquoi pas! After all, monkeying around with the background of the page provides you an added variable for the expression of your creativity. Complex backgrounds are created by using an image as the background, which is actually one image multiplied as many times as it takes to fill the screen. You can create your own tiny images to use as a background, which is called a background tile, but this process isn't entirely straightforward. For the purposes of this workshop, we will borrow background images created by someone else, and concentrate our efforts on selecting an appropriate background image. So what makes a particular image appropriate for use as a background?
Make sure your background image:

• doesn't interfere with reading your text or appreciating your images
• complements the meaning and purpose of your page/site
• is consistent with font and image colour choices

Look at your page, and experiment with three or more different background images. Keep in mind (a) readability, (b) purpose, and (c) consistency.
 

1. Open a Navigator window
2. Type in the URL for a graphics WWWSite: http://dir.lycos.com/Computers/Graphics/Web_Graphics/  and hit return
3. When you get to the site
4. Click on Backgrounds
5. There are ** pages of background tiles freely available on this excellent site.
6. Click once on any background tile that looks attractive, and this will expand the tile so that it fills the entire background of your screen, providing an opportunity to see how the tile looks as a background.
7. When you find the background tile you are looking for,
8. Place your cursor on the background image you wish to borrow
9. Press down the mouse button until a pop-up menu appears
10. Select Save this Image as......
11. Make sure the file will be saved to your current WWW Page folder
12. If the filename is obscure, such as bg99.jpg, place your cursor in the filename box, and modify the name, e.g.: cloudy.jpg
13. Click Save.

     

    1. Go back to your Composer window
    2. Select Format > Page Properties > Colors and Background
    3. Under Page Colors select Use Custom Colors
    4. Under Page Background, select Image
    5. Put your cursor into the rectangular box where you can type the name of the image file, e.g., "cloudy.jpg"
    6. If you forget the file name, Click on Choose File
    7. Scroll down the pop-up menu until you find your background image file
    8. Click Open
    9. Make sure that only your file name is inserted in the file name box by editing out any extraneous characters using your cursor and the delete/backspace key.
    10. That is, change:

        1. file:///hard%20drive/Mary%27s%20Text%20Files/cloudy.jpg to
        2. cloudy.jpg

    11. Click OK

Top