The weekend Web site

More Stories in this Series

Relief for overcrowded navigation bars

iWeb’s Blog and Podcast pages let you create multiple entries, which then link off a main page. But when it comes to uploading photos, you have to create individual pages for each batch. If you take a lot of photos, you can easily end up with several dozen Photos pages, all clogging up your site’s navigation menu.

Web designers have long solved this problem by creating submenus—for example, a group of photo pages organized underneath a more general Photos heading. This saves space in the main navigation menu while still giving viewers easy access to all of your individual photos.

Although iWeb doesn’t offer an automatic way of creating submenus, you can do it. One of the easiest ways is to hide your individual Photos pages from the navigation menu and then link to them from a single Photos page. Here’s how:

Step 1: Hide Your Pages Select the first Photos page in iWeb’s Site Organizer, open the Page section of the Inspector pane, and deselect the Include Page In Navigation Menu option. Repeat for each Photos page you want to hide.

Step 2: Create an Index Page Create a new page that will serve as the index page for your different photo collections. (I’ve found that the Modern theme’s About Me page works particularly well for this.) Select the page in the Site Organizer column and rename it Photo Albums. Delete anything on the page that you don’t want to keep.

All Together Now Rather than listing every Photos page in the navigation menu (top), we created a main Photos page with links to hidden pages (bottom).

Step 3: Add Image Links Open the Photos section of the Media Browser and locate a photo that best represents the first Photos page to which you want to link. Drag the image onto your Photo Albums page and resize it appropriately. With the new photo selected, open the Link inspector and select the Enable As A Hyperlink option. In the Link To pop-up menu, select One Of My Pages, and then select the correct Photos page from the Page menu.

Repeat this process for every Photos page to which you want to link.

Make pages download faster

Large graphics, videos, and special effects may look gorgeous on screen, but they come at a cost—namely, long download times. If you have visitors who view your Web site over relatively slow connections (such as dial-up or basic DSL), you can do them a favor by making your site as trim as possible. Here are four easy slimming techniques:

Limit Special Effects Drop shadows and reflections will increase an image’s file size—as will rotating a picture. Use these effects very sparingly, if at all.

Avoid Image Masks When you create a mask to crop your photo, a Web browser must still download the entire image. Instead, crop out unwanted parts in an image editor such as iPhoto before importing the photo into iWeb.

Stick with the Default Font iWeb has an annoying tendency to turn styled text into images. This not only increases your page’s file size, but also creates other problems in browsers. To play it safe, stick with the fonts Apple supplies for each template.

Compress Video Video files tend to be massive. Before you drag a movie into iWeb, make sure you’ve compressed it in iMovie HD.

[ 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 ]

Subscribe to the Apple @ Work Newsletter

Comments