Join Justin Seeley for an in-depth discussion in this video Getting to know the Muse interface, part of Muse Essential Training (2015).
- View Offline
- Before we get into the actual process of designing and creating our own website in Muse, I think it's important for you to understand the Muse interface and a few of the things you need to know about it beforehand. So, what we're going to do now is we're just going to go to the File Menu and choose New Site. And then inside of the New Site dialog box, just hit OK to the default. You do not have to worry about any of that, I'm going to cover everything inside of that dialog box in another movie. For now, we just want to be right here. Once you have your new site created, what you're going to be looking at right here is a Plan View of your website.
Now the Plan View of the website is where all of the planning stages of the website are done. You can add pages from here, you can add master pages from here. You can also rearrange and make certain pages child pages, or top level pages. It's all up to you. When we start to create our own website here in just a little bit, this will all make a little bit more sense but I just want to walk you through all of these different modes, so that you know what they are and where they are before we get in. Next up is something called Design View, and you can see up here in the top right corner when I click on the word Design, it's going to switch me over to this view of my website.
This is where you're going to do all of the heavy lifting in Muse CC. Up at the top of Design View you'll find the Menu bar. This is where you'll find things like the Page Menu, or the Object Menu. Those are places that I'm going to be sending you several times throughout the course. You'll also find here in the Title bar the ability to zoom in and out to different zoom levels. You can also see here that we have a Go To Page link, we have View options where you can turn things on and off like rulers, guides, and frame edges. Over on the far right hand side is your Jump Menu for the views, so Plan View, Design View, Preview Mode, and Publish Mode.
Underneath there is an Options bar where you'll be able to see the current state of the object that you have selected which we have nothing selected so its gray now. Then you have the Fill controls, the Stroke controls, you also have the ability to round corners, add Effects, and choose the Browser Fill. Now the options that you see in this Options bar will change from time to time based on the type of object that you have selected or the tool that you have selected. So for instance, if I were to switch over to the Type tool, and start editing text here out in the window, it would then change the options up here to correspond to that and allow me to make changes to the text, like the font size, the web font that I'm actually using, the color, et cetera.
Speaking of tools, over here is your tool bar and as you can see Muse CC doesn't have a whole lot of tools. It's just a Selection Tool, a Crop Tool, a Text Tool and if you click and hold on that, you can see you get a Type Tool and a Vertical Type Tool. You've also got a Rectangle Tool, a Hand Tool, a Zoom Tool, an Anchor Place Gun we'll talk a little bit about that later. And then finally you've got some Text Controls down here, which basically correspond to editing text inside of a responsive design.
So we'll talk about that a little bit later as well. In the middle of the document this is your document window, and so in the document window you can see the ruler which goes all the way across the top. You can also see this purple bar that goes across here, that's called the Break Point Ruler, or the Responsive Ruler. This is where you're going to actually determine the break points of your responsive design. If this sounds a little intimidating right now, don't worry, we're going to break this down step-by-step later on in the course. Over on the far right hand side, you're going to see all of the different panels of Muse CC.
Right now they're in a collapsed mode, which means you're not going to actually see what's inside the panel. To see the panel, you click on the panel and it will open like this. This is to save screen real estate right now. You may prefer to have your panels open like this in a more traditional Adobe-like fashion. Or, you may prefer them even more collapsed. Something like this in which case you get to maximize the amount of screen real estate that you have. Either way is fine with me, just as long as you're able to get where you want to go when you want to go there. So, the only other place we need to go now is right here under Preview.
Preview Mode takes you into a rendered preview of your website as it would look inside of a web browser. This is though, only one way of looking at your website because this is just a WebKit view. If you don't understand what that means, it's basically the same type of technology that powers web browsers like Chrome and Safari. If you wanted to test to see how your website was going to look in another browser, like Microsoft Internet Explorer, or any of the other browsers that might be out there then what you would have to do is go up to the File Menu and choose Preview Site in Browser, or you could just go ahead and publish your site and then open it in that browser.
We'll talk about all of this later on when we talk about testing your website. To get out of any of these, all you have to do is click the "x" to the far left hand side, and if you happen to click the "x" next to the website itself, that's just going to close everything and take you back out to the blank view that you see here. So, hopefully now you have a better understanding of the Adobe Muse interface, where everything is, and how to find it.
Remember, these Muse tutorials cover just the basics. For more information, see our full selection of Muse training.
- Creating a new Muse website
- Adding pages to your website
- Setting up master pages
- Working with layers
- Placing graphics
- Formatting text
- Creating and using color themes
- Building site navigation
- Working with widgets: menu, composition, panel, slideshow, and social widgets
- Making your Muse website responsive
- Adding a contact form
- Publishing a website with Muse