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.
When you create a normal hyperlink, it will take you from your current page to another page on your site or another web site altogether. However, it is possible to create links within a single page of your site. This can be very useful if you have a long page and want to let people jump right to the information. Before we begin to create Link Anchors in Muse, let's take a look at a couple of examples online to see how they're being used today. On the Kevin's Koffee Kart site, you can see where it says Drip Coffee, French Press and Espresso, and if I click on any of these, it will bring me to that area of the page.
So let's try out French Press. There we slide down to French Press and Espresso jumps us down to Espresso. This is an easier way to get to the specific information without having to scroll yourself. Let's take a look at the Happy Valley Adventures. This page has unique take on Link Anchors. When I click on Services, you'll see that most of the page stays the same, but the text itself scrolls in the background. It continues with About and Contact and then we can go all the way back to the top.
If we want to do this manually ourselves, we can just scroll. Both of these webpages were created with Muse and Link Anchors. Let's jump back into Muse and learn how to create Link Anchors for ourself. Back in Muse, we'll go to the Permanent Collection page and here you can see that we've got Photography, Paintings and Sculpture. You'll see as I scroll down I have texts and images associated with each section. What I want to happen is when I click on Photography, it brings me to the Photography area, Paintings bring me to the Painting area, and Sculpture brings me to the Sculpture section.
In order to link to those areas, I first have to create a destination or an anchor. There are a few different ways that we can do this. The easiest way is to go to your Control bar and just click on the Anchor. When you do this, your cursor changes into a Link Anchor and you can just click wherever you want it to be on the page. In this case, I'm going to put it right next to Photography. When I do this, I have to give it a name. So I'm going to call it Photography. Now that I have that set, let's scroll down and do another. For Paintings, I'm going to use the keyboard shortcut.
All I have to do is press the letter A. That will give me a Link Anchor and I can just click. We'll call this one Paintings. And finally, for Sculpture, I'm going to go to the Object menu and choose Insert Link Anchor. That will give me the same cursor and then I'll click and call this Sculpture. Now that I have my anchors set, let's go back to the top of the page and link to them. I'm going to select the text frame Photography and go to my Hyperlink pull-down, and you can see right at the bottom, we have all of the anchors that we just created.
So I'm going to link to Photography. Next, we'll link Paintings to Paintings and Sculpture to Sculpture. Let's try it out and see how it looks. So when I click on Paintings, you'll see we'll scroll down to Paintings. However, you'll notice a couple of problems. First of all, Paintings is a little cut off at the top, plus I have no way of getting back. The navigation didn't come with me. So let's solve this problem together. We're going to go to Design. You'll notice that the Photography anchor is covering up the word Photography, and that might be hard to read.
So if I like, I can move this further to the left; that's not a problem. I want this to be close enough to photography without it being cut off when I scroll to this in my web browser. We'll repeat the process with Paintings and Sculpture. So now that I have that set, let's preview again. So when I click on Paintings, it scrolls and I can comfortably read Paintings. But we still have the problem that the menus didn't come along. Let's go back into Design and try to solve that problem.
In an earlier movie, we learned about pinning, where we could position certain items on the page regardless of how you scrolled. That's what we're going to do with our navigation system that we created for Photography, Paintings, and Sculpture. I'm going to click and drag and select all three of these, and in the Control panel, I'm going to pin it in the top-middle. Now we're going to go to Preview and test it out. When I click on Paintings, we can see it scrolls down, but our navigation system is still here; the same thing with Sculpture and Photography. Now that we're testing this out, I see one last little issue.
There's no way to go all the way back to the top without scrolling. Let's create a Hyperlink and a Link Anchor to solve this problem. We'll go back to Design mode and on this page, I'm going to grab another Link Anchor and put it at the top of the page and I'm going to call this Top. Next, I'm going to select this text frame, hold down my Option or Alt key to drag a copy of it to put it lower, and I'm going to rename this Back to Top. Next, we'll change its color to something a little different and I'll select the frame with my Selection tool and add the Link Anchor to Top and we'll test it out.
In Preview mode, if I click to go down to Sculpture, I can click on Back to Top and now we're all the way back to the top. Back in the Design mode, there is one last tip I want to share with you. After you've set your Link Anchors, they may become distracting because you don't need to edit them anymore, and they just might get in the way or you might accidentally move them. If you would like to temporarily hide them, you can go to View > Hide Anchors. Now you don't have to worry about seeing them on the page, or moving them. If you need to edit them again, you can always go back to View > Show Anchors.
Link Anchors are a great way to help people find information in a deep and long site. If you find yourself creating a page that is very long, consider taking the time to make Link Anchors to the content and back to the top of the page.
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.