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.
If you're going to be creating a web site with more than one page, it's critical to build a menu or navigation system, to let users go back and forth between the pages. While it would be possible to manually create a hyperlink to each page, there's a much more efficient way to do this inside Muse. By using widgets, you can build menus based on the names of each page automatically. Right now, we're in the Plan mode of Muse, where we're taking a look at all of the pages inside this site. We've got a Home, Collections, About Us, Volunteer and Contact Us page for our main pages.
And I'd like to have a navigation system that automatically goes to each of these pages. In the Plan view we have an overview of our entire web site, and our main pages are Home, Collections, About Us, Volunteer and Contact Us. Each of these are pages that I would like to link to in our navigation system. Now, we could build these manually, but there's a much better way to do it. What we're going to do is go to the Master page, because if we put something on the Master page, it shows up automatically on every single page.
So we're going to go down, and double-click on A-Master. On the Master page, we first have to open the Widget Library panel. If you don't have it open, go to Window > Widget Library. The Widget Library contains many different widgets that we can use in our web site. Widgets are objects that contain special forms of interactivity that let you do interesting things on a web site. We'll learn more about widgets in the next chapter. For now, we're going to under menus, and we're going to select Horizontal and drag it to our Desktop.
Now that we have this widget out, I'm going to collapse my tool panel because I don't need it right now. You'll notice that my menu structure is already built. It has Home, Collections, About Us, Volunteer and Contact Us. These were built dynamically because they're the names of each page in my site. In fact, if I make any changes to the site, my menu will update automatically. If you don't believe me, let's try ourselves. We're going to go to the Plan view and we're going to add an additional page. Next to Collections, I'm going to click and we're going to type in Temp.
This will be a temporary page. Let's go back to A-Master and see what happened. Sure enough, right next to Collections is the Temp page. If I decided to reorder these, the menu will update too. Back in the Plan view, I'm going to grab Temp and put it to the left of the Home page. Back on the Master, we can see it's been updated again. Well, what happens if we decide that we really like the Temp page because we just want to use this as a temporary pasteboard or just for messing around with a design.
We might want the Temp page in our web site, but we don't want it based in our navigation system. So to fix that, we're going to go back to the Plan view and I'll right-click on the Temp page, and I'm going to go down to menu Options, and I'm going to choose Exclude Page From menus. Now that I've this set, when I go back to the A-Master, you can see it's no longer included. Now that we understand how the menu is built, let's go to Preview mode and test it out. In Preview mode, when I roll over each section, you'll see we get this default gray box.
We're not going to worry about the appearance right now, because we'll go over this in more detail in the next movie. Let's click on the Home page. On the Home page, we'll see a gray rectangle behind Home; that lets us know we're on this page, even when we're not mousing over the button. As I mouse over to the other buttons, and I click there, you'll see that the dark rectangle appears when I'm on that particular page. You'll notice when I go over to the Collections page, I can only go to the main Collections page. I don't have a way of going to the sub pages.
What we need to do is change the options to let me have a drop-down menu. Back in the Design mode, I'm going to click on the blue fly-out menu to get some options for this widget. Inside the Options, I'm going to change the menu Type to include All Pages. When I do this, you'll see we'll get Current Exhibits, Permanent Collection and Upcoming Exhibits available. Let's go back into Preview mode and check this out. As you can see, right now we have Collections with a little triangle, letting me know that there's a dropdown menu.
As I mouse over, I can mouse down and choose the correct page. Back in Design mode, let's take a look at how we can create a different type of menu. We'll open up our panels again, back in the Widget Library panel, I'm going to click and drag out the vertical menu onto the page. You'll see it has the same information as the menu bar at the top, except for it's displayed in a different fashion. So if you want to use a different type of navigation system, you could use this type of widget. Using menus to build your navigation system is a pretty easy decision.
You really just want to use it. In the next movie, we'll take a look at how we can modify the various settings of these menus, to help you make it look exactly the way that you want.
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.