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:alice volk av photo photographer web design image gallery gallerys abandoned challets camber sands holidays derelict vignette black white contemporary photography photographer east sussex

alice volk av photo photographer web design image gallery gallerys abandoned challets camber sands holidays derelict vignette black white contemporary photography photographer east sussex dreamweaver

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:alice volk av photo photographer web design image gallery gallerys abandoned challets camber sands holidays derelict vignette black white contemporary photography photographer east sussex

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:alice volk av photo photographer web design image gallery gallerys abandoned challets camber sands holidays derelict vignette black white contemporary photography photographer east sussex
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:alice volk av photo photographer web design image gallery gallerys abandoned challets camber sands holidays derelict vignette black white contemporary photography photographer east sussex dreamweaver

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.

alice volk av photo photographer web design image gallery gallerys abandoned challets camber sands holidays derelict vignette black white contemporary photography photographer east sussex dreamweaverSo now I am going to check that this all works in Safari, here is a screen show to show the gallery:alice volk av photo photographer web design image gallery gallerys abandoned challets camber sands holidays derelict vignette black white contemporary photography photographer east sussex dreamweaverYEY it works!

Vertical

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s