Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
This update for Muse adds a plethora of new features, especially in the widget area. Let's take a quick look at what is new. We'll begin by going to the full screen Slideshow page. And on this page, I'm just going to zoom out a little bit by pressing Cmd or Ctrl+Minus. And, inside my Widget panel, we'll open up the Slideshow folder. Now, I'm going to scroll down and click and drag Fullscreen onto the page. You'll notice that as soon as I drag this on the page, it takes over the entire page. It really doesn't matter the width of your page itself. It could be, you know, 300 pixels wide or even 1,000 pixels wide.
Because it's full screen, it's going to span to the entire width of the page. I'm just going to click off to this side, and let's preview what this default experience looks like in a web browser. So, we'll go to File > Preview Page and Browser. Now, you'll notice it auto-plays right now from slide to slide. But you can change that in the Preferences. You can also click to go forward and backward as needed. But, what's most interesting is if I grab the corner of the web browser and scale this, you can see the entire image is scaling because it's full screen. It is filling up the entire page itself.
I'll just put this back here and we'll close this. Back in side Muse, if I want to change the properties of this, I can just click on the Widget. Go to the Widget Options and I can add new images, wherever I like. I don't need to add any right now. And we can change the Autoplay or any other settings. If you want to change the position of the Nav bar, you can come in here and click and slowly drill down and hold the Shift key to grab the various control widgets that you need, and put them wherever you like on the page. If you place them somewhere, be sure to pin them where you want, so they stay consistent across the browser.
Let's jump back into Plan view and go to another page. We'll go to hide on roll outs and we're going to take a look at a new experience for the composition widget. If I go into Preview right now, you'll see it looks like a standard composition widget, where you can click on each tab and it shows that relevant information. But there's a new tweak that's been added in this build of Muse. I'm going to select this widget and go into the options, and we're going to change show on target to show on roll-over. Then, we're going to hide targets on roll-out, and now if we go to File> Preview in Browser.
We'll see a we have a nice roll behavior. If you don't have your cursor on the Widget Roll, you don't see any of the auxiliary information. But as you mouse over each section, that information pops up underneath. This can be really useful in a navigation system. Back in the Plan view, let's go to the Social Widgets page. The Social Widgets are a wonderful addition in this build because it makes it a lot easier to add Facebook Like buttons, Follow me on Twitter, Google Maps, where in the past you had to use embedded HTML. Here, it's all built in directly into Muse. So, I'm just going to go into the social folder and grab one of these.
For example, let's just grab Google Maps. And as I drag it on, you'll see it automatically puts in in the default address of Adobe systems. But if you want to change this, you can just go to the menu and put in whatever address that you like. To preview it, go into Preview mode. And you can see it behaves just like a normal Google map. We'll cover more about these social widgets later in the course. And finally, back in the Plan view, we're going to go to the Parallax page. And there's been another addition to Parallax scrolling. Now, if I grab this item and go to Window > Scroll Effects, you'll see, the UI has been designed to make it a little easier to use.
We have controls not only for the motion, but even the opacity, the Slideshow play back and even edge animate controls, which is fantastic. And finally, we'll go to the Home page, and there's one last addition that makes Muse a lot easier to work with if you use a lot of assets. It's called the Library. If you're familiar with Adobe InDesign, you should be familiar with the library system. It's a great way for sharing assets and reusing items in your layouts again and again and again. For example, if I want to use this picture quite often in another layout, all I have to do is just select this.
And, hit a little button here to make it as a new library item. And I'll just call this bird. It doesn't have to be a photo. It could be this whole sidebar. So, if I hold the Shift key in, I'll just click and drag and select all these side items, and then hit the little button to add it to the library. I'll just call this sidebar. Now, if I was to make a brand new site, I can just drag that item over directly into my layout. We'll cover the library in more detail later inside this course. This was just a quick overview of some of the changes inside this update to Muse. There's a bunch of smaller bug fixes and other UI changes that I may not have covered in this movie.
So, be sure to download the latest update to Muse and update your sites so you have the latest, greatest version of Muse.
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.