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.
Have you ever wanted to add a map, movie or Facebook like button to your website? It is possible to add these items to Muse via embedded HTML, but it's a lot easier to use the social widgets. Social widgets are a large number of widgets that add common social media functionality to your site. Let's take a look at how they work. Let's visit the Contact Us page, and on this page we want to make sure we have our widget library panel open. And we're going to go down to social, and open this up and we'll see a large number of social widgets.
Lets start with a simple one, google maps, we're just going to click and drag google maps to put it in our layout After dragging this into our layout, we'll see it's listed Adobe Systems as the address. Odds are you don't live at Adobe Systems, so you want to put in a different address. So what we'll do is go to the menu here and we'll type in the address that we want. In our case, it's 123 Main Street. Ventura, California. Hit Enter or Return, and you'll see the map will update. Next we can change the kind if you want to have a hybrid, satellite, or terrain, but for now, road is fine, and then we can even zoom in a little bit if we want to set our zoom settings.
There we go, that looks pretty good. If you want to preview it, we'll just go to the preview panel. And now we can click and drag and move it around on the page or even zoom the set with a different setting if you need to. Back in design node, let's get rid of this and add something else. We'll go in and we'll grab a Twitter widget, we'll do the Twitter follow, for this we want to put in our Twitter handle, so in the case of this museum its art_simoca. Now when you first put it on, you'll see it kind of looks strange that it doesn't show everything right.
You can see it says 37 foll. It doesn't have followers. And even if we resize this on the edge, it doesn't accurately show that information. What we need to do is, go to File > Preview Page in Browser. The in-app preview won't render it properly. And now you can see, it's rendering properly and showing the correct number of followers. Finally, let's add one more item. I'm going to drag the Adobe Muse badge onto our layouts. Here is a fun little badge that you can use to show off the fact that you made your website with Adobe Muse and we have both the light and dark theme here, depending on the layout that you might have.
In this case, the dark one would only work well if we want to put it on something over on the side here like this. So, in our case I'm going to just leave this as the light theme. And if I want to have this on every single page, I could go to the master page, but in the case here, I'll just put it as a footer item, and I'll stick it right over here to proudly show that we made our website with Adobe Muse. Due to the ever-changing nature of social media, you could expect to see this list of social widgets available in use to change over time. While using the social widgets is quite easy, you may want more control for some of them, like maps or YouTube videos.
In that case, keep in mind that you can still add most social media items manually by using embedded HTML, which we'll be covering later in this course.
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.