#Cs6 dreamweaver templates code#

Always make sure to keep the РІР‚СљTarget ElementРІР‚Сњ as the bigger image ID. In this tutorial, I have set the РІР‚СљAppearРІР‚Сњ effect for the photo gallery. Tag Inspector > Behavior > Effects > Appear/Fade Select the thumbnail image and set the РІР‚Сљ Appear/FadeРІР‚Сњ effect as below Step 18 : Get ready and try some effects to the photo gallery. Step 17 : Now we have completed the simple photo gallery without any effects. (i.e, On clicking the thumbnail image, the bigger image will change according to its action) Adobe Dreamweaver CS6 applies default event as РІР‚Сљ onMouseOverРІР‚Сљ, change that into an event as РІР‚СљonClickРІР‚Сњ. Step 16 : After we set the actions, we need to set the events for all the thumbnail images. Repeat this action for the other thumbnail images too. Step 15 : Now for the thumbnail image РІР‚Сљp2a.jpgРІР‚Сњ, I have clicked РІР‚Сљp2.jpgРІР‚Сњ image to be displayed. Here while I click on the thumbnail image РІР‚Сљp1a.jpgРІР‚Сњ, I need РІР‚Сљp1.jpgРІР‚Сњ image to be displayed. Make sure to uncheck the Restore images onMouseOut (i.e, original images will be replaced) Always check the Preload images (i.e, to load the images when the page is loaded)Р”В¤.

Set source to РІР‚вЂњ Select the image name, what you need to replace with the РІР‚Сљgallery_mainРІР‚Сњ image on clicking the thumbnail.Р”Р€. Images РІР‚вЂњ Here select the image id, which you need to swap.Р”Сћ. Please ensure whether the below 4 points has been done before clicking РІР‚СљOkРІР‚Сњ on the РІР‚СљSwap ImageРІР‚Сњ dialog box.Р”РЋ. Immediately there appears a РІР‚СљSwap ImageРІР‚Сњ dialog box. Select the first thumbnail image and go to the РІР‚Сљ Tag InspectorРІР‚Сњ on the Right side of the work space and choose the Swap Image action from the list of Behaviors. LetРІР‚в„ўs create the swap image effect to the thumbnail images.

#Cs6 dreamweaver templates code#

Step 14 : When you apply a behavior to an image, Adobe Dreamweaver CS6 inserts the HTML source code into the area tag automatically. Step 13 : Repeat this process for rest of the thumbnail images and name their ID as РІР‚Сљ g2, g3 to g8РІР‚Сљ. Repeat the РІР‚СљStep 11РІР‚Сњ and name the ID as РІР‚Сљ g1РІР‚Сљ. Step 12 : Now select the thumbnail image. Type the ID as РІР‚Сљ gallery_mainРІР‚Сњ in the properties field. LetРІР‚в„ўs create an Image ID on the РІР‚СљBottom-LeftРІР‚Сњ on the Adobe Dreamweaver CS6. Step 11 : Select the image РІР‚Сљp1.jpgРІР‚Сњ (i.e, bigger image). Step 10 : Now the structure of the gallery has formed as below Step 9 : Repeat the process of РІР‚Сљ Step 8РІР‚Сњ for each thumbnail image to place them in their appropriate places. The Select Image Source dialog box appears. Also I have named all the bigger images as p1.jpg, p2.jpg to p8.jpg and all the thumbnail images as p1a.jpg, p2a.jpg to p8a.jpg. Step 8 : Load the first big image (i.e, p1.jpg), where you want to insert it. Step 7 : Then code the CSS properties in РІР‚Сљstyle.cssРІР‚Сњ style sheets to retrieve the below structure. Step 6 : Using DIV tag, I have created the areas for the title, gallery big image and thumbnail image on the РІР‚Сљ gallery.htmlРІР‚Сњ page. Step 5 : First I need to create the DIV tag and then to create its corresponding style like its position, margin, color, appearance, padding & size for the photo gallery layout page. In this tutorial, I need a layout structure as shown below: Hence it will help you to specify exactly how page elements will be arranged.

Step 4 : Just make a rough sketch of the gallery structure that you are planning to create. You can crop & set the bigger images size as : width РІР‚вЂњ 640px, height РІР‚вЂњ 500px and the thumbnail image size : width РІР‚вЂњ 76px, height РІР‚вЂњ 57px. Step 3 : In this gallery, I have used 8 big images and 8 thumbnail images (i.e, small image). Here we will start by setting the page properties as below Step 2 : Using DIV tag and CSS style we can create a basic layout for the photo gallery. Step 1 : Open Adobe Dreamweaver CS6 and load your РІР‚Сљ gallery.htmlРІР‚Сњ page. This tutorial is designed to help you create a Photo Gallery using Swap Image Behavior & Appear/Fade effects in Adobe Dreamweaver CS6. You can swap more than one image at a time with a single Swap Image behavior. The Swap Image behavior swaps one image for another image, this technique is normally used in button rollovers and Photo Gallery. Adobe Dreamweaver CS6 includes some inbuilt facilities like Swap Image behavior.