Adjusting Space Around Images
When aligning an image, by default, only about three pixels of space are inserted between the image and adjacent text. You can adjust the amount of vertical and horizontal space between the image and text by using the V Space and H Space settings in the Property inspector. The V Space setting controls the vertical space above and below an image. The H Space setting controls the horizontal space to the left and right side of the image.
Q&A
What should I do if Q the element marker is not displayed?
First, open the Preferences dialog box, click the Invisible Elements category, and then make sure the Anchor points for aligned elements box is checked.
Next, click View on the Application bar, point to Visual Aids, and make sure the Invisible Elements command is checked.
To Adjust the Image Size and the Horizontal Space
The following steps show how to resize an image and add horizontal space around an image.
1
• If necessary, click to select the image.
• Double-click the W text box in the Property inspector to select the current width value, and then type 4 0 0 to adjust the width of the image.
• Press the TAB key and type 24 5 in the H text box to adjust the height of the image.
• Press the ENTER key.
• Click the H Space text box and type 2 5 to adjust the horizontal space between the image and the text.
Figure 2-33
• Press the TAB key to apply the horizontal space setting to the image (Figure 2-33).
• Click outside the image to remove the selection box and to view the added space and the reduced size (Figure 2-34).
Figure 2-34
Q&A
Why do I need to Q adjust the width and height of the image? In many instances, adjusting the image size creates a better balance on the page.
How do the V Space and H Space settings change the placement of the image?
Space adds space along the top and bottom of an image. H Space adds space along the left and right of an image.
To Insert the Second Image
To enhance your index Web page further, you will add a second image. This image will appear on the left side of the page, below the first paragraph. The following steps show how to insert a second image on the Montana Parks and Recreation Areas page.
If necessary, scroll up and position the insertion point to the left of the second paragraph, which begins "In addition to the national facilities."
Expand the panel groups, and then click the Assets tab, if necessary, to display the images in the Assets panel (Figure 2-35).
Figure 2-35
Drag the glacier01.jpg image from the Assets panel to the insertion point to add the image to the Web page and to display the Image Tag Accessibility Attributes dialog box.
Type Montana glacier in the Alternate text text box, and then click the OK button to insert the glacier01 image into the Web page (Figure 2-36 on the next page).
Q&A
How does the Alternate text make my Web page more accessible?
For visually impaired users who use speech synthesizers with text-only browsers, the Alternate text is spoken aloud.
Figure 2-36
In the Property inspector, click the Align button, and then click Left in the Align pop-up menu to move the image to the left side of the window (Figure 2-37).
Q&A
How can I tell that the image is now left-aligned?
It is difficult to see the alignment of the figure because it is so large. The alignment will be clear when you resize the image in the next step.
Figure 2-37
In the Property inspector, change the W value to 300 and the H value to 240.
Click the H Space box, type 2 0 as the horizontal space, and then press the ENTER key to apply the setting changes to the glacier01 image (Figure 2-38).
Figure 2-38
Click the Save button on the Standard toolbar to save the index.htm page. Press the F12 key to view the Web page in your browser (Figure 2-39). Close the browser to return to Dreamweaver.
Figure 2-39
