Lessons

Lesson Info

Getting Started with your Document

So we are gonna create a brand new site today. We're gonna kind of build it from the ground up and I'm gonna show you the techniques, the method, to create a fully responsive website. Now what is a responsive website? I want to actually just start there real quick as we create the site. So let's get started and then I'll explain. Come over here to create new, you can also come up to file, and choose new site, if you want to do that and it will open up the new site dialogue box. I love this dialogue box because it's just small, there's not a lot to focus on, not a lot to think about. When we first start, open it up. By default it's gonna be what's called fluid width. Think of fluid width as responsive web design or responsive design. Now what is responsive design? Responsive design is taking a web design, or a web page you're creating, let's say, and making sure that it works across the different devices and screen sizes and things like that. So it's taking a desktop version of a web de...

sign that we create and making sure that if we go smaller for instance, it's still gonna look good and work, and the right contents gonna be there. Back in the day when mobile first came out, and yes I was around for that, we would actually go in and mobile would kind of be an after thought, so we would take a desktop design and then for the mobile sized site we would just say ah, let's hide this, hide this, get rid of that and that looks pretty good. But like I said it was an after thought. These days we have to consider it. So in Muse you'll see, we're gonna be able to look at the range of sizes and determine if our design is actually working. And then fix it if we need to. So that's called a fluid width design. It's gonna expand and contract to fit the device size essentially or the screen size. And you will see that there is a fixed width size. This is, I mean I always make a joke with this, this is like a website from 1998, you see it, it's this wide and that's it. You take your browser and make it smaller and there's a big scroll bar down here, right? We typically don't do that anymore, there's special case use for that, but we're gonna use fluid width typically. On the right you're gonna see max page width, which is the maximum width this page will go. Now this is gonna determine the maximum width for every page to start with, okay? You can, like I said, it's a certain size, it is gonna get smaller on the device, but if you, let's say we take this site and we look at it on a cinema display, an Apple cinema display, well our site is gonna get, right now it's gonna get 960 pixels wide and on the cinema display it's cinema display is gonna be like this wide or whatever, okay so that's it. It's just gonna expand to that size and be done. So we want to make sure that we make this big enough to fit most screen sizes today. And usually with this we can type in a value or press the arrows, I'm usually gonna go 1100 or or even up to 13 something, that's just gonna make it a little bit wider, something for us to work with. You have to look at it. Look at it in your default browser, look at it on your default screen size, and eventually I'll show you how we can publish it and look at it on the devices to see kinda how it's looking. I'll start there. We can also set up columns. Columns, why don't you change that to two, we can change that later if we want to, but columns are just guides that are gonna be drawn on each page essentially, and that way we can use them to snap content, align content. And then gutters, the distance between the columns. So that's the gutter right there. And you're gonna look at all these values in here, they're pixels so you want to think of them in terms of that, okay? Click on advanced settings here, and my motto for all this stuff when you learn new tools is, if you don't know what it is, don't touch it. At least right out of the gate, cause it could mess something up. But as you get in a little bit further you're gonna find that you want to try things right? So you'll see that we can actually set things like a minium width if we want to do that. Minium width is your screen can only go down to in this case 320 pixels. It's not gonna go down to like, 10 pixels wide, which is kinda ridiculous. And minium height, that's the height or minium height the page will go. So if I only have like a logo and something down here on the footer and my page is this tall, it won't be able to do that cause I'm saying my minium height is at least 500 pixels tall. The page can grow and as you add content to each page that content is gonna push the page to be taller. So each page could be a different height. This is just the minium height. Alright, I'm gonna change that, let's make that a little taller cause 500 is kind annoying. I'm gonna go in there and type in a value, I'll make it like 700, or something to that effect. We can change that per page, we can change most of these options per page, but this is just the default, like out of the gate what we're gonna do. We can also see margins and padding. You're gonna see that margins are, we actually have these guides that are set inside the edge of the page, so when you look at your page you're gonna see guides that go kinda like this, they kinda frame it. Those are just there for you to say, well I don't want stuff to go all the way to the edge cause it might look weird if text is right on the edge of the browser, right? So you can try that out if you want, try some different things. And then padding is where we're gonna be able to take and kinda push the page down, or push the page up and things like that. To be able to add a little bit of padding around the page itself. We'll leave that alone right now, we don't need to touch it. You can try it later on if you want. You're also gonna see resolution. By default I guess that we have standard and we also have high dpi or 2x, don't, please don't touch this right now okay? Because every image you use, if you use the files we have, they're not gonna work, because high dpi 2x is retina and with retina those are amazing images, they're gonna look great, but you have to put in bigger images than you're gonna use. You actually have to put in images that are twice the width and height of what you're gonna use them in Muse. Muse is actually gonna say okay, we got this humongous image or this bigger image, it's gonna place it out there, and it's gonna basically shrink it in half and it's gonna remember the size of that image with the pixel data, and when it goes to update the site or send the site out to publish it, it's gonna make a couple different versions of each image. It's gonna make one that's big, for an awesome retina screen, it'll look better, and then one that's smaller, half the size, for a non retina screen. So we're not gonna touch that right now. If you want to explore later you can, that's fine. And then we also have this sticky footer thing. I want to mention that. When you make a page, if you make the page and the minium height is 700 pixels, and we have a footer area we put stuff at the bottom of the page, what's gonna happen is if you view that screen on an iPad, and the iPad, like the newer ones are kinda tall, well not that tall, but they're kinda tall right? Well, the footer itself is actually gonna stick to the bottom of the browser window, no matter how tall that device is, that's awesome. If you really don't want that to happen you can turn that off but most of the time it's a good thing. Alright, I think it looks pretty good, I think it's pretty good right there. So go ahead and click okay, and it's gonna create a site for you. Now the site we create here we want to save it right away and we're gonna save it as a .muse file, this is your native file it's kind of like a .ai or Illustrator or .psd for Photoshop, and this is gonna be your working format. What you're gonna want to do is you're gonna want to keep this one and any associated assets, images, things like that that you're gonna use. Now if you make this site, you open it up, let's go ahead and save it first. Let's do that. You come under file, now let's just do save site or save site as, and we'll actually just call this portfolio site or something like that or business site whatever you want to call it go ahead just know that I'm gonna reference it as we go out through the day here. Now after you create the site all those settings we just saw in the site settings, we can actually get to those later on, okay? It's like any program, if you set something up one way you can always edit it later at least in most cases. So come under file and to see those settings, you're gonna see what's called site properties, choose that. Now in here you will see most of the stuff we just saw, this is actually pretty much everything we just saw, but you will also see some other things and I wanted to draw your attention to this. Click on content and you're gonna see that we have some options in here that I wouldn't mess with right now. One awesome option is favicon image, if you want to add a favicon to your site, that's that little icon that usually shows up in the tab or the browser, that type of thing, you can insert one right there, okay? It'll kind of give you specs on it. You can set your link styles, we'll talk about those later. Other things as well, and if you click on advanced your gonna see there's a whole bunch of things we can set. Once again, out of the gate, if you don't understand these try not to touch them right now. Later on, if you look at something in here, and you're like oh, okay, that's where that is, you can find out what it does and how it works. Alright, go ahead and click cancel we don't need to touch that yet. And we've got ourselves a page up here, and we've got ourselves a master page down here. Now I'm gonna throw out a comparison to InDesign in this one little case here, but in InDesign if you use it InDesign has the pages panel, and the pages panel split up into two parts, you've got the pages and the masters it's usually masters and then pages down here right? You're kinda looking at the world's biggest pages panel right here. This is called plan mode and in plan mode we do exactly what it sounds like we plan out our site. We go in and we do things like we add pages, we move things around, we create what's called a site map, and the site map basically there are pages and how they're gonna flow. So if we wanna put in six different pages and we want to have sub pages like a menu, like a sub menu type thing, we're gonna put those in as well and you're gonna be able to see how it all connects together in here. And you'll see in just a few minutes here how that works. We have plan mode, which is what we're looking at, we also have design mode. If you look in the upper right corner you'll see plan, design, preview, publish and share. Click on design if you're in plan mode here. What that does is it opens up your first page typically, this is the home page, and it's gonna show you basically Muse, this is what we would expect to see right? This is like most Adobe applications. You see the toolbar on the left, this control panel on top, and the panels on the right. Now if you want to design your site, you're going through and you want to test it out just to look at it, you can actually go to what's called preview, now it's not gonna do anything right now, it's gonna be pretty underwhelming cause we've got a blank page right? But previews on we can kinda quickly look at it. You can always preview your page or your site in your browser as well and we'll show you that. And then we have publish, don't click on publish please cause we're not there yet right? Publish is how we can, maybe we're trying to test it out and we want to share this with someone else so they can look at it, you can publish it on Adobe hosting and you have a trial, you can try it out, you can send it to somebody else they can look at it live out in the web, you can host it with another host GoDaddy, 1and1, BlueHost, Gator Host, whatever you need to do, and you can also export the content so I could get all of the optimized images out of here for instance something like that. And then we have share, up there, I can't do anything with that right now cause we haven't published it yet but share allows up to share the URL for the published link, okay? When we publish this thing, if we publish to Adobe hosting or another kind of host, it's live on the web. You're gonna be able to access it through a browser, anybody will as long as they have a browser and an internet connection, okay? Alright let's go back over to plan mode. So what I'm gonna do, you're gonna notice that this page is open and if you look up top, right bellow in the upper left corner there you're gonna see there's a couple tabs now there's a home tab and a your site tab, whatever you called it, mine's portfolio site. Every time you open a page, it's gonna open as a separate tab in the window here so click on the x to close that and it'll just go back to plan mode cause there are no open pages. Alright, in plan mode what I want to do is I want to start to create some pages now. So we're gonna create a few. So come over the home page and hover over that and you'll see that we have these little pluses right here. The pluses mean we're gonna create a page on the left, on the right, or below. The pluses on the left and the plus on the right, right there, those are what are called parent pages or sibling pages. Now, whatever, let's make one. Okay? Viaual, let's do this. Go to the right of home, just off of it you're gonna see the plus, click on the plus, it adds a page. Every time we want to add a page we do this. And we can do it a bunch of ways using menus and that type of thing. Let's name this, portfolio, press enter return, you can name your page. If you ever want to rename it, you can just double click the name down there and give it a go, and then press return and you're done. I want to add a few more pages now so, come to the right click on that plus, let's name it team. Press return. Add one more to the right. And we'll call this contact. And then press enter or return. Now I'm gonna mention something here that may not make sense yet but, see the names of the pages? Those are really gonna matter. They're not just there for you to look at and say "Oh that's my homepage." Nope. What's gonna happen is if you make a menu system in there, Muse has got a bunch already made, at least a couple, that's a bunch. You drag it out and what's gonna happen is Muse is gonna say oh, you've already got pages let's make a menu. So it's gonna take all these pages with exactly what you typed in there as the menu names. So you got to think about that, if you want those all to be upper case, make them all upper case, that's what your menu is gonna show. Alright now, if you look out here you can see we've got a series of four pages, these are gonna be the top level pages, these are actually gonna show up in the menu, usually at the top of the page, right? Now I don't like the ordering here, the ordering is gonna matter when we make a menu, when we drag it out into the page, this is the order of the pages it's gonna show in the menu. So if I don't want it like this, you can drag these around. I want contact to go to the left of team for instance. Click on contact and drag it,. You're gonna notice you're gonna see these little highlights, okay? If you see a highlight like that, to the left, right or below, now don't do below please, go to the left and let go, you just swapped the pages changing the ordering. Now right now, who cares. As soon as we get the menu, big deal. Okay? Now the thing about this too is that now that we have a series of pages up here we can always delete them, we can add more we can do all kinds of things. Let's add another page to the right. So come to this thumbnail right here, and click on the plus to the right there. And we're gonna add this one we're gonna call this event, okay? Now interesting thing about Muse, which makes sense is that when you add pages out here, these are pages in your website, okay? Right? That makes sense. Thing is, all of these are gonna be published. What if I had a page like this event page where the event is, you know, I'm planning way ahead, I'm planning a year in advance or something like that, and we don't want to release it to the public yet, well that page is gonna go out there, and out there in the world when we publish so what we can do to the pages in Muse, is we can say, don't publish it and don't include it in the menu for me. To do that, right click on the event page. You're gonna see the menu. You're gonna see a bunch of things here, you're gonna see child page, which means put a page below this one, sibling, put a page to the right or left, usually it's right, duplicate, a lot of commands here. We will see export page, and if you see a check mark, that means that's gonna get published and if there's a link to it somewhere people will be able to access it. So I'm gonna say I don't want to export it yet. We can always turn this back on later and publish. So turn that off. You can see it just kind of dims, and it's got a little thing in the corner there that says alright you can still work on it, you can still design, do what you need to do, but you can not publish that right now, and that's great. And I also don't want it to show in my menu. We'll do that in just a few minutes here when we make the menu but, for right now we've got a series of pages the next thing I want to do is I want to create a sub page, so something called a child page. If you come down to the contact page and hover over it it you're gonna see a plus. Click on the plus below. And you're gonna see that we have a new page. Let's call this thanks, or something like that. Now this is a child page, this would be a sub menu in our system, in our menu system. So if you go look at the site out on the browser, you're actually gonna see that if we make a menu along the top, we're gonna see home, portfolio, contact, team, we're not gonna see event, not gonna show at least when we turn it off, and then if you hover over contact in that menu, on the page, it's gonna show thanks as a sub menu, so it's just gonna show it out there. This is how we make sub menus. So if you need to make a structure out here that's like you've got a website for sporting goods and you've got you know, basektball, football, ice hockey, whatever, you can actually make it to where if somebody clicks or hovers over a section like basketball for instance, you can have a bunch of pages show up in a menu, like you know gear and rules and all that kind of thing. So that's what we do here. Now with pages when we make pages, if you want to delete a page you're gonna see that there's a little x, if you hover a thumbnail, a little x in the corner off the corner, you can just tap to delete it basically, okay? Now if it has child pages or pages below it, those are gonna move up and you've got to deal with those as well, okay? But if you delete a page, know that you're gonna delete the content on it as well. Alright, let's save this. I'm gonna go to file, and save site, you should have already saved it that's good. Now as we're viewing our thumbnails and as we're looking at things out here for pages, we can also view them in different ways. If you look up top, you're gonna see that we have what's called a master batch. Now we'll talk about masters in just a little while here but master pages are sort of like templates and if you've worked in InDesign with master pages you've got the idea okay? If we want we can turn off the badges right there, if you turn that off, that's just telling me that a master down there, all that content, is applied to every page. The thing about master pages that's great is that we can make more than one master page, I love that. Now we can also see what's called thumbnail. If you deselect thumbnail, now right now it's not gonna make a bit of difference cause we have nothing on the pages, but later on when we start to add design content out here, you're gonna start to see all of the design content on each page as a little thumbnail. You can turn off thumbnail and have it run a little faster, okay? Now you're also gonna see we can see this in different views, we can see it as a horizontal site map, or a vertical site map. You can even if you want, collapse content. You can see something like this. If I show it vertically, it's gonna show you kind of in this sort of fashion, alright? Which could be really useful. Some people like that to view their sites that way. I'm gonna go back over this way, this horizontal one. You can also take and scale the thumbnails. This can really help, because if you have a site, if you have a thousand pages in here, you've got to be really careful, okay? You're gonna be scrolling around for awhile but, if you have a few pages you can make these thumbnails bigger, that can be easier to kind of see, you can actually see the detail on each page, like the content on each page just to make it a little bit better for you. Alright. That doesn't look too bad. We're gonna go through and we've got some pages out there and there's just, there's a lot of things we can do out here and I just wanted to show you a couple other little things, a few little tips that we can pull here. If you have a page, you can actually duplicate pages as well. And this is really gonna make a difference if you have content on them, let's say. But if you have a page, if you either right click on it you'll see duplicate page. You can also if you want to, press option on Mac or Alt on Windows and as you drag, you're gonna see a plus show up. You gotta watch for this drop zone it's called, like this highlight, let go of the mouse and then the key and you create a copy of a page. Like I said, it's probably gonna be more useful if you have, you know, stuff on that page ready and you want to just make a copy of it. Maybe make a variant or a difference, something like that. Now that I made this page I look at it and I'm like, meh I don't really need it. So what we could do is click the x in the upper right corner, and it's just gonna do it, it's gonna get rid of it. Alright, let me save my site here. There we go. So as far as working with pages there's a lot of things we can do, the other thing you can do, some people don't like hovering over and seeing these little plus' that can get annoying sometimes, so if you come up to the page menu, you're gonna see that we actually have a short cut we can use for adding pages. We have two commands here, we actually have add new top level page, that's the ones along the top, those are what you're gonna see initially in the menu system, and then we have add new master page, which is down there and we'll talk about that in a little bit here but add new top level page, if I just click on that you're gonna see it's gonna stick another page to the far right and if you want to, a lot of times when we want to work faster and we want to set up our pages initially, you can use that shortcut, command shift P. So if I come out here, it's control shift P on Windows, but command shift P, it' just gonna put another page out there for me. We've got a lot of options. We've got a lot of ways to work and there are times when I get in here and I create a brand new site like let me just show you, I'm gonna go to file, new site, and I'm gonna say yep settings are good, I'll click okay, I'm gonna go command shift P, P, P, bam rip out a bunch pf pages, start working, go in and name those pages now by double clicking each name, that type of thing, and I can get started pretty quickly. I'm gonna close that up. Delete these pages, I hate to make you do that but go ahead and delete them. We really just want to have this set of pages ready to go.