• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Enhancing Your Web Site with ... > Editing and Formatting Pictures

Editing and Formatting Pictures

Sometimes the picture you add to a Web page won’t produce exactly the result you are looking for—perhaps it’s too large or too small, or perhaps it includes a variety of elements that distract from the thing you’re trying to draw the visitor’s attention to. For really drastic changes, you will need to manipulate the picture in a graphics-editing program before adding it to the Web page. But for small modifications like sizing, cropping, and adding a frame, you can do the job within FrontPage.

The commands used to edit and format pictures are contained on the Pictures toolbar.

  • The Insert Picture From File command displays the Picture dialog box, where you can search for and insert a picture.

  • The Text command creates a text box in the picture area into which you can insert your own text.

  • The Auto Thumbnail command creates a small preview version of your picture, called a thumbnail, which is hyperlinked to the original. Viewers can click the thumbnail to view the full-size version.

  • The Position Absolutely, Bring Forward, and Send Backward commands control the position of the picture on the page in relation to other elements; whether it is in front of or behind other objects; and whether it moves with the surrounding text.

  • You can use the Rotate Left 90°, Rotate Right 90°, Flip Horizontal, and Flip Vertical commands to reverse and rotate your picture.

  • You can use the More Contrast, Less Contrast, More Brightness, and Less Brightness commands to adjust the brightness and contrast of the selected picture.

  • You can use the Crop command to cut the picture down to a smaller size. This will not shrink the picture, but will instead trim the edges of the picture as you indicate.

  • You can use the Line Style command to display a menu of line widths and styles. By clicking More Lines on the menu, you can access the Format AutoShape dialog box, where you can change the width, length, color, and pattern of lines.

  • You can use the Set Transparent Color command to select a particular color that will be transparent when the graphic is viewed on a Web page. This is ideal when you want to display an irregularly shaped object (one without straight borders).

  • You can use the Color command to create a black and white, grayscale (black, white, and shades of gray), or washed out version of the original picture.

  • You can use the Bevel command to apply a beveled edge to the selected picture, creating a self-framing effect.

  • You can use the Resample command to refine the focus of a picture that has been enlarged or reduced.

  • You can use the Select command to change the insertion point to a pointer so that you can select a picture for editing. This button is selected by default when the Pictures toolbar is opened.

  • You can use the Rectangular Hotspot, Circular Hotspot, Polygonal Hotspot, and Highlight Hotspots commands to select and view hotspots, or image maps, on your picture. These are areas that can be hyperlinked to jump to other graphics, other Web pages, or other Web sites. They can even generate e-mail messages!

  • You can use the Restore command to undo all changes made to the picture since the Pictures toolbar was opened.

If the Pictures toolbar does not open automatically when you select a picture for editing, you can open it at any time by right-clicking the toolbar area and then clicking Pictures on the shortcut menu.

In this exercise, you will work with a photograph to practice using some of FrontPage’s picture-editing and formatting capabilities. First you will size the picture and crop away the parts you don’t want; then you will convert the picture to black-and-white and give it a beveled frame.

USE the GardenView picture in the practice file folder for this topic. This practice file is located in the My Documents\Microsoft Press\FrontPage 2003 SBS\Pictures\CropPicture folder and can also be accessed by clicking Start/All Programs/Microsoft Press/FrontPage 2003 Step By Step.

On the Standard toolbar, click the Create a new normal page button to create a new page.

On the Insert menu, point to Picture, and then click From File.

The Picture dialog box appears.

Navigate to the GardenView image, select it, and click Insert.

The image is inserted into the Web page.

On the View menu, point to Toolbars, and then click Pictures to open the Pictures toolbar.


By default, the Pictures toolbar opens as a floating toolbar. If you prefer, you can dock it at the top, the bottom, or either side of the window.

Drag the Pictures toolbar to the bottom of the window to dock it out of the way.

Click the picture to select it, and on the Pictures toolbar, click the Crop button.

A dashed box appears in the picture, defining the edges of the area to be cropped.

Drag the handles of the crop box until the box frames the collection of spheres.

Press or click the Crop button again to crop the picture to the specified shape and size.

Double-click the picture to display the Picture Properties dialog box.

On the Appearance tab, make sure the Specify size check box is selected.

To prevent distortion, ensure that the Keep aspect ratio check box is selected.

Set the Width to 165 pixels.

The height setting automatically changes to match the new width.

Click OK to close the dialog box and apply your changes.

FrontPage resizes the graphic to your specified dimensions.

On the Pictures toolbar, click the Color button.

In the Color drop-down list, click Grayscale.

The picture is converted to shades of gray, but retains the original quality of detail.

On the Pictures toolbar, click the Bevel button.

The colors at the edges of the picture change to make it appear that the center is raised.

CLOSE the practice file without saving your work.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint