313 33 11 22 55 44 WORKING WITH iWEB ‘09 Editing Web Site Content chapter 17 How do I add a frame to an image? You can add a decorative picture frame to an image and adjust the size of the frame. 1 Click to select the photo. 2 In the Inspector, click the Graphic Inspector icon ( ). 3 Click here and select Picture Frame for the stroke type. If you want a plain, solid-color border, you can select Line. 4 Click the arrow and select a frame style. 5 Click and drag the slider to select the size of the frame. ● iWeb adds a picture frame around the image. ● iWeb adds the image to the page. You can click and drag the image to reposition it. Note: To customize the image, see “Resize an Image” and “Mask an Image.” 314 SMALL LARGE 22 33 11 ● iWeb resizes the image. In this example, the bottom left corner handle was used to shrink the image. Note: You can click Edit and then Undo to revert to the previous size. USE IMAGE HANDLES 1 Click to select an image. Handles appear on the edges of an image. 2 Click and drag a side handle to change one dimension of the image. 3 Click and drag a corner handle to change two dimensions of the image at once. To keep the image at the same proportions, press as you click and drag a corner handle. Resize an Image You can resize an image on your page to emphasize or de-emphasize it, or to make it fit in with the other page content. You can control the size of your image, as well its position on the page, using the Metrics Inspector. Note that resizing an image to greater than its original size can make it look blurry. Resize an Image 33 44 22 11 WORKING WITH iWEB ‘09 Editing Web Site Content chapter 17 How do I adjust the color, lighting, and other attributes of an image? You can open the Adjust Image panel to make changes to different image settings. 1 Click to select an image. 2 Click Adjust. 3 In the Adjust Image panel, click and drag the sliders to adjust the brightness, contrast, and other image settings. ● The panel displays a histogram, which shows the distribution of shadows and highlights in an image. 4 Click and drag the sliders to adjust the lighting. 5 Click Enhance to automatically optimize the color and lighting in the image. Note: For more about adjusting the color and lighting in images, see Chapter 5. USE THE METRICS INSPECTOR 1 Click to select an image. 2 Click Inspector. The Inspector opens. 3 Click the Metrics Inspector icon ( ). 4 Type new dimensions here. Note: Image sizes are measured in pixels (px). Pixels are the tiny, solid-color squares that make up digital images. ● You can click Constrain proportions ( changes to ) to change one dimension at a time. This will distort the image. ● iWeb resizes the image. Note: You can click Edit and then Undo to revert to the previous size. 315 33 55 44 44 316 33 22 11 44 4 Click and drag the slider to zoom the image. Drag left to zoom out or right to zoom in. 1 Click to select an image. 2 Click Mask (Mask changes to Unmask). iWeb adds a mask to the image. 3 Click and drag the handles to adjust how the image is cropped. Mask an Image You can mask an image to crop it, which removes unwanted areas of the image from view. iWeb hides the masked areas without removing them from the original image, so you can still crop the image differently later. You can also zoom the image within the masked area. Mask an Image 317 55 44 11 55 33 WORKING WITH iWEB ‘09 Editing Web Site Content chapter 17 How do I add a reflection to an image on my Web page? 1 Click to select an image. 2 Click Inspector. 3 Click the Graphic Inspector icon ( ). 4 Click Reflection ( changes to ). ● iWeb adds a reflection below the image. 5 Click and drag the slider to control the opacity of the reflection. ● You can click and drag the slider to control the opacity of the entire image. 6 Click away from the masking tool. ● iWeb displays the masked image. You can click the image again to display the masking tools and adjust the image further. iWeb zooms the image under the mask. 5 Click and drag inside the tool to adjust the position of the image. 318 11 55 44 33 22 66 A list of shapes appears. 3 Click a shape. iWeb adds the shape to the page. 4 Click and drag the side and corner handles to resize the shape. 5 Click the shape and drag to reposition it. ● You can customize some shapes using additional settings. 6 Click Inspector. 1 Select the page to which you want to add an image. 2 Click Shapes. Insert a Shape You can insert a shape to use as a text box or to decorate your page. To customize the shape, you can fill it with a color, gradient, or image. You can also stroke the outside edge with a color or add a drop shadow. Insert a Shape 319 88 99 00 !! 77 @@ WORKING WITH iWEB ‘09 Editing Web Site Content chapter 17 How do I mask images with different shapes? You can mask an image with a shape other than a rectangle and then make crop and zoom adjustments. 1 Click to select a photo. 2 Click Format and then click Mask With Shape. 3 Click a shape. Note: You can add a shape only if the image does not currently have a mask applied. ● iWeb masks the shape and displays the masking settings. Note: For more about adding masks, see “Mask an Image.” ! Double-click the shape. A blinking cursor appears in the shape. @ Type to add text inside the shape. Note: To format the text, see “Format Text.” The Inspector opens. 7 Click the Graphic Inspector icon ( ). 8 Use these settings to fill the shape with a color, gradient, or image. 9 Use these settings to outline the shape. 0 Use these settings to apply a drop shadow. 320 Of all the desserts we associate with childhood, cookies, and most important of all, chocolate chip cookies, hold a special place in our hearts. Warm and soft, straight from the oven, nothing else is as comforting. 55 44 33 11 66 ● iWeb inserts the image into the text box. 4 Click Inspector. The Inspector opens. 5 Click the Text Inspector icon ( ). 6 Click Wrap. 1 Click Photos in the media pane. Note: If the media pane is not visible, click Show Media at the bottom of the workspace to display it. ● iWeb displays images from the iPhoto library. 2 Press and hold . 3 Click and drag an image to a text box. Wrap Text Around an Image You can wrap text around an image to fit more content on your page or to associate an image with descriptive text. To wrap text around an image, you insert the image in a text box and then select the alignment settings. Wrap Text Around an Image 77 88 99 00 55 11 44 66 WORKING WITH iWEB ‘09 Editing Web Site Content chapter 17 How do I rotate or flip an object on a page? 1 Click to select an object. 2 Click Inspector. 3 Click the Metrics Inspector icon ( ). 4 Click to rotate the object. ● You can type a degree value from 0 to 359.9 to rotate it precisely. 5 Click to flip the object horizontally. 6 Click to flip the object vertically. ● iWeb aligns the image. ● The text is wrapped to the opposite side. 0 Adjust the space between the image and the text here. 7 Double-click the image to select it. 8 Click Object causes wrap ( changes to ). 9 Click an alignment; this example aligns the image to the left. ● Click here to align the image to the right. 321 322 44 22 33 11 55 iWeb inserts an e-mail button. 5 Click and drag the button to position it. ADD AN E-MAIL BUTTON 1 Select the page to which you want to add an e-mail button. 2 Click Insert. 3 Click Button. 4 Click Email Me. Add an E-mail Button You can add an e-mail button to your page to allow viewers to send you feedback or comments about your site. You can reposition the button to make it fit in with the rest of your page content. Add an E-mail Button . Double-click the shape. A blinking cursor appears in the shape. @ Type to add text inside the shape. Note: To format the text, see “Format Text.” The Inspector opens. 7 Click the Graphic Inspector. A list of shapes appears. 3 Click a shape. iWeb adds the shape to the page. 4 Click and drag the side and corner handles to resize the shape. 5 Click the shape and drag to reposition it. ● . The Inspector opens. 3 Click the Metrics Inspector icon ( ). 4 Type new dimensions here. Note: Image sizes are measured in pixels (px). Pixels are the tiny, solid-color squares that make up digital