Inserting Pictures

The sections that follow discuss how to add pictures to pages, and how to size , align and space them. You ll also find discussions on cutting, copying and pasting pictures; linking pictures to other files; and specifying low-resolution pictures that are displayed before high resolution ones. You'll use these techniques whenever you add pictures to Web pages.

Lingo  

FrontPage uses the term picture to mean any graphic image that you insert into a Web page. A picture can be a page graphic, a digital photo, a banner graphic, clip art, or any other image. Most pictures you use on the Web are either in GIF or JPEG format.

Adding Pictures to Web Pages

Microsoft Office FrontPage 2003 makes it easy to insert and precisely place pictures. Your pictures can come from a variety of sources, including local files, the current Web site, the network and the World Wide Web. When you insert a picture that is not in the GIF or JPEG format, FrontPage needs to convert the picture to either GIF or JPEG format before saving it. You ll find complete details on the conversion process in the section of this chapter entitled Saving Pictures to the Current Web.

To insert a picture into a Web page open for editing in FrontPage, follow these steps:

1. Move the insertion point to where you want to insert the picture, and then choose Insert, Picture, From File.

2. Using the Picture dialog box, locate and double-click the file name of the picture you want to use.

3. After you add a picture, right-click it, and then select Picture Properties. This displays the Picture Properties dialog box.

4. Click the General tab, as shown in Figure 7-1, and then type a description or title of the picture in the Text field under the Alternative Representations section. The text you enter is displayed whenever the cursor is over the picture. Click OK when you re finished.

   
   Figure 7-1: Add a text description to your pictures to help visitors to your site understand what they re seeing.

Note  

Wondering why you d want to add text descriptions to pictures? Well, the text you enter is displayed whenever the cursor is over the picture. The text is also displayed if, for some reason, the user s browser cannot display pictures ”if the user turns off picture display, for example. If you link the picture to another file, the text can also tell users what page or file is accessed when they click the picture.

Setting Picture Layout

Adding a picture to a page is one thing, but getting the picture so it is just right in size, alignment, and spacing is something else entirely. Pictures can be sized , aligned and spaced in many different ways. The default alignment and spacing for pictures is very simple. FrontPage 2003 aligns the bottom of the picture with the bottom of any text element that might be associated with the picture, and doesn t add a border or any spacing to the picture.

The default layout may work in some cases, but it probably isn t optimal. In most cases, you ll want to use a different layout. For example, you may want to center the picture on the page, and add a 5-pixel border. Or, you may want to align the picture to the left or right of existing text on the page, and use vertical spacing to ensure that the picture is set clearly apart from the text.

You can change the layout for pictures by completing the following steps:

1. Right-click the picture, and then select Picture Properties. This displays the Picture Properties dialog box shown in Figure 7-2.

   
   Figure 7-2: Use the Picture Properties dialog box to specify the layout and sizing of pictures.

2. Use Wrapping Style to specify how text wraps around the picture:

   • None Ensures the text doesn t wrap around the picture.

   • Left Wraps text around the left side of the picture.

   • Right Wraps text around the right side of the picture.

3. Use the Alignment drop-down list to set the picture s alignment. The available options are:

   • Absbottom Aligns the bottom of the picture with the bottom of the line of text associated with the picture.

   • Absmiddle Aligns the middle of the picture with the middle of the line of text associated with the picture.

   • Baseline Aligns the picture and text along the baseline of the text. Text elements like s, k and l are aligned along the baseline, and text elements like j, g and p extend below the baseline.

   • Bottom Same as baseline.

   • Center Centers the picture on the page.

   • Left Aligns the picture in the left margin.

   • Middle Aligns the middle of the picture with the bottom of the text.

   • Right Aligns the picture in the right margin.

   • Texttop Aligns the top of the picture with the top of the tallest element in the line of text associated with the picture.

   • Top Aligns the top of the picture with an imaginary line slightly above the text.

4. Use Border Thickness to set the pixel size of the border around the picture. Set the value to zero to display the picture without a border.

5. Use Vertical Spacing to set the spacing above and below the picture in pixels. If you set the vertical spacing to zero, you remove any extra spacing above or below the image.

6. Use Horizontal Spacing to set the spacing to the left and right of the picture in pixels. If you set the horizontal spacing to zero, you remove any extra spacing to the left or right of the image. Click OK when you re finished.

Sizing Pictures

Most pictures are sized using pixels, to ensure that they are displayed at a specific fixed size, such as 150 pixels wide and 120 pixels high. Pictures can also be sized as a percentage of the window size, which allows the picture size to change, based on the width and height of the browser window. For example, if you created a page banner using a picture, you might want the banner to fill the width of the browser window. To do this, you would set the picture width to 100 percent of the browser window.

You can size pictures by completing the following steps:

1. Right-click the picture, and then select Picture Properties.

2. On the Appearance tab of the Picture Properties dialog box, select Specify Size, then type the desired width and height for the picture.

3. Use the In Pixels or In Percent options to specify whether the width and height values are expressed in pixels, or as a percentage of the browser s window. Click OK.

Aha!  

Preserve the Original Proportions to Correct Picture Distortion
Some pictures won t display properly if the original proportions are changed. As a result, the picture may look blurred or distorted . You may be able to correct this problem by selecting Keep Aspect Ratio. With this option selected, the width and height are sized relative to their original proportions. For example, if a picture is 600x400 pixels, and you change the width to 300, the height would automatically be set to 200, to maintain the original aspect ratio.

Cutting, Copying, and Pasting Pictures

FrontPage lets you manipulate pictures in much the same way as you manipulate text, using the familiar Cut, Copy, and Paste commands. You can also cut a picture from your favorite paint program, and paste it directly into a Web page. Here s how you would do this:

1. In your favorite paint program, create, or open for editing, the picture you want to use.

2. Select the picture, and copy it to the Windows Clipboard.

3. In FrontPage, open a Web page for editing, then move the insertion point to where you want to add the picture. Press Ctrl+X to paste the picture into the page.

Note  

FrontPage 2003 automatically converts the picture to either GIF or JPEG format, if necessary. Pictures with 256 or fewer colors are converted to GIF. Pictures with more than 256 colors are converted to JPEG.

Using Pictures as Hyperlinks

Pictures can be clickable entryways to other pages and files. You could, for example, show a small picture of your new digital music player on your home page and link it to a product page that provides more detailed information. When a customer clicks on the picture, they quickly and easily access the product page.

If you want to link a picture to a Web page or file, complete the following steps:

1. Right-click the picture, and then select Picture Properties.

2. On the General tab of the Picture Properties dialog box, click Browse (to the right of the Location field).

3. Specify whether you want to link to an existing Web page, a new document, or an email address, by clicking the appropriate Link To option. The options of the dialog box change, based on your selection.

4. Choose the file to which you want to link, if it is displayed in the Look In list, or enter the Web address in the Address field. Click OK to close the Picture dialog box.

Aha!  

Test the Link
Want to check the link you just added to the picture? Move the mouse pointer over the picture, press and hold Ctrl, and then click. The page or file to which you ve linked should open in FrontPage. If it doesn t, you may have entered an invalid location or there may be some other problem accessing the resource.

Using Low-Resolution Pictures

It really is true that a picture is worth a thousand words, and sometimes the best way to showcase your organization s products or services is to do so with high-resolution pictures. You don t, however, want visitors to get bored waiting for large pictures to download. Remember, not everyone has a fast connection to the Internet ”even some businesses have slow speed dial-up connections.

One way to make it seem as if your pages load faster is to specify low-resolution pictures that browsers can download before they download your high-resolution pictures. In this way, compliant browsers, such as Internet Explorer 6.0, load the low-resolution pictures first ”and then, when all other page elements are loaded, they go back and get the high-resolution pictures you ve specified. These high-resolution pictures are faded in over the low-resolution pictures.

To specify a low-resolution picture as an alternate picture for an existing picture, follow these steps:

1. Right-click the picture, and select Picture Properties.

2. On the General tab of the Picture Properties dialog box, click Browse (to the right of the Low-Res field).

3. Use the Select Alternate Picture dialog box to locate the low-resolution picture, then double-click its file name. You can use pictures from the current web, your hard drive, the network, or the Web. Click OK when you re finished.

Note  

Your low-resolution pictures should act as placeholders, and should be the same size on the page as the high-resolution picture. This will ensure the text on the page doesn't shift when the high-resolution picture is displayed.