This browser does not support basic Web standards, preventing the display of our site's intended design. May we suggest that you upgrade your browser?

Microsoft FrontPage 2003

Working with Images

This page introduces you to the techniques available within Microsoft FrontPage for working with images. There are many options available when working with images such as inserting images into your web page, linking to an image on the Web, using your image as a link, adding alternate text to images, and modifying images. For information on using the Pictures or Drawing toolbar for modifying images, refer to Overview of Clip Art: Common Toolbar Buttons.

return to topAdding Images

When you add an image to a web page, you have three basic options: add an image from your website collection, create a link to an image on the Web, or add an image from the Microsoft Office Clip Art collection. Instructions for all three options are included below.

Inserting an Image from a File

If the image is already part of your website collection, you can insert the image as a file. If you have the image stored electronically but not saved with your website, you need to copy or move the image into the collection before completing the following steps. Refer to Windows Explorer to find your file.

  1. Set your insertion point where you want the image to appear

  2. From the Insert menu, select Picture » From File...
    The Picture dialog box appears.

  3. From the Look in pull-down list, navigate to and select the desired image

  4. Click INSERT
    The image appears in the document.

  5. Continue with Assigning Alternate Text for Images

Creating a Link to an Image on the Web

In most cases, it is not advisable to create a link to an image on the Web. Most sites will require you to save a copy of the image in your collection. Not only does this give you more control of the image (you do not have to worry about the image being renamed, moved, deleted, or physically changed in appearance), it will decrease the load time of your page. However, in some cases, it is appropriate to link to an image on a website. Some sites require this, or if you are using a core graphic for your website (e.g., the UWEC icon that is used as a return link), you should also use this method. If you are using one of the graphics from the UWEC Web Graphics Collection or the UWEC Image Archive, you may also want to link to the graphic.

  1. Set your insertion point where you want the image to appear

  2. From the Insert menu, select Picture » From File...
    The Picture dialog box appears.

  3. In the File name text box, type the complete URL of the image
    Example: http://www.uwec.edu/Images/UWECWeb/uwec1.gif

  4. Click INSERT
    NOTE: Since the image is not a part of your collection, it may not display properly in FrontPage. You can test your page by previewing it in Netscape or Internet Explorer to verify that the image is appearing correctly.

  5. Continue with Assigning Alternate Text for Images

Inserting an Image from Clip Art

WARNING: Some clip art images from the Office Clip Art collection will be inserted into your web page as a WMF (Windows Meta File) file type. While this may work when viewed with Internet Explorer, it will not work with Netscape. A WMF file can be converted to a GIF. Instructions for doing this can be found under Changing the File Type in this section.

  1. Set your insertion point where you want the image to appear

  2. From the Insert menu, select Picture » Clip Art...
    The Insert Clip Art task pane appears.

  3. In the Search for text box, type a keyword or multiple keywords for the clip art you want
    EXAMPLE: Type "Dog, Cat" to find all clip art containing the words dog or cat.

  4. OPTIONAL: To limit your search to only certain collections, under the Search in pull-down list, select or deselect the appropriate options
    To limit your search to only certain types of media (e.g., sounds or photographs), under the Results should be pull-down lists, select or deselect the appropriate options
    NOTE: An option is selected if a checkmark appears before it.

  5. Click GO
    The clip art matching your keyword(s) appears.

  6. To insert a piece of clip art, click it once
    The selected clip art is inserted into the document.

  7. Continue with Changing the File Type

Changing the File Type

If the Clip Art image you have selected was inserted as a WMF file, you can easily convert it to a GIF.

  1. Double click the image
    OR
    Right click the image » select Picture Properties...
    The Picture Properties dialog box appears.

  2. Select the General tab

  3. Click PICTURE FILE TYPE...
    The Picture File Type dialog box appears.

  4. Select GIF

  5. Click OK

  6. Click OK
    NOTE:
    When you save the file, you will be asked to save the image. At this time you can give the image a new name and specify the location within your website that the image is being saved in.

  7. Continue with Assigning Alternate Text for Images

return to topAssigning Alternate Text for Images

Alternate text for images is what appears when the image is not loaded correctly (generally due to customized browser settings but also for text-based browsers). It also appears when a user's mouse is placed over the image. Image alternate text is essential for the sight-impaired; instead of seeing the screen, it is read to them.

The default alternate text for images added with FrontPage is image name (size k) (e.g., book.gif (2 k)). To change this to more descriptive text:

  1. Double click the image
    OR
    Right click the image » select Picture Properties...
    The Picture Properties dialog box appears.

  2. Select the General tab

  3. In the Alternative representations section, select Text

  4. In the Text text box, type the alternate text you want to appear
    NOTES:
    If the image is purely decorative to your site, you may type "" (two quotation marks, no space).
    If the image is used to convey information, type short yet descriptive text.

  5. Click OK

return to topDeleting Images

If you no longer want an image to appear on your page, you can remove it by following these steps:

  1. Select the image

  2. Press [Delete]

return to topMoving Images

Image placement may need to be adjusted for a variety of reasons: the content has been rearranged, the flow of the images is no longer appropriate, etc. If the image is moving a short distance, you can use the drag-and-drop method. If it is moving a large distance down the page or to another web page, you will need to use the cut and paste method.

Moving Images: Drag-and-Drop

  1. Select the image

  2. Click and hold the mouse within the graphic

  3. Drag to the new location

  4. Release the mouse button
    The image appears in its new location.

Moving Images: Cut and Paste

  1. Select the image

  2. From the Edit menu, select Cut
    OR
    Press [Ctrl] + [X]

  3. Place the insertion point where you want the image to appear

  4. From the Edit menu, select Paste
    OR
    Press [Ctrl] + [V]

return to topPlacing and Aligning Images

The placement of images can be adjusted by dragging the image to the new location and adjusting the image alignment. Placement of the image is limited to possibilities supported by HTML code. Layout of images and text can be done through the use of tables and/or cascading style sheets.

Images are similar to characters; however, alignment of images relative to paragraphs of information does not work exactly the same way as paragraph alignment. For more information, refer to Illustrating Image Alignment.

Placing and Aligning: Button Option

  1. Select the image

  2. On the Formatting toolbar, click the appropriate alignment button
    Alignment buttons

Placing and Aligning: Menu Option

  1. Select the image

  2. From the Format menu, select Paragraph...
    The Paragraph dialog box appears.

  3. From the Alignment pull-down list, select the appropriate option

  4. Click OK

Placing and Aligning: Dialog Box Option

  1. Right click the image » select Picture Properties...
    The Picture Properties dialog box appears.

  2. Select the Appearance tab

  3. From the Alignment pull-down list, select the appropriate choice

  4. Click OK

return to topLinking with Images

You can create a hyperlink for images just as you did for text. You can also establish a link for the image using the Picture Properties dialog box.

HINT: If you are having problems assigning a link to your image, you can work around it by treating the image as a character and select the image by clicking before the image and dragging to after the image.

  1. Double click the image
    OR
    Right click the image » select Picture Properties...
    The Picture Properties dialog box appears.

  2. Select the General tab

  3. In the Default Hyperlink section, in the Location text box, type the URL for the link
    NOTE: For links to pages outside your collection, you must include the http://
    OR
    To link to a file,
    1. Click BROWSE
      The Edit Hyperlink dialog box appears
    2. From the Look in pull-down list, locate and select the file you want to link the image to
    3. Click OK

  4. Click OK
Excellence. Our Measure. Our Motto. Our Goal.