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.
On many web sites, you probably have noticed buttons that change their appearance when you roll over and click on them. This change in appearance is also referred to as a state. In this movie, we'll take a look at changing the appearance of objects in our site by using the States panel. Let's go to the Home page and we're going to go to Preview mode to preview a finished button already. As I mouse over the Upcoming Events button, you'll notice that the color of the background changes as well as the color and the boldness of the text. As I click, the text will also become white, and when I release, it goes to the hyperlink destination.
Let's go back to the Design view to learn how to do this ourselves. Our first step is to open the States panel. If you don't have the States panel open, go to Window > States. I already have it open over here and I'm just going to zoom in a little bit to make this easier to see. So I'm going to press Command+Plus on the Mac or Ctrl+Plus on the PC. When I select Upcoming Events, you'll see in the States panel that there's a Normal, Rollover, Mousedown, and Active state. Normal specifies the initial or default appearance of the rectangle when the web page loads in the browser, Rollover is when you mouse over the rectangle with your cursor in the web page, Mousedown is when you're clicking on the button itself, and Active is the initial appearance when you're on a particular page.
This option is reserved for menu bar widgets and tap panel widgets. Now let's set up these states ourselves. We're going to select Plan Your Visit. You notice that the colored background and text is already set correctly. That's because this is what we designed earlier and this is what we want the default appearance to be. Next, we're going to click on Rollover. When we select Rollover nothing really changes, because we haven't changed anything yet. But what we're going to do is change the background color of the frame. At the Control Bar at the top of the screen, I'm going to click on the Fill color and change it to a darker blue.
Next, I want to change the color of the text. So I'll make sure I have the Text panel open and I'm going to change the color to black. Next, I want my text to be bold, so we'll press the Bold button. After changing our Rollover appearance, let's go to Preview to make sure it's working properly. So we'll click on the Preview button and as I roll over, we can see it's working as expected. We'll go back to Design mode to finish it up. Our next step is to go to Mousedown. On Mousedown, I want to change the color of just the text.
I want the text to be white. So I'm going to go to Text panel and change the color to white. With this change, we'll go back to Preview mode and then try it out again. My Rollover is working properly and when I click, the color is changing. Back in Design mode, I could edit Active state, but it isn't necessary at this time. In a later movie, we'll learn all about active states. If I don't want the change that I made in the Mousedown state, I can press the Trashcan in the States panel and that will reset the state to its initial appearance.
Other than color changes, there are other changes that we can try. I'm going to select the Rollover state and this time, I'm going to change the font. We're going to go from Arial to Courier New. Next, I'll go to Effects and we'll give it a shadow. Now let's go to Preview mode and see how it looks. You'll notice as I roll over the color, text, and effect is changing. Any change in appearance that you can do in Muse, you can also change in states.
One way to keep your states consistent across your entire web site is to use graphic styles. Just save each state as a style, then you can just apply it whenever you need. It's a great way to save time and keep things consistent. If you find yourself spending a lot of time creating buttons and working with the States panel, you might want to consider using Photoshop buttons. By taking the time to build the buttons in Photoshop, it will make working with States much easier. In the next movie, we'll take a look at working with Photoshop buttons.
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.