Sandra Smith-Gordon's Basic Instructions for Dreamweaver

Galleries

home | dictionary | instructions pages list

Both Fireworks and Photoshop will make galleries of images to use on your web pages.

 

In order to make a gallery you need to prepare your images first. See optimising images page.  A gallery will show thumbnails and separate images. It is these separate images that need to be prepared.  Making the gallery will create thumbnails and put them in a table on a new index page, make separate pages for each image and put in links to go from one to another.  The images do not have to be all the same size, making the gallery will make the thumbnails the same size.

 

Keep your prepared images in a separate folder with no others, perhaps called gallery originals. 

Consider the number of images if you are going to have a table with rows and columns, rather than a single row or column.  The table will look better if it has all the cells filled.

(For example 26 images do not fit in a 6 x 4 table nor a 5 x 5 one, only 2 x 13.)

 

Note: it is worth practising making galleries in both FW and PS with just a few images as they are very quick to make and you can experiment with the possibilities before making a finished gallery for your web page.

 

See also the instructions page for making your own gallery.  I suggest you make one using FW or PS first to see the advantages and disadvantages of each  method.

 

Make a Gallery in Fireworks:

Fireworks makes simple galleries, presented in tables, that can be edited.  DW calls it a web photo album.

See FW demonstration gallery:

This is a small gallery to show what FW will make.  As the gallery is presented in a table it can be re-formatted easily.  If you format one page you can cut and paste the code (changing the titles and links) to make each page have the same layout and appearance.  In the demonstration gallery I have put in some table borders so you can see where the tables are on different pages, though tables might look better without the borders.

 

To make your gallery:

First make a new folder in DW – this will contain the gallery so name it suitably. 

Start in DW (not FW) and make a new file (you do not have to name it as it will not actually be used to save anything.) 

 

Go to: commands → create web photo album. A menu box appears – complete title – this shows on banner; subheading, etc then complete source and destination boxes (browse to folder containing pictures and to new folder.)

 

Choose the number of columns, depending on what layout you want. 

Thumbnail format: smaller file is OK ( eg jpeg smaller, is quicker);

Photo format: you can choose better quality, scale etc.

When ready click OK.

FW makes the gallery which appears on the DW page.  

 

Notice that you now have many new folders and files in your gallery folder:

Images: clicking one of these will take you to it in Fireworks

Pages: clicking on one of these will take you to a new DW page with the image, links, and headings - these are editable.

Thumbnails: clicking one of these will take you to the thumbnail in Fireworks.

Index: this is the first page of your gallery and holds the table of thumbnails.

Untitled: this is probably the blank page you started with (see above) it is no longer needed and can be deleted.

FW puts in links.

 

Decide if you are happy with the content:

This is the time to decide whether you like the content of you gallery and the numbers of rows and columns on the index page. It is quicker to make a new gallery now rather than after you have edited the pages, as these have to be done separately.

 

To edit the Index page

You can edit this as you would any other page or table: Delete or add words, add a background, etc.  Do not try to swap the images from one cell to another as this causes problems with the links.

 

To edit the separate pages:

The images will be placed at the top left of the page.  You can centre the table, delete or add words, even add more columns or rows to contain further information, etc.

 

 

Make a gallery in Photoshop

PS makes a range of standard galleries that cannot be tweaked as much. Start in the same way as above: have your images ready in a folder and have a new empty folder to contain your gallery inside your site.


In Photoshop (not DW): file → automate → web photo gallery, from menu choose a style; fill in source of images and destination of images as before. 

 

In options menu there are several choices - click on each in turn to access their attributes.

 

Click OK when ready: The gallery appears in DW with similar files to FW. Note that the thumbnails appear on each page - but only on the index page when in DW: Preview to see them on other pages. PS uses the thumbnails as links to other pages.

 

You can alter the width, wording and fonts, background, add wording, etc but not alter the general layout of the page.

See the PS demonstration gallery. This shows the unaltered PS gallery with vertical thumbnails. The index page also shows the first image in larger format.

 

|