navigation
Thomas Brunt's OutFront Hosting
 
Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

 

FP Techniques > The FrontPage Photo Gallery Part I

The FrontPage Photo Gallery

By Gail Bjork
www.digicamhelp.com

Through the years it seems I have less and less photo albums and shoeboxes of photographs lying around the house. Instead I publish many photos, those scanned or taken with a digital camera, to a website. One of the main benefits of course is that I can easily share my prized collection with others.

FrontPage 2002 contains a new feature called the Photo Gallery which offers a simple and effective way to display images on a webpage. As an avid amateur photographer, I often find the FrontPage Photo Gallery component very suitable for presenting photos. Using it is a breeze once you get the hang of it.

FrontPage lets you easily add and order photos in the Photo Gallery. You can resize and crop them, change their orientation and add captions and descriptions. The program not only automatically creates thumbnail versions of your images, it lets you select any of four different Gallery layouts.

Getting Ready for FrontPage Photo Gallery

While the FrontPage Photo Gallery has some useful image editing capabilities, they are limited. Though not a requirement, I highly recommend you take time to prepare and optimize your images prior to importing into the Gallery. Any image editing software such as Paint Shop Pro, Photoshop, Image Composer or Adobe Elements will do.

Always check how an image will appear on a monitor by viewing it at 100%. Most digital images, if left in their original format, will be very large in file size and look humongous on a computer monitor. So you should scale down their size, which also reduces the file size.

I try to reduce images so they are no larger than 288 x 432 pixels or 432 x 288 pixels (4x6" or 6x4"). I also make other enhancements such as cropping, adjusting brightness and contrast, color correcting, sharpening and compressing. Besides editing to perk up their look, compressing images will let them load more quickly into a web browser.

Preparing a web page for the Photo Gallery

Now that you've prepared your images, the next step is to create a web page in FrontPage into which you will insert the Gallery. You can begin with a blank page or use a template you already created as was done here: http://www.the4cclub.org/gallery.htm.

I usually make a table which serves as a container for the gallery. Specifying the width of the table helps keep the gallery from extending beyond a browser window. I usually center the table and set the width to 90 - 95% or a suitable, fixed pixel size. The goal is to minimize forcing visitors to have to scroll horizontally to see everything on the page. For this very reason, it is also important not put too many thumbnail images horizontally on each row within the gallery. If you are using a CSS layout you could equally use a 'div' of a specified width as a container.

Creating and using the Photo Gallery

Now the fun begins. To create the Gallery, follow these simple steps.

1- Place your insertion point in the table you created for the Gallery.
2- Via the Insert Menu, select Web Component then highlight Photo Gallery in the left hand panel of the Insert Web Component dialog box. Then click Finish.
3- The Photo Properties Dialog box will open. In it you will find two tabs, Pictures and Layout.

The Pictures Tab area:

By clicking on the "Add" button, you can import photos into the Gallery from a scanner, digital camera or from a folder on your hard drive. You may want to select a specific size for the thumbnails before importing images. If so, check "Set as default size." You can change the size of individual thumbnails later however be aware that increasing the size of a thumbnail, or any image for that matter, after it has been saved may decrease overall image quality.

Once images have been imported into the Gallery, you can change their order, resize the thumbnails, and add text. By selecting "override and use custom font formatting" you can change the color, point size and typestyle of fonts for both captions and descriptions.

Clicking on the Edit button will let you scroll through all the large images you've brought into the gallery. You may resize, rotate and crop them but this probably won't be necessary if you previously prepared the images.

The Layout Tab area

Click the layout tab to preview and choose one of four layouts offered in FrontPage: Horizontal, Montage, Slide Show and Vertical. You may also select the "Number of pictures per row" for two of the layouts. As previously mentioned, keep in mind that you don't want too many pictures per row since by doing so causes the Photo Gallery to expand too wide across a computer screen. The size of the thumbnails you select will help serve as a guide to how many you should use per row.

Saving the Gallery for the first time

When you save the gallery the first time, FrontPage will create a directory (folder) in your web called, you guessed it, "photogallery." The photogallery folder contains a sub-folder associated with the Gallery you just created. It contains the thumbnail images and three htm pages: real.htm, real_p.htm and real_x.htm. The first two pages contain the thumbnails images. (note: if you create additional galleries, additional thumbnail sub-folders will be saved in the photogallery folder).

You can save the large images in your Images folder, or create a separate folder to store them in. But DO choose where the large images will be saved otherwise FrontPage places them in the root (main) web folder. If that happens, you will no doubt consider it a mess when you see all those jpegs saved there! Use the Change Folder button in the Save Embedded Files dialog box.

Making changes to the Photo Gallery

Any time you wish to add, delete or make other changes to the Photo Gallery, just open its web page and double click in the gallery area. You can even select a new layout if you wish.

The FrontPage Photo Gallery Part II >>
 


Microsoft Corporation in no way endorses or is affiliated with "OutFront." 
OutFront is published and edited by Thomas Brunt
440 Great Circle Dr., St. Matthews, SC 29135.  803-655-6151
© 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006 All Rights Reserved
Click here to view our privacy statement.