How to Embed Your SimpleViewer in Dreamweaver CS5
You don't have to be an Adobe Flash programmer to add Flash applications to your website. SimpleViewer allows you to embed a Flash-based image gallery on your Web page viewable in all browsers include those found in iPhones, Androids and other portable devices. If you maintain your website using Dreamweaver CS5, you can embed SimpleViewer in minutes by pasting a block of code into your HTML document.
Instructions
-
-
1
Visit the SimpleViewer website and download the program if you do not have it. Install the application. If you need assistance, view the website’s Support page.
-
2
Launch Simple Viewer, and create an image gallery
-
-
3
Type "SimpleViewer Test" -- without the quotes" on the empty Web page and press "Enter." Your cursor moves beneath the text.
-
4
Launch Dreamweaver CS5 ahd click "HTML." Click the "Insert" button, and then click "Layout Object" to view a menu of options. Click "Div Tag," and then click "OK." A div tag appears below the words you typed. The following text appears inside the div:
Content for New Div Tag Goes Here
-
5
Click the "Code" tab." An HTML code panel appears on the left side of Dreamweaver and displays the code that defines the div. It appears as shown below:
<div>Content for New Div Tag Goes Here</div>
-
6
Delete the text inside the div -- "Content for New Div Tag Goes Here" -- and replace it with the following code:
<!--START SIMPLEVIEWER EMBED -->
<script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
simpleviewer.ready(function () {
simpleviewer.load('sv-container', '100%', '100%', '222222', true);
});
</script>
<div id="sv-container"></div>
<!--END SIMPLEVIEWER EMBED -->This code embeds SimpleViewer in the Web page.
-
7
Click "File," and then click "Save As" to view "Save As" window contains your hard drives folders. Navigate to the folder that contains the files that SimpleViewer created when you used the program to build your image gallery. Click that folder to select it.
-
8
Type a name for the Web page in the "Name" text box, then click "Save." Dreamweaver saves the Web page document in that folder.
-
9
Press F12. Your default browser opens and displays your SimpleViewer image gallery.
-
1
Tips & Warnings
.
When uploading your Web page to your Web server, be sure to include all the files in the SimpleViewer folder that the program creates when you build a SimpleViewer image gallery. The image gallery will not appear without these files.