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.

  1. 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.

  2. 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).

  3. Follow the instructions in the Bridge Help pages to create a web gallery.

  4. 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.

    Output Module dialog box

    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.

  5. When you're happy with all the settings for your web gallery, click Save. Bridge generates all the resources needed for the gallery.

  6. 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.

  7. Expand the folder in the Files panel. You should see a set of new files and folders similar to the following screenshot.

    Gallery resources in the Files panel

    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.


Quick links to other pages of this tutorial

Saving the gallery to your site

Embedding the gallery index page

Editing the gallery index page

Other Tutorials

Programming tutorials

Articles on

Over the years, I have contributed a large number of articles to the Adobe Developer Connection and Community publishing. Most of the articles are now in the Adobe archive because they refer to old versions of Dreamweaver. But the following articles are not Dreamweaver-specific and are still relevant.

Books & Videos by David Powers

PHP SolutionsBeginning CSS3Dreamweaver CS6: Learn by VideoDreamweaver CS5.5: Learn by VideoDreamweaver CS5.5 for MobileDreamweaver CS5 with PHP