Tự học iLife - p 33 pdf

● A new text box appears in the middle of the page with a blinking cursor inside it.. To duplicate a text box within the same page, click to select it and then press O ption as you click

8 6

7

9 0

WORKING WITH iWEB ’09 Setting Up a Web Site chapter 16

How can I tint a page background image?

You can add a color tint over a page background image to customize the appearance of the image You can also adjust the opacity of the tint:

1 Select Tinted Image Fill for the page

background

● You can click Choose to change the

background image

2 Click the tint color icon

The Colors dialog opens

3 Click to select a color

4 Click and drag the slider to adjust the

opacity Dragging left makes the color more

transparent and dragging right makes it

more opaque

5 Click to close the Colors dialog

6 Click here to select a browser

background type

7 For color fills, click here to select a

color

The Colors dialog appears

8 Click a color

● The browser background changes

9 Click to close the Colors

dialog

0 Click to close the Inspector

4

3 1

5

2

3

2 1

Camer

on, WI

Lucky Cow Dairy is run by seventh-generation dairy farmers who combine the most modern methods with the most humane treatment to produce milk that’s as kind to the cows as it

is to you Every cow wishes it was a ‘Lucky Cow

.’

3 Type to add your text to the text

box

You can also copy and paste text

from another program

You can press to start a

new line

4 Click the border of the text box

1 Select the page to which you want

to add text

2 Click Text Box.

● A new text box appears in the

middle of the page with a blinking

cursor inside it

● To add text to a placeholder text

box in a template, double-click it

to select its text Press Delete to

remove the text and add your

own

Add a Text Box

You can add a text box to your Web page to add

paragraphs, headings, and lists You can adjust

the size and position of the text box to make it

fit in with the rest of the content on your page.

Text Box

Text Box Text Box

WORKING WITH iWEB ‘09 Editing Web Site Content chapter 17

6

5

How do I duplicate a text box?

To duplicate a text box within the same page, click to select it and then press O ption as you click and drag iWeb duplicates the text box To create a duplicate that you can move to another page, select the

text box and click Edit and then Copy View the

How do I move text boxes in and

out of the header and footer?

iWeb pages are divided into

regions, with a header at the top, a

footer at the bottom, and the main

content area in the middle To move a

text box into the footer, press as you

click and drag it To move a text box out of the

6 Click and drag inside the text box

to move the box to another place

on the page

● A yellow box appears displaying

the coordinates of the box on the

page as you drag

You can also press the arrow keys

to change the position of a

selected text box

To delete a text box, click the box

to select it and then press Delete

Handles appear on the sides and

corners of the box

5 Click and drag a handle to resize

the text box

The box resizes

Note: To change the alignment of text inside a

box, see “Align Page Text.”

6

1

3

The Fonts dialog appears

4 Click a font family

5 Click a font typeface

6 Click a size

1 Double-click a text box

2 Click and drag to select the text to

format

3 Click Fonts.

Format Text

You can format text on your page to match the

theme of the site or to emphasize the text You

can change the font color and size as well as how

the text is spaced.

# 0

$

&

8

@

^

WORKING WITH iWEB ‘09 Editing Web Site Content chapter 17

How do I create a bulleted or numbered list of text items on my page?

1 Type the list items in a text box, one item per line, and then click and drag to select them

2 Click Inspector.

3 Click the Text Inspector icon

( )

4 Click List.

5 Click here to select a list type

6 Specify your list settings The settings

7 Click a text color

8 Click a background color for the

text

9 Click to turn a drop shadow

on or off

● You can adjust a drop shadow

here

0 Click to close the Fonts dialog

! Click Inspector.

@ In the Inspector, click the Text

Inspector icon ( )

# Click Text.

iWeb lists the text settings

$ Click and drag the slider to control

character spacing

% Click and drag the slider to control

line spacing

^ Click and drag the sliders to

control paragraph spacing

& Click to close the Inspector

iWeb formats the text

5 4

6 3

ALIGN RIGHT

ALIGN LEFT

1

1

4

2

2

3

5

5 Click a horizontal alignment

You can horizontally align text to the left,

right, or center You can also justify text,

which aligns it to both the left and right

iWeb aligns the text

● In this example, the heading text is

center-aligned

ALIGN TEXT VERTICALLY

1 Click to select the text box whose text you

want to align

2 Click Inspector.

ALIGN TEXT HORIZONTALLY

1 Click to select the text box whose text you

want to align

2 Click Inspector.

The Inspector appears

3 Click the Text Inspector icon ( )

4 Click Text.

Align Page Text

You can control the horizontal or vertical

positioning of text on your page For example,

you can align a bold heading in the center of the

page or top-align several paragraphs beneath

photo.

4 3

5

3 4

1

2 5

WORKING WITH iWEB ‘09 Editing Web Site Content chapter 17

How do I add space around text

in a text box?

You can add space between text and

the text box margin, also known as

padding, by adjusting the inset

margin.

1 Click to select a text box

2 Click Inspector.

The Inspector appears

3 Click the Text Inspector icon ( )

4 Click Text.

5 Click and drag the slider to adjust the

padding

● iWeb adjusts the padding

The Inspector appears

3 Click the Text Inspector icon

( )

4 Click Text.

5 Click a vertical alignment

You can vertically align text to the

top, middle, or bottom of a text

box

iWeb aligns the text

● In this example, the body text is

top-aligned

6 5 4

7

1

2

5 Click Enable as a hyperlink

( changes to )

6 Click here and select One of My

pages.

7 Click the Page and select the

destination page

● iWeb creates a hyperlink

Note: You can also add links to other pages in

your site with page navigation See Chapter 16 for

details.

LINK TO A PAGE IN YOUR SITE

1 Select the text or object you want

to turn into a hyperlink

2 Click Inspector.

The Inspector appears

3 Click the Link Inspector icon

( )

4 Click Hyperlink.

● You can also click Insert,

Hyperlink, and then Web Page.

Add a Hyperlink

You can connect your Web page to another page

by turning text or other objects on the page into

hyperlinks, also known as links Hyperlinked

text on a page is usually distinguished with a

different color and underlining You can create a

link to another page in your site, an external

page on the Web, or an e-mail address.

8 9

! 0

@

WORKING WITH iWEB ‘09 Editing Web Site Content chapter 17

How do I change the color of a hyperlink?

1 In the Link Inspector, click Format.

2 Click a link color for normal links

3 In the Colors dialog, click a color

4 Click colors for other types of links

5 Click to close the Colors dialog

6 Click to turn underlining on and

off on links Underlining is turned on

by default

● iWeb formats the hyperlink

LINK TO AN EXTERNAL PAGE

8 With additional text selected, click here and

select An External Page.

9 Type the Web address for the external page

To get the Web address for a page, you can

view the page in a Web browser and copy the

address from the browser address box

● You can click here to cause the destination

page to be opened in a new browser window

( changes to )

● iWeb creates the hyperlink

CREATE AN E-MAIL LINK

0 With additional text selected, click here and

select An Email Message.

You can also click Insert, Hyperlink, and

then Email Message.

! Type the e-mail address

@ Type an e-mail subject

● iWeb creates the hyperlink

6

5

4

3

Our Baby

3 2

1

4

1 Select the page to which you want

to add an image

2 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

To make more photos available,

you can drag folders containing

images from the Finder to the

media pane

3 Click a list item to display images

from iPhoto For more about

organizing images, see Chapter 4

4 Click and drag an image to an

image placeholder

Placeholders are the generic

content items that appear when

you create a page from a template

● iWeb replaces the placeholder

image

5 Click and drag an image to an

empty area of the page

Add an Image

You can add an image to illustrate a passage of

text or to add decoration to a plain-looking page

You can choose images from your iPhoto library

To easily add a collection of photos as an album

to your Web site, see Chapter 18.