Customizing a Web Photo Gallery

A Web site produced by the Photoshop Web Photo Gallery command is just like any other Web site. It consists of HTML pages and images. This means that you can change the look of a finished Web Photo Gallery site by modifying the image files in Photoshop or editing the HTML code in a site-building program. Here are some ideas for making changes to the gallery site you built in the last project, Gallery Site with Viewer Feedback. We used Dreamweaver in these examples, but you can do the same using GoLive or any site-building program. Use these ideas as a starting point for customizing your own site.

INSIGHT

Web Photo Gallery Tokens. You can also modify Web Photo Gallery templates to create a new, reusable gallery style. Frankly, this is not something we often do, because it requires too much hands-on coding for our tastes, using a token system proprietary to Photoshop along with HTML. If you're interested in learning more, take a look at the topic Creating New Web Photo Gallery Styles in the Photoshop Help files.

Add a Background Image

Find the folder that contains all of the HTML and image files Photoshop made for you in the last project. This is the root folder of your Web Photo Gallery site. Take one of the background patterns we showed you how to make earlier in this chapter in the section on Web Pattern Recipes (we used the diagonal pattern bg.gif) and put it into the Images folder A inside your Web Photo Gallery root folder. In Dreamweaver, open the index.htm page from that root folder. Choose Modify>Page Properties from Dreamweaver's main menu bar. In the Page Properties dialog box, click the Browse button next to the Background Image field B, navigate to the file bg.gif in your root folder, and click OK. Then resave the index.htm page into the root folder. Open index.htm in a Web browser to see the repeating striped background.

Change Navigation Graphics

The inner pages of the Web Photo Gallery site you made in the last project are located in the pages folder A inside that site's root folder. Open one of those inner pages- butterfly.htm in Dreamweaver. Use Dreamweaver's split view to see the page design and its HTML code. Click on the three pieces of the navigation bar in the design B to see the names of those graphics in the code view C. (Hint: popClosed.gif, popClosedFeed.gif, and popClosedImage.gif.) Now that you know the names of these navigation graphics, open each one from the root folder into Photoshop, change them as you like, and resave them as GIFs back into the pages folder in the root folder. The images will change on each page in the site, because these graphics are used on every page. Open index.htm in a Web browser to see your site with its new buttons.