HTML5 Slideshow Maker

How to Embed an HTML5 Slideshow in Microsoft Expression Web

In this HTML5 Slideshow Maker tutorial, we will learn how to embed an HTML5 slideshow to a web page in Microsoft Expression Web. The website designer we will use is Microsoft Expression Web 4, but if you are a Microsoft Expression Web 3 user or a Microsoft Expression Web 5 user, you can refer to this tutorial too. Whichever Microsoft Expression Web version you use, the steps to embed a slideshow are almost the same. And in fact, even though we wrote this tutorial for HTML5 Slideshow Maker users, if you are our Photo Slideshow Maker users and want to embed a flash slideshow to your website, you can refer to this tutorial too.

Preparation: Make an HTML5 slideshow (or make a flash slideshow)

Download HTML5 Slideshow Maker to make all browsers & devices compatible HTML5 slideshows for your website.

Download HTML5 Slideshow Maker Free for WindowsDownload HTML5 Slideshow Maker on Mac App Store

Step 1. Open your website with Microsoft Expression Web

1. Open Microsoft Expression Web

2. Choose Open Site from the Site menu. In the Open Site dialog box, do one of the following:

1) To open a site that you have opened before, select the site from the Managed Sites list, and then click Open.

2) To open a site on your computer, browse to and click the folder that contains the site, and then click Open.

Open your website with Microsoft Expression Web

Step 2. Import the HTML5 slideshow files to your website

Be sure the Folder List is turned on (Panels > Folder List, or use the keyboard shortcut Alt+F1).

1. Click the root web folder, then click File and choose Import and File.

Import HTML5 slideshow files to website in Microsoft Expression Web

2. A window named Import will open, click Add Folder,

3. A Windows Explorer window will open. Navigate to the output folder of your HTML5 slideshow, select it and click Open. The output folder of your HTML5 slideshow will be uploaded to your website in the root web folder.

Step 3. Embed the HTML5 slideshow to your website

1. Minimize Microsoft Expression Web, click My Computer/Computer, and navigate to the output folder of your HTML5 slideshow. Open the output folder of your HTML5 slideshow and open the html file NOT named fs_aux. You will see your HTML5 slideshow in your browser, the codes for your HTML5 slideshow are under the HTML5 slideshow. Click the codes and use Ctrl + C to copy them. Or, right click the codes and choose Copy.

2. Open Microsoft Expression Web, open or create the web page which you want to embed your HTML5 slideshow to. The preview window will show the web page.

3. Click Split, choose a place for placing your HTML5 slideshow in the lower panel (the lower panel is in design mode), paste the codes of your HTML5 slideshow to the upper panel (the upper panel is in code mode).

4. Add the output folder name of your HTML5 slideshow and / to the codes regards to js and xml files. Save your changes.

Embed HTML5 slideshow codes in Microsoft Expression Web

Step 4. Publish your website

1. Go to Site and choose Publishing Settings.

2. Go to the Publishing Tab and click “Add…”, then fill in the fields. Make sure the “Use Passive FTP” is unchecked

3. Click on “Connect to the current publishing destination”,

4. Now you are connected to your account via FTP, you need to tell Microsoft Expressions Web which files to upload. Select all the files and folders you want to upload in the Left Side Pane. The files include the output folder of your HTML5 slideshow and the web page which you embed your HTML5 slideshow to. Click on the blue arrow, then the files will be published to your account. You can now see the files and folders you just uploaded in the right pane.