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.
If you have a large amount of information to share and a small amount of space, you might want to consider using a Tabbed panel. This widget contains several panes that overlap and when you click on that tab, that information is displayed. Let's go to the Widget Library panel and in the panels area I'm going to click and drag Tabbed panels onto the page. Next, I'm going to click and drag to open this up because we're going to put a lot of information in here. While this is open, let's go to the Preview panel and make sure it's working correctly.
You'll notice that the Lorem 1 tab is highlighted because we're in that area. When I click on Ipsum 2, that tab becomes highlighted, and Dolor 3. Back in Design mode, I'm going to put the Photography information in Lorem 1, the Paintings information in the second tab, and the Sculpture information in the third tab. Let's begin by selecting the Photography text and holding the Shift key to grab the image, and pressing Command+X on the Mac or Ctrl+X on the PC to cut them to the Clipboard. Now we'll go over to the widget and slowly click until we have the bottom container selected.
We'll press Command+V on the Mac or Ctrl+V on the PC to paste them in. You'll notice that the widget became wider once we've pasted our information in. That's because our information was wider than the widget. Widgets are smart because they will expand as needed when you add content. Now let's continue the operation for the other two areas. I'll get rid of this extra information because I don't need it, and then I'll select these two items, cut it to the Clipboard, go to the second page item, select the container and then paste it in. Then finally, we'll grab the last two, go to Dolor 3, select the container and paste.
Now that I have everything set up correctly, let's go to the Preview panel and make sure it's working. As I click on each tab, we can see it switches to that information. As you can see, we can fit a lot more information in a smaller area with a Tabbed panel, but right now it doesn't match the appearance of our site. Let's go back and fix that. Back in Design mode, I'm going to get rid of this extra object by hitting Delete, and we're going to go to Lorem 1 and click slowly to grab the top item. I'm going to keep clicking until I'm able to select the text, then I'll type in Photography.
Next, I'll click off and then slowly click again until I just have that container selected. I want to change the color of this so it matches the text below Photography. I'd like to make it green. I'm going to go over to the States panel and make sure I'm on the Normal state. On the Normal state I'm going to go to the Fill and change it from Gradient to Solid. Next, I'll change the change the color to a light green. You will notice as I change the color of this tab, the other tabs change too; that's because Edit Together is turned on. I'm going to go to the panel menu and turn off Edit Together.
If you click too far, just hit Escape to go back out. I'll make sure I have the Normal tab selected and next I'm going to change the color of the text to black, so it's a little more readable. Let's go down to Rollover and change its color to a dark green. I want Mouse Down to be the same as well as Active. Next, I'm going to click to select the container in the background, switch to the Normal state and give it the same light green. Now that I have that set, let's change the appearance of this area.
I'm going to resize this text frame, so it's a little larger and I'm going to put it down at the bottom. Next, I'm going to hold down my Command or Ctrl key on the PC to resize this graphic frame so it fits a little nicer. I'll right-click, choose Fitting and choose Fill Frame Proportionally. If I need to crop a little more, I'll just continue to hold down the Command key. There we are; that looks good. Next, we'll go to Ipsum 2 and we'll start to make some more changes in this tab. I'm going to grab the top tab and change the text to Paintings.
I'll press the Escape key to select the container and I'm going to change the Fill to a darker blue. Next, I'll go to the Normal state and change it to a lighter blue. On the Rollover state, I'll be adding the darker blue. I'm just going to be repeating the process that I did with the other tabs. Next, I'll grab the background container, go to the Normal state and change the Fill to the light blue. I'll resize everything so it fits nicely by holding the Command key, right-click and Fill the Frame Proportionally. There we go; that looks better.
Now if we preview, you can see as we go between each tab, everything changes according to plan. Next, we'll repeat the process for the third tab. Now that the tabs are complete, it'd be nice to add a little something extra to make it stand out from a normal tab. What we're going to do is go back to the Photography tab. I'm going to deselect and go to File > Place. In the Place dialog, I'll go to the Assets panel and I'm going to go and choose arrow-photography. After I place this on the page, it looks like it's the same color as the Photography tab; well that's by design.
I'm going to cut this to the Clipboard and then I'm going to click slowly to grab the background container and paste it in. Now I'm going to click and drag and put it right underneath the tab. I'll use my arrow keys to fine-tune it. Now, when we go to Preview mode, we'll see the tab there when it's available. When I click on Painting, it will disappear. Now let's repeat the process for the other two tabs. Back in the Design mode, I'll press Command+D on the Mac or Ctrl+D on the PC and we're going to select arrow-painting, hold down our Command or Ctrl key, and select Sculpture.
With my bulleted cursor, I'll just click twice to put them on the page. Then I'm going to click to switch the Paintings tab, select the painting graphic, cut it to the Clipboard, select the background and then paste it in. Now at this point I notice that I actually made a mistake. I made the tab in the background with a wrong color and we can't see it. So what I'm going to do is just select the background and I'm going to change the Fill to a lighter blue. Next I'm going to select the top tab and change its color to the same blue as the other adornment.
I'm going to repeat the process for the other states, and then the normal state needs to be a lighter blue. We'll use our Arrow keys to line this up and then we'll repeat the process by cutting and pasting one last time for Sculpture. Now that this is done, we'll go to Preview mode and see how it looks. Photography has a tab, Paintings has a tab, and Sculpture has a tab. Remember that you can add any content at all to each of the tabs, just like you can with the Accordion Widget.
Be sure to make the tabs at the top stand out from the content below so the user visiting your site is able to navigate the tabs easily.
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.