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.
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.
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.
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.
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.
