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.
Since Muse is only available as a subscription, this allows Adobe to release updates as often as they like, as opposed to having to wait years before pushing out a major release. This is the first feature-rich update since Muse was released back in May of 2012. Let's take a quick look at what has changed with this release. The file that I currently have opened is not in your exercise files, but I will be going over these features in depth later in this course. Some of the changes in this version of Muse are really hard to demonstrate on screen.
Let start by taking a look at some of the interface elements that have changed. We're going to go down to the Masters page, and now in the Masters page I am going to select this widget at the top of the screen of the Menu. When I click down and select the Home button, this Home button has multiple states. So if I go over to the States Panel, we can see that we've got Normal, Rollover, Mouse Down, and Active, and I could change any of these by clicking on it and changing a property, like adding a drop shadow or color. But now instead of having to go over to the States Panel, we have the States Panel built into the Menu Bar at the top.
You will notice in the upper left-hand corner it says Menu Item: Rollover with a hyperlink. When I to click on Rollover, I don't have to go to the States panel anymore. You will also notice that these buttons at the top now are blue with an underline when they're a hyperlink. In earlier versions they were black, and it wasn't that obvious that you could click on these to get an option. Now that we've changed the color, it's a lot easier to see that we can click on them to access additional controls. If you use Muse on different size monitors, this interface now gracefully degrades.
For example, you see on the upper right-hand corner where it says Align and Text and has the Width and Height next to it, if I go over here and change the Width of the Muse window, you will see it will start to collapse. The Width and Height disappeared, but Align and Text is still present. As I make this smaller, the X and Y coordinates disappear. But as I bring this back, more options appear again. If you work with Muse on a large or small monitor, now it will still be useful that you could access these Menu Items, but if you have to use a small one, you can always go back to the Panels if needed.
Let's close the Masters page and go to the Collections page. On this page I am going to show off one of my new favorite features. We can now finally add Guides. These Guides are Ruler Guides that we can grab from the top or the left-hand Ruler on our page. If you've used Photoshop, Illustrator, or InDesign, you already know how to use these Rulers. Just click and drag them out and put them wherever you want on the page. One little tip that I can't help but share is if you go to the Ruler and want it at a certain spot, just double-click your mouse, and it will put the Ruler right there for you.
You can use these Ruler Guides to help Align Objects to them to help with your design. Another feature to help with aligning is the Align Panel. Over on our panels, I can click on the Align, and now I can grab two different objects. I'll just click and grab these two images over here, and I can click Align on the left-hand side. In earlier versions you actually had to use Smart Guides or just manually try to do it. This is a lot easier and more intuitive, similar to the other applications. If you don't want to use this panel, we have the Align button at the top of the screen that can accomplish the same task.
Let's close Collections and go over to the About Us page. On this page we have a large open area where I want to insert an Adobe Edge animation. Adobe Edge Animate is a new tool from Adobe which lets you create web graphic animations without using Flash. In a later movie we'll talk about how to export the animation from Edge to bring it into Muse, but right now let's just bring one in. We're going to go to File > Place, and we're going to navigate to our Assets folder. Inside our Assets folder we're going to go to edge.
In the edge folder we'll go into publish and grab logo-animation.oam. With this selected, we'll click and put it on the page. If we want to see the animation, all we have to do is either Preview in the web browser or click the Preview button. When we click Preview, the animation will appear right before us. If you want to see this again, you have to go back between Design and Preview or just Refresh the page in your web browser if you use Preview in web browser. Back in Design mode, we'll scroll down a little bit, and I am going to select this picture of a PDF.
If you want to add a PDF to your website, it wasn't possible in earlier versions unless you uploaded that file to a website and then provided a link to it. Now if we select any graphic at all, we can link directly to a file. I am going to go to the Hyperlink menu and choose Link to File. When I do this, Muse will ask me where is the file we want to link to? In our case, we're going to go to brochure.pdf. Now that I have this set, when you click on the icon in a web browser, it would download the PDF for you.
This isn't limited to just PDFs. You can use Muse files if you wanted, zip files, MP3s, or any type of file at all. When you publish your site, it will automatically upload this file to your server. Let's close that page and go to Contact Us. On Contact Us, we're going to add a form. Now, it has been possible to add a form via embedded HTML, but now it's a lot easier since we can use the widgets inside Muse. I am going to go over to the Widget Library Panel, open up Forms, and drag out a Simple Contact Form.
Now that I have this dragged out, I could modify the properties of this, but we'll cover that in a later movie. For now we're going to go to Preview, and then I could try this out. I'll into my Name, Email, and Message, and then you could click Submit if this was online, and it would send the message to the person that the form was connected to. One item of note, this Muse form will only work if you're hosting with Adobe Business Catalyst. If you're using your own solution, you'll have to export this code to HTML and then modify the code so it can work with your own server.
Back in Design mode, there is one last big feature we're going to talk about, and that's the built-in FTP. If you are using your own server, in earlier versions you'd have to export the code to HTML and then use your own FTP client to upload. Now you don't have to worry about that because we can go to File > Upload to FTP Host. Inside this dialog box you can enter all of your relevant information and click OK, and then it will upload the files for you. If you ever make a change to your layout-- be it a small text change or replacing an image--when you upload, it's not going to re-upload the entire site, it will just load the incremental changes.
This is just a quick overview of some of the changes in this update. There have been additional movies added to this course that cover each of these new features and changes in greater detail. For a much more in-depth look at the updates and new features in Muse or to see a list of the updated movies, please visit lynda.com/museupdates.
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.