HTML Basics:
Save with Non-Web Image

Step-by-Step: Save with Non-Web Image

---

What you will learn:

what FPX does with images in non-web formats

---

 Start with:  , hector14.htm, resource files

[Look carefully at the illustrations. Some are of your page in FPX and some are of the page in IE.]

1. Open the page hector14.htm from the folder web\hector on your Class disk.
    
2. Place the cursor at the beginning of the page (CTRL + HOME).
3. Insert the image hchavez.wmf that is on your Class disk in the web folder. (You will have to display All files to see it in the Open dialog.)

   Whoa! This image is really big! The letters are rather jagged and there is a white background. Something must have gone wrong.

   For some reason FPX has sized this image much larger than it actually is.

   You will probably have to scroll horizontally to see the left side of the page.

   
   

4. Open the Image Properties dialog for this new image.
    
5. Set the size to 206 by 43 (the true dimensions of the image) and the alignment to right.

   An easy fix... if you know the dimensions of the image!
    

   

6. Save the page as  hector16.htm  to the web folder on your Class disk. A dialog appears that offers to save the wmf image as a gif.
    
7. Select Yes. The wmf image will be converted to a gif format and any other images will be saved to the same folder. The image does not change appearance in FPX!
    
8. Switch to IE and view the page hector16.htm.

   Whoops! Something odd happened to the image when was converted! It got very tiny! Perhaps FPX is not always the best format converter for your images. (If your browser's cache already contains the file hchavez.gif, the browser may not look for it again. In that case you will see the correct size image.)
   

    
9. Switch back to FPX and change the source of the image to hchavez.tga, another file in the web folder. (Right click the image |  Image properties  |  General tab  |  Image Source )
    
10. Click on the Save button to save with the same name. A dialog asks if you want to replace the existing file hchavez.gif.
     
11. Click on the button Replace to accept this offer.
     
12. Switch back to IE and refresh. Much better! Now the signature image looks right and the white background blends with the IE's default white background.

 This experiment shows that FPX does not always refresh its display of images. Always check your page in a real browser. You may need to clear the browser's cache to make it show changes you made.

---

Transparent GIFs

The GIF image of Hector's signature has a white background, which will show unless the page has a white background itself. One of the features of GIF images is that with a graphics program you can pick one color to be transparent. Such an image lets the background show through instead of the selected color. A transparent GIF is available for you from your resource files.

1. Switch to FPX where hector16.htm is still in view.
    
2. Right click on the image of Hector's signature and
    choose  Image properties  from the popup menu.
    
3. Change the name of the image to hchavez-transparent.gif, which is one of your resource files. The white background vanishes! This is much better because shortly you will be applying a background to this page.

   

4. Save. [hector16.htm]