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.
Earlier we had learned how to import a graphic by going to File > Place. But what happens if you already have a frame on your page that is already the correct size. In order to get a graphic into that frame, we have to learn about background images. Let's begin by making a frame. So I'm going to grab my Frame tool and we're going to click and drag. Next we'll remove the Stroke so there's no formatting at all on this frame. Now to put a picture in this frame, you might think that you'd want to go to File > Place. Well let's try and see what happens.
In the Assets folder let's just grab an image and we'll press Select. And with our loaded cursor if you try to click in here, it's not going to go in; it's just going to create its own frame. Well we're going to delete this and we're going to select this frame. In order to put a picture in here we have to use a background image. And that means we're going to fill the frame with an image, just like you fill a frame with a color. To do that, we're going to go over to Fill, you have to click on the word here, and then go down to Image and click on this little folder. That will let me browse to the image that I want.
I'm going to grab bird-watching-big. Now that I have that placed, let's click off and I can move this around on the page. Now when I click and drag, look what happens. It's just cropping the image; the image isn't getting any larger. The reason for that, is it's in the background; it's like a color. So what we're going to do is I'm going to make this frame be a little bigger, and if we want to manipulate the picture, we have to go back to our Fill settings. Now there's two ways to deal with a Fill, I can do it up here like we've been using or I can use the Fill panel.
So if I go to Window > Fill, we can see the panel over here has the same options. I kind of prefer this because then I don't have to go to this little drop-down menu every single time. Right now this image is aligned to the top and left corner of this frame. I can change this by changing its position. I can have this aligned in the center on the left, centered within the frame or any other corner that I see fit. The other options that I have are Fitting. If I by go in here, I can choose Tile and have it tiled repeatedly throughout the frame.
I can also tile it different directions or put it back to its original size. Another interesting thing you can do is we can choose Scale to Fit, so it's fitting perfectly, or Scale to Fill; that means no matter what I do here, the image will keep scaling to fill it up. For now let's put it back to the original size. I'm going to trash this graphic and replace it with another one. Let's browse and find footer-tile.png. Now when I do this, we just have this tiny little graphic that's sitting here.
But what we're going to do is change the Fitting to Tile Horizontally, it will repeat across horizontally this entire frame. As I resize this frame, it will continue to expand and contract. One of the great things about using tile graphics is that it'll only be downloaded once into the browser's memory. This will greatly reduce the download time no matter how wide your page ends up being. What we're going to do now is create a Footer. So I'm going to select this graphic and make it become a Footer and drag this to the bottom, and I'm going to change the fill of this to no color.
Next I'm going to resize this till it goes all the way to the edge of the browser. You see this little red line that shows up? That means it snapped to he edge of the browser. I'm going to collapse this for a little more room and I'm going to repeat the process to the right side. Now that it's snapped to both sides, this is a 100% width object. Which means it will scale as your browser gets wider or smaller. Let's preview this. I'm going to go to File > Preview Page in Browser. You can see here as I change the width of the web browser, this graphic will expand to be the exact width of whatever browser window is available.
We'll close this and let's just add another graphic to this. I'm going to grab the Rectangle tool; I'm going to draw another graphic underneath here. And this time I'm going to remove the Stroke, I'm going to go to the Fill, but I'm going to use the Eyedropper to sample the color from this. There we go. Now when I go to File > Preview Page in Browser, we have a nice footer that automatically repeats across the entire page. Creating background graphics is just another way to work with graphics inside Muse. In fact, it is possible to place a graphic and then another graphic as a background image.
Try combining a transparent PNG with a background JPEG and see what kind of graphics you can end up creating.
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.