Lessons

Lesson Info

Adding Links

The next thing we're gonna do is we're gonna start to work with links, and we're gonna add a couple different kind of links, and then we're gonna wrap things up and we're going to make sure that everything looks good as far as responsive design. So we're gonna add a few links out here. Now I wanna do this, we're gonna do this on the contact page to start, so we have a link for maybe an email address, something like that. But we're gonna start out by putting a link on the home logo up here, and we need to go, if you remember we need to go to the Master page to do that. It's kind of a quick way you could do that. If you right click in the page here, you're gonna see Masters, and you're gonna see A-Master. It tells you which Master is applied. You can actually apply a different Master to a page just from here if you want to. You can also go to the Master page and that's what I wanna do. So you can either go to A-Master by clicking the tab or do this, Masters, go to A-Master. Here we go. I...

'm gonna use the space bar I'm pressing the hand tool. You guys can use the hand tool if you want, click on the hand tool and move around, makes it a little bit easier. Space bar is a way for us to get to the hand tool. As long as you hold that down you can move it around, drag the pitch, now we're gonna go in and add a link here so we're gonna start to do some different things in here, coming up we're gonna add a map, we're gonna add a form, we're gonna do things like that. For right now, go to the text tool and just click and drag out here, and I wanna draw a little text box, and now we're just gonna add some content here. I'm gonna say contact us, press return, couple returns and I'll just say, you know, Brain Wood, put your name, put your email address, that type of thing. Type in some text. I think I got it right, no, I don't even know my own email address, train, training, there we go. And then maybe put like a phone number, I'll put a fake phone number, dot dot dot, dot, dot, dot, dot, dot. Okay, it's ready. Alright now, we can go in and do formatting if we want. I'm just gonna change the size quickly so we have that. So I'll change the size here, select the text, do your business here, I'll change the size, make it a little bit bigger. I'll change the color a bit, maybe like a gray or brown or something that's gonna match what we're doing here. Or I could even do like a black and I'll just adjust that a little bit, I'll actually go with just a different color, you guys can drag the sliders around, change things up, or even sample a color from here if you want. Now we're gonna go on and we're gonna make a link on this text right here, so to do that as well as go out and do something like put this link out here, we're gonna just select the text and we're gonna go up and we're gonna change it on the hyperlinks. So if you select that text you can apply a link to just about anything you want. We can do it to an image, an object, we can do it to text, whatever, you just have to select the object or the thing or the text, come up top to the hyperlinks and you're gonna see add or filter links. Click on that, you're gonna see that we have a series of pages here already, it's showing us all the pages in our site that we can just click on to make a link to go to. You can also link to a file like a PDF, or you can type something in. At the very top, put in your email address or whatever that text is, you don't wanna fake people out. You wanna put an email address and then put in a webpage URL in there. Once you type something in, you can even type in a webpage, like adobe.com or whatever it happens to be, creativelive.com, hit enter or return, you're gonna see it's gonna actually put the email address in there and it's gonna put this little mail to thing there. That's just gonna tell the browser, open up the email software so we can see this, and there we go, so that's gonna save it so we can use it again and again. Now you're gonna see that the link itself looks pretty bad. Blue and underlined, I don't like that so I'm gonna change it. To change the color of links, come up to hyperlinks up here, you don't have to have the link selected, and you guys see we can actually put a tooltip on our links if you hover over it to show tooltip. That can be used for search engine optimization. If you come to edit link styles, this is gonna allow us to change the color of those links. So click on that, and you'll see that we have all the different states, they're called. Normal, hover, visited, inactive. Normal is exactly what you see when you first look at the link, you haven't interacted with it. So what you can do is change the color, you can make it bold, make it italic or remove the underline. I'll click here and I'll say let's change the color up. I'll make it a brown or something, and if I wanna remove something, totally remove it and make sure it's removed, you wanna click on the little box a couple times until you see it's blank. That means do not ever, don't put an underline, this right here. We can go to the hover state if we want, we can change the color, we can go to the visited state which is when somebody clicks on it and comes back to the page, that's what they see, so you can do that as well. I'll do like a darker brown, there we go. And you can do all kinds of things if you want to. I wanna mention here too, this is really pretty cool, but if you have a link like this, which we're gonna go put this back over on our contact page but, if you have a link like this all of your links are gonna look like that, all your links are gonna be in my case brown and not underlined. If you want to have links like in the footer, links in the body, and they need to look different, you can come right here in this site properties dialogue, click new link style, and you can actually create something like footer style, or footer link style or something like that, you can create other types of link styles. You can then apply them directly to your text. That's awesome, that's a great way to build a work. Now if I do that, if I have footer style, I'm gonna go in and change the color of it right, so I'm gonna go in and try something different etc. etc. Once you are happy with that, and you can make a bunch of these styles, okay. Excuse me I wanna show you how to apply it. Click OK, if you think the style formatting looks good. If you wanna go back to default link and try it again, do some different things you can do that, click that, click that, you can bounce between. Click OK, and if you select the text and you come up to the word hyperlinks, now you can also do this in the text panel, but if you come to hyperlinks you will see default link style, and footer style. For whatever style text link that you have you can just select it, and choose the style you wanna apply. In this case, maybe I want the footer style, it's fine, or you might wanna go back to default. You choose, and you can do it just about anywhere on the page, any page in the site which is really great. Alright you've got some text, kinda small it's fine, we're gonna move it over. Now I realize that I did this on the master page, did anybody else notice that? Yes, I screwed that up that's fine. We're gonna move it, this is what happens all the time you gotta pay attention to where you're at. We're gonna move this over to the contact page that's okay. But I wanna put a link on the logo up there. So while we're here, click on the logo, come up to hyperlinks and click on the add or filter links. You're gonna see all the pages, so if you ever wanna create links to pages you just choose them from that menu. So choose home, and we've got ourselves a link. Okay, let's fix this, I'm gonna fix my mistake. So I'm gonna click on this, I'm gonna cut it off the page. If we left that there, it would be on every page which is really not good. So let's go to the contact page. I'm gonna come back to the plan mode, and double click on the contact page, and just paste it out there, and just paste it out and just drag it over here. Alright, that looks pretty good. Okay, I'm gonna save the site, go ahead and save that. Now we talked a little bit about links, the last thing we're gonna do here before we make sure that everything works, is we're gonna go add a couple of social links to the footer. I just wanna show you this, point this out rather, because you can just drag it out, put it out there. Let's go back to the master page, once again making sure we're on the right page. I'm gonna go back to A-Master, these we want to show on every page, so that's why we're going to A-Master. If you come to the widgets library panel, scroll down. Now on this site that I did for the final site just to do it I actually created it, or I found a couple of icons for Facebook and Twitter and things like that. I actually bought them, and I brought them in as images and just put links on them. You're gonna find that instead of doing things like that, a lot of the stuff is already built in. If you come to social, in the widgets library panel, you're gonna see that we have things like a Facebook like or follow or comments, we have, scroll down, Google+, LinkedIn, you've got all these different things, not PayPal, all these different things that you can put in here, Twitter tweet, Twitter follow, that type of thing, and all you need to do for any of these is just drag them out here, drop them on the page, and you wanna put your symbol in here, you wanna put your Twitter handle for instance, so I'll put in AskBrianWood that's me. So you can put your own in there. You can make the size change different, large, medium, whatever you wanna do, not too bad. And then you can say, let's show the username, or not. You can just have it be the Twitter deal. Follow, here we go. So these are built in, these are something that you can use as far as social icons. Otherwise, if you want to you can go and bring in icons from other programs, copy paste from Illustrator, wherever you happen to find them, and you're gonna go up to hyperlinks and you're gonna add links that way. So that's another way to be able to do that. Alright I think that looks okay. Unfortunately with these kinds of widget library links, this type of stuff, we're not gonna have a lot of control over it, over the appearance, maybe you don't like the blue or that type of thing. But that's kinda the way it works. I want to point you in the direction of where you could find social icons that are already prebuilt that you can download, some are free some are paid, but they expand what Muse can do and they make it so you don't have to go out and find all this stuff. If you come, I don't see it down here, but come under Window, come to the library panel. In the library panel, this panel is a way for us to be able to bring third party content in, for instance. It's called newlib, it's news library file, that type of thing, and we can actually bring in something that somebody else created to do a specific task like social icons, for instance. You can just bring it in here, double click on it. They actually give you instructions, I'll show you in a second, and then you just drag it on the page and change the links, basically. You say instead of this Twitter handle use this Twitter handle. If you click on online, it's gonna take you out to the browser and you can go out there and you can start to do research.. This is actually the what's called widget directory. There's tons of stuff up here. If you are thinking to yourself, I need to do this with Muse, I can almost guarantee that somebody's already done it and it's in here. Like I said, some a free, some are paid. You can go in and do searches, sorts by social all that kind of thing, and they will tell you exactly how to use them. We did this in the advanced class, I just wanted to point you in the direction and say, here's how you could do it. So I'm gonna go back over to Muse, and that's a little bit about working with the social content we can do. The next thing we're gonna do is we're gonna make sure that everything is working as far as responsive web design. And I'm giving myself a little time here because this could take a little bit. So the first things first, we're looking at our Master page and what I wanna do it, like I said before whenever you put stuff on here, you've gotta make sure it's gonna work, okay, it's gonna work on different screen sizes. So we've got this icon here, this is social content. I wanna center it, honestly if you look at it, you're like well it's screaming to be centered, right? You could put it over the left, you could put it over the right, whatever, but right now mine is just centered so what we wanna do when we first come to content, remember, is to make sure we're at the largest size, the actual maximum page width right here. Come up top and you're gonna see the pin options. Now the three pin options are the ones we wanna focus on for responsive web design, typically. To the right of that you're also gonna see resize. This thing right here is not responsive, at least not allowing me to change the responsive nature. We wanna pin it, we wanna make sure it stays in the center that's the least we can do, so if you come and pin the center, you're gonna see a little dotted line, going straight up. That just means it's gonna try track in the center of the page at all times no matter how narrow it gets. Now what I can do, if you go and drag that handle and make it smaller, click it out, you're gonna see, now did you notice that? Look on my screen for a second. See how it was in the center there, and then it goes smaller and then bam it just jogged over like that? Okay, remember when I said that we wanna try and get all of the content out there first and then do this responsive thing? This is what we're gonna cross if we don't put it all out first and then do the sizing and responsive nature and all that. I wanna make sure I go back to the biggest size, here's what's happening. We have the one break point at 1100 pixels. That's the size of the page, as we go narrower mine, yours might be totally different, mine's at I can see the blue one right there. When you place new content after you've created these break points, what's gonna happen is, and you start designing, you're like let's move it over here, let's move it over there, do that, do this, do this, it's gonna mess it up on the other break points. I can almost guarantee it. So we have a cool, quick way to fix that though, and if you ever run into troubles, where you put something out there and suddenly you do this, you like resize and it just jumps or goes weird, here's what you do. Go back to the big size, I'm gonna click in the page, make sure I'm on that, what's that called? Break point, thank you. I'll click on the object, see it right here, and what we're gonna do is we're gonna say I want you, come under object here. I want you to copy the size and position to all break points. These two options right here are huge. You are gonna use them a lot when you're doing responsive web design in Muse. Because you're saying you know what? I just moved it in one, and it didn't move it in the other break point because I already had break points out there. So you're gonna say copy the sizing and positioning to all of them, so I'm gonna go do that, click that. If you have text that you formatted in one break point, and you change it in another, you wanna do this too in some cases, so I'll choose all break points for size and position, and that way if I grab that scrubber, you'll see what happens. You're gonna see it's gonna do it. Now if you guys don't trust what you're seeing right there it's getting bigger, it should be fine. What's happening right now is the preview, can you guys see right here, the preview inside of Muse is not quite working because I might have resized it, so the actual size of this thing is that big, trust me. Trust me, trust me. In Muse, stuff works, but sometimes the previewing here gets a little panky so, if you really wanna try it out you can go to preview page in browser, go look at it, drag see it should all work I can almost guarantee that. Alright this looks good, now we gotta go to the other pages and fix them. So let's go back, let's go to the homepage. Come to the homepage, go under view, and fit the page in the window. Now this text is hard to read, so you guys can probably already figure out what I'm about to do here but I might put like a box behind it, make it transparent or we could do something to the image, make it transparent but let's, we're gonna draw a box, put some color in it, and then make it transparent behind. So come back over here and we're just gonna grab a rectangle, rectangle tool. I'm not putting a picture I'm just doing a shape. Go to the rectangle tool and just draw a box, something like that. Fill it with a color, I'll go to fill on top. I'll pick a black maybe, or something, whatever you wanna do, try that. Now what we're gonna do is we're just gonna make it transparent, make it a little more see through. So come up here to effect, or to the right of effects, and just crank it back a bit. I wanna make it readable obviously but not too crazy. Here we go. Okay, now what we need to do is set it behind that content. Let's do this using layers panel, it might be a little easier. Go over to the layers panel on the right and you're gonna open up the Master page layer. You're gonna see it right here. Now did you guys see what I just did there? Wow, everything is on the Master page, do you notice that? Not good is it? So here's what we're gonna do, I actually did this on purpose, believe it or not. Here's what we're gonna do, we need all this stuff to be under page content, that way everything can flow from the Master page over the top of the page content. Drag across all of this content, this is all the page content, right? I'm gonna have to do this for every page, that's okay. Drag across, look over here in the layers panel, you're gonna see these little blue squares. Those indicate what's selected and the objects out there. Here's what you can do. Close the Master layer, just click that toggle arrow. Take that little blue square, and drag it to the layer you want the stuff to go to. We're gonna go to the page, there's only one other layer so drag to that layer and let go. And you can see, there we go, we now have it on the right layer in the correct layer. What's cool is once this stuff goes out there, this bar is gonna go on top of everything else because the Master layer is now on top of everything else. What's interesting too about Muse is that the layer stack you see here, this is not the layer, these aren't the layers or the layer content I should say, not the layers, the layer content, for every page. This is just the layer content for this page you're looking at. That's actually a good thing, because if you imagine seeing all the layer content for everything that would be horrible. Now open the page content, you're gonna see we actually have the page content over here. Go ahead and click to the right of some of this content to select it, find that rectangle in the back, and we're just gonna drag that down to put it behind. You can also use arrange commands and different things, I think that looks pretty good. Now we're gonna try it out, we're gonna test out our page. So come out here, now I wanna make sure everything's aligned to the center of the page. Gonna do that. So what we can do is we can actually click and shift click on the different objects to select them all for instance. If you come up to a line you hopefully will see that up there in the control panel. If you don't see that, you can come to window, align, and open up the align panel. The align panel is great because it allows us to align to different things actually. If you click on align to here, you're gonna see align to selection, which means all the objects would align to each other and not move according to the page or whatever. You're gonna see align to content area, that's what we would refer to as the page. That's that blue box running around the outside there. And then you have align to key. That means that if I click on one of those objects again, I can align everything to that object, okay. I don't need to do that. So align to content area, make sure that is selected so that it aligns to the page or the content area. We're gonna do align horizontal center, and there we go. Looks pretty good. Now we might wanna group that together, I dunno. I'm gonna leave it separate cause we're gonna have to do some work to it, to be honest, when we look at the responsive nature of this stuff. So let's do that, let's see how it looks. I'm gonna click to deselect. I told you that we're gonna check everything out first but usually what I do is just drag and see what happens. So drag the little gripper and see what happens. Wow, that's not looking so hot right? We've got some fixes to make out of the gate here. Okay, so what I wanna do, notice the, look what's happening here. The image works, that's great, look at that box in the background, it's scaling, the text, look what's happening to the text. The box is just getting smaller, narrower rather, not getting taller though, so click in to go back and you're gonna see that if I get to a certain point, like I get to like right about here, things are starting to get kinda wacky, look at that. Alright so click in, here's what we're gonna do. We're gonna try and just change things up a little bit. Sometimes you've gotta give yourself a little bit of wiggle room so to speak, so come to this text box right here and make it a little taller. Now you're not gonna see that out in the browser, this is just for us editing. What's gonna happen now, at least in this case, if I make these a little bit taller, it's gonna make it so that it's got some room to grow if the text needs to wrap within. So if I take this and drag it a little bit and go down, see what's going on there you can see that. Now I don't think this looks so hot, look at it it's going beyond the actual box. So here's what we can do. I'm gonna get to this point, see how it goes beyond? I'm gonna back it up a little bit and right here I'm gonna fix the design. So once again, I'm looking at it going okay, we need to fix this, so I will add a break point by clicking on the plus up there in the break point bar. I'll come in and we can now do things like move objects, we can change text sizes, we can do all kinds of things. Come to this text right here and let's make it a little bit smaller maybe, so I might come into the text panel and make it 14 or something like that. That's only gonna buy us a little bit of time honestly, we might wanna take this box and actually stretch it a little bit, do this kind of thing. You can if you want to, drag a corner or side of a box rather, press the option key on Mac or alt key on Windows to make it a little bit bigger. And that way I can do the same thing here, option drag or alt drag, give me a little wiggle room. I'm gonna make my name a little smaller. We're just designing it to fit, okay. I'm gonna go double click on this text and I'll make this a little smaller. Instead of 113 I'll maybe back it down a little bit to like 90, alright. I'm gonna make the box, I'm just designing, I'm just moving things around, thinking it looks pretty good that's great. Now I can keep going, see what it looks like. Alright, once again, once we get to a certain point I'm like, oh starts to break. I back it up a bit, you've gotta give yourself a little wiggle room, don't back it up just to where it gets fixed, you wanna back it up a little more, because some browsers will have different font sizes and things like that. Add another break point and you can keep working. I can keep going in here and say let's change the font size let me make this even smaller. I'll make it 60 or 70 or something like that. That way I can then adjust, grab, move, put this up here, that looks pretty good, and I just keep dragging, see what we get. Now we're getting down to it here you guys, we don't have to go much further but I think that looks pretty good, it's not too bad. You're gonna have to test it on your device and we'll talk about that in a little bit here. There we go, so not too bad. We gotta go to every page and do this. We gotta make sure that it all works. So if you come to the thanks page, for instance, you wanna take your text box, get it out there, and we could put a header up here, do different things. I wanna apply that Master page, remember I was talking about we applied the non Master page on Master page to this thanks page? If you right click on the page, and go to Masters, you're gonna see that we can apply A-Master here. Let's do that if you can. So apply A-Master, it should put the content out there, looks pretty good. If you wanna add a heading go for it after. But we're gonna make sure that this works, so what I wanna do now is I wanna make sure that this is actually centered, so it is centered which is good. I wanna pin it to the center, so I'm gonna come up to pin and that makes sure it stays in the center, and then we're gonna drag and see what happens. Wow, that's looking pretty bad. So at some point what we're gonna wind up doing is we're gonna wind up making this box either bigger or we're gonna say don't scale. As a matter of fact I might do this. Click on the box, make sure you can select it, make sure you're at that size, at that scale. Come up to resize and you're gonna see that by default this text box, all text boxes are gonna scale the width, they're gonna do this. We might be able to afford not to do that right now. So if you just choose none, and say don't scale. Drag, you get to a certain point you're like, whoops, we need to scale it now. So at this point, we need to make a design change. What do we do? We set a break point, so I click on the plus, I come to that box and I could just make it smaller, that's fine you could do that, but it's not scaling right now so we'd have to much a bunch of break points to say go smaller, go smaller, go smaller. Or at this point we can do this. We can say you know what, at this size, scale. So come up to resize, and choose responsive width. It only affects this size and smaller, not the bigger size. So now if you drag that's what you get. Now you've gotta be careful about the height out there. What I might do, is actually drag, make it a little bit taller for myself. There we go, give it some room to move, and there it is. Once I back out, once I come back out it's gonna stay the same size and just center, and there it is. Same thing if you wanna go out to the other, you've got the team art board. We can go in and we can take this content and honestly I would fit this in a window here under view. I would take this and you could actually group content if you want, take these two objects and group them, make this one a little bit taller, actually whoops, make this one taller. Give yourself a little bit of room here. Group these, I'll just right click and group them. Group these. Now unfortunately what's gonna happen here is you're gonna actually see that in resize here it's gonna have a couple different options here. We can say don't resize it, we can say responsive width and height, I could say don't resize it at all. Don't resize it at all, and we're just gonna keep the stuff in the center so I can say pin it to center and pin this to the center. You guys, this is gonna take a little while, I'm not telling you you're gonna get this right away, but there's like 16 ways to do everything in here. At this point if I go smaller watch what happens. It's gonna go go go and right now, what I'm probably gonna wind up doing, I'm just gonna, what do you think? I must just take this and move these like this, put them vertically. At that point, I would click to make a break point, and just take this content, drag it down here, take this content drag it up here. Probably gonna wanna have a heading of some kind up here on this page but that's okay. Too far, there we go. Then I could, If you go into this group content to select something within a group you can actually double click and then if I press escape I can get back out and drag to make it just a little bit wider maybe, something like that. There we go. I'm using the option key on Mac or alt key on Windows to drag both sides, there it is, okay. And you're gonna see that with the group it's still not gonna resize so we gotta be careful with that but I'll just drag it and see what happens. Not too bad, pretty good, okay. Alright cool, so there's a lot to do. A lot of work to be done, it's not just the design of the thing it's making sure that it works as far as responsive web design, so that looks pretty good. If you wanna take some time and do some extra formatting and add some extra things like a heading up here you can do that, but I think we're pretty good I've covered most everything I needed to cover and more.