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 you draw a rectangle, you normally set its size by either dragging it or using specific numbers in the Control panel. However you can also set its dimensions to be 100% of the width of the browser, so no matter what size the user changes it to be, the rectangle will resize accordingly. Let's go to the About page and on the About page, we're going to scroll down and draw a rectangle that's pretty wide. Let's change its color to green so we can see this easier and select it with our Selection tool.
Now that we have this made, we're going to go to File > Preview Page in Browser. As I scroll down to see this rectangle, as I resize the width of this web browser, the rectangle's staying the same size and not changing. If I want this to change in relationship to the size of the web browser, there are a couple things we can do. I'm going to close this Preview, and we're going to go back into Muse, and I'm going to zoom out by pressing Command+- or Ctrl+-. Next, I'll grab the left edge of this rectangle and as I snap it to the edge, you see a red line show up.
This is letting me know it's snapped to the left edge of the web browser. If you're not seeing the guide, make sure you turned your Smart Guides on by going to the View menu. Next, I'll grab the right edge and repeat the process to the right side of the browser. Now that I have this set, we'll go back to File > Preview Page in Browser. Looking at this page, the rectangle is the width of the web browser. As I change the width, we'll see the rectangle grows and shrinks accordingly. This is considered a 100% width object.
These work great for headers and footers. You can put them anywhere you want the area to expand forever. However be careful with images because an image won't necessarily increase, unless you have it set as a background image or maybe a tile. Let's try that ourselves. I'm going to close this window and go back into Muse and get rid of this rectangle. Next, we'll close this page and visit the Master page. On the Master page, we'll scroll down to the bottom and we're going to grab the rectangle and we're going to draw one at the bottom.
Within this rectangle, we'll go to the Fill and add a background image. We're going to look for footer-tile and select it. Next, we're going to change the Fitting to Tile Horizontally, so it repeats all the way across regardless of the width of the particular shape. Next, we're going to remove the background color so that white box isn't showing. We'll also get rid of the Stroke. With this selected, we'll zoom out by pressing Command+Minus or Ctrl+Minus. We'll make this 100% width object just like we did before by lining up the left side of the object with the left edge of the browser.
We'll repeat the process on the right side. Next, we'll draw another rectangle at the bottom to fill in the empty space. We'll remove the Stroke and we're going to change the Fill color using the Eyedropper to sample the color from the image. We'll go to the Object menu and send it to the back. Next, grab your Selection tool and make sure it is also a 100% width object. Now that we have this set, we can go back to our Plan view and go to any page and then preview it in the web browser.
Now that we have our Footer set up as a 100% width object, it will expand and contract regardless of the width of our web browser. Since people may visit your site using browsers as small as cell phones and as large as 30 inch monitors, creating a 100% width frame is a nice way to ensure a consistent experience for all 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.