Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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 designing a layout, most people usually name their styles something like headline, subhead, sub-subhead and body. But with HTML the names of styles are much more strict. In Web design, styles are normally named h1 for the biggest, most important headline on the page, h2 for the next biggest headline, and so on all the way down to h6. p is reserved for the body text or normal paragraph text. Using the export-taking feature, you can continue to use whatever name you wish inside your layout, but upon export, the styles names will change to whatever you have them set to.
Before we start working in Muse, I want to show you an example of the CSS Zen Garden to give you an idea of how CSS works. Looking at this page, it's beautiful and very simple. But on the right-hand side, it says select a design. Let's try another design. Let's see what Under the Sea! looks like. This page looks completely different, doesn't it? As I scroll down, I see different images, different formatting of text. Let's see another one. How about Make 'em Proud? Here is another example where it looks completely different.
But what if I would tell you that all three of these pages had the exact same content? The reason for this is because of CSS. If I turn off the CSS, you'll see how all three pages look exactly the same. In order to turn off the CSS, I have to disable my styles. I'm going to show you how to do this with the Safari browser which is available both on the Mac and the PC. We're going to go to Safari's Preferences, and in the Advanced tab, I'm going to show to Develop menu. Now that I have this turned on, I can go to Develop > Disable Styles.
You see how this page is nothing but text. That's what most web pages are. If I turn the Styles back on and go back to the previous page and I disable the Styles again, you can see how it looks exactly the same. That's because it was only the CSS that was changing the appearance of the site. Let's turn this back on and close Safari. Back in Muse, let's go back to the About Us page. On this page we have a wide variety of styles. When I select About Us, we'll see the style applied is breadcrumb nav.
Now breadcrumb nav might be useful to us as a human, but to a Web browser, they have no idea what that is. We have to let Muse know that this is needs to be an h1. To do that, go over to that style, right-click and choose Style Options. Here we have the Paragraph Tag which will be applied when it's exporting. So I'm going to change this to Headline (h1). Now the appearance in Muse will not change at all; it'll just change its appearance upon export. In fact, let's see what it looks like right now.
We're going to go to File > Preview Page in Browser and everything looks fine. But watch what happens when we disable our Styles. You see how About Us is a little bigger than the rest of the text. We need to make sure that each of these paragraphs have the correct style applied. So I'm going to go back and re-enable the styles, back to Muse, and we can see that Celebrating the Best of modern Art is Main Headline - bold black. This is the secondary headline on the page which would make it an h2.
So we'll right-click, Style Options, and change it to an h2. We'll repeat the process for the next one, which would be subhead - black, and we're going to call that one h3. Now our body text should be a Paragraph. Luckily, all of the styles in Muse by default are tagged to a Paragraph, so you don't have to worry about those. You only need to be changing the headlines and subheads.
Let's preview this one more time; looking good. We'll disable the Styles. And now we can see it's changing the way that it should be. In addition to Paragraph Styles, we also have to make some changes with our Character Styles. You can see that I've got SAMOCA and SAMOCA has the Character Style of Bold. On the Web, they don't use a style called Bold. Instead, I'm going to right-click and I'm going to change the Style Options to strong or Important. Now it will be tagged correctly when it's exporting.
There are a few other options in there which I'm not going to go over right now, but if you're interested in what they are, you can visit w3schools.com/html5. Taking a bit of time it takes to set your export tags for your styles can go a long way to improving the accessibility and searchability of your site. As you become more comfortable working with HTML tags, you might want to consider labeling your styles with the actual HTML names, like h1 and h2, rather than headline or subhead.
This will end up making it even easier to set your export tags since they'll be named the same thing.
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.