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.
Muse has a large collection of widgets that help you create interactivity on your site. In this chapter we'll take a look at some of these widgets and learn how to customize them. The first widget that we're going to look at is the Accordion Widget. We're going to begin by going to the About Us page, and on the About Us page we'll open up our Widgets Library. Inside the Widgets Library open up the panels area and we're going to click and drag out the Accordion panel. With the Accordion panel on the page, we can see it says Lorem 1 and Ipsum 2.
We're actually going to hit this little Plus (+) to add one more for Ipsum 3. Now that we have these three panels set, when we click on each of them, we can see how they expand and contract, but it's quite jerky when this happens. So we're going to switch to Preview mode and see how it would look online. In Preview mode when I mouse over these, you can there is a nice rollover effect, and when I click they smooth gracefully. For now we're going to go back to the Design mode and we're going to add some more content. You can place practically anything inside these menus.
We're going to begin by bringing in some text. We'll go to File > Place, and in our Assets folder I'm going to grab accordion.txt. Next, I'll click and drag and place this on the page. I'm going to cut and paste the header into each section. So there's Volunteers Needed; I'll get rid of that extra return. New Cafe menu will replace Ipsum 2, and Family Programs will replace Ipsum 3. Now when I pasted in Volunteers Needed it brought an extra return and made that area a little larger.
So I'm just going to grab the Selection tool and make this a little smaller, so it's the same size as everything else. Next I want to add the rest of the content to these widgets. So I'm going to triple-click to select this paragraph, and cut it to the Clipboard. Next with my Selection tool, I'm going to click slowly until I grab the container of this widget and then I'll paste it in. As you can see it comes in as its own text frame inside this area of the widget. I'll use my Arrow keys to fine- tune its location and its size. Next I'll go to my Paragraph Styles and apply I'll the P paragraph style.
Once I have the size that I like, I'm going to select the container and make it a little smaller so it fits snug. Finally to make the text a little more readable, I'm going to change the Fill color to white. Let's repeat the process with the other two. We'll cut this paragraph and then we'll drill down into the New Cafe menu, and paste it in. You'll notice that the background of the New Cafe menu is also white. That's because Edit Together was on by default for this widget. I'll change this to paragraph style P, resize and make sure everything fits good, then I'll repeat it with the last one.
Let's preview and see how this looks. In Preview mode everything seems to be working well, but it needs a little color. So let's go back into Design mode and change the color. I'm going to click slowly until I select the container of Volunteers Needed. Next I'll go into the panel menu and turn off Edit Together. This way I can change the color of just this frame, without affecting the others. I'm going to open up my States panel and select the Normal state Next I'm going to open up my Text panel and change the color of the text to black.
When I switch to the Rollover state, I'm going to change the color to a dark blue. The Mouse Down is fine and I'm not going to worry about the Active state. Now let's repeat this process for the next two, and now let's preview it. In Preview mode the Rollover seem to be working correctly. However, when I click on something and I try to rollover, I'm not seeing the effect that I like. and then I'll go to Fill and I'm going to choose a light blue. So what I need to do is go back into Design mode and add the Active state. For the Active state I'm going to put the same dark color as Rollover and Mouse Down, and then I'm going to repeat the process for the others.
There is the dark green, and finally the dark blue. Now let's try it out. Here we are, the Rollover is working, and when I click on it, I'm on that particular widget. That's what I expected it to be. One final change that we have is back in the Design mode I'm going to go to the panel menu and we have an option called Can Close All and Close All Initially. With both these turned on, when I go to Preview, you see that they'll all be closed initially. But when I happen to click on any of them, it will open up.
But if I want to close all of them, I just click on the top one again and they all become closed. As you can see the Accordion panel is quite useful, and lets you put practically anything inside it. In addition to text you can put images, other widgets, HTML or even a Google map, or a YouTube video.
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.