Lessons

Lesson Info

Creating Navigation and Inserting Responsive Images

So we've got the floating and clearing done. Let's get some images in here and you'll start to see what we're going to do here. So I'm just going to start from the head down and just start to get this guy formatted up a little bit. My links are actually going to be links, so I need to make them links. So I'm going to select Link One, and down in my Properties panel, with that selected, I have a little place for a link. I don't actually have any place for it to link to. I'm going to do a placeholder link. And inside of that link, all I do is type in a pound sign. And I'm going to hit Return and now it's a link. Okay? So we just use the pound... Well, actually, if you click on something that is linked to the pound, it'll just jump to the top of the page. That's just how it works. So we just use that as a little placeholder. So I've got Link One, I'm going to go ahead and do Link Two and Link Three. If I can get just that selected... Okay. And then the other thing I want to happen with th...

ese guys is I'm going to turn them into an unordered list. So to turn them into an unordered list, I just need to put them on different lines. Yes, I do. Let's try Design View to make that a little easier. So I've clicked in-between Link One and Link Two. I'm going to hit Return. I'm going to click between Link Two and Link Three. I am. And I'm going to hit Return. So now that they're on separate lines or in separate paragraphs, I can actually just select all three, and down in my Properties panel, I have a handy-dandy little button that I can click that's going to turn it into an unordered list. Bam. Now, it doesn't look like an unordered list because we have the reset. Remember, we've already applied that reset. If our reset wasn't applied, it would totally look like an unordered list. But remember, all the margin and padding and everything has already been removed, so I don't have to fuss around with all that stuff. Okay? Okay. Next section. Content for new header tag goes here. I want this to be a responsive image. It's going to be my logo and I want the logo to change size with the browser window. Okay? So I'm going to do a special image here and I'm going to insert my image. I'm going to go to my Files panel. I am in Design View. As long as I'm in Design View, I can drag and drop. Can't do it in Live View. It doesn't like that. It yells at me. Doesn't work. So I'm in Design View, I'm going to go to my Images, Logo. I got logo.png, right? So I'm just going to grab this guy. I'm a big drag-and-dropper, and I'm just going to drag and drop it right in there. Okay. It's not, though. "The file logo.png is outside the root folder of Simple Donuts." It is. You know why? Because earlier, I went to the other site. I'm in Donut site. I'm not in Simple Donut site. So Dreamweaver knows you're going to do stupid stuff like this and it warns you and it doesn't lie to you. So, we're going to say, "Okay, cancel. I didn't mean to do that." Okay. So we're going to go to Simple Donuts, Images, and I'm going to grab logo.png here. And let's try this, drag and drop it in. Yay. Okay. It's huge. All right. So I'm going to get rid of this "content for new header tag goes here." I don't need that. So I want this to be responsive, and if I select my image, and I come down here and I look at my Properties panel, it is set to its original size, 533 by 214. I definitely don't want it that big and I want it to be responsive. So what I'm going to do is I'm actually going to remove the setting. And I want you to see me do this because in the source code, it's all going to go away. All right, so I have it selected, right? In my source code, it says header image source=images/logo.png width 533, height 214. I'm just going to do it right in the code just because I'm in here already and I'm going to delete it. Okay? I am going to format this with CSS. So I'm taking the HTML element out, right? I do have this alt tag thing. What the heck is an alt tag anyway? Alt tags are for screen readers. It'll pop up. So think of a... Google Search Engine is like a spider, right, or a bot. They don't have eyes, they're invisible, they're little programs or whatever that come to visit your website, but they don't have eyeballs. They can't look at your website, right? They can't see what you're doing. So they can't see an image. They can't see what this picture is of, so you have to tell it. It is Vivo Donut logo. This is also for 508 compliance. So people who use screen readers, it will tell them what it is. So what if I had a butterfly on my donut site and the butterfly has absolutely nothing to do, it's just pretty? Do people who can't see and use screen readers need to know that? No. Are they going to get annoyed with me if I have a bunch of decoration? Yes. So what I do is I still have the alt tag in there, but it's empty. So it's alt"", nothing in there. Still semantically correct, still correct design-wise, but then the screen readers aren't reading all that junk that's not important. Okay? Okay. I've got that guy in there. I want this guy... Let's go back into CSS Designer. I need to create some CSS for this guy and I'm going to cheat because I have the CSS written down. So I don't have to think about it too much. All right. So I've got the logo in there. We want it to be centered. So earlier, I did a center where we did auto left and right margins, right? Well, it doesn't work with images. There's this thing... Okay. I'm going to write on the whiteboard just real quick. Okay? So we have things called in line and block items. Something that's in line is text, a paragraph. Actually, that's not true. A paragraph is a block. It's an image. An image is in line. So if I put an image next to text, I've got my image and then my text just keeps flowing. Okay? If I do bold, which is strong, that's the tag. It used to be B, it's not B anymore. Italic used to be I, it's now EM for emphasis. Okay. So these are in line, meaning that in the middle of a paragraph, I can have a strong or an emphasized piece of text. Okay? A block item is something like a paragraph. If I have a paragraph, I can't put something next to a paragraph, right? It takes up the whole space that it's within. A div, these containers that we're working with, like the footer, I can't put something next to a footer. The footer is going to take up the whole space across the page. Okay? So real quick, block versus in line. So an image is in line. I need to tell it to behave like a block item in order for me to get it centered. Okay? So I have my image selected. I want to create some CSS that is specific to this image only. I'm going to have other images on this page. I do not want the CSS that I'm going to create now to affect those other images. Just this guy, right? I'm going to come over to Selectors, click Plus. This time, I'm going to pay attention. Dreamweaver is trying to help me in a good way. I don't need container. Everything's inside a container, that's just redundant. But I do want Header IMG. And what that is saying, you read CSS backwards, if you're an image inside of the header. Okay? So if you're an image inside of the header, this is called a descendant selector, okay? And we're going to talk more about these. So now I've got this guy here, image inside of the header, what are the properties that you should have? Well, the first thing is we need to go to Layout and we're going to tell him to be block. So under Layout, I have this thing called Display. I'm going to set it to Display Block. So you can see, I've got in line and block stuff in here, right? So I'm choosing block. And now that I've specified he's a block-level item, I can choose auto left and right margins. Auto, not "autp." Auto, there's one, auto, there's two. Okay? So now I can get it centered in there, right? I want some spacing around my image, so I'm going to go ahead and I'm going to put some margins around the logo itself to create more spacing. So I want some space on the top and the bottom and I'm going to do 25 pixels of margin. So 25 on the top and 25 on the bottom. Okay? So now it's got a little bit more spacing in there. I'm in Design View, so don't worry that it looks bad. Okay? We're still in Design View. It should look better once we get in Regular View. It should. Okay. Actually, because I did the wrong thing, that's why. It wasn't margins. It was padding. That's why I have notes. Okay. So we're going to get rid of this, but no big deal. See, I got a little garbage can, throw out the trash, throw out the trash, come into padding. I actually want padding, 25 pixels. And, you guys, when you guys are learning, a lot of times you just go through this like, "Is it margin or padding?" Well, just try one. If it's not right, try the other one. We're going to give this the background. I want to put a background color on the whole background. And remember, earlier we create a body. So we have body. I'm going to go ahead and go to Background and I'm going to make it... What color am I going to make it? I'm going to make it the tan color, I think. So I've already got my tan color in there, right? So I'm going to go ahead and click on that guy and then I'm going to hit Return. And now my main section looks a little funky, right? So I'm just going to give the main a background color. I'm going to go to Main, Background Color, and I'm going to make it white, which is FFF. I can actually... I can do three if I want to. And now that's white. Okay? All right. So real quick, I'm going to add some more header text in here so that we have some stuff to work with in Design View because it's not cooperating in Live View. So I'm going to come in here. That's my main header, I'm going to select it. I'm going to come down into the Properties panel, and under Formatting, I'm going to choose H1. And then I'm going to come down, I'm just going to put a little space in here. I'm going to add another one. I'm going to make this a H2. Okay. And I'm going to make this one an H2 as well actually in the side. Okay. So I would like to have an image over in my sidebar as well. I'm going to make a little room in there and I'm going to find myself an image. I'm going to come over to my Files and I think it's... I can't remember which one it is. I'm going to look in Assets. I don't remember the name of it. Oh, it's not in there. I don't have it in here. I have to go find it. All right. Let's find it real quick. There it is. Okay. So I'm just going to hold Option and click and drag, move it into Images. So you can do this outside of Dreamweaver and then when you drop back into Dreamweaver, if it doesn't show up, there's a little refresh button, that little guy, and you just click on that, and it's in there and it should be bite.jpeg. That's what I'm looking for. And I'm just going to drag and drop it in there. Okay. For the sake of time, I'm going to cheat. Don't do this in real life. Okay? You actually want to take this back into Photoshop and save it out as the real thing. Okay? I'm actually just going to resize it. And I'm going to resize it. It's so big, I can't even get it selected in there. Okay. There we go. I'm going to cheat. It's not going to let me do it. Let's make it... What size do I want this guy? For now, I think I'm going to make it... Let's see if I do 100%... Whoops. Not 17%. All right. I'm going to unlock that. Because I just want it to go that way. I've got to create some CSS for it. So we'll do 200 pixels for now. We can come back to it. Pixels. Okay, 200. Okay, there we go. So we'll just leave that there for now. And then I wanted to come in and put in the coffee and donuts picture down here, just to get us some pictures in here to work with. And that one is... Not that. It's this one. There we go. I knew I had it in there somewhere. Okay. So we've got our coffee and donut picture in there, too. I'm going to cheat and make this one just a little bit smaller as well. So the reason why you don't want to do this in real life, do it the way I'm doing it, is because the file is too big, right? So I'm having unnecessary kilobytes that I don't need. Just go back to Photoshop, resave it out, so that you're not using up all that extra bandwidth that you don't need to. Okay? Okay. I want to create... I want to talk about descendant selectors real quick. So I've got...we created one, right? We did the header image and now we're going to do another one. We're going to do this... We're going to create a... We can do an aside image as well. Let me go to... I want to pick this guy, go into my Designer. So I have my header image, it's called a descendant because the image is kind of a child of header, right? And so I'm going to make another one and I'm going to make another one for this guy. So I'm going to do plus, I'm going to do aside. I don't need H2. He's stuck inside of an H2, which he should not be. It doesn't matter. It won't hurt anything, but he's not really supposed to be. So if you are an image inside of the aside, you should look like... We're going to go ahead and set this up. So Properties, my width should be 100%. I'm going to take out the stuff I put in the HTML. Okay? So 100%. My height, it's going to be set to auto. Right? And it's smashed up at the top there, so I can go ahead and give it a top margin, if I'd like, of 15 pixels. And I think it needs a bottom margin, too, so it's not sitting on that header. So we'll give it a bottom margin, too. And there we go. Now, it's pushed over to the side because, like I said, it's inside of an H2. That's not a horrible thing. That H2 is actually giving it its 15 pixels on either side, right? So I'm just going to leave it. That works. All right, I'm going to save this guy. Let's do a File, Save All. We've done a lot of stuff to it. And let's take a quick preview and see how it looks. I got to fix that header. Oh, but look, we have a responsive image. So that part's working. Okay, good. And then this guy... So this is an example of in line, right? So my image is sitting in line with the text. I want it to float. So we already floated the side, I want to be able to float this guy as well. I'm going to come back in here. I'm going to float it with a little piece of CSS. I'm going to create my first class, we haven't created a class yet. And remember, a class... Oop, I erased it. A class, you can use over and over again. Start with a period and you make up the name, right? So I'm just going to come in my Selectors, I'm going to click New, I'm going to do .Floatleft. I named it descriptively. That's what it does, float left. I'm going to say, "Okay, in my layout, I want to float left." And if it's floating left... I'll just apply it so you guys can see what I'm talking about. Let's see if it gives me our little deely bobber in Live View. I'm going to come up to my hamburger in the image here. Actually, I'm not. I'm going to come to a little plus sign in the image here, and I'm going to click on plus, and I'm going to type in ".f", and there. It picked it up, right? So I've got my float left and now it floats left. But the problem is, the text is still smashed together on there. So let's go ahead and give it a little bit of... We want right margin. So float left should have 15 pixels of right margin, right? There we go. That looks better. Okay? So now it's lined up better. So real quick, if we save and we preview. Got to Save All. And I jump back out to Chrome. There we go. So now it's sitting in there nicely the way I want it to. Okay? I'm going to take a quick look at that logo. It's bugging me. Let's take a look at this guy. I'm going to move these around. Remember, I said I was really big into keeping these organized, right? So my header image should be...it's a child of header, I'm going to keep it with header. My float left is just out there for me to use anywhere. I'm going to keep that at the bottom where I can access it. So Body, H1, H2, P, Container, nav, header, header image, aside, main. Okay, so aside image should also go underneath aside, right? So I just want to keep everybody organized so that when I have to come in and make changes and look for things, I can find everything that I'm looking for. And then, I need to take this guy... I took that stuff out of the source, right? There's no sizing in the source and my sizing didn't stick. That's why it's not working. So if I go to Layout, it is supposed to be... I think it is 100%. It just looks so giant on the screen. So I'm going to go ahead and leave it at 100%. We can make it a little smaller so it's not so big on the screen. Let's do 75%. And that should be fine with auto. Bullet display block, I need auto left and right margins, those disappeared. All right, you guys, welcome to my world. So when you start doing a lot of stuff like this, sometimes this happens. You just have to go back and forth and back and forth. I think we're good. Yay. Okay. So I just had to fix that up. So I got my margins and my padding messed up, but now it looks good. And if I resize, look at that, so my logo is also resizing, right, with the size of my screen. Okay, cool. I think... I think that's good for that section.