Lessons

Lesson Info

Adding Master Page Elements

We've talked about creating new pages, that type of thing, not exporting a page. The next thing I want to do is I want to start to work with Master pages. So, with the Master pages down here, if you take a look, you'll see that we start with one Master page. Now a Master page, like I said, is kinda like a template. It's a starting point. If you open that page, that A Master page and you put stuff on it, all of that content is going to show up on every page right now out here. Now the thing about Master pages is if you have content on the Master and it shows up on the page, on those pages, you're not going to be able to select the Master content. It is completely locked and we're not going to unlock it either. So, suppose you had something like this. Suppose you had a website and you had two or three sections where you needed to have a different banner, different header, different something like that but it needed to be consistent across six, 10, 20 pages, whatever. You can make multipl...

e Master pages. So if you come down here to Masters, you're going to see, we'll edit one in a minute, don't worry. But if I come down here, I can click on, just like pages, click on the "Plus" and name it something. If this was, like I said, I'll go back to that sporting goods site. If this was like the basketball section, I could call this Basketball. Or if this was your... You're selling things for instance. This could be Selling, or something like that. Okay, or Products. So you can actually have a Master or a template for that section. Now if you want to, what you can do is, you're going to see that we have a Master and we have this Basketball. Let me... I'm going to rename that one, that's kind of silly. Double click on the name. And I'll call this, maybe Products, something like that. Whoops. And the name doesn't have to be perfect, okay, simply because that's not really going to show but, you know, spelling, come on. So what I can do is, you're going to look out here and you're going to see all the pages. You're going to see A Master, automatically apply to every page. If you decide that you don't want the A Master stuff on a page, you can make a blank Master, like we just did and apply it to a page. So if I take this blank Master page and drag it onto Thanks, when I see the highlight I let go. Look below the page name, it now says Products or whatever you named your Master page. That Master page is now applied to the Thanks page. That means that if I put stuff on A master it will not show up on Thanks. That's a great way for you to make it to where, maybe the home page needs to be different. You don't want the same bar up along the top or anything like that or footer content, whatever. You can make a separate master for it and drag it to apply it. There's a couple other ways to get that done but that's usually the easiest. Alright, what we're going to do is we're going to go to A Master now and what I want to do is I want to start to add some content, okay? There are other things we can do with Master pages as far as you can do things like, if you just right click on one of the Master thumbnails you can duplicate, delete, all kinds of things, You can even... Don't do this... This is a little bit further afield here, but you can actually base a Master on a Master. Look at Masters right there you're going to see... Now please don't do this, you could its not going to blow anything up but if I choose A Master right now that means that A Master will be a Master page for this Master page, if that makes sense. The stuff on A Master will show up on this page. And then you add more stuff and that shows up on the pages on your site. So, wow. Anyway, it could be really useful. There's some great things you can with that but for right now we'll leave it as is, leave it alone and we're going to go into the Master page to start working with it. You know, honestly, when I work on sites in here I do use the Master page. I know sometimes it, if I work in InDesign for instance, and InDesign has Master pages, I don't use them all the time because I don't need to. Maybe I've got a one page document. Or four pages that don't have consistent elements. In here, you want to use the Masters most of the time, okay? I'll show you why. Come to the Master page thumbnail to open any page out here. We're going to double click on the thumbnail, now that's one way to do it. So double click on the A Master thumbnail and it'll launch or open up the A Master page in Design Mode so we are now in the program finally. Okay, so had Plan Mode before, it's still open you can see at the top of the page up here up in the upper left corner we have a tab for Plan Mode for your site and if you click on that you go back, click on A Master on the tab you go right back so all the pages are open in tabs. Now once we open up a Master page what we want to do is we want to start to add content and kinda work with it that way. So what we're going to do is we're going to add things like header content, footer content. First thing we're going to do is we're going to set the guides. Now when you get to a Master page only the Master page has these, but you'll see these guides out here. We actually have a top guide, this is called Top of Page. You can take the page itself, this blue guide here running all the way around and drag it down. That means that, suppose you wanted to put I don't know, you wanted to put something like a framed area in the center of somebody's browser window that was pushed in from the top edge of the page. That's the padding on the top of the page so that's what I could do right there. Now I don't want to do that so I'm just going to crank that back up. This next guide is called the Header Guide. This is going to dictate how tall your header is or where your header content can go. Now you don't have to do this, you really don't, honestly. This is just for your own edifications. For you saying, "Well, this is my header." Everything below is going to be like the body stuff. I actually use this a lot of times because if I want to create a header that has a box with color in it I want to make sure it's the right height that I know that all the content is going to work, okay? You can take this guide and drag it if you want, make it taller, do whatever you want. I'll leave it right at about 75 or something like that. Down here you're going to see there's several other guides actually. We have the Footer Guide. To me this is probably the most important guide. On a Master page what we're going to do is we're going to create footer content usually. We're going to put something like, you know, social content down there, contact, simple info, things like that. Sometimes you see sites these days and actually in the past as well where it's like somebody puts their whole entire history and the footer's like a mile tall. Anyway, you'll see that you can actually dictate how big the footer is by dragging that guide. So if I drag that guide up we can say, "You know what? "I want the footer to be about that ..." well whatever, just eyeball it, put it where you want it. I want it to be that big, that's great. You can always change these later. That's the best thing. The thing about this guide the reason I say it's the most important is because this is the footer area. What's going to happen is, out in the pages, not on the Master, but out in the pages usually, yeah, here too, if we start to add content out in the middle out here of the page and we start to add a bunch and it's taller than the page the page is actually going to grow automatically as you start to add things. Page will just do this. Thing is, the footer content we want to stay at the bottom, right? So anything below this Footer Guide as soon as you start adding content to your page it's going to push that Footer Guide down which anything below the Footer Guide is also going to move down. That's why this is probably the most important guide out here. It's going to dictate where your footer height is and also what's in the footer. So we're going to create some content to put in there. Now there are a couple other guides down here you can work with like putting a space below the page content, padding if you want to do that. I really don't want to do that so we're going to leave those alone, okay? Alright, so we're going to start to add some content out here. Now, one of the first things we can do is make it pretty basically, okay? So we're going to add a logo and do some different things like that. So, let's come under File and choose Place. In here you can see that we actually have, let me grab my files... We can place all kinds of images, ping, jpg, gif. We can place things like svg. We can place Illustrator files, Photoshop files. I've got a logo and a lot of times for vector content, things you created in Illustrator for instance, will be saved as svg. It's a great format for the web, it scales and looks awesome. It's vector for the web. So I will open that up, click Open. You can grab a bunch of images if you want. And this is just telling me that I've got some text in there, it's not showing, it doesn't really matter. News does this. It's really great. It just kinda tells you what might be happening. Click OK. And you're going to see we have the Place Gun. Just click to place. Alright, I'm gonna drag this up and we can take our images...we're going to do a lot with images in just a little while but with images we can drag to resize and you'll notice that we don't have to hold anything down. If you're an InDesign user or an Illustrator user for that matter, don't hold the shift key down you'll mess it up. Just drag and you can scale things. Okay, now we're going to go in and do things like add a Menu system for instance. So we're going to put the Menu in the upper right corner. So, over on the right we're going to go to the Widgets Library Panel and this is just about everybody's favorite panel in here because this is the cool stuff. This is slideshows, social widgets, video, all that kind of stuff. Come to Menus and we've got two. Horizontal and vertical. I want to put a horizontal. So drag the horizontal menu out and drop it out here and you're going to see what it does. It's actually gonna put all of the pages out there that we said include in the Menu, which is default, it's going to put it out there. Now, unfortunately what's going on here is that Event page is in the Menu. I don't want that 'cuz that way people can click on it and it won't be published so they'll go a broken page or a broken link. So here's what we need to do. When you make a Menu and you drag it out, you want to make sure that all the pages you want to show are actually going to be showing. So go back over to Plan Mode by clicking on the tab up there or you can click the word Plan in upper right. Look at this, we've already got some content going on. Come to the Event page and right click on it. And what you're going to do is come to Menu Options and choose Exclude Page From Menus. That way it doesn't even show up. So choose that. Nice. Now we're going to go back to the Master page. Click on the tab and you should see it's gone. That's great. Now as far as the Menu is concerned what we can do is we can go in and we can change all kinds of formatting properties on this. If you select the Menu, so click on the Menu. If you click on it one more time, you can select Content Within. We're going to select one of the Menu items their called. Think of this. Think of the widgets in general actually as a group of stuff, just a bunch of stuff. And as, if you wanna click on things, you can just start clicking and every time you click on something it's going to drill down deeper into that group of objects. If I click on one of these Menu items, you can go up top and if you look in the Control Panel above, you can change the colors, you can change the styles, the sizes, you can do all kinds of things if you wanna do that. So I could say, "I wanna do No Color" so I'll choose None, right up there in Fill. You could put a stroke or a border, you could round the corners, you're going to see all of that up there. But now the text is gone so I'm gonna change the color of the text. So if you come to the right and come to Text you can see it may be up here too, some of the text formatting is up there. I click on the Text panel and I change the color. I'll do something like a dark brown or dark gray or black or something like that, okay? So what we're doing is notice that we're changing one and they are all changing. If you want to with the Menu itself you can make some adjustments to it. If you notice, if you select just about any part of the Menu you're gonna see this little blue circle that we saw when we first dragged it in. If you click on that blue circle, you're gonna see what are called Options. You can if you want to, come to Menu Type and if you wanna show the Sub-menus, the children pages out there in the site map, the one we called Thanks in other words, you can chose All Pages. And if I click to deselect, there it is. Now, this is only if you want them to show. We don't want that to show cuz we're just gonna have somebody go to it when they fill out the form. So I'll click back on, click on the blue circle and come in here. Now the last thing I want to mention as far as the type, you can see what is called Manual. Don't choose it please. Manual means let me make the menu. Don't dictate what's in it. Let me type in text and decide where the links go. Right now, this is all done for me. Your links are ready to go, your site pages are ready to go, etc. So choose Top Level pages again. If you want to change direction horizontal, vertical you can that do that now. If you wanna do this, you can actually make it so its uniformed spacing. I actually love that. Choose Uniform Spacing and I know it's gonna squish it, that's fine. But there's gonna be the same spacing right and left on each so the buttons are not going to be the same width. If you like that that's great. If you don't, go back to the other one. Uniform Sizing. I'm gonna click away and the click on again and I can just do this, just resize it. Make it bigger, there we go. I'll drag it over. There are other options we can work with and the last option I wanna show you as far as this is concerned. Click on one of those again, I'll click on Home for instance. You can click on any one. And we've got the Menu item selected. Now I can tell that the Menu item is selected, that's what that's called. If you look up in the upper left corner up here you're gonna see on the Control Panel there's always some text up there saying what is selected. You can go in there and say, "You know, oh it's the "Menu, its the this, the that, the page, etc." If you click on Normal up there, you're going to see that your Menus have states. When somebody rolls over it, when somebody taps, when somebody clicks, that type of thing. And what's called an Active State. That's the most important State in my opinion besides what you see initially, because when you're on a page it's gonna show the Active State for that button for that part of the Menu. So if you click on Rollover, you look at it and you say "Eh, I don't like that, I want to change it." You can go out and change it. Go find Formatting. Like I go over here to the text, I click on Color and I make it white for instance, or something like that. You can always make your own color and even save it with this little color swatch here. Alright I think that looks fine. I can come back up there to Rollover and go to Active and every time I choose a State I can change how it looks. So then I can go and say, click on the trashcan for instance. That's actually gonna say "make it look the same as Normal" which I don't really want. So what I could do is come in and maybe change the text color. All we're doing is we're going in and we're saying, "Eh, let's try something different." Yeah, that looks fine. Okay. I'm gonna go ahead and Save this, save the site. Now we're gonna add some content down in the footer down there, just a box basically so we can work with it. If you look on the left you're gonna see that we have two rectangle tools that we can work with. And there are more shapes underneath Each. The one without the "X" is for shapes, and the one with the "X" is usually for images. We can, and I'll show you later, we can draw a box and just drop an image into it and that's kinda cool. Drag, or click on the one without the "X" in it. Come down here. We're just gonna draw a box down here 'cuz I wanna put a color maybe in the background of the footer, we can do that. So, click and drag down here. Make it about that big. That looks pretty good. Now we're going to fill it with a color because, did you notice that when I dragged it over there it actually snapped? You could feel it snap to the edge of the page? If you didn't do that you can go back to the Select tool, this black arrow and just drag. You can say, "Ah let's drag it to the edge." And as soon as it snaps in, what that does is it means, keep this box the width of the browser always. It's gonna stretch it which is awesome. Okay let's fill it with a color. You can see Fill up top. You guys can pick a color if you want to. I'll try something a little different. And you can try all different kinds of ways to mix colors if you wanna do that. There's a lot of ways to get this done. Take a little lighter version of something. That's a little too yellow. Alright. If someone gives you a value like a hexadecimal value. Then you see right here you can type that in, you can do it by numbers. You can also, like I said, save a color by clicking on Add Swatch, you can do that. And then if you want to name it, you can turn this off, name a color value, adjust the color and then click OK and you've got yourself a color to use. Alright that looks pretty good, not too bad. Alright now, we've got some things out here, we've got the Design elements we wanna work with. The next thing I wanna do is start to talk about Layers.