How to insert using Dreamweaver’s Before, After, Wrap, or Nest options

All right, as we are going through and adding the other fluid containers, we are going to have to look at how we add these div tags. So, watch this, I'm going to go to live view and I'm going to delete this text by selecting it all and deleting it, and click out. And I've got my band –hero selected. Now if I go and add another container fluid, we get this guy, the before, after, wrap and nest. Now, what do they mean? I’m going to add this extra fluid container and I want it to be underneath, so what I've got selected, I've got band-hero I say I want it after the thing I've got selected. If I want it in front of it, I’d say before the tag I've got selected. Now these two here are the interesting ones, wrap means I'm going to make a wrapper around the outside, so I'm going to put this initial hero-band, inside the one I'm making. So the one I'm making is wrapping around the outside.

Nesting means I would like to put one inside of it, so I'm going to put this container fluid inside this original container fluid, now this is not what I want to do. There is sometimes where you do want to rest and you do want to wrap. But at the moment I just want them just after please. You’ll see down here, I've got this new fluid container and he’s kind of ended up underneath. Now if you’ve picked the wrong option, no problem, you can either undo, edit undo. Or you could go into code view, you will see here, there’s my div tag for my container for my band-hero and there’s this extra one. Now if he was nested, I would go cut, you can see in here, he’s inside this div. He ended up in the wrong place, hiding inside. So here’s the beginning and there is, if I click on it once actually, Dreamweaver is really good at highlighting, there’s the opening of that band-hero and the close, so he is nested, he is inside this one here. Its not what I want, so what I could do, is if I got that wrong, I could select them all; grab the beginning and end of this guy.

Now if you're unsure of where the beginning and end is, click the beginning and Dreamweaver is quite good at highlighting the whole tag, beginning to end. So I'm going to grab you, and go to edit, cut, and I'm going to use my backspace key just to bring that back up. And underneath, ill put him underneath, so he is now after. If you want him before, I’ll cut him, and put a return in, just in front, and you can see here, I can paste him and now he’s before. So that container, lets go to live view, you will see he’s just above my hero band. But, I want to go back again, back to code view and I want to put him back where I got him. You my friend, go under here. Now you will see I put returns in all the time in code view. It doesn’t matter, returns you can put in as much, I like to keep everything nice and clean and tidy, so returns don’t make any real difference to the code.

So now we are going to go through hand add all the different fluid containers and we will do that in the production video next.