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.
Now that we've gone over the fundamentals of the interface, let's get started creating a brand-new web site. When you're ready to create a new web site in Muse, inside the splash screen, you can just press the New Site button, or you can go to the File menu and choose New Site or press Command+N or Ctrl+N on the PC. In the New Site dialog box, there are a lot of options here, but don't worry if it seems complicated, because if you mess up, you can always come back later and change your mind via the Site Options, after your web site has been created.
If you're used to Adobe InDesign, think of this as the New Document dialog box that pops up. You may also notice that there are no units after these numbers. That's because everything in web design is measured in pixels. So you have to worry about putting px or using anything else. In fact you can't measure in inches, centimeters, picas or even ciceros. Do you know what a cicero is? It's the Italian Pica. One cicero is equal to 1/6th a French inch. If you want to change the values of any of these numbers, you can use your mouse to click up or down.
But personally, I prefer just to click inside the field and use my arrow keys to press up or down to slowly change the numbers. If I use the Shift key with the arrow keys, it will go up even faster. Now the first field is the Page Width and that's going to be the width of the web site that you're building. If you've never made a web site before, you may be wondering, what is a good Page Width size? Well, in the past, designers would sometimes make them 600, 700 or 800 pixels wide, but over time people have bought larger and larger monitors. So today, the standard is usually around 960 pixels wide.
If you're curious how wide a particular web site is, you can always take a screenshot of it and then measure it in Photoshop to find out yourself. The next field is Minimum Height. Now, that may seem strange, because you might think it would say Page Height. The reason it's Minimum is because each page of a Muse site is dynamic. That means the page will grow with content. For example, the first page of your site may be quite small and only need to be 500 pixels tall. But the second page may have lots of content with lots of text and pictures and the user may have to scroll down to that content.
This number is just the smallest height that your page will be. It can always be longer, it just couldn't be shorter. The next field is a checkbox that says Center Horizontally. This will center your web site within the web browser. Most web sites today are centered. If you'd prefer to have it aligned left, you can always uncheck this and have it be left aligned. Unfortunately, there is no way right now to have your web site be aligned to the right. Our next field are Margins. Margins determine a safe area of the page where we can lay out our content.
This is very similar to the Margins inside Adobe InDesign or Microsoft Word. Margins don't have anything to do with CSS or content rules. So if you're familiar with what I'm talking about, it doesn't affect that. If you're not familiar with CSS or content rules, please disregard that and just think of them for layout purposes. If I click this little lock, I can either break or keep all of the settings the same. That means when they're all the same, I can come in here and use my arrow keys to change all the values at once. For now, we're going to keep them all at 20.
Columns will help you visually split up your layout, and they also aid in design by allowing objects to snap to the various columns. I'm going to change the value to 12 and when I do this, you'll notice that the Column Width will change. The reason for this, is because as you add more columns, they have to become more narrow. If I would change my Column Width's number, the Page Width would actually have to change. The Gutter is the space between the columns. We'll leave that at 20 for right now. And finally, we have Padding. Padding determines the space in pixels between the edges of the browser window and the edges of your web page.
So if I wanted to have the web page be aligned to the top of the web browser, I would want to put a zero number in here. Right now I can only control the Top and the Bottom. I can't control the Left because my web page is centered horizontally in the middle of my web browser. So if I turn this off, I'll be able to use the Left Padding to move my web content away from the left edge of my web browser. Now that we have our web site set up, let's click OK. Now that we've created our site, we'll explore the various Plan options in the next movie.
If you don't know what size to make your site, the default setting of 960 pixels wide is a good starting point. In fact, there is a great web site dedicated to the idea of working with a 960 pixel grid. To learn more about working with a 960 grid, please visit 960.gs.
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.