Production video - Creating our fluid containers using Dreamweaver

Right. So let's go and create all the different bands. So let's go  and create a band for the who we are. So I'm gonna be on my main CSS,  I wanna make a selector called. Band  and this one's gonna be called Who We Are, who we ah into. I'm gonna go through and pick a background color for it. Now I've got some colors ready to go if you wanna copy me.

You can pick your own colors though if you want to. On the files that we've downloaded on the desktop,  I've got my DW exercise files, I'm gonna open 'em up  and I've got this one called Colors  and there's a bit of text in the colors folder. Okay? And there's my hero color. I'm gonna use the who we are color. So, um, remember  to grab the whole thing, including the hash.

I'm gonna copy it and I'm gonna jump into Dreamweaver. And in down here I'm gonna go to my background,  color, background color. Click on this and you'll notice I can  just type it in down here. Or what I'm gonna do is copy and paste it  or you can just slide around and pick your own colors. Great. There's my background color.

Now you notice it hasn't applied over here. Why not? Ah, you say you haven't applied that class. We've made the class. It exists,  but we haven't actually applied it to this container fluid. So let's go u call this one band  and this one's gonna be called who we are.

Lovely. Same thing in terms of the padding. Okay? Now in terms of how much padding, I'm gonna kind  of just guess from my Photoshop document. I want a bit of padding, that sort of size. Okay?

So, um, we can always,  it's good when you're throwing it in there just  to pick any size and you can go and finalize it later on. So I'm gonna go up to padding. Okay, there he is. And I'll put, I'm just gonna keep it consistent  and use 100 and 100. Great. All right, next one is, we're gonna go  and do this again for another container fluid.

So insert, now I've got this one here called Who we are. So if I insert another container fluid, I want it to be,  which one do I want it to be? Wrap Nest after. Before. I want it to be after. Okay, so down if I scroll down a little bit,  there he is there, there's my little container fluid.

So I'm gonna go CSS designer  and I'm gonna get a main CSS who we are. I'm gonna add, uh, one called band  and this one was called Services Great. And I'm gonna give it a background color. I've got my background colors here. Don't forget the hash. Okay.

And background color pop in him. And I'm gonna go up to padding. I'm gonna use 100. Enter, click in here, 100. You know, notice I'm not typing in pixels, it just,  if I had return, it assumes pixels, okay? And it's still not applied over here  because I haven't done this Okay.

Band. And we'll use the services. Great. Okay, so we've got our purple and  we're gonna do the next ones. Now, uh, that can get quite repetitive using  that. If you prefer  To do it in code view, that's totally fine.

The first thing we need to do is we need to go to our, um,  make sure you're on source code. Now you can keep doing it that way, just so you know,  but I'm gonna show you this extra way  that you could do if you prefer. Okay, so I'm gonna go to Code View. And you can see here it's pretty easy. I can, there's my opening  and close, so I've gotta make sure I grab all of that,  copy it, paste. And I might call this one band.

Uh, what is this one? Portfolio? Portfolio. So spelling is pre you gotta make sure you've spelled it  right here when you do your class. And we'll do the last one, which is gonna be the footer. So you can see, even though ah, co view can be scary,  it's actually sometimes a lot easier just  to do things in co view.

So, um, I've got my, uh, different ones here. If I go to Live View, you'll notice I've got a whole bunch  of bands down here, okay? Um, I've got my, uh, was it portfolio  and I've got my footer. Now notice though, they've got no styling. So what I'm gonna do is I'm gonna go from source code,  which is all H TM L over to my CSS. So I go to CSS.

There's my bad hero who we are services. So the exact same principle applies. You just gotta make sure that these names  match up perfectly. So I've copied and pasted services  and this one was called Portfolio. Okay? And hopefully if you hit File Saveable,  you'll have this one here  that is actually this exact same color.

So it's two purple ones. So what I wanna do is change this color portfolio to  where is it this portfolio color. Great. So I've got portfolio there. So style, the last one, which is the footer, copy him. And here's called Footer.

And I'm gonna go find my footer color, copy and paste,  and you can turn it into a bit more of a production line  by using code view. So I'm gonna go back to Live View  and you can see I've got my hair box, I've got my  who we are, my portfolio, my services, and my footer. Great. And whether you prefer to do it in co view  or whether you prefer  to do it in design view, it's totally up to you. When I'm finished, file save all just  to make sure everything is saved  and we can move on to the next video.