Section 57. Add a Picture to Your Page

57. Add a Picture to Your Page

BEFORE YOU BEGIN

25 Add Text and Graphics to the Page

SEE ALSO

63 Add an Animated GIF to Your Page

In earlier tasks , you added images to your page. In this lesson, you are going to learn a little more about the way graphics files work, and what makes good graphics and what might not be as useful.

1.	Select an Image With the target page open in Composer , select Image from the Insert menu and click on the Choose File button to locate an image to insert. The name of the image is placed in the Image Location area of the Location tab on the Image Properties dialog box. Below the filename is a check box marked URL Is Relative to Page Location . This check box tells Composer where the image file is located relative to the HTML file. If you uncheck the box, the full pathname to the file is added instead, which you do not want. The Tooltip area enables you to add a short text that will appear on the browser screen if the user holds her cursor over the image. The Alternate text area enables you to add descriptive text for the image that is read by screen readers for the vision-impaired. At the bottom of the dialog box is a small preview of the image with the height and width of the image. 57. Add a Picture to Your Page
2.	Set the Image Dimensions Click on the Dimensions tab of the Image Properties dialog box. In the Dimensions tab, you can set the size of the image. Setting the size of the image enables you to place an image that may be larger than you want it to appear in the browser. When you set the height and width, you will probably want to set the Constrain check box so that when you type in the size for one dimension, the other dimension will resize correspondingly. If you don't set the Constrain check box, the image will appear stretched .
3.	Set the Image Appearance Click on the Appearance tab of the Image Properties dialog box and set the image to align at the top in the Align Text to Image dialog box. In the Appearance tab, you can set the spacing around the picture if you want to keep space between the image and the text that abuts the picture. In the Align Text to Image drop-down box, you can set the picture to align at the top of the line of text where it appears, in the center of the line of text, at the bottom of the line of text, or to wrap to the left or to the right. Select the Wrap to the Left choice to allow the picture to be at the right of a block of text.
4.	Make an Image a Link Click on the Link tab of the Image Properties dialog box. In the Link tab of the dialog box, you can set a link for the image so that when someone clicks on the image, it will behave just like a text link and go to another page. When you set an image as a link, usually it defaults to having a blue border around the image to indicate there is a link, which detracts from your layout. To remove the blue border, be sure that the Show Border Around Linked Image check box is uncheckedby default, it should be checked off in Composer.
5.	Insert the Image Click OK to insert the image into the page. After you have inserted the image into the page, you can always get back to the Image Properties dialog box to change any of the attributes of the image.

TIP

Use images carefully . Too many images that are too large are visually distracting, especially when they are set off by bright borders. Look at websites that workand those that don't work. Work to create a flow between your words and your images such that nothing looks out of place.