Images

About Images on the Web

The main purpose of images on the Web is to illustrate the content of a Web page.  Using images as the background of a Web page, as bullets in a list, or as an illustration, can make the Web page more visually appealing to the viewer.  Beware of adding too many images to a Web page, as it can detract from your content and confuse the viewer.  When choosing or creating an image for a Web page, pay special attention to the file size of the image.  If the image has a large file size, then it may take a long time to download on the viewer's computer.

The two main types of images on the Web are GIF's and JPEG's, and there are several different ways to find images for your Web page.  You can create the image yourself using a computer drawing or painting program, you can use a digital camera, you can scan the image, you can use clip art CD's, and you can download the images from other Web sites.  (To download an image from the Web, right-click on the image and choose Save Image As.  Then, save the image to the correct folder.)

Note: if you scan images, use clip art CD's, or download the image from the Web, pay attention to any copyright notices!

Back to Top

Aligning Images Without Text

1. Select the image. (Figure 1)
2. Use the Align options on the Property Inspector Palette to left, center, or right justify the image on the Web page. (Figure 2)

Figure 1	Figure 2

Back to Top

Aligning Images With Text

1. Insert the image at the beginning of the text.
2. Select the image. (Figure 1)
3. Use the Left or Right alignment options in the Property Inspector Palette. (Figure 2)
   • Left aligning the image to the text means that the image will be on the left margin of the Web page, and the text will wrap around on the right side of the image.
   • Right aligning the image to the text means the image will be on the right margin of the Web page, and the text will wrap around on the left side of the image.

Figure 1	Figure 2

Back to Top

Adding Space around the Image

1. Select the image. (Figure 1)
2. In either the V Space field or the H Space field, type in the number of pixels you want the space to be.  (Figures 2 & 3)
   • Changing the V Space will change the space around the top and bottom of the image.
   • Changing the H Space will change the space around the left and right sides of the image.

Figure 1	Figure 2	Figure 3

Back to Top

ALT Tags

The ALT attribute stands for "alternative text," and it is a brief description of the image. The ALT attribute is important for several reasons:

• The ALT text will pop up when a mouse is moved over an image, to give the viewer a little more information about the image. 
• If an image doesn't show up on a Web page, for whatever reason, the ALT text will be displayed in place of the image. 
• If a user has their images turned off, the ALT text will be displayed. 
• And, last but not least, it is required by Section 508 of the Disabilities Act, http://www.section508.gov.

To add an ALT Tag:

1. Select the image. (Figure 1)
2. Type the image description in the ALT field on the Property Inspector Palette. (Figure 2)
3. When you preview the Web page in Internet Explorer, put the cursor over the image and the ALT tag will pop up. (Figure 3)

Figure 1	Figure 2	Figure 3

Back to Top

Borders

1. Select the image. (Figure 1)
2. Click in the Border field on the Property Inspector Palette.
3. Type in the number of pixels for the border size. (Figure 2)
4. Press Enter. (Figure 3)

Please note: The color of the image border is the same color of the default text, unless the image is a link.  In which case, the border will be the same color as the links on that page.

Figure 1	Figure 2	Figure 3

Back to Top

Inserting an Image

1. Place the cursor on the page, where you want the image to appear. (Figure 1)
2. Go to the Insert menu, and choose Images. (Figure 2)
3. A dialog box will open. (Figure 3)
4. Change the Look In: field to the folder where the images are stored. (Figure 4)
5. Click once on the name of the image to highlight it.
6. On the right side of the dialog box, there will be a preview of what the image looks like, what the pixel dimensions are, and what the file size is. (Figure 5)
7. Click Select, and the image will appear on the page. The Property Inspector Palettewill reflect the image's properties. (Figure 6)

Figure 1	Figure 2
Figure 3	Figure 4
Figure 5
Figure 6

Back to Top

Links - Absolute and Relative

Absolute Links

1. Select the image. (Figure 1)
2. Click in the Link field in the Property Inspector Palette.
3. Type in the full address of the Web site, starting with http://. (Figure 2)
4. Press Enter.
5. To text the link, preview the page.
6. If a border has been applied to the image, it will be the same color as the text links on the page. (Figure 3)

Figure 1	Figure 2	Figure 3

Relative Links

1. Select the image. (Figure 1)
2. Click on the yellow folder icon on the Property Inspector Palette. (Figure 2)
3. A dialog box will open.
4. Browse to the HTML file you want to link to, and click Select. (Figure 3)
5. The file name will appear in the Link field.
6. To test the link, preview the page.
7. If a border has been applied to the image, it will be the same color as the text links on the page. (Figure 4)

Figure 1
Figure 2
Figure 3
Figure 4

Back to Top

Page Background

1. Go to the Modify menu and choose Page Properties.
2. A dialog box will open. (Figure 1)
3. Click on the Browse button by the Background Image field. (Figure 2)
4. A second dialog box will open. (Figure 3)
5. Change the Look In: field to the folder where the images are stored. (Figure 4)
6. Click once on the name of the image to highlight it.
7. On the right side of the dialog box, there will be a preview of what the image looks like, what the pixel dimensions are, and what the file size is. (Figure 5)
8. Click Select. (Figure 6)
9. In the Page Properties dialog box, click on the Apply button to see the background image appear on the page without closing the dialog box. (Figure 7)
10. Click OK to make the background permanent.

Figure 1
Figure 2
Figure 3
Figure 4
Figure 5
Figure 6
Figure 7

Back to Top

Resizing Images using the Property Inspector Palette or the Resizing Handles

Using the Property Inspector Palette

1. Select the image.
2. Type in a number for the height and width of the image in pixels. (Figure 1)
3. To return the image to its original size, click the Refresh button. (Figure 2)

Figure 1
Figure 2

Using the Resizing Handles

1. Select the image.
2. There are three resizing handles on the selection border. (Figure 1)
3. Click and drag one of the handles in or out, to adjust the image.
   • The handle on the bottom will adjust the height of the image.
   • The handle on the right will adjust the width of the image.
   • The handle in the lower right corner will adjust both height and width simultaneously.  If you hold down the Shift key while adjusting this handle, it will keep the image in proportion.
4. The number of pixels or the percentage in the Property Inspector Palette will automatically be updated.

Figure 1

Back to Top

Selecting an Image

1. Click once on the image.
2. The image will have a dark line around it, with three sizing handles, which means it is selected. (Figure 1)

Figure 1

Back to Top

Table Background

1. Select the table. (Figure 1)
2. Click on the Browse button by the Bg: field on the Property Inspector Palette. (Figure 2)
3. A dialog box will open. (Figure 3)
4. Change the Look In: field to the folder where the images are stored.
5. Click once on the name of the image to highlight it. (Figure 4)
6. Click Select. (Figure 5)
7. The image will tile in the table's background. (Figure 6)

Figure 1
Figure 2
Figure 3
Figure 4
Figure 5
Figure 6

Back to Top