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.
When creating text hyperlinks in Muse, they will default to the color blue with an underline. Well, this does make it obvious that they are hyperlinks and unfortunately, may not match the look of your site. In order to control the look of your hyperlinks, you will need to create Link Styles. Let's go to the Volunteer page, and as we scroll down, [00:00:221.31] you'll see at the bottom of the page the text Contact us. I want this to link to the Contact Us page. So what I'm going to do is select this with my Type tool and at the top of the screen I'm going to change it to be a Hyperlink to Contact Us.
As you can see it changes to the default appearance of blue with an underline. But I really want to change this to something that looks a little better and maybe matches the look of my site. To do that, we have to create a link style. There are two different ways we can do this. I can go to the Hyperlink menu here, click and choose Edit Link Styles or I can go to File > Site Properties and go to Hyperlinks and make my Link Styles here. It doesn't matter which way you go; the choice is up to you. I'm going to go back to Hyperlink and choose Edit Link Styles and we're going to make a new one.
I'll press the New button and we're going to name this internal link. The reason I'm calling this internal link is I plan on using this whenever I link internally inside Muse. There are four different appearances or states that are available to a Hyperlink. Normal is how it looks when you see it on your page, Hover over is the rollover appearance, Visited is when you've already clicked on this link at some point, and Active is when you're actually clicking on it. Next to each of these, we have some properties that we can change.
We change the color of each one, Bold, Italic or an Underline. In the case of the normal appearance, I'm going to change the color, I want it to be blue. I also want it bold and to not have it italic or an underline. If you notice the tiny square inside the checkbox, that means it's being ignored. But if I put a check or remove the check, that means it forces it to be this. For Hover, which is the rollover, I want it to be the same color, and I want it to be bold with no italic, but I want it to have an underline.
That way as you mouse over it, you'll see an underline appear. After visiting a link, I want that the color to remain purple, but I'm going to keep it bold with no italic and without a hyperlink. And Active, I'm going to keep as red, bold, no italic and have it underline. Now that I have all of this setup, we'll click OK. Now at first glance, you may be thinking it didn't work. Well the reason it's not working is we haven't applied the style to our text yet. So now I'm just going to select Contact us, go to Hyperlink at the top and apply the style internal link.
Now it's working the way we expect. But let's just double check by going into Preview mode. We're going to go up to Preview and right now it's bold and blue. As I mouse over, the underline appears. When I click, it turns red and we visit the site. We're going to go back to Design. Once you've created a hyperlink style you can create internal hyperlinks very easily. For example, if I want the word expertise to also go to the Contact Us page, I can go to the top of the screen and choose Contact Us, and it goes back to its old appearance.
But all I have to do is change the Hyperlink style to internal link. However, if we use paragraph styles, we can actually save ourselves a step. I'm going to press Command+Z or Ctrl+Z to do an undo to remove the Link Style that I applied. I'm going to keep this Hyperlink with a default appearance. With my cursor in this paragraph, you'll notice that the Paragraph Style has a Plus next to it. That means there's an override. The override in this paragraph is the fact that I added a link style. If I redefine the style of this paragraph, it will pick up the link style, which means every hyperlink that I add to this particular style will look exactly like Contact Us.
So all I have to do, is mouse over that style, right-click my mouse and choose Redefine Style. As you can see, expertise in the top paragraph updated and I didn't even have to change the hyperlink style. In fact, if I try it again, I go to SAMOCA and add the hyperlink About Us, its appearance will change automatically. So adding a Link Style to your Paragraph Style is a great way to save a lot of time. We're going to create one more Link Style; this is going to be in invisible Link Style.
If I scroll up to the top of the page, you can see the word Volunteer. We're going to close the Volunteer page, and go back to the Plan view. Next, we're going to go to the Current Exhibits page. On the Current Exhibits page, you'll notice that Collections is blue with an underline. This is because this is a hyperlink set to go to the Collections page, and it has the default appearance of a Link Style applied. But I don't want it to look this way. I want it to look exactly the same as Current Exhibit. So what we need to do is create an invisible Link Style, so it doesn't change the appearance of the text.
To do this, we're going to select the text and go to Hyperlink > Edit Link Styles. In here we'll make a new Hyperlink style and we're going to call this Invisible. What we need to do is ignore the color for each state, we're going to remove the underline for each state, and then we're going to keep the bold and italic the way that they are, because they're currently set to ignore. With this set, we'll press OK and apply the Link Style of invisible.
Now that we have this set, this is a functioning hyperlink but at first glance, it won't look like that. So if we go to Preview mode, you'll notice when I mouse over, it's a hyperlink and I can go back to the page. While it is possible to change a lot of attributes for your Link Styles, remember that you can only control the color, bold, italic and underline. The font and size is not something that you are able to control. Even with these limitations, you still should be able to create beautiful links with Muse.
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.