Dreamweaver templates video gallery code#

Dreamweaver templates video gallery code#

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.