Adding Web Pages, Links, and Images (Adobe Dreamweaver CS5) Part 7

To Insert and Align an Image in the Montana National Parks and Preserves Web Page

The next page in your Web site is the Montana National Parks and Preserves page. The following steps show how to further develop this Web page by adding an image to it.

Click the preserves.htm document tab to display the page in the Document window.

Position the insertion point to the left of the first sentence after the heading, and then drag the ducks.jpg image file from the Assets panel to the insertion point.

Type Montana ducks in the Alternate text text box and then click the OK button to display the image.

Enter 43 0 in the W box to change the width, enter 3 60 in the H box to change the height, and then press the ENTER key to display the resized image in the Document window.

Enter 15 in the V Space box and 2 0 in the H Space box to add space around the ducks image.

Click the Align button in the Property inspector, and then click Right to align the image to the right side of the window.

If necessary, scroll up to display the entire ducks image (Figure 2-40).

Figure 2-40


Figure 2-40

To Insert and Align a Second Image in the Montana National Parks and Preserves Web Page

The following steps show how to add a second image to the Montana National Parks and Preserves Web page.

Drag the grizzly.jpg image from the Assets panel to the end of the second paragraph (the "Glacier National Park" bullet).

Type Montana Grizzly in the Alternate text text box and then click the OK button to enter Alt text for this image.

Click the Align button in the Property inspector, and then click Left to align the image to the left.

Change the width value in the W box to 300 and the height value in the H box to 300.

Enter 15 as the vertical space value in the V Space box, enter 20 as the horizontal space value in the H Space box, and then press the ENTER key to add the space around the grizzly image.

Click the Save button on the Standard toolbar to save the preserves.htm page with the new image (Figure 2-41).

Figure 2-41

Figure 2-41

Press the F12 key to display the Montana National Parks and Preserves page in the browser (Figure 2-42).

Close the browser to return to Dreamweaver.

Figure 2-42

Figure 2-42

To Insert and Align an Image in the Lewis and Clark National Historical Trail Web Page

The third page in your Web site is the Lewis and Clark National Historical Trail page. The following steps illustrate how to add the first of two images to the Lewis and Clark National Historical Trail Web page.

Click the historical_trail.htm Web page tab to display that page in the Document window.

Click the clark_01.jpg file in the Assets panel, and then position the insertion point to the left of the first sentence (Figure 2-43).

Figure 2-43

Figure 2-43

Drag the clark_01.jpg file from the Assets panel to the insertion point to display the Image Tag Accessibility Attributes dialog box.

Type William Clark in the Alternate text text box and then click the OK button to enter Alt text for this image and to insert the image in the page.

Click the Align button in the Property inspector and then click Left on the Align pop-up menu to align the image to the left side of the page (Figure 2-44).

Figure 2-44

Figure 2-44

In Property inspector, click the H Space box, type 10 as the horizontal space, and then press the ENTER key to add the space (Figure 2-45).

Q&A

When I add horizontal and vertical space, what are the measurement units? o3

The measurement units are in pixels, so when you enter 10 in the H Space box, you are specifying 10 pixels of horizontal space around the image.

Figure 2-45

Figure 2-45

To Insert and Align a Second Image in the Lewis and Clark National Historical Trail Web Page

The following steps illustrate how to add the second of two images to the Lewis and Clark National Historical Trail Web page.

Position the insertion point to the right of the first paragraph to prepare for adding the second image to the page (Figure 2-46).

Figure 2-46

Figure 2-46

Drag the lewis01.jpg image from the Assets panel to the insertion point to display the Image Tag Accessibility Attributes dialog box.

Type Meriwether Lewis in the Alternate text box and then press the ENTER key to enter Alt text for this image and to insert the image in the page. If necessary, scroll down to view the image (Figure 2-47).

Figure 2-47

Figure 2-47

In the Property inspector, click the Align button and then click Right on the Align pop-up menu to align this image to the right side of the page.

Change the width value in the W box to 2 65 and change the height value in the H box to 435.

In the V Space box, enter 10 as the vertical space, and in the H Space box, enter 10 as the horizontal space.

Press the ENTER key to resize and position the image, and then click anywhere on the page to deselect the image.

Click the Save button on the Standard toolbar to save the changes to the historical_trail.htm page (Figure 2-48).

Figure 2-48

Figure 2-48

Press the F12 key to view the Lewis and Clark National Historical Trail page in your browser (Figure 2-49).

Close the browser.

Figure 2-49

Figure 2-49

Next post:

Previous post: