Chapter 16: Setting Up a Web Site

Understanding the iWeb Workspace

iWeb enables you to create full-featured Web sites that you can publish online. You start with templates for common Web page types — such as Welcome pages, photo galleries, and blog pages — and fill in your own text and media to make the site your own. You construct pages using visual tools and without having to write HTML code. Before starting an iWeb project, familiarize yourself with the program workspace.

Sites and Pages

The iWeb sidebar displays a list of the sites you have created. Beneath each site name is a list of the pages in the site. Selecting a site displays publishing settings for the site in the main window. Selecting a page displays the page in the main window and allows you to add to and edit its content.

Adding New Pages

You can click Add Page to add new pages to your Web site, including Welcome and About Me pages, pages that feature photos and movies, and pages for blogs and podcasts. You can use a blank page template to start a page from scratch.

Publishing

You can publish your finished Web site to an Internet service provider via FTP or to your MobileMe account, if you have one.

Themes

iWeb offers dozens of themes to decorate your pages with predefined colors and graphics. There are themes for specific events such as vacations and road trips, colorful kids themes, and a variety of artistic themes. Each time you add a new page, you select a theme.

Editing Buttons

You can click different buttons to add text, shapes, and masks to your pages, rotate content, or adjust color. An Inspector window allows you to make precise adjustments to the dimensions of your page, customize fonts, configure RSS feeds, and more.

Media

You select content to add to your pages in the media pane. You can browse through photos from iPhoto, movies from iMovie, and music from iTunes and GarageBand. You can also add widgets, which are page containers for Google Maps, YouTube movies, iSight movies, and more.

Main Window

The main iWeb window displays your Web pages. You can click inside the window to select and edit text, images, and other page features. You can resize and reposition content containers and change backgrounds to get just the page design you want.

Create a New Site

You can create a new site in iWeb and then add different types of themed pages to it. Your pages can include text, images, multimedia, and more. iWeb allows you to easily maintain multiple Web sites at the same time. You can publish your finished Web sites to your MobileMe account or to your Internet service provider via FTP.

Create a New Site

Start the iWeb program.

The first time you run iWeb, the program prompts you to choose a template to start your site.

• You can also click File and then New Site to create a new site.

Click a theme to choose the style of your template.

Note: For more about themes, see “Change the Theme.”

Click a template to determine the type of page to add.

Click Choose.

iWeb creates a new site with the chosen template as its first page.

• The site is listed in the sidebar.

• The page is listed under the site.

• The page is populated with generic text, images, and other media.

• You can click and drag content from the media pane to add it to the page.

Note: See Chapter 17 for details about adding and editing media.

Double-click the site name.

The site name becomes editable.

Type a new name for the site.

Press .

iWeb renames the site.

You can rename page names similarly.

Where does iWeb store Web sites on my computer?

iWeb stores your sites in a single file called Domain. To find it, open the Library folder in the Finder, then the Application Support Folder, and then the iWeb folder. You can transfer this file to work on your Web sites on another computer. Double-clicking the Domain file on your Mac opens iWeb.

How does my site name relate to its Web address?

If you publish your site to the MobileMe service, MobileMe uses your site name and member name to create the Web address — for example, http://web.me.com/membername/sitename. Keep in mind that if you change the name of a site published to MobileMe, your site Web address changes and external links to your site will no longer work. See Chapter 19 for more about publishing a site.

Create a New Page

You can add a new page to your iWeb site to publish new content. iWeb offers a variety of page templates for publishing text, photo galleries, blogs, and more. You can select graphics and colors for your page by choosing a theme.

Create a New Page

Click to select the site to which you want to add a page.

Click Add Page.

The template dialog appears.

Click a theme to determine the style of your template.

The pages of a site can have the same or different themes.

Note: For more information about themes, see “Change the Theme.”

Click a template to determine the type of page to add.

• You can select a Blank template to start designing your page from scratch.

Click Choose.

iWeb adds the page to your site.

• The page is listed under the site name in the sidebar.

• The page content appears here.

Note: See Chapter 17 for details about adding and editing page content.

Click Inspector.

The Inspector window appears.

Click the Page Inspector icon ().

iWeb lists the page settings.

Type a name for the page.

• This name appears in site navigation links.

Note: See “Control Navigation on a Page” for more about navigation.

Click to close the Inspector.

How do I duplicate a page?

You can duplicate a page to create a new page based on the design of an existing one.

Click a page in the sidebar.

Click Edit.

Click Duplicate.

iWeb duplicates the page and lists the copy in the sidebar.

Note: You can share pages between sites by clicking and dragging the pages in the sidebar.

Change the Theme

You can change the theme of the page to make it suit its subject matter. iWeb offers two minimalist themes, titled White and Black, as well as dozens of other themes that include attractive color schemes and decorative graphics. Pages within a site can have the same or different themes.

Change the Theme

Select the page whose theme you want to change.

Click Theme.

A pane of themes appears.

Click a theme.

iWeb updates the page with the new theme.

Content on the page may rearrange, depending on the chosen theme.

Control Navigation on a Page

You can hide or display navigation links on a page. Navigation links connect a page with other pages in the same site. You can also set whether a page is included in the navigation links.

Control Navigation on a Page

Select the page whose navigation you want to change.

• Navigation links typically appear near the top of the page.

Click Inspector.

The Inspector window appears.

Click the Page Inspector icon ().

iWeb lists the page settings.

New pages have navigation turned on and are included in the site navigation.

• Click here to not display the page in the navigation links ( changes to ).

• Click here to hide navigation on a page ( changes to ).

Click to close the Inspector.

Change Page Dimensions

You can change the dimensions of your iWeb page and adjust the padding that surrounds it. You can also change the height of the header and footer, if the page has them. Changing dimensions can be useful if you want to accommodate viewers with different monitor resolutions.

Change Page Dimensions

Select the page whose dimensions you want to change.

Click Inspector.

The Inspector window appears.

Click the Page Inspector icon ().

Click Layout.

Note: Some layout settings may not apply to certain themes.

Edit the value or click the arrows to change the padding above and below the page content.

• iWeb adjusts the padding.

Edit the values or click the arrows to change the width and height of the page content box.

• iWeb adjusts the width and height.

Edit the value or click the arrows to change the height of the header.

• iWeb adjusts the header.

Edit the value or click the arrows to change the height of the footer.

iWeb adjusts the footer.

Click to close the Inspector.

What does px in the page measurements stand for?

The abbreviation px stands for pixels. Pixels are the tiny, solid-color elements that make up the images on a computer screen. Images and other objects on a Web page are often measured in pixels.

How do I show or hide the media pane?

The media pane on the right side of the workspace displays images, movies, and other content that you can add to your pages. You can hide it to make more room for displaying your pages. Click and then click Hide Media from the menu that appears. After hiding the pane, you can click Show Media to display it again.

Change the Background

You can change the background of a page to give it a vibrant or subdued appearance. You can set the background as a color, a gradient, an image, or nothing at all. Most iWeb page themes feature two backgrounds: the page background on which the content appears and what iWeb calls the browser background, which shows under the page background.

Change the Background

Select the page whose background you want to change.

Click Inspector.

The Inspector window appears.

Click the Page Inspector icon ().

Click Layout.

Click here to select a page background type.

• For image fills, click to select background options.

You can tile or stretch a small image to fill a larger background.

• The page background changes.

For page backgrounds, you can also select Gradient Fill or None for the fill type.

Click here to select a browser background type.

For color fills, click here to select a color.

The Colors dialog appears.

Click a color.

• The browser background changes.

Click to close the Colors dialog.

Click to close the Inspector.

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:

Select Tinted Image Fill for the page background.

• You can click Choose to change the background image.

Click the tint color icon.

The Colors dialog opens.

Click to select a color.

Click and drag the slider to adjust the opacity. Dragging left makes the color more transparent and dragging right makes it more opaque.

Click to close the Colors dialog.