Home :

Incorporating an Adobe Bridge Web Gallery into a Dreamweaver Page

For many years, Dreamweaver has had a feature called Create Web Photo Album. It builds a photo album quickly, but the result is—quite frankly—horrible. The code is ancient and bloated. It deserves to be consigned to the scrapyard. Fortunately, there is a much better solution, although many people have not discovered it, because it's part of Adobe Bridge CS4, which is installed automatically with a default installation of Dreamweaver CS4.

Adobe Bridge is a powerful program that lets you organize your visual assets, such as photographs, illustrations, PDFs, and Flash movies. The Output Module in Bridge also produces an elegant Flash-based web gallery. You don't need Flash installed—Bridge does everything for you.

The problem is that the HTML file created by Bridge displays the photo gallery full screen, leaving many people wondering how to incorporate a Bridge web gallery directly into an existing website. The following pages explain how to do it.

Saving the web gallery to your Dreamweaver website

These instructions assume that you have already created a website and want to incorporate a web gallery into it. If you haven't already done so, define a site in Dreamweaver.

Open Bridge from Dreamweaver by selecting File > Browse in Bridge, or use the keyboard shortcut Ctrl+Alt+O/Opt+Cmd+O (that's capital "O", not zero). Alternatively, open the program directly from the Windows Start menu or the Applications folder on a Mac.
Once Bridge opens, select Output from the Workspace menu or press Ctrl+F5 on Window, or Cmd+F4 on a Mac (note that the F-key is different on the two operating systems).
Follow the instructions in the Bridge Help pages to create a web gallery.
The final stage of creating the gallery involves saving the files to disk or uploading them to your site. In order to incorporate the gallery into an existing site, you need to save the files to your local hard disk so you can edit the main gallery page before transferring all the resources to your remote server.

In the Create Gallery section of the Bridge Output Module, you need to enter the gallery name and the location where the files are to be saved. The value that you enter in the Gallery Name field is used to name the folder where all the gallery files will be saved. So, the value you enter in the Save to Disk field needs to be the parent folder.

For the purposes of this tutorial, I created a site called "Japan Journey" in C:\htdocs\journey on my local hard drive. I wanted to save the web gallery in a folder called kyoto at the top level of the site, so I filled in the final section of the Output Module as shown in the following screenshot.

Note: Folder and file names in websites should never include spaces. It's also good practice to name everything in lowercase, because most web servers are case-sensitive. That's why I have used kyoto (all lowercase) for Gallery Name.
When you're happy with all the settings for your web gallery, click Save. Bridge generates all the resources needed for the gallery.
When Bridge reports that it has completed the gallery, click OK, and switch back to your site in Dreamweaver. You should see a folder has been created using the value you entered as Gallery Name.
Expand the folder in the Files panel. You should see a set of new files and folders similar to the following screenshot.

Everything for your gallery is inside the folder named after the value you entered in the Gallery Name field (in this example, kyoto). The page that displays the gallery is called index.html. This is the page you need to embed into your website.