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.
Some applications like Adobe Photoshop can seem overwhelming because of the sheer number of functions that they can do. If you're not familiar with the program, you might not know where to begin. Muse helps solve this problem by having a built-in workflow to take you through the steps of building a web site from the initial site map to publishing and managing it online. At the top of the screen, we have five different modes; a Plan mode, a Design mode, a Preview mode, a Publish mode and finally a Manage mode.
Each of these will take us though various stages of the development of our web site. We're going to begin in the Plan mode. The Plan mode is where we build our structure of the site, or the site map. Think of this as a Pages panel like in InDesign or another page layout program. In here we can see all of the different pages of the web site, move them around, organize and even apply master pages. While we're in this mode, we can at the top of the screen, change the Size of our thumbnails, we can make them larger and we can make them smaller if we want to fit more of them on the page.
We also have this little Master Badge down here. Where if I turn this off, you can see the master page that they're connected to, such as Static, disappear or appear, and we can also turn the Thumbnails on or off. If we turn this off, we'll actually have a little better performance on the page. The next mode is the Design mode. The Design mode is where you'll spend the vast majority of your time building your web site. Now if I want to go to the Design mode, I can just press the Design button, but more often I find myself just double- clicking on the page that I want to work on.
So I'm going to double- click on the Homepage and that immediately brings me to the Design mode. If I ever want to go back to the Plan mode again, I can either click on Plan or go here to go back to the Plan view. So either way works. Inside the Design mode, this is where I can work. You can see I have my tools on the side, I can select objects, I can move them around, transform, add content; this is where you spend most of your time designing. If you want to preview what your site is going to look like online, rather than having to export the code and view it in a web browser, there is actually a Preview built inside Muse.
So if we go up to Preview, it will render this page inside a built-in WebKit rendering engine which is the same engine used by Safari and Chrome. Inside the Preview mode any interactivity will function. As you can see when I rollover this menu, we have drop-downs. As well as when I come over here, this is a hyperlink going to another page. And in fact if I click on it, it will even go that page for me. When I'm done with the Preview mode, I can go back to the Design mode again just by clicking up here. There are a few other ways to go between these modes, for example I spend a lot of time going back and forth between Design and Preview when working.
So rather than having to hit these buttons, there is a couple keyboard shortcuts that I use. If I'm in Design mode and I want to go to Preview mode, I can press Command+P on the Mac or Ctrl+P on the PC. When I do that, it jumps straight to Preview. When I'm in Preview mode and I want to go back to Design, I'll just press Command+I or Ctrl+I to go back to Design mode. The next mode that we have is the Publish mode. The Publish mode is how you can upload this site to business catalyst and view it online. We'll be going over that in a later movie. And the final mode is the Manage mode.
This is where you can manage your web site online, check its views, upgrade the hosting as well as look at other data. Even though it may be confusing that there are multiple modes or views to work in, Muse makes it pretty clear when you're in a given mode. Now that we understand the different modes of Muse, let's take a look at the different ways that we can preview our site 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.