HTML Basics:
Icon: FrontPage Edit/Convert Image

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

With FrontPage 2000/02 you have a number of tools and features to help you get the image you want. In this lesson you will learn how to let FrontPage convert your image to GIF or JPEG format. You will also use one of the tools on the Pictures bar. The other tools on that bar will wait for the next lesson.

Convert: Dialog- Picture Properties

Dialog: Picture Properties - GIF or JPGFrontPage will allow you to insert or paste images that are not in a format that a browser will understand. You can choose to convert such an image to GIF or JPEG format in the Picture Properties dialog.

Sometimes FrontPage will automatically offer to save the image in one of those formats - GIF for clipart and line drawings, JPG for photos.

The results are not always what you expect. You may need to go to a full-featured graphics program after all.


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
    Icon: FrontPage FrontPage Arrow - Subtopic open OR FPXTo subtopics
    icon-footprintInsert Image
    icon-footprintMore Images
    icon-footprintInline Images
    icon-footprintReplace Image
    icon-footprintImage Link
        Align & Space
    icon-footprintAlign Images
        Image Issues
    icon-footprintSave Page
    icon-footprintEdit/Convert Image
    icon-footprintPictures Bar
    icon-footprintPublish Web
    FormattingTo subtopics
    TablesTo subtopics
    ConvertTo subtopics
    ExercisesTo subtopics


Icon Step-by-Step

Step-by-Step: Edit and Convert Image

 Icon Step-by-Step

What you will learn: what FrontPage does with images in non-web formats
to change image format to GIF
to make a color transparent

 Start withClass disk, hector12.htm, resource files

You will insert a TGA format image with a gray background. Then you will make the background transparent.

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

Insert Image in Non-web Format

  1. Open the page hector12.htm from the web hector on your Class disk.
  2. Class disk Save the page as  hector16.htm  to the web hector on your Class disk.
  3. Place the cursor at the beginning of the page (CTRL + HOME).
  4. Class disk Insert the image hchavez.tga that is on your Class disk in the web hector. Note that this is not a gif or jpg format.
  5. Switch to HTML view and look at the IMG tag.

    <h1><img border="0" src="hchavez.tga" width="206" height="43">Home

    The SRC is using the original filename.

  6. Switch to Normal view.
  7. hector16.htm with hchavez.tgaf aligned rightRight click on the new image and select  Picture Properties .
  8. Set the Alignment to Right. Click on OK to close the dialog.

  9. Class disk Save. [hector16.htm]
  10. hector16.htm with tga format image not showing in PreviewSwitch to Preview. Whoops! The image is not showing at all. That is because Internet Explorer does not understand files in tga format. FrontPage did not convert this image when you saved the page. Double whoops!
    You need an image in a different format.

tipALWAYS check how your page looks in Preview and even in a regular browser window to be sure all is well.

Change Format to GIF

FrontPage can convert any image it accepts to either GIF or JPEG format.

  1. Switch back to Normal view.
  2. Right click on the image and choose  Picture Properties  and click on the General tab.
  3. Dialog: Picture Properties | General - GIFChoose below the filename textbox GIF.
  4. In the textbox for Alternate Representations: Text, type  Hector Chavez . This is the text that will show on the web page in place of the actual image before the image is loaded.
  5. Click on OK to close the dialog.

    Hector ChavezDid the image pop back over to the left? In FrontPage 2002, when you open the Picture Properties dialog, the alignment is reset to None. You needed to select Right before you closed the dialog. This is a very annoying 'feature'.
  6. Keyboard Tip Open Picture Properties with the key combo ALT + ENTER while the image is selected.
    [Learn this key combo. It is much easier than the right click menu!]
  7. If necessary, set the alignment to Right.
  8. Dialog: Picture Properties | General - unsaved gifClick on the General tab and look at the Picture source:  unsaved:///hchavez.gif . Your new image has not been saved yet. That won't happen until you save the page.
  9. Close the Picture Properties dialog.
  10. Class diskSave the page. [hector16.htm]
    The Save Embedded Files dialog shows hchavez.gif with the action Save. If your floppy already has a file with this name, the dialog will show Overwrite instead of Save.
    There are some choices you could make in Picture Options, but the defaults are fine this time.
  11. Click on OK.

Transparent GIFs

The GIF image of Hector's signature has a gray background, which is a problem unless the page itself has a gray background. One of the features of GIF images is that you can pick one color to be transparent. Such an image lets the background show through instead of the selected color.

  1. Toolbar: PicturesWith hector16.htm is still in view, click on the image of Hector's signature to select it. The Pictures toolbar appears, either as a floating toolbar or else as docked at an edge of the window.
  2. Click on button: Transparent color the Transparent Color wand on the Pictures toolbar and move it over the image. The pointer changed shape to the eraser end of a pencil.
  3. Transparent Color wand on hchavez.gifClick on the gray background of the image.  The gray disappears!

  4. hector16.htm with hchavez.gif now transparent Class disk Save. [hector16.htm] The Save Embedded Files dialog appears again, with Overwrite for hchavez.gif. This is correct since you want to change a feature of the image (transparent color). So, choose OK.
  5. Close hector16.htm

Problem: Changes Don't Show

Sometimes FrontPage does not refresh the display correctly after you change the source of an image. Your new image uses the old dimensions. Could be a mess! Even if you click Button: Refresh the Refresh button, FrontPage may use the image in the cache instead of looking for a fresh version.  Usually the Preview will show the correct image and page layout, but even that view can be incorrect. <sigh!>

Solution Steps:

  • Switch to Preview. If it looks right there, don't worry about Normal view being off.
  • Wrong in Preview: Switch back to Normal and open Picture Properties. Be sure that the Specify Size box is not checked. Look at the Preview again.
  • If it is still wrong, save the page and open it with an actual browser.  File  |  Preview in Browser  If it is right in the browser, all is well.
  • If it is still wrong, go back to HTML view and delete the dimensions from the actual code. Save the page again. This should make FrontPage reset the dimensions to the actual height and width of the current image. Check in the browser again!

Problem: Changes Outside FrontPage

If you rename or move a file or make changes to it with another program while FrontPage has the web open, FrontPage may not know what you did.  It is common to edit images, for example, while the web is open in FrontPage. So awkward otherwise.

Solution: Refresh the Folder List by selecting a file in it and clicking Button: Refresh the Refresh button. Then select the open page on the right that contains the image and refresh it, too.

Keyboard Tip You can press the F5 key instead of clicking the Refresh button.