9.2. Publishing Photos on the Web
Putting your photos on the Web is the ultimate way to share them with the world. If the idea of enabling the vast throngs of the Internet-using public to browse, view, download, save, and print your photos sounds appealing, read on. It's amazingly easy to get your photos from iPhoto to the Internet.
9.2.1. Three Roads to Webdom
iPhoto actually provides three different Web- publishing routes.
All of these
9.2.2. Method 1: Use iWeb
Web publishing doesn't get any easier than it is with iWeb. Your photos end up on a handsome-looking Web page in just a few quick stepsand you don't have to know the first thing about HTML.
Figure 9-2. You'd be nuts to stuff your
UP TO SPEED
Getting a .Mac Account
.Mac, Apple's subscription online service, provides everything you need to put a collection of your photos onlineand on your network. Unfortunately, the service isn't free (as it was when it was called iTools and didn't include as many features). A .Mac membership will set you back $100 per year.
The good news is that Mac OS X makes it incredibly easy to sign up for an account, and a two-month trial account is free. (There are a few limitations on the trial account; it grants you 20 MB of iDisk space instead of 125 MB, for example.) If you don't already have an account, here's how you get one:
Choose System Preferences. When you click the Internet icon, the .Mac tab is staring you in the face. Click Sign Up.
Now you go online, where your Web browser opens up to the .Mac sign-up screen. Fill in your name and address, make up an account
You're also asked to make up a question and answer (such as, "First grade teacher's name?" and "Flanders"). If you ever forget your password, the .Mac software will help youprovided you can answer this question correctly. Click Continue.
An account summary screen now appears; print it or save it. On the
The final step is to return to the Internet pane of System Preferences. On the .Mac tab, fill in the account name and password you just
After a moment, iWeb appears.
Choose a background design, either black or white .
The window immediately displays a mock-up of your finished Web page (Figure 9-3), displaying the thumbnails in whatever order they appeared in iPhoto.
Edit the page title,
If you don't bother changing the photo
Edit the design of the photo grid, if you like .
Click the Inspector button at the bottom of the window. As shown in Figure 9-3, clicking its fifth tab opens up a palette of photo-grid options. You can control whether it's a two- or three-column grid, how tall the caption boxes are, whether you want an outline around the grid, and so on.
Click the Publish button (shown at lower left in Figure 9-3) .
This is the big moment: iPhoto connects to the .Mac Web site,
When the uploading process is complete, as indicated by the alert dialog box (Figure 9-4, bottom), you can go to the page and see your results.
If you include larger photos in your Web page, iPhoto automatically scales them down to reasonably
When you see what you've created with iWeb, you'll be impressed: It's a professional-looking, stylishly titled Web page with thumbnails neatly arranged in a grid. Clicking a thumbnail opens an enlarged version of the picture in its own window; clicking the Start Slideshow button creates a full-window, beautiful slideshow complete with Previous and Next buttons and, when the cursor moves to the top of the window, even a little thumbnail browser (Figure 9-2). You can return to your main index page at any time by closing the slideshow window.
Within iWeb, make your changes (delete photos or add them using the Media Browser, rearrange them, rename them, and so on) and then click the Publish button again at the bottom of the screen. iWeb sets about updating the gallery online.
To delete a photo-gallery page, click its name in iWeb's left-side panel (the Site Organizer) and press the Delete key. Then click Publish at the bottom of the window (meaning, "OK, make the online version of my site match what I now have in iWeb").
Deleting a photo page like this also deletes all of the online photo files, which
Although using iWeb is incredibly simple, it entails a lot of sitting and waiting for the program to compute and upload things. You don't have much freedom of design, either: it's black or white, and that's it. HTML aficionados complain, too, that iWeb's behind-the-scenes HTML code is bloated and a tad unorthodox.
Fortunately, there's another way to go about creating, editing, and managing your photo galleries online: visit your .Mac Web site (Figure 9-5). The advantage here is that you can make changes to your photo gallery even when you're far from home, using any Web-connected computer. As a bonus, Apple offers templates that lets you use your photos in Web pages that aren't photo-gallery designsthere's a nice baby announcement page, for example.
FREQUENTLY ASKED QUESTION
Where Did All the Photos Go?
When iWeb transfers my photos to the .Mac Web site, where are they going ?
Everything gets stored on your iDisk, the virtual disk that comes with your .Mac account. (Your iDisk looks and behaves like a
The HTML pages generated by iWeb automatically go in the Web Sites iWeb folder on your iDisk. (In fact, if you know how to use a Web page creation program like Dreamweaver, you can make changes to your Web pages by editing these documents.)
To get started with HomePage, you first must copy the photos you want to publish from iPhoto to the Pictures folder of your iDiskin fact, into a new folder in the Pictures folder, one folder per Web page. (If your iDisk isn't already onscreen, just choose Go iDisk My iDisk in the Finder, so that its icon appears on your desktop.) You can drag thumbnails directly out of iPhoto and into the Pictures folder on the iDisk.
Once your photos are in the iDisk's Pictures folder, you're ready to create your Web pages. Go to www.mac.com , sign in, click the HomePage button, then click one of the "Create a page" tabs on the HomePage screen to view the styles of pages you can create. Some of the formatting options available are shown in Figure 9-6.
The first tab, Photo Album, offers photo-gallery layouts in a far wider range of styles than iWeb offers. But you're free to use your photos in the other Web page designs here, too, like the baby announcements, writing samples, invitations, and so on.
If you choose Photo Album, click the miniature image of the design you want. HomePage next asks which photos folder in your Pictures folder you want to place on your new Web page, as shown in Figure 9-7. Select a folder of pictures, and then click Choose. After a few moments, your new photo album page appears with photos already inserted in the appropriate spots.
(If you choose any other Web page design, like Baby, the routine is pretty much the same, except that you have to click Edit at the top of the page in order to choose the photos you want.)
To finish the project, click Edit at the top of the page to change the
Finally, click Preview to see how the Web page will look. When everything is just the way you want it, click Publish. The page goes live, as indicated by the confirmation dialog box shown at the bottom of Figure 9-4.
POWER USERS' CLINIC
When you publish your photos using HomePage, the pages you create become accessible to the whole Web-browsing world. Specifically,
If you don't feel comfortable sharing your photos quite so
To password-protect your site, access the screen shown in Figure 9-5. Select the name of your site from the Site list at the left side of the page, and then click the Edit button
After you've turned on password protection, anyone who comes to one of your .Mac-hosted Web pages will be prompted to enter the password (as shown here) before gaining access to your photos.
Corporations and professional Web designers may sniff at the simplicity of the result, but it takes them a lot longer than two minutes to do their thing.
If you already have your own Web site, you don't need .Mac or iWeb to create an online photo album. Instead, you can use iPhoto's Export command to generate HTML pages that you can upload to any Web server. You're still saving a lot of time and effortand you still get a handy, thumbnail gallery page like that shown back in Figure 9-2.
The Web pages you export directly from iPhoto don't include any fancy designs or themed graphics. In fact, they're kind of stark; just take a look at Figure 9-11.
But they offer more flexibility than the pages made with HomePage. For example, you can specify the dimensions of thumbnails and images, and choose exactly how many thumbnails you want included on each page.
This is the best method if you plan to post the pages you create to a Web site of your ownespecially if you plan on
Here are the basic Web exporting steps:
In iPhoto, select the photos you want to include on the Web pages ..
The Export command puts no limit on the number of photos you can export to Web pages in one burst. Select as many photos as you want; iPhoto will generate as many pages as needed to accommodate all the pictures into your specified grid.
Choose File Export, or press Shift- -E .
The Export Photos dialog box now appears.
Click the Web Page tab .
You see the dialog box shown in Figure 9-8.
Set the Page attributes, including the title, grid size, and background .
The title you set here will appear in the title bar of each exported Web page, and as a header in the page itself.
Use the Columns and Rows boxes to specify how many thumbnails you want to appear across and down your "index" page. (The little "1 page" indicator
If you'd like a background page color other than white, click the rectangular swatch next to the word Color, and follow the instructions in Figure 9-9. You can also pick a color for the text that appears on each page by clicking the Text Color swatch.
You can even choose a background picture instead of a solid background color. To make it so, click the Image button, and then the Set button to select the graphics file on your hard drive. Be considerate of your audience, however. A background graphic makes your pages take longer to load, and a busy background pattern can be very distracting.
Specify how big you want the thumbnail images to be, and also specify a size for the expanded images that appear when you click them .
The sizes iPhoto proposes are fine if all of your photos are horizontal (that is, in landscape orientation). If some are wide and some are tall, however, you're better off specifying square dimensions for both the thumbnails and the enlarged photos240 x 240 for the thumbnails and 640 x 640 for the biggies, for example.
Turn on "Show title" and "Show comment," if desired .
This option draws upon the titles you've assigned in iPhoto, centering each picture's name underneath its thumbnail. The larger version of each picture will also bear this name when it opens into its own window.
Turning on the "Show comment" option displays any text you've typed into the Comments field for each picture in iPhoto. Depending on which checkboxes you turn on, you can have the comments appear under each thumbnail, under each larger size image, or both.
Click Export .
The Save dialog box appears.
Choose a folder to hold the export files (or, by clicking New Folder, create one) and then click OK .
The export process gets under way.
When iPhoto is done with the export, you end up with a series of HTML documents and JPEG imagesthe building blocks of your Web-site-to-be. A number of these icons automatically inherit the name of the folder into which you've saved them. If you export the files into a folder named Tahiti, for example, you'll see something like Figure 9-10:
Tahiti.html . This is the main HTML page, containing the first thumbnails in the series that you exported. It's the home page, the index page, and the starting point for the exported pages.
Page1.html, Page2.html You see these only if you exported enough photos to require more than one page of thumbnailsthat is, if iPhoto required multiple "home" pages.
Tahiti-Thumbnails . This folder holds the actual thumbnail graphics that appear on each of the index pages.
. This folder contains the HTML documents (named Image1.html, Image2.html, Image3.html, and so on) that
. This folder
Once you've created these pages, it's up to you to figure out how to post them on the Internet where the world can see them. To do that, you'll have to upload all the exported files to a Web server, using an FTP program like the free RBrowser (available from the "Missing CD" page of www.missingmanuals.com).
Only then do they look like real Web pages, as shown in Figure 9-11.
If you know how to work with HTML code, you don't have to accept the unremarkable Web pages exported by iPhoto. You're free to tear into them with a full-blown Web authoring program like Adobe GoLive, Macromedia Dreamweaver, or the free Netscape Composer (www.netscape.com) to add your own formatting, headers, footers, and other graphics. (Heck, even Microsoft Word lets you open and edit HTML Web pagesplenty of power for changing iPhoto's layout, reformatting the text, or adding your own page elements.)
If you're a hard-
Change font faces and sizes.
Change the alignment of titles.
Add a footer with your contact information and email address.
Add metadata tags (keywords) in the page header , so that search engines can locate and categorize your pages.
Insert links to your other Web sites or relevant sites on the Web.
If you're not an HTML coderor even if you areyou can perform many of these adjustments extremely easily with the BetterHTMLExport plug-in for iPhoto, described next.
iPhoto's Export command produces simple, serviceable Web page versions of your photo albums. Most people assume that if they want anything fancier, they need either HTML programming chops or a dedicated Web design program.
Actually, though, you can add a number of elegant features to your photo site using an
It's the fittingly named BetterHTMLExport, an inexpensive iPhoto plug-in that extends the features of iPhoto's own HTML Exporter. (See Section 13.5 for more on iPhoto plug-ins.)
You can download a copy of BetterHTMLExport from the "Missing CD" page of www.missingmanuals.com, among other places. The version for iPhoto 6 is a $20 shareware program.
Here are some of the great things you can do with BetterHTMLExport:
Add comments (not just titles) on index and image pages.
Insert "Previous" and "Next" links on each individual image page, so that you can jump from picture to picture without returning to the index (thumbnail) page.
Control the JPEG quality/compression setting used to create copies of your photos.
Create links to your original images instead of just JPEG versions of them.
Choose where on the page you want to include navigation
See Figure 9-12 for a quick tour of this