PI7 Web Album

Making a web album is easier than ever in PI7. Choose from preset framed layouts, add midi music, and customize the look of your web pages, including using your own backgrounds, text and link colors. You can create an HTML web album, or a self-extracting .EXE web album that you can put on a CD to share with others.

You can also send an .EXE web album as an email attachment, but due to concerns about viruses, make sure you contact the person you're sending it to first to make sure they are willing to open it. (View tutorial web album)

First you need some photos or other images you want to use in the album. I'm going to use 5 photos of my Welsh Terrier, Pepper, to make the web album for this tutorial. All of the photos for the album must be in the same "source folder." To make life easier on yourself, make a new folder on your hard drive to hold the final web album images and pages. Name the folder "webalbum" or something like that so you'll be able to find it later.

You don't even need to have an image open in the work space to create your web album. Choose File, Export, Web Album to open the Select Image dialog box.

select image dialog box

Click the Browse button to browse to and select the source folder. Under Type, you can leave the default of all image types selected. Alternatively, if you'd prefer to only select JPG's, BMP's or some other file type for the album, select a specific file type from the dropdown list. If you wish to include images in subfolders, leave the default of "Include all subfolders" selected. Click OK.

Doing so opens up the Export to Web Album dialog box. By default the Output tab will be selected. Under Output Options, click the Output Folder's Browse button. this opens up the Browse for Folder dialog box. Browse to and select the new "webalbum" folder you just made on your hard drive. It's empty now, but the album will fill it up shortly.

browse to output folder

Click OK to return to the Output tab in the Export to Web Album dialog box. The selected folder will appear under "Output Folder." Leave the defaults of "Save as Web pages" and "Launch default browser to view pages when finished" selected.

output tab

Note carefully that the default File Name is index.html. Caution: If you are going to put this album on your server's main directory, index.html will overwrite your home page! Give the page another name, like album.html if you aren't sure about this. If you are putting the web album into a new folder (directory) other than your main directory on your server, then you don't have to worry about renaming the file.

Note that if you click the Reorder button, the Web Album Reorder dialog box will open. You can resize the thumbnails or drag thumbnails around to reorder them from this dialog box.

Click the Page Setup tab to select or deselect Heading and Footer text, page numbers and a method for linking pages (buttons, text or numbers). Click Format next to the Heading and Footing boxes to format the text. You can change the font, font size and color, alignment, etc. Click OK when you're done formatting text.

format heading and footer text

At the bottom of the Page Setup tab click Advanced to open the Advanced Page Settings dialog box. From here, edit page color or use a web page background, edit text and link colors and add a midi music, file if you wish.

edit web page properties

Click OK to close the Advanced Page Settings. Your Export to Web Album's Page Setup tab will look something like this.

page setup tab

Click the Thumbnails tab to select a page layout. The default layout is unframed. If you want to have a framed layout, select "Show thumbnail in frame" and choose one of the layouts. I've selected a framed layout that has thumbnails on the left and the full size image on the right.

choose layout and other features

Other options such as background color or image, column and row layout, thumbnail size (I've made mine 80X80 pixels so they're a bit bigger than the default size), indx numbers and borders. Select values for these attributes or leave them at the defaults.

Click the Image tab next to control how large the displayed image will appear, JPG compression level and whether or not you want a border around the full size images.

Image options

It's a good idea to leave "Limit image viewing size" selected and set to a specific width and height. That way few people will have to scroll horizontally to see very large images. It's up to you whether or not you want to leave "Resize image" selected. I don't like it because every image will be resized to the maximum width and height if you leave it selected. Some of my images are smaller than others, and not all of them have the same width-to-height ratio, so I've deselected this option. A JPG compression of 90% sounds reasonable to me. I've elected to add a 1 pixel border around the full size images.

Click the Description tab next to control what identifying text information appears with the full size images.

file information displayed here

File name and File size are selected by default. I don't much care about displaying File size or the other options, so I have selected only File name in the "Select fields to display" section. To format that text, click the Format button. Select a text thumbnail layout from the options at the bottom of the box.

Now that you've selected all the attributes for the web album, click Preview to take a look at it in your default browser. Check to be sure that the correct images have been selected, that the music plays (if you added a midi file), that the images aren't over-compressed and that it all plays smoothly. After you preview, close your browser to return to the work space. If you noted any problems while viewing the web album, fix them now by selecting the appropriate tab and options.

To save the web album to the output folder, click OK. This will close the Export to Web Album dialog box and open your browser so you can view the album. Close your browser when you're done looking at the album.

PI7 creates web pages in the main directory or folder to which you saved it on the hard drive, including web pages for the background sound (bgSound.html), the frames pages and the navigation buttons (if you chose that option). Also created automatically for you are four folders: BgMuisc (spelled wrong), Images, page and Thumbs. If you explore the webalbum folder in My Computer, you'll see a file structure like this.

file structure for web album

The BgMuisc folder has the midi file in it. Images contains the images for the album. The page folder contains HTML pages named for the images, e.g., image1.html, image2.html, etc. The Thumbs folder contains the thumbnails PI7 generated for their corresponding images. Thumbnails are named for the image names like this, tn_imagename.jpg.

When you upload the web album files, you must mirror this file structure on your server. Namely, you will put the bgSound.html and index.html pages into the desired directory. You must make on your server, within this directory, folders called BgMuisc, Images, page and Thumbs. Then upload the images and HTML pages in each of the folders on your hard drive to the corresponding folders on your server. This is very important. If you don't get everything into the correct folders on your server, the web album will not work.

View the web album created in this tutorial.

This tutorial uploaded 11/30/01

Do not duplicate, translate, copy, archive, appropriate or redistribute this document.



Back to Homepage