Tự học iLife - p 34 docx

5 Click and drag the slider to select the size of the frame.. USE IMAGE HANDLES 1 Click to select an image.. You can control the size of your image, as well its position on the page, u

5 4

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 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.”

LARGE

2

3

1

● 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.

3 4

2 1

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

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.

3

2 1

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.

4

1 3

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 )

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

5 4 2

6

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.

9 0

! 7

@

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

! 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

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.

5

4

3

1

6

● 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.

8

9

0

1

6

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

● 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

2

3 1

5

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.