How to add an Image Show in a webpage created using a template

As Creative DW Image Show PRO is a tool that is meant to save time, it should allow association with another great time-saver – templates; well, it does!

In this short tutorial, I will show you how you can use our product with webpages created using templates, following a few simple and straightforward steps.

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 PRO 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 and create a new site; save your file. If you have problems creating your Dreamweaver site, try reading the “How to create a website” tutorial.

2. Just above the numbered steps of the tutorial 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 image file in the root of your Dreamweaver site.

3. Click File>New and select the Blank Template section from the vertical menu on the left. Select HTML template, blank layout and click Create.

Create an HTML template

Create an HTML template

4. Create three editable regions in the template (Insert>Template Objects>Editable Region or CTRL+ALT+V), one in the <head> section, and the other two in the <body> section. Name them “head”, “imageShow” and “renderingScript”.

Create three editable regions in the template

Create three editable regions in the template

5. Save the template under the name of your choice; as a result, in the Dreamweaver site’s folder will appear a folder entitled “Templates” containing the file you just saved – I named it “template.dwt”.

Save the template file

Save the template file

6. Create a page from the template we just created above and save it under the name of “main.html”, let’s say.

Create a page from the template

Create a page from the template

7. Create a blank HTML file and save it as “creator.html”.

Create a blank HTML file

Create a blank HTML file

8. If the Insert menu is not already open, please press CTRL+F2 to do so; from the Image Show PRO section, insert an instance of Creative DW Image Show PRO in your webpage.

Insert an instance of Creative DW Image Show PRO

Insert an instance of Creative DW Image Show PRO

9. In order to simplify the next step, enable the Code view from the View top menu. Identify the three passages of code, cut and paste them into the corresponding editable regions in “main.html”.

Cut and paste the Image Show PRO code

Cut and paste the Image Show PRO code

10. At this point page “creator.html” should appear in Design view as a blank page. Save it for later use and close it.

11. Return to “main.html” and select Edit Image Show PRO from the Insert menu.

Click on the Edit Image Show PRO button

Click on the Edit Image Show PRO button

12. Configure the Image Show as in the image below; set the width and height to 300 and insert the image “logo.png” by clicking on Insert Item; in order to make the image stay in its place, enable the No Motion option. After clicking OK, a warning message will appear announcing that the changes were discarded due to the template use.

Configure the image show

Configure the image show

13. Actually, the changes were made in the JS file (the file automatically created by th extension - "xtdProBanner1.js") but not in the HTML file. In Code view, identify the DIV where the Image Show resides and change its dimensions to be compatible to the ones in the JS file.

Edit the Image Show DIV dimensions

Edit the Image Show DIV dimensions

14. That’s about it; if you want to create another image show to add it in a different page done from the template repeat steps 8-13 for the page under consideration. Save “main.html” and click F12 to preview the results.

Preview the result

Preview the result

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.