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