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 creating a web site, individual pages can vary in length based on the content of each page. Within Muse we can use a variety of guides to help us determine what pages begin in the browser, where headers and footers live, and even where the page ends. We're going to start by going to the Master. So I'm just going to come down here to A-Master and double-click. Now on the Master you'll see a series of guides on the left-hand side. Let's take a look at each of them. As you hover over, a tooltip will tell you what it is and how it works. The first one is the Top of the Page, then we have our Header, our Footer, and as we scroll down, the Bottom of the Page and the Bottom of the Browser.
If you don't see all of these guides, make sure you're on the Master page and it says Hide Guides here because if you've hidden your guides, you'll have to go to View > Show Guides in order to see all of them. The Top of the Page determines where the top of the page is in relationship to the web browser. As we lower this, there's more padding put in, so the content is further away from the web browser. As we raise it up, it gets closer again. So as an example, if I put this all the way to the top and go to File > Preview Page in Browser, we'll see that the content is all the way up at the top and sometimes that's maybe what you're looking for.
Other times we want this a little lower, so we're just going to drag this back down. The Header is used to determine a section where the content will appear the same on every single page that's connected to that particular Master. This is really useful for menus and other repeating elements. We'll talk more about this in the next movie. That's also true with our Footer. The Footer is where we determine what shows up at the bottom of every single page. Sometimes this is used for legalese, another menu system, or contact information. Once again we'll be going over this along with the Header in the next movie.
The Bottom of the Page sets the minimum height of the page itself. As I drag this down, I'll add more content to the page itself. In fact, you don't have to move this very often, because Muse has a wonderful auto-expanding Bottom of Page feature. So as an example, if I grab this rectangle, I'm just going to draw this out and give it a color. When I grab my Selection tool, as I move this down, watch what happens, the page automatically expands and contracts. This allows me to continue to add content without having to worry about coming down here and adding more content to the page.
It makes designing for the web significantly easier. The last one is the Bottom of the Browser. This determines to padding between the bottom of your content and the browser itself. So I could give myself more room down here or I could drag it all the way up and have it snap right to the bottom. The choice is yours. All of these guides can be manipulated on any of the pages except for the Header and Footer. The Header and Footer are unique in that they only can be modified on the Master page. For now, I'm going to delete this rectangle, and let's go back to the Plan view and go to the Home page.
On the Home page you'll see that the Header and Footer are already grayed out because I can't access them. That's because they're not available on a regular page. They're only available on a Master page. But if I like, I can come down here and move any of the other guides to make this particular page unique. Another question you may be asking yourself is where are the Ruler guides? In most Adobe applications, you can go over to the Ruler and click and drag to bring out a guide to help align your objects. Unfortunately, right now they just don't exist in Muse. Hopefully they will be added in a future update.
For now you have features like Smart Guides and Alignment to help you with your aligning needs. Now that we understand the basics of guides, let's take a look at how to work with headers and footers in the next movie.
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.