1.First create your HTML by open your Dreamweaver and go to Create New->HTML and you’re your file.
2 Insert the images you want to scroll on your page (Ctr+Alt+I)Press “Ctrl+Alt+Iâ€Â. Make sure that your images have similar width and height.
3.Click on your first image and while you are holding the Shift key click on other image to select all your images. Now Press Ctrl+E and from the tag list select “divâ€Â. To insert the div, on the “Tag Chooser†screen go to “Insert†. make sure your code is similar to this
<div><img src="img1.png" width="960" height="400" alt="A" /><img src="img2.png" width="960" height="400" alt="B" /><img src="img3.png" width="960" height="400" alt="C" /></div>
4.select the“Split†view and. Add a class name to the div tag like this:
<div class=â€Âscrollâ€Â>
5.Now Style the Image by rightclicking on the selected images and click on the option“CSS Styles†-> “New...†–and choose Class for your selector type and then add in the name “scroll.†And click OK.
6. from the “Category†list choose Box and then set your width and height similar to those of one of your images. Keep the option “Same for all†checked for the margin and Padding and set both to zero, and click OK.
7.Right click on your screen and choose the“CSS Styles†-> “New...†and type in your selector like this
.scroll img
from the selector types choose “Combo “ and click “OKâ€Â. From the category list choose “Positioning†and then set “Left†and “Top†to 0 and Click “OKâ€Â.
8.Now download the plugin jQuery Cycle from here ‘jQuery.Malsup.com’ This will load the source code of the plugins in your browser. Copy this code and paste it a note pad file. Name this file as “jcycle.js†and save it in the same directory that has your Web page.
9.Go to Insert ->Script and select the folder icon beside the Source field and then from there select the jQuery Cycle script and click OK . Go to Code view select then cut the tags “<script>†that contain the jQuery Cycle from the code. Then paste it right above the “</head>†closing tag.
10.then copy and paste this code above the “<script>†tags
<script src=â€Âhttps://ajax.googlea...y.min.js†type=â€Âtext/javascriptâ€Â></script>
11.Add this before “</head>,†without giving them a “src†attribute. Between the new
<script>
$('.scroll').cycle({
fx: 'scrollRight'
});
</script>
Making scrolling images in Dreamweaver CS5
1.First create your HTML by open your Dreamweaver and go to Create New->HTML and you’re your...
dreamweaver cs5 making scrolling images
&nsbp;
Also tagged with one or more of these keywords: dreamweaver cs5, making scrolling images
Software →
Adobe Dreamweaver →
Creating PHP to email Form in Dreamweaver CS5Started by Ammar11, 26 Nov 2013 dreamweaver cs5 and 1 more... |
|
|
||
Software →
Adobe Dreamweaver →
Making a drop down menu using Dreamweaver CS5Started by Ammar11, 25 Nov 2013 dreamweaver cs5, drop down menu |
|
|
||
Software →
Adobe Dreamweaver →
Dreamweaver CS5: making an Image Expand When Rolled OverStarted by Salwa, 09 Nov 2013 dreamweaver cs5, image expand and 1 more... |
|
|
||
Software →
Adobe Dreamweaver →
Moving Images in Dreamweaver CS5Started by Salwa, 08 Nov 2013 dreamweaver cs5, moving images |
|
|
||
Software →
Adobe Illustrator →
IllustratorStarted by aldaser, 27 Sep 2013 dreamweaver cs5, drop down menu |
|
|
2 user(s) are reading this topic
0 members, 2 guests, 0 anonymous users