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.
In the previous movie, we learned how to change the formatting of the page and the background of your web site. While most of the changes were color based, it is possible to use your own artwork or images as the background for both the browser and to fill of the page itself. Let's go to the Home page. On the Home page, you can see that the Browser Fill is set to a light blue. What we're going to do is change the Fill of the page itself. So we're going to come up to Fill and choose Image. From here, we're going to go to our Desktop > Exercise folders > Assets and then we're going to grab this first image right here.
Once we do this, you can see that the image is centered on the page. But if you try to grab it with your Selection tool, you're not going to be able to. That's because the image is filling up the background of the page itself. If I want to manipulate this, I have to go over to Fill and here I can have my Position controls. We can see that if I press the Position on the left, it lines up on the left side, the right, top, bottom and even any of the corners. Some other changes that we can do are the Fitting options.
Right now, it's set to the original size of the image. But if I click on this, I can say Scale To Fit, and it's going to scale up so it's fitting up here. I can even do Scale To Fill and it will blow up to fill the entire page. But unfortunately, this graphic is pretty low res, and if I make it this large, it doesn't look very good. But if I'd used a high-res graphic, it might look a little better. We'll put it back to Original Size. Another useful option is tiling. I can come over here and say Tile and it's just going to do a repeated pattern throughout the entire page.
I can even control the tiling if I say Tile Horizontal. Now it's just going from the left to the right. If I change its position, it could be at the top or even the bottom of the page. We can do the opposite of this, of Tile Vertically, and line it up on the left or right-hand side too. If you want to change your image, you can always browse to a new one or hit the little trashcan to remove it. We can also do this process for the Browser Fill. So, if I come over to the Browser Fill, and I'm going to grab an image, by going to the Assets folder and grabbing background.jpg.
Now that I've done this, I'm going to collapse these panels so we can see it easier, and we can see that the whole page itself has this blue photo as the background. In fact, if I go to the Fill and lower the Opacity of the page, we can even see the background through the page itself. But for now, we're just going to leave this up all the way. We can preview this in our web browser by going to File > Preview Page in Browser. Here we can see that the picture is filling up the entire page all the way down to the bottom. There are a few other options with the Browser Fill.
When we click on Browser Fill, we can see right now the Fitting for this picture is Tile, which means the picture is repeating. But if I change this to Original Size, you can see there's a little bit of room left on the left and right hand side of the image itself. So if someone was on a very large monitor, they would start to see the blue on the left and right-hand side of the image. We could repeat this by changing from Fitting to Tile. That way the picture will keep tiling for eternity. Another option is to change the Color itself. Maybe this light blue doesn't match our photo very well.
So what we can do is click on this and grab our eyedropper and sample a color from the photo that we think would match very nicely. So I'll choose this nice blue and now that color blue matches the photo. So as you made the web browser larger, it wouldn't matter as much because it would match the photo. The final option is Scrolling. I'm going to leave this checked on, so you can see how this would work. What we need to do is come to the bottom of the page and grab this area called Bottom of Page. I'm just going to scroll down a little bit and we're just going to give ourselves a lot more content.
Now that we have some more content, I'm going to go to File > Preview Page in Browser. Now that that's set, as I scroll, it looks pretty normal. We can see we're just scrolling the entire page. But I'm going to close this. Let's go back to Browser Fill and turn off Scrolling. Now we're going to repeat the process. I'm going to File > Preview Page in Browser and now when I scroll you can see just the page itself is moving. We're not moving the background image. So if you like the way the image is, you can have that be static by turning off Scrolling.
That way just the content on the page scrolls and the background stays the way that it is. Adding your own images to the background of a page or browser is a great way to strengthen the design of your site. One warning that I want to share with you is that whenever you add images to your site, it will load slower. Just be careful not to add too large of an image to your background, otherwise your site may take too long to load for some users.
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.