My first blog, showing the process of learning to research, design and build a website.

Making Image Galleries in Dreamweaver

There are a few different ways to make image galleries using Dreamweaver. The options are a gallery that scrolls either down (verticle) or across (horizontal), or a overlay & lightbox.

Horizontal

To make a horizontal image gallery I need to make a long image in Photoshop which I can place my images into and then this will be able to be scrolled through horizontally. So I have made a blank white document in Photoshop that is 400 pixels in height (a good size to work with) and to give myself plenty of space to work in I have made it 3000 pixels wide. I have chosen a body of my work which is of abandonded shallets to put in this gallery. So I open them all in Photoshop, but they all need to be made the roght size as they are currently 100MB each in size. So I go to Image>Image size> then go to width/height and put in 400 pixels. As these images are all square I know they don’t need cropping. So the two screen shots below show the ‘before’ and ‘after’ image resizing:

Although the new smaller size looks tiny, I know it will be the size I want as I made it 400 pixels, I am now going to move it into my blank document. So I do CMD + A, CMD + C then go into my blank docuemnt and CMD + V (paste). Now I need to reposition the image. So I press CMD + T (free transform), now I can move the image and resize it if I need to. I do this process to all 3 images and display them how I want them to look in my final gallery, see below:

So now that my 3 images are in place I can see my white background is too big, so I go to Image>image size, this allows me to crop off all the white area I do not need. See the screen shot below:
So I use the Anchor to choose that I am taking the right hand side of the canvas off, so change the Width from 3000 pixels to 1300 pixels and press OK. Now I need to save this image for the web by going to File>save for web and going through the SEO procedures to make the image a jpeg the right size for the web. I put the jpeg in a folder that I will open into Dreamweaver.

So I now have my image ready for Dreamweaver, so go to Site>new site and choose this folder holding my image for the gallery. I need two pages to make a horizontal gallery, the first page is my actual ‘gallery’ page, this must have the usual header and footer. The second page I open is completly blank, I put my jpeg into the completly blank page. Then in the other page I place the cursor where I want the gallery to go, and I need to make a Iframe. The code is:

iFrame code:

So I place the cursor and go to ‘code’ and paste the iframe code into it.Going back to ‘design’ my page now looks like this:

Now I need to alter the code to fit my image exactly. So in the iframe code I put the name of my page that holds the image where it says “src=”gallery.html” as src=”……..html” then I adjust the width and height accordingly, in the example below I have changed the width to 1400 and height to 400 as this is my image size.

To make a vertical image gallery is a lot easier and quicker than horizontal. To start off with make sure all the images have been correctly sized and saved for web, all saved into one folder. In Dreamweaver do site>new site and then in a new gallery page just drag and drop each image to where the cursor is. This allows space for some text as well. DONE.

Slimbox (pop up)

For this image gallery, it is viewed on the webpage as thumbnails, then if you click on one a ‘lightbox’ comes up on the screen blacking out the screen and leaving just the image to be viewed, this is nice as there no other distractions around the image bring viewed, also text can be added.

To start off, I make sure I have all my images saved as a large file and a thumb nail, sized accordingly. So in Dreamweaver I go through the process of opening a new site and localising the appropriate folder of images etc.

In a page I place the cursor where I want the thumb nails to be and then insert a table, choosing the number of cells I want, then the empty table appears and I drag each thumb nail into a cell. Then using the ‘link’ I link each thumbnail with its large image in the localised box.