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.
Have you ever noticed any web sites that have an object that seems to float at the same location, no matter how much you scroll or resize your browser? This technique is called pinning and is becoming a popular technique in modern web design. We're going to begin by taking a look at a few different web sites that are using pinning, so you can see how you can use them in your own designs. The first sight is sillypoems.info. Now as I scroll this page, pay attention to the navigation system on the right-hand side. You'll notice how the navigation system stays persistent, no matter where I go on the page.
This is because it's pinned to the right-hand side. Next, on informationhighwayman.com, the bar on the left-hand side does the same thing. It just stays consistent like a bookmark as you scroll across the page. And finally, Phase2 Design Studio has a unique take on pinning. Pay attention to the water droplet on the upper left-hand corner. As I scroll down, it starts to disappear and it makes you think that it's going through this pipe and eventually it pops out, goes in again and finally appears at the bottom.
This is accomplished by putting other objects on top of the logo. So as I scroll, you can see how it disappears. The reason this logo is disappearing and appearing again is because there are multiple objects overlapping it as we scroll down this page. Now let's take a look at how we can pin objects in Muse ourselves. Back in Muse, let's begin by going to the Permanent Collection page. On this page, pay attention to the Talk to Us button in the upper right-hand corner. Let's preview this in the browser and as I scroll, you will see it just disappears when we scroll down.
But what if want to have that persistent in the upper right-hand corner? Well, what we can do is if I come back into Muse, I'm going to select it and then pin it to the top and center. Next, when we preview this page in the browser, watch what happens, as we scroll, it stays persistent in the upper corner. Now you may be thinking, well why wouldn't we pin it to the upper right-hand corner? That's a very good question. Let's go back to the Plan view and go to the Pin test page, so we can understand how each of these corners work.
On the Pin test page, none of these objects are pinned right now. So we're going to preview in the browser so we can see how they behave. As I resize this page, the objects move with the page and there is really nothing special about them, but when we add pinning, we can see how they each behave differently. We'll close this page and go back into Muse. And the Upper Left, we're going to pin in the upper left-hand corner. Next, we'll go to File > Preview Page in Browser and now when we resize, look what happens. We see how it's static and doesn't move at all.
You'll notice that the upper left-hand corner stays at the exact same spot, at that position in the browser no matter what you do. Let's go back and try another. We'll go to the Lower Right and pin it there. As I resize this one, we can see it's fixed to a specific position in resizing. That's because it's pinned to the lower right-hand corner of the browser. As I go back in Muse, I'm going to pin each of these to the respective locations. Now that I have each of these finished, we're going to go to File > Preview Page in Browser.
Back in the web browser, you can see as I resize, each of them move in relationship to the edge of the web browser. Pinning is a great way to keep things snapped to the same location for social media or navigation. It may seem confusing as to which position to pin your object, but take your time and test each location until you find the right fit.
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.