Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In this course, author James Fritz shows how to create HTML-based websites with Muse—a toolset familiar to anyone who has used Adobe Photoshop, InDesign, or Illustrator. The course covers the design process from start to finish, from setting up web pages and populating them with graphics and text, to creating dynamic menus and adding special features such as widgets, slideshows, animations, embedded video, social media integration, and more. James also explains how to create an alternate layout for display on mobile devices, publish and update your site, and view analytics on web traffic.
One of the most common interactive elements on a website is a slideshow. At first it may seem like creating a slideshow would be a lot of work, but in reality, Muse's widgets make working with slideshows quite easy. Let's go to the slideshow page and then I am going to go to the Widgets Library and open up Slideshows. Next, I will click and drag out thumbnails onto the page. I am going to close the toolbar for now, and if we need it, we will open it later. Now that I have the slideshow made, let's go to Preview mode and see how it works.
In Preview mode, when I click on an image, it will fade to that image, and over time the image will fade from one to another. Let's go back to the design. There is additional information in the slideshow that I really don't care for. So to get rid of it, I am going to go to the panel menu and I am going to turn off Previous, Next, Captions, and Counter. This will keep the slideshow nice and clean. Now that we have the slideshow cleaned up a little bit, let's put the thumbnails underneath the main image. To do that, I am going to click slowly until I select the container of thumbnails on the left-hand side.
Next, I will click and drag to put it underneath the main image, and we will open it up to make it wider. I would also like to make the main image larger, so I am going to resize this to make it fill up the page. Now that the slideshow is set up, I am ready to add my own images. I am going to deselect and go to File > Place. In the Assets folder, I am going to browse to the slideshow folder and select slide1. I will hold my Shift key and click on slide8. Now with my loaded cursor, you can see it has a number 8 next to it, which lets me know I have eight images ready to go into the slideshow.
So I will just click on the main slideshow image and all eight images will be added automatically. Not only are the images are added to the slideshow, but thumbnails are automatically generated at the bottom. Now that my images have been added to the slideshow, let's remove the starter images that Muse gave me. We will just slowly click down to each thumbnail and press Delete. As we do this, they will be removed from the slideshow. Next, I am going to click to select the container of thumbnails, and I will position it underneath and open it up so it goes all the way across.
I'd also like to make the thumbnails larger, so I will slowly click until I select one of them and then I will resize it until it fits all the way across the page. There we go. That looks pretty good. Now that I have this set up, let's deselect and see how it looks. We will go to Preview mode, scroll down, and as I click on each one, it fades to that particular image. To make this a little more interesting, let's go back into Design mode and we are going to create some states for the thumbnails. I am going to slowly click until I select the first state.
Next, I will open up my panels, and in States, while I am in the Normal state, I am going to change the Opacity to 50%. Then on rollover, I am going to change it to 100%. I will also change Active to 100%. With this set, we will go to Preview and try it out. As I mouse over each thumbnail, we will see the image becomes highlighted when it becomes available. Then when I click, I go that particular image. Let's take a look at a few more slideshow options.
We will put this panel out of the way and when I have the main slideshow selected, I will go the panel menu and in here, I can change the transition. Right now it's set to fade. If I like I can have it horizontal or vertical. In this case, I think horizontal will be nice. I am going to turn Auto Play off so it doesn't advance unless I decide to do it myself, and then we will go to Preview to see how it looks. Now each time I click, it slides to that particular image. If I go more than one image away, it will slide over until it gets to it.
If we go to the last image and then click on the first image, you will watch all the images fly by until you get to the correct one. Take your time to modify your slideshow until you're happy with how it looks. If you want to use the same appearance of a slideshow somewhere else on your site, you can always copy and paste it to a new page and then just swap out the images as needed.
Find answers to the most frequently asked questions about Muse Essential Training.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.