Summary:

Create a Flexible Responsive Java Slider in Dreamweaver

    ●   Flexible Layouts are Responsive to your Layout Size and adjust to fit the size of the Media you're using.

    ●   For example, if you have an iPhone your slider will shrink to fit the available screen space.


Learn About:

JavaScript HTML

  •   This tutorial is used in the Home Sweet Home Portfolio Project.

Other People's Work:

Here are some examples of work inspired by this tutorial.


Step #1: Open your Index page in Dreamweaver ~

Open your index page - or whatever page you want a slideshow to appear - in Dreamweaver …

… hit Split to view your code …

… locate your head tags …

… and clear some space to work.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #2: Copy this Code ~

Copy this code …

      
      <link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>


<script type="text/javascript" charset="utf-8">
  $(window).load(function() { 
  $('.flexslider').flexslider();  
  }); 
</script> 

      
      

… and paste above the last head tag …

paste between head tags

… like this:

javascript head tag image


Step #3: Find your #content area ~

Now scroll down through your code and find your #content div - or wherever you want your slide show

content div


Step #4: Copy MORE Code ~

Copy the following code …

<div class="flexslider">

  <ul class="slides">
    <li><img src="image1.jpg" /></li>
    <li><img src="image2.jpg" /></li>
    <li><img src="image3.jpg" /></li>
  </ul>

</div>

… and paste it between the #content tags or wherever you want your slideshow to be.

flex slider code


Step #5: Download and Save these Files ~

Right-Click on this file flexslider.css and save it in the ROOT FOLDER of this project …

save link as

Similarly, Right-Click on jquery.flexslider.js and do the same …

save link as


Step #6: Setting up your Slideshow pictures ~

Collect images you want in your slideshow and open them in Photoshop - at least three for starters …

open all your images

OR - If you've got headers for your pages already completed, you may use those …

car-banner.png

OR - You may need to take a screen print of your pages one…

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #7: Image Size ~

All images must be approximately the same size! If you're not sure of the width, lower them all to 550 pixels.

width

If necessary, Crop the images to get them to fit.

crop

You may have to cut parts of your images off.

Just do your best to get ALL your sizes as close as possible.


Step #8: Save for Web ~

Lastly, go to: File > Save for Web and save your images as .jpg

jpg

Adjust the quality, if necessary.

Name the file image1.jpg

save as image 1

Save the image in the ROOT FOLDER OF THIS PROJECT!

Do this to all your photos: save them as image1.jpg, image2.jpg, image3.jpg, …


Step #9: See if it Works !~

Hit small to view your work.

preview


Last Step: Save & Attach ~

Upload your site with the work you completed, attach the link to your site where the work is located, and continue working …


Other Resources: http://www.woothemes.com/flexslider/