Hi, my name is Dan and in this video we're gonna create our structure for our site. We're gonna start adding the desktop view for our website. So actually gonna start making something feels like, uh, for the few tutorials. Now we've uh, we've got to all of zero CSS and nothing on our page, but let's, uh, let's go through and start making some stuff now. So to do it, we are going to uh, need to understand two things. There are two kinds of containers you need, so you need at least one container for your site and, and there are two versions of it.
So let's check out the design that we've made in Photoshop. So, um, looking at the site here, there are two kinds of containers. There is this one, okay, that's right around the outside here. And that goes right to the edges of the page. I want that to expand the contract right to the edges. And there's also this one on the inside here.
This is kind of a fixed width, okay? So if I turn my guides on real quick, you can see that's where that one runs to. Okay? So there's kind of a bit of structure in the inside and then there's this bit on the outside. The one on the outside is called a fluid container and the one on the inside is called just a container. Okay?
So we're gonna need a bit of both. Now, some websites you can see in my one, I've got this navigation, which is got a fluid container that I want to go to the edges, but it's also got this internal container, so that's great. So it's gonna have a fluid container and inside of that it's gonna have a regular container. Then the same for here, there's gonna be a fluid container to start with. And then I want another nested container, just a regular old container inside. And I'm gonna repeat that for all of them.
Another fluid, another normal container, another fluid, another normal container all the way down. Okay? Some websites only need one fluid container and one nested. So let's look at, say this is my New Zealand business. You can see there is one fluid, one on the outside and there is a nice nested container on the inside. And you don't need to keep repeating it because it's actually just one big fluid and one big container all the way to the bottom except for the footer here.
The footer has another fluid and another container. So it depends on your design. You start off with, if you're following me, we are going to be building lots of fluids with little containers on the inside, right? So let's ignore the navigation at the moment because the navigation is a little bit more work. Um, actually we're gonna use actually some cheap tricks and use a bit of bootstrap navigation to make that work. So we're just gonna put in the structure for these containers first and we'll come back to navigation later on.
So we're gonna work on this first one here. So in Dreamweaver, okay, we have our body selected, which is kind of everything that's on the page. Uh, I'm gonna go back to source code just so we can see this side here. And then I'm gonna go to insert and I'm gonna change it from forms to bootstrap components. Great. You can see here's my container and there's my container fluid.
Okay? So that's the first one I wanna add is the container fluid. So I'm gonna add that. Okay? And that happens a little bit in Dreamweaver at the moment. It seems to be a bug I've Clicked on body, but it's actually applied the Diviv tag, which starts all the way up here and it covers up the head and all sorts of stuff it shouldn't do.
So I'm gonna go to edit Undo, okay? And I'm gonna just gonna be very careful where I click, okay? So I'm gonna click on body. So I'm gonna click down here and click on body and try the exact same thing. Awesome. So I worked that time.
So if you run into that problem, just go to edit, undo and 'cause what you wanna do is you want this div, okay, um, to appear inside the body. Now a div tag is called a dividing tag or it's just a way of dividing up space, okay? A division of space. So they call 'em div tags. Um, so, and it's called this one Container Fluid. Great.
So it runs right to the edges. Great. So that's our first big division or our first big box. Now what we wanna do is add a little bit of styling to it just so we can identify what it is and we don't wanna adjust the container fluid, um, uh, class we could, but that's gonna be used repetitively on the page and we want 'em all to be unique. So we're gonna come up with our own class to do that. Go to CSS Designer panel.
I wanna put it in my main css. Make sure you're on all, I am going to not worry about media queries for the moment. We're gonna look at that later on. And so I'm gonna close that down. Um, just got a bit more space and I'm going to pick a selector. Okay?
Click on plus and to be a class, it starts with a full stop and then we get to make our own, um, word for this. 'cause this is our own custom one. We wanna style this. We wanna add a bit of styling to it. I'm gonna call it band, okay? 'cause it's one of my little bands.
And I'm gonna put a little, uh, hyphen in and I'm gonna call this one. That's my hero box. Okay? So looking at Photoshop, it's the hero boxes, my kind of lead bit with my big statement in it. You can call it anything you like. Okay?
So I'll call mine band hyphen Hero. When you're naming your classes, don't use anything but letters. Okay? You can use hyphens, but don't use things like question marks or Eand or hashtags, okay? And it has to start with a full stop. If you leave that off, you need to go and add it to it, okay?
'cause that identifies that it's a class and that's what we need. Okay? So we've got this thing called Band Hero over here. I'm gonna add that class. So I'm gonna click plus hit.click band. You should see it in your little list there.
Click it and apply it. So you can see I've got this Diviv tag. It opens there, okay, there it opens. And then it closes here with a slash div and it's got two classes applied to it, the container fluid, okay? And that means that it's gonna stretch to the edge. And we've got our Band hero.
The thing that we've made at the moment, the band Hero doesn't do anything. You can see in my main CSS there he is. Band Hero is Open, coolly Braces, the closed clear braces, but he doesn't do anything. I'm gonna go to File save all. It's a good habit to get into, okay? 'cause it saves, uh, the HTML, the CSS, the JavaScript, everything that's being used at once.
So I'm gonna go back to Source Code. Great. So to style it, um, main CSS Band Hero. And down here you can see there's no properties we can style. It's 'cause we've left a show set on. So it's showing you all the things that we have already applied to it, which is nothing.
So I'm gonna turn that off so we can see the big long list of things we can do, right? The first thing I wanna do with this band is give it a background color. We're gonna put in the image later on. Okay? So remember in Photoshop we've got this big image in here. We'll do him later on in the images section.
So at the moment we'll just put in a big background color. Um, so I've clicked, can you see here, this is actually a big long list. These little icons on the top, just jump through this list to make it a little bit easier for you. They're not separate pages or anything, they're actually just jumping up and down this list. It's a really big long list. They're all together.
But this thing here jumps to background, background, color. I'm going to set the background color. I'm dragging this little circle to the left hand side there. And it's made a background color of gray. I'll replace that with an image later on. Now, um, the height at the moment, if you've given it no height, it will expand and contract depending on what's in it.
But the height for this one here, I want to, because I, I wanna kind of see it as I'm building it. I've got two options. What you don't wanna do right at the top here is one called height. Do not add a physical height. Okay? A physical height is good.
Um, but the problem with it is it's very specific. Okay? If I say B 200 pixels and I add images, um, in it that are 300 pixels, it's gonna freak out a bit. It's um, it's kind of contradicting itself. So when you are dealing with heights, a good idea is to deal with minimum heights. You can say I want it to be a minimum of 200 so it doesn't get too small like it is at the moment, but can potentially get bigger.
The only trouble with that at the moment is that if I add a minimum height to this say of 200 pixels, it doesn't work in Dreamweaver. Okay? It does actually work when it goes out and works on every browser, but doesn't work in Dreamweaver. I feel like this is a bug and your version that you are using might do it just fine. Okay? Um, but I'm gonna go file save all and I'm gonna preview on a browser just to check it.
So I'm gonna go down here, gonna preview in, I'm gonna preview in Chrome, okay? You might have different options down here. You might just have Safari or you might have Internet Explorer. I'm gonna preview in Chrome and you'll notice that voila, it's got a minimum height of 200. So the nice thing about that is that if I add text to it and it's lots of text, it will get bigger but no smaller. What I'm gonna do in this class is I'm not gonna do minimum height.
I'm gonna delete it. I'm gonna do what's called padding. Okay? Padding I really like, okay, so padding allows me to put, um, the content's always gonna be in the middle. Okay? So I can put 100 at the top pixels, 100 at the bottom, okay?
And any content within this. So let me add just a little bit of text, okay? I'm using the source code view just to add text in the middle of the div there. I'm gonna hit refresh if it needs to. And you can see there's a bit of text, but there's a hundred in front of it and a hundred, um, below it. The nice thing about that is that the content is always gonna stay centered and there's gonna be a bit of text there, uh, sorry, a bit of padding above it and a bit of padding below it.
I quite like using padding rather than using minimum height. Now before I move on, there's two options and they look like they do the same thing. Okay? If I've got, um, so main CSS I'm gonna do it with brand hero. I've got, um, padding and margin and sometimes they do the exact same thing. They look like they do at least.
So the margin and padding have similar boxes here and they have a kind of a similar but different, um, usage. If I had no background color here, you wouldn't notice a difference between the two and that's what gets people confused. But padding, think of padding as on the inside of the DIB tag, okay? And margin is on the outside. So if I put a hundred pixels on the outside of the DIB tag, let's have a look. So I, I'm gonna see this one here, this turns disables.
The CSS property temporarily, I can turn it back on so if essentially deleted it, but I can easily turn it back on by using these little crosses here. Okay? So, um, so it's full intents, purses, it's off. But watch this, if I do padding 100, the texts will move down a hundred pixels still, but you can see it's the outside of the Diviv tag. Okay? And you can see how people get confused if I had no background color and if I turn off him, if I had no background color, it looks no different than if I had padding up here or margin, okay?
But when there is a background color, it's very important because I'll have a white space with margin and a big gray space if it was padding. So I'm gonna go and turn off, um, where we go up to the top here. I'm gonna go turn off, I'm gonna delete the margin and I'm gonna re-enable the a hundred a hundred, okay. To do with the padding, right? So we're gonna go through now and add all the extra bands. So you can see I'm gonna need, uh, I've got my hero band done.
I need this one for who we are. I need this one for services portfolio and the footer. So we're gonna go through and add all the rest of them. Let's go do that in the next video.