#Dreamweaver cs6 photo album code#

This ID isn't the same thing as the image name however it's just the ID we name it in Dreamweaver. Similarly our thumbnails have ID's of 'T1, T2, etc' to denote these as thumbnails. Right now the large image has an ID of 'Main' because we selected our main large image and then labelled this as Main to separate it from the smaller images. To give an image an ID tag, look for the ID space in the Properties panel at the bottom of Dreamweaver: But before doing this, it's important to give each image an ID tag so that when we begin coding the Behaviour, we'll be able to find each image.

#Dreamweaver cs6 photo album code#

Now that all of our images are in place, we need to code the Behaviour. Then in the smaller table boxes below, we'll place a thumbnail in each box: In the large space now created, we'll then insert the large image of a car: To merge the upper rows, we'll highlight all of the ones we want to merge and in the bottom panel select the merge option (highlighted in red below) to merge these rows together. After pressing OK the table is inserted into our page: 3 columns worked for this gallery because we have 12 smaller images we need to accommodate and these will fit well into 12 columns. We used 8 rows because we're going to merge some of the top cells together to contain the larger image. For ours, we used a width of 600 pixels, adjusted the cell padding to 1 pixel to give some added space between the photos and used an 8 row and 3 column format. In here you must specify the amount of columns and tables required to create the table. To insert a table, go to Insert> Table on the top of Dreamweaver which will open up a screen like the one below: The trick to starting this is that you'll need two versions for each image you wish to include in your gallery: One larger image and one smaller image that will act as a thumbnail.ДЄn easy way to organize galleries on your webpage is to use a table. We want our users to be able to hover over one of the smaller thumbnails and then have the larger image show up in the main display window. In the gallery above, you can see there is a one main image in the center and some smaller thumbnails in the squares below. In this example, we need to create a simple gallery for a classic car festival: Behaviours are a way of inserting special features onto a website without using overly complex Javascript or Jquery code. In this article, we'll look at creating an image gallery in your Dreamweaver project by using something called a 'Behaviour'.