HTML Basics:
Icon: FrontPage Express Save with Non-Web Image

Title: Jan's Illustrated Computer Literacy 101
españolIcon: Change web
Did you want IE9+, Chrome, Firefox; Notepad? Icon: Change web

FrontPage Express can accept images that are not in a format that a browser will understand. It must convert such an image to GIF or JPEG format.

The results are not always what you expect. A normal graphics program can do a better job of changing image formats.

Where you are:
JegsWorks > Lessons > Web

Before you start...

Project 1: Browser BasicsTo subtopics

Project 2: HTML Basics
    HTML CodeTo subtopics
    About HTML
    What You Need
    Code by HandTo subtopics
    FrontPage/ FPXTo subtopics
    Images in HTML Arrow - Subtopic open
    FrontPageTo subtopics OR Icon: FPXFPX Arrow - Subtopic open
            icon-footprintInsert Image
            icon-footprintMore Images
            icon-footprintInline Images
            icon-footprintReplace Image
            icon-footprintImage Link
                Align & Space
            icon-footprintAlign Images
                Image Issues
            icon-footprintSave to New Location
            icon-footprintSave Non-Web Image
    FormattingTo subtopics
    TablesTo subtopics
    ConvertTo subtopics
    ExercisesTo subtopics


Icon Step-by-Step

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

 Icon Step-by-Step

What you will learn: what FPX does with images in non-web formats

 Start withClass disk, Icon: FPX 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. Class disk 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.)

    FPX Window: hector15.htm with hchavez.wmfWhoa! 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. Dialog: Image Properties for hchavez.wmfOpen 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!

    hector15.htm with hchavez.wmf sized correctly

  6. Class disk 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. Dialog: Save Image To File - hchavez.gifSelect 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. hector16.htm in IE showing tiny hchavez.gifSwitch 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. Dialog: Save Image to File - replacing hchavez.gif with new versionClass disk Click on Button: Save the Save button to save with the same name. A dialog asks if you want to replace the existing file hchavez.gif.
  11. hector16.htm with tga format converted to gifClick 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.

Warning 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.

    Signature image is now transparent

  4. Class disk Save. [hector16.htm]