Daniel Walter Scott || VIDEO: 10 of 38
Hey, in this video we're going to take our website, which currently stretches on to infinity, we are going to do this to it, where it's now all centered in and only has a maximum width of about 1200 pixels. And when I re-size it, it's always in the center. So let's go and do that now using Adobe Dreamweaver.
So currently, if I preview in the browser, this thing, my Header goes on forever. What I'd like it do is kind of stick here in the middle when it gets to a certain width, a max width of about 1200 pixels otherwise, it looks fine on my laptop here, but if you're on a really big screen, like an iMac, one of those 27" guys, you're going to have your Logo on this side, and your navigation is going to be like a kilometer to the right of this side. So we need some sort of maximum boundaries, and we want it to be centered left and right. So we're going to do it in Dreamweaver using a Container.
It's pretty easy, so back to Dreamweaver. So, here in Dreamweaver I need to wrap everything I can see on my page in a Container. This includes my Header at the moment, and that's about it. So the Body is everything I see on the page. So I want the Header down here. So I want all of this to be inside a Container that I can center. Then the Header will come along for a ride. I'll put the whole website inside this Container. To do it, over here, in my Live view, just click on your Header, I want to see this Header here. If you find you're clicking on the image, and you can't really find it, what you can do, see down here, this is called Tag Selector, so I've got my Image selected, there it is there. There's an a-tag around it, and there's a Header around that, and there's a Body around that. So this is good way to select on these things. Click on the Header, or just click over here in the side. And we're going to go to 'Insert' and under 'HTML', we're going to do this thing called a 'Div'.
Divs are super common in Web Design. They are divisions of space. What we're going to do is click on this, and we're going to get these options here. What it's asking me is, do I want this Div to be closed before that thing I've got selected, which is the Header? Do I want it after it? Do I want to wrap it around? So wrap it around the outside, or do I want it nested, which means, do I want it inside the Header? Like our Images. In our case, it's Wrap. I've got the Header selected, I would like this Container to Wrap around the outside so that the Header is inside, just click 'Wrap'. And it's probably best to see down here in Code view. You can see, this Div is wrapped around the Header. Awesome!
Div is a really generic name for a Container. I'm not going to use those div tags throughout this site. So we need to give it a name, so we can tell it to do a specific thing, because if I say, "Div, I want you to be centered," every single Div in this whole website is going to be centered. And that's not going to be what we want. So what we do, is two parts. We define the name over here, and what it does, and then we're going to apply it here in Live view.
So to define the name we do over here, in my CSS Designer panel, we click on 'Styles'. We say I'd like it in 'Global'. And I'm going to give it a name. See this Selector? Click the '+' button. Up until now we've defined things that already exist in our HTML. You can see here, we defined Header, you can see here, it wants to define the Body. Things that already exist. What I'd like to do is give this a brand new name. One that doesn't exist on this page now, a really unique name, because if I started styling the Div remember, it's going to apply to all of them. And the way we make these unique, is we add a name to them. And these are called Classes. A Class Selector is just a name that I'm giving it. And the way you define Classes is you put a full stop '.' to appear at the beginning of your name. That tells the internet this is something specific that I've made up. And they are called Container.
You can call them anything. You can call it banana sandwich, and it will still work. We're just calling ours Container. If you're going to use 'banana sandwich', you can't use spaces. You need to make sure, if you're going to use 'banana sandwich', you have to use a space. And then you'll have to explain to whoever looks at your website why you called your Container 'banana sandwich'. But anyway…
So we're giving it a name, make sure it's got a full stop '.' at the beginning. Give it a name, use the upper case. Most of the time it will work with upper and lowers, but don't. And now over here where it says 'Show Set', we're going to turn that off. We had that around in an earlier tutorial. It showed you everything that's applied to this Container so far, and there's nothing. So we're going to 'untick' it, so we can see them all. The first thing we're going to do to send to our website is we're going to give ours a maximum width. We're going to say, instead of getting as big as you like forever, we're going to say, I'd like a maximum width, and we're going to use—
We're actually going to match what we did here in Illustrator. In Illustrator, we decided, what did we decide? Where's my Layers? Artboards? We decided that our biggest width we've designed for is 1200 pixels. Now this is not an absolute specific size it needs to be. You might be working to 1024 which was a really common size. 1200 is more common now. This keeps changing, it really depends on what you want the bigger size to be. Follow me, do 1200, works fine. Smallest to the biggest size you need to be is probably 1024, don't go any smaller than that. So, jump back into Dreamweaver. What I want to say is, you can get to a max width of pixels, and you can only be 1200 wide.
For some reason, Dreamweaver at the moment double types lots of my letters, you'll see this throughout this course. I can't make it stop. So 1200 pixels is how wide it's going to be. I'm going to preview in a browser. I want to stretch it out, move it over here and stretch it out to be full. It doesn't work. Why? It's because we created it in Dreamweaver but we haven't applied it yet, so let's go into Dreamweaver. What I mean by that is, we've created it down here, we've styled it, and said, be a 'max width', but over here, we haven't actually applied it to my Div, so we need to add it to it. So what you need to do is, select a Div. If you can't select it, and say you've got this clipped, remember, the Tag selected down here is real handy. I'm going to grab the Div. And here, you can add a Class from ID. And we're going to type in our Class.
Now what goes at the beginning of the Class? That's right, a period or a full stop. And you can see there, because, generally this is super helpful it's actually added the word Container for me. I can type it in. But it's pre-selected it for me. Hit 'Return'. And now I'm going to go and preview it in a browser. What I'm first going to do is do the 'Save All'. Cool little shortcut, remember. Otherwise, 'File', 'Save All'. Now we're going to check it in the browser. Hey, so now that Div, called Container says don't be anything bigger than 1200. The reason I said don't be anything bigger is because I actually want it to be smaller, because we're going to get down to Tablet and Mobile stuff.
So instead of just Width, use Max Width. So, go no more than that, but I'm going to add, do what you want. Our next problem is, it's not centered. So it's doing the right width, but it's not centering on my page. And, we've been through our transformation Web Design where everyone want it to the left, nobody want it at right. And then, everyone wants it centered now, so let's go and do that. To do it, it's pretty easy. Make sure, 'styles.css', 'Global', make sure your 'Container' is selected, and all you do, under 'Margin' where it says, these little pixels, switch that to 'Auto', 'pixels'. We'll also make left and right margins 'Auto'. Hit 'Save All', check in the browser. And hey, we have got a centered website.
So as long as everything goes inside that Container Div, it will get centered like this. So, let's jump back in. That's going to be it for centering our website. We are now going to go off and create some Media Queries because at the moment, we have a Max Width for a Desktop view, I would like to do some changes and add some Media Queries for Tablets and Mobiles. This is what we consider Responsive Web Design. Let's go and do that in the next video.