Production video - Creating our fluid containers using Dreamweaver

Right, so lets go and create all the different bands. So lets go and create a band for the who we are. So I'm going to be on my main.css, I want to make a selector called dot bands and this one is going to be called who we are. I'm going to go through and pick a background colour for it, now I've got some colours ready to go if you want to copy me. You can pick your own colours though. If you want to, on the files that we’ve downloaded, on the desktop I've got my DW exercise files, I'm going to open them up and I've got this one called colours and there’s a bit of text in the colours folder. And there’s my hero colour, I'm going to use the who we are colour, so remember to grab the whole thing including the hash.

I'm going to copy it and I'm going to jump into Dreamweaver and down here I'm going to go to my background colour. Background colour, click on this and you’ll notice I can just type it in down here or what I'm going to do is copy and paste it or you can slide it around and pick your own colours. So there’s my background colour, now you’ll notice it hasn’t applied over here, why not? So you haven’t applied that class. We have made that class, it exists, but we haven’t actually applied it to this container fluid. Lets go hue, call this one band, and this ones going to be called who we are, lovely. Same thing in terms of the padding, now in terms of how much padding, I'm just going to guess in terms of my Photoshop document. I want a padding that sort of size, we can always, its 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 going to go up to padding, there he is, and I'm just going t o keep it consistent and use one hundred and one hundred.

All right, next one is we are going to go and do this again for another container fluid, so, insert, I've got this one here called who we are. So if I insert another container fluid I want it to be, I want it to be after. So if I scroll down a little bit, there he is there, there’s my little container fluid. So I'm going to go css designer and I'm going to go to main.css, who we are and I'm going to add one called band, this one was called services. And I'm going to go to background colour, I've got my background colours here, don’t forget the hash. And background colour pop in him. And I'm going to go up to padding, and one hundred, enter, click in here, one hundred. You’ll notice I'm not typing in pixels, if I hit return, it assumes pixels. And its still not applied over here because I still haven’t done this.

So we’ve got our purple and we are going to do the next ones, now that can get quite repetitive doing 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, make sure you're on source code, now you can keep doing it that way, just so you know, but I'm going to show you this extra way that you could od, if you prefer. I'm going to go to code view, and you can see here, its pretty easy. There’s my opening and close, so I've got to make sure I grab all of that, copy, paste and I might call this one band-portfolio. So spelling, you’ve got to make sure you spell it right here when you do your class. Now the last one, which is going to be the footer. So you can see, even though code view can be scary, it is actually sometimes a lot easier just to do things in code view. So, I've got my different ones here, if I go to live view, you’ll notice I've got a whole bunch of bands done here. I've got my portfolio and I've got my footer. You’ll notice though, they’ve got no styling, so what I'm going to do is I'm going to go from source code, which is html over to my css.

If I got to css, there’s my band-hero, who we are, services, the exact same principle applies, you’ve just got to make sure that these names match up perfectly so I've copied and pasted services and this one was called portfolio. And hopefully, if you hit file, save all, you’ll have this one here that is actually this exact same colour, so there is two purple ones. So what I want to do is change this colour, portfolio to portfolio colour. Great, so we’ve got portfolio there. So the style for the last one, which is the footer, copy him, and he is called footer. And I'm going to go find my footer colour, copy and paste. You can turn it into a bit more of a production line by using code view. And if I go back to live view you can see I've got my hero box, I've got my who we are, my portfolio, my services and my footer. Great, and whether you prefer to do it in code view or whether you prefer to do it in design view, its 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.