How to integrate an image show in your website

In this tutorial I will demonstrate you a very important feature of our Creative Dw Image Show – its full compatibility with an HTML layout. Our product is a Dreamweaver tool, created using Flash and it takes the best to and from both of the two very powerful software applications.

Firstly I just want to remind you that, in order to be able to solve the tutorial, you will need the Creative Dw Image Show extension installed on your computer; if you encounter any problems while doing that, please visit the “How to install an extension” tutorial.


Click here to download the required files for solving this tutorial.


1. Open Dreamweaver, create a new website and a new file; save your file. If you have problems creating your website, try reading the “How to create a website” tutorial.

2. Just above the numbered steps of the tutorials you can see a hyperlink to an attached archive containing the necessary files required for solving this tutorial. Please download it, extract it and copy the files inside (the images, the audio file and .html file containing the predesigned layout) in the location of your choice (preferably inside your Dreamweaver website).

3. Open with Dreamweaver the .html file you downloaded and open Design View (top menu, View>Design); you will see a predefined layout created specially for this tutorial.

4. If the Insert menu is not already open, please press CTRL+F2 to do so; from the Image Show section, insert an instance of Creative Dw Image Show in your webpage, in the specified place in the layout.

Insert an Image Show instance

Insert an Image Show instance

5. Now the product’s configuration interface should be opened; from the General tab – General Settings section, set the dimensions of the show to 418x501 pixels (the exact size of the images we will use). Enable the Loop option.

Configure the general settings

Configure the general settings

6. This step will take us directly to the configuration of our show’s structure. Click on the green plus symbol labeled Insert Item, browse to the image you would like as your first slide and then click OK. Repeat this step in order to insert both the images in the show.

Configure the show structure

Configure the show structure

7. Select the first slide by clicking on it; the configuration options available for it become configurable. From the In Effect drop-down list select Piece Prestige and click on the Customize Effect button. Customize the effect and set its duration time to 35.

Configure the IN effect

Configure the IN effect

Piece Prestige configuration panel

Piece Prestige configuration panel

8. Let’s set how much time the slide will stay on the screen until the show will continue. In the Slide Delay text-box insert 35 (frames, which means 1 second). Enable the No Motion option.

Configure the slide delay

Configure the slide delay

9. Now it’s time to configure how the first slide will leave the stage. Select Piece Prestige as well and configure it as before; set its duration to 35 frames.10. Leave the following three parameters (Overlap Effects, URL and target in their default states).

Configure the OUT effect

Configure the OUT effect

10. Leave the following three parameters (Overlap Effects, URL and target in their default states).

Leave the other options default

Leave the other options default

11. Use the button in the bottom side of the interface for a very nice and useful feature; as it’s stated in its label – it applies the settings we configured for the first slides, to all of our slides!

Apply settings to all slides

Apply settings to all slides

12. Now we will continue to work on the appearance of the show. Open the Theme tab and leave everything as it is now except for the background color; select white (#FFFFFF), and any level of opacity would do.

Configure the background

Configure the background

13. Let’s leave the next two tabs, Soundtrack and Presets as they are now – they do not make the object of this tutorial.

14. We finished the configuration of our show. Click OK, save your file and preview it in a browser by pressing F12.

Preview your file

Preview your file

Thank you for your time and I hope this tutorial was useful to you. I invite you to read the rest of our tutorials and check out our other products on www.extendstudio.com. If you have any questions please contact us at support@extendstudio.com.