Hi and welcome to this Dreamweaver tutorial. My name is Daniel Walter Scott  and I'm a trainer here at Bring Your Own Laptop. What we're gonna be doing in this tutorial is adding  the structure to our site. So we've created our container in Dreamweaver. There he is. Okay, just a nice simple gray box.

Um, and just so you can visualize, this is  what we're going to be creating. We're gonna add a banner image box on the top. There's gonna be a div tag box for the navigation. There's gonna be a box for text image, and then a footer. Kind of a traditional basic website. So let's look at creating that.

Alright, so we've got our container div. Now what I'd like to do is delete this  placeholder text in here. So I'm just gonna select it all and delete it. You see it doesn't turn into much. That's why I had the placeholder text there is  to keep the box open,  but without the text it gets quite thin. But that's okay.

We're gonna insert another diviv. Okay. So you can either use your insert panel here on the right  or you can use your insert panel along the top. It's up to you. Um, insertive. Now remember, where is this gonna go?

We want it to be inside our container. So we're gonna say after the start of  container, I would like this heading to start,  it's gonna have an ID of heading, we're gonna click,  okay, great. Let's just double check in our code view  and in source code that there's my container, it opens up  and inside of that there is a diviv. Okay, called heading. Okay. So you can see he opens there and closes.

So he's inside my container, definitely. Let's go back to design view  and let's style this heading now. So let's make sure you're in CSS. Let's collect, add a selector  and it's picked container and heading. I just wanna style just the heading  and I'd like it to be a width of pixels  10 24, the same as my container,  but I'm gonna actually have a height on this one. Okay, so I wanna make it a height  rather than a stretchy one.

So I'm gonna make it a height of pixels. I'm gonna make this 1 2 50 and hit enter  and you'll see my website adjust over here. Maybe two 50 is a bit big. Now, very often you'll leave the heights blank  in lots of diviv tags. Why? Because you'll let the content that goes  inside it push it open.

But in this tutorial we're  trying to create a bit of structure. So we're gonna leave heights in it for the moment. And if you get any trouble with um, heights, you can go  through and remove them once you've got the structure in. Great. Let's have a background color for this. So let's go to background and let's pick a background color.

And I'm gonna pick for this one, let's pick uh, pink. Okay, so pick the magenta, click enter. Can you see the heading is kind  of completely now over the top of the container. You can't see the container. He's there. The way to check he's there is, you can  Send in co view.

There  is my container still there, but here's the same width  and this height's kind of over, uh,  over going over the container. You can also check with this thing down the bottom here. Okay, I love this part. It is your tag selector. It says that I'm in something called the heading, which is  inside something called the container, which is  inside the body. Now the body is everything in this document  that the user sees.

You can see here, there's my body tag. So body tag starts there and it ends there. Everything inside of here is what the web, uh,  what your web users see. Great. Cool. So I'm gonna delete the text out of it.

We don't need him. Let's look at adding the navigation. So it's gonna be the thin bar that runs  just underneath here. So let's go to insert, oh, let's go to insert div tag. And this one is gonna go after my heading. So it sits just underneath.

I'm gonna use an ID of nav. KK he sits underneath. Okay. And we're gonna give him a size and a color now. So to do that, just like we do with the heading,  we're gonna make sure we're in the main  CSS and the selectors. We're gonna hit plus and we're gonna do it just to the nav.

We zoom in, just get rid  of everything except just the navigation. And I'd like to have a width of pixels. 10 24. So I want it to go right the way across. And the height of this one though is going to be 80. So I'm gonna have 80 pixels across.

Background color. We're gonna have yellow move yellow. Great. Zoom back out. Great. So we've got an nav.

It's actually a little big. Let's go back to, uh,  layout and make it 50. Awesome. Great. Let's do our next block, which is gonna be this one here. It's gonna be the text block.

So let's go  to insert every time. Insert div tag. Where this one go? It's gonna go after the nav. So after the tag of nav, I'd like to put in the id  of gonna be called text. Alright, let's click.

Okay, cool. He's underneath there. He's gonna have a slightly thinner, so he is going to be,  um, a width of about 900. Okay. And we'll fill the rest with the rest, um,  with the, with the other box. So let's create a CSS sheet for 'em.

So make sure remain, do CSS at plus on selectors,  let's get rid of everything but the text. And we're gonna have a width of 900  pixels and we're gonna have a height of this one. Of, let's have a pixel height of 400. Great. So there's 400 pixels high  and 900 pixels wide. Let's give it a background color.

Let's pick green. Great. You can see got this gap left over on the side here. This is going to be the gap for, um, uh, this is gonna be,  yeah, the gap where we add our, which one is that one? It is our image side. Okay.

So we're gonna leave that tutorial there  and we'll look at doing the image on the next part. And we're gonna have to look at something called float.