Getting started with iWeb

Step 1: Get Organized

Before you start building your new Web site, take a moment to collect and organize your material.

Collect Your Photos If you have a lot of photos in your iPhoto library, you can save considerable time by placing the images for your Web site into separate iPhoto albums. iWeb supports most graphic file formats, including JPEG, GIF, TIFF, PNG, and even Raw files (which get converted into JPEGs). You may also want to take a moment to give your photos descriptive titles. iWeb uses these titles as the default captions when creating photo galleries.

Trim Movies If you’re planning to place videos on your Web site, take a moment to make sure they are in the correct format. iWeb supports videos saved in the MOV, AVI, and MP4 formats. Just keep in mind that the longer your movie is, the longer it’ll take viewers to download. To compress your movies, open them in iMovie HD, choose Share: QuickTime, and select Web from the Compress Movie For pull-down menu. I was able to trim a 2.8MB file to a paltry 244K.

Step 2: Set up your Web pages

With your media in order, you’re ready to begin. Make sure you’ve installed the latest version of iWeb (version 1.1 at press time).

Choose Your Style When you launch iWeb for the first time, you’ll see a dialog box with style options for your first Web page. Using the scroll bar on the left, select one of iWeb’s 18 template themes. Each theme includes seven different page styles. Some page styles are designed for specific purposes. For example, the Blog page includes technology that archives each post, updates a summary page with the new content, and then syndicates your post for RSS readers (software that monitors blogs for new content—this is how others stay up-to-date with your blog). The downside to this specialization is that you’ll need to make sure you’re using the right page for your type of content.

You can choose any template for your first page. Just keep in mind that once you choose a theme, you can’t switch to a new theme without rebuilding the page from scratch. You can, however, mix and match themes within your Web site—using the Travel theme for your Blog page and the Black theme for your Photos page, for example.

Once you’ve made your page selection, click on the Choose button to add that page to your new Web site.

Rename the Page When you add a new page to your Web site, two things immediately happen: an icon of the page appears in the Site Organizer column, and a link to the page appears at the top of every page in your Web site (see “Site at a Glance”). Visitors will use these links to navigate between the different pages in your Web site. If you’d like to make your navigation buttons a little less generic, double-click on a page name in the Site Organizer and type something different. When you press the return key, the navigation links along the top of your Web pages will update to reflect the new page title.

Site at a Glance Each time you add a new page to your Web site, iWeb adds that page to the Site Organizer (A) and places a link to it (B) at the top of every Web page in your site. To rename these links or change their order, simply adjust the pages in the Site Organizer. (Click image to open full screenshot)

Add More Pages A Web site with just one page isn’t much to look at. In most cases, you’ll want several pages for people to explore. I recommend setting up those pages now. This will help you spot potential trouble before you’ve spent a lot of time customizing individual pages. For example, you may discover that you have too many links cluttering your navigation bar. If so, shorten the titles, or create submenu pages.

To add new pages to your site, click on the plus-sign (+) button beneath the Site Organizer or select File: New Page. Note that the order in which your pages appear in the Site Organizer determines the order of the navigational links at the top of your Web pages. To adjust the link order, simply click on a page in the Site Organizer and drag it to a new position in the page hierarchy.

If you design a page just as you like and then decide that you want to repeat the customized layout for a different page, you can select the page in the Site Organizer and press Command-D to duplicate it.

Hide Pages Want to put your resume online but don’t want your boss to find it? Select the page in the Site Organizer, open the Pages section of the Inspector pane, and then deselect the Include Page In Navigation Menu option. iWeb will still publish the page, but the page won’t show up in the navigation menu. If you publish via .Mac, you can password-protect the page for additional security.

Step 3: Add text to pages

With your pages in order, you’re ready to start customizing. iWeb’s page templates include blocks of placeholder text. To replace that text with your own, just click in the text area and start typing (you can also copy and paste text from a Microsoft Word document or another text editor).

To add a new text block, click on the Text button at the bottom of iWeb’s window. An empty text box appears in the center of the page. To move the box somewhere else, click on it and drag it to a new location. To alter its size or shape, drag one of its selection handles (the white squares around the edges of the box) to the desired position.

Customize Text Styles To change text formatting or color, open the Inspector pane and click on the Text tab. To choose a different font style or size, click on the Fonts icon at the bottom of the iWeb window.

Getting a block of text styled just the way you like can take a bit of time. Luckily, once you’ve found the right look, you can quickly apply that style to other text on your site. Simply select the text block and choose Format: Copy Graphic Style (this option copies the style but not the actual text). Then select another text box and choose Format: Paste Graphic Style.

Check Your Spelling Once you’ve finished adding text to your site, take a moment to check your work. Go to Edit: Spelling: Spelling to check for misspelled words. If iWeb doesn’t recognize a correctly spelled word, it will identify it as an error. In that case, click on the Learn button to add the word to iWeb’s dictionary. The next time that word comes up, iWeb will recognize it and skip right on past.

Step 4: Add photos

In addition to providing fake text, iWeb’s templates also include placeholder photos, which you can replace with your own. But don’t feel confined by these placeholders—you can put images anywhere you want on the page.

Import Photos You can access photos in iWeb via the Media Browser’s Photos pane (View: Show Media Browser). The browser displays your entire iPhoto library, as well as any albums you’ve set up. You can also add photos stored in a folder outside iPhoto by dragging the folder from the Finder to the Media Browser’s Photos section.

To add an image to your page, drag it from the browser to the appropriate spot. If you drag an image on top of an existing image, iWeb replaces the old image with the new one. You can also drag photos directly to iWeb from a Finder window.

Resize It To resize an image, select it and then drag one of the white selection handles to the desired size. By default, iWeb will maintain the image’s proportions. For more-precise results, open the Inspector pane, click on the Metrics tab, and adjust the Width or Height settings. But keep in mind that larger images take longer to download in a Web browser.

Customize It To add images to your iWeb page, drag them from the Media Browser (A). To add effects to your photos, use the Inspector pane’s Graphic tab (B). When working on a Photos page, you can select a new photo frame (C) by making a selection in the Style menu (D). (Click image to open full screenshot)

Rotate You can place an image at an angle by holding down the Command key as you drag one of the image’s corners into position (or by using the Rotate dial in the Metrics tab). To rotate it quickly in 45-degree increments, press Command-shift as you drag one of the corners.

Masking Dos and Don’ts If you don’t want to show an entire photo, you can crop it within iWeb by creating an image mask. Click on the photo, go to Format: Mask, and then adjust the handles at the edges to exclude the parts you don’t want.

However, I don’t recommend using this feature very often. iWeb still uploads the full image file—even though only a small fraction of it appears on your page. As a result, it can take quite a while for that image to appear in a Web browser. If you want to use only a portion of an image, you’re better off cropping it in iPhoto or another image editor before placing it in iWeb.

If you replace a template image with one of your own but discover that only a fraction of your image appears, the problem likely lies in its mask. To reposition the new image in the frame, select it and go to Format: Unmask. You can then either create a new mask or resize the image so it better fits the space.

Add Other Effects Using the Inspector pane’s Graphic tab, you can also change the image’s opacity, add a drop shadow, or create a reflection. But each of these features will increase the image’s file size (and its download time). This is because iWeb publishes these images as PNG files, which tend to be much larger than JPEG files. To keep your download times manageable, use these effects sparingly.

Step 5: Import movies and podcasts

To add a video file to your Web page, open the Media Browser and click on the Movies tab. If you have movies stored in another location on your hard drive, drag the folder into the Media Browser pane to add it to the list. Once you’ve imported a movie file, you can resize it just as you would a photo. If you haven’t already optimized the video files for the Web, open the movies in iMovie HD and choose Share: iWeb. iMovie will compress the video and place it in a new Movie page.

For a podcast you’ve created in GarageBand, open the podcast in GarageBand and select Share: iWeb to import it into a Blog or Podcast page you’ve already set up on your site.

If you’re publishing to .Mac, you can add support for comments to Blog and Podcast pages. Select the main Blog or Podcast page in the Site Organizer, open the RSS tab of the Inspector pane, and enable the Allow Comments option.

Unfortunately, iWeb doesn’t support commenting on sites that are published outside of .Mac. But you can add this feature with the aid of iComment.

Building Connections Use the Link inspector to turn a phrase or an image into a hyperlink.

Step 6: Create links

By now, you should have most of your Web site’s contents in place. You don’t need to worry about linking the individual pages. iWeb takes care of that for you—unless, of course, you’ve chosen to leave certain pages off the navigation menu. But if you want to link pages to the outside world, you’ll need to add your own links.

In iWeb, you can add a link to an image, to words, or to any other element on your Web page. To add a link, select the text or page item and then open the Link section of the Inspector pane. Click on the check box next to Enable As A Hyperlink, and then use the Link pop-up menu to select the type of link you want (see “Building Connections”). You have four options:

One of My Pages This option lets you link to another page in your iWeb site. It’s useful if you want to link to a page that doesn’t appear in your main navigation bar.

An External Page This option lets you type in the URL for another Web site. Unfortunately, if someone clicks on one of these links, that page loads in the current browser window rather than in a new window or tab. If you have the time and are familiar with HTML, you can fix this oversight by opening the finished HTML files that iWeb creates and adding the text

target="_blank"

<a href>

<a href="http://www.example.com" target="_blank">

A File This option lets you create a link that other people can click on to download a selected file, such as a PDF or a Microsoft Word document. The file then gets uploaded to your iWeb site along with the rest of the pages and images.

An E-mail Message This option creates a link that lets someone send you an e-mail message. You can specify the e-mail address and the message’s subject line. Then, using your e-mail application, you can set up a rule that looks for incoming messages with that subject line and filters them to a special folder. But keep in mind that publishing your e-mail address on your Web site may be an invitation to spam.

Tip: If you have a URL open in Safari, you can save time simply by dragging it from Safari’s address field onto an iWeb page. iWeb adds the Web page’s name as text and inserts the appropri-ate link.

Step 7: Test your site

Before you spend time uploading your site to your .Mac account or to another server, make sure that all of your links work correctly and that every-thing looks good in the Web browser. Although iWeb doesn’t offer an option for testing your site prior to publishing, there is a way around this problem—publish the file to a local folder on your hard drive.

In iWeb, go to File: Publish To A Folder. In the resulting dialog box, click on the New Folder button, type in a name for the folder, and then click on Choose. iWeb creates the folder inside your Sites folder, and then places the files for your finished Web site within it. When it’s done, iWeb pops up a dialog box that gives you the option to visit your new Web site. Click on the Visit Site Now button to open your Web pages in Safari. Navigate through your Web site, checking for any broken links. If everything looks OK, you’re ready to publish. If not, make the corrections in iWeb before continuing. Once you’re satisfied with your Web site, drag this test site to the Trash to free up space on your hard drive.

Step 8: Publish your site

iWeb gives you two options for publishing your site: to .Mac (which requires an annual $99 membership) or to a folder, which you can then upload to the Web server of your choice.

To .Mac To publish your iWeb site to .Mac, either click on the Publish button in the bottom left corner of iWeb’s window, or choose File: Publish To .Mac.

To a Folder If you don’t have a .Mac account, you can still use iWeb to create a site. You just need a Web server to which you can upload your files. Many Internet service providers (ISPs)—Comcast, for example—provide Web space as part of their service contract (check with your ISP to find out how much Web space you have and where you upload the files). To publish your site, go to File: Publish To A Folder. When iWeb is done, upload that folder to the correct directory on the Web server. In most cases, you should be able to mount your ISP’s network server on your desktop and then just drag the Web folder to your ISP’s Web space.

Updating Your Site Once you publish your site, you’ll notice that the page icons in iWeb’s Site Organizer switch from red to blue. This is iWeb’s way of telling you it has published these pages to the Web. If you add a new page or edit a page after publishing, those pages appear in red. This is an easy way to tell which pages have changed and need to be published again as you update and maintain your site.

A work in progress

Getting your new Web site up and running should take only a day or two, depending on how ambitious you are with movies and podcasts. But don’t rest on your laurels for too long. To keep visitors interested, you’ll want to update your site regularly with new content. Once you have the basic structure set up, adding blogs, new photos, and other pages should be easy.

[ Chuck Toporek, a senior editor with O’Reilly Media, is the author of Mac OS X Tiger Pocket Guide (O’Reilly Media, 2005) and Inside .Mac (O’Reilly Media, 2004). Photographs by Peter Belanger ]