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 do in this tutorial is create some diviv tags. Now in this exercise what we're gonna do is create a separate file and create just some simple box projects, um, just so that you can really understand diviv tags before you start flying into a full website. So if you do wanna fly into your full website, jump ahead of this tutorial. But in this one we're gonna look at creating some boxes.
So we're gonna try and create a structure that looks like this. Okay? It's nothing much, but it will help us understand how did tags are created and how you move them around in code. So we've got a red box with a yellow box inside of it with a blue box underneath. So let's look at creating that and we're gonna do it in a separate document. So not in our current vintage campus site.
We're gonna make a new file, okay? So file new, then go to blank HTML, and then the layout is none. Hit create. Then I'd like you to go to file save and let's call this one. Um, our red box Hyen demo. So Red Hyen box hyphen demo.
Okay, this is just gonna be a temporary file. We're gonna throw this away in a second once we've kind of got the understanding of div tanks. So the first thing we need to do is make sure there's a CSS sheet created. Now the CSS that we create for these div tags is the exact same ones we do for the fonts. So if you've got a file that's already got a CSS sheet, like our index currently does, it's got a one called Main css. If that's true, then you don't have to create a new one.
If you're doing this demo with me, we're gonna create our own CSS sheet just for this exercise, and we're gonna do it the exact same way we did the fonts. So over here we're gonna hit the little plus button under sources, we're gonna go create new CSS file. Then we're gonna give it a name. We're gonna call this one red hyphen box. And okay, if I zoom out now you'll see I've got my red box demo, do html, but I've also got this new file called Redbox css. Okay?
So next thing we're gonna do is we're going to create our diviv tag. So there's two parts to it. We're created it in the source code, which is the HTML, which is in here. Then we style it in the CSS. Okay? Which at the moment has nothing in it.
So back to the source code, and I'm gonna go to my design view. So the cursor facing in anywhere, you can either use your insert panel, which is on the right, it might be tied up with the uh, files panel, or you can go to insert and down to div. It's totally up to you. Okay, I'm gonna use the insert panel. So we're gonna use insert and click on div. If you can't see div, it might be under some different setting here.
So make sure you're on common and then click div. All right? Um, now well forget about insert for the moment. We'll look at that in a little bit. We're gonna use IDs to style this box. Okay?
So we're gonna call this one a red hyen box. Now we've looked at tags in an earlier class and we've looked at classes in an earlier, um, one just before this one. So classes had remember a full stop in front of it to make it a class. IDs have something slightly different. They have hashes in the front of it, okay? That's what makes an id.
So we don't have to add it here. Dream move is pretty clever and adds it for us. So if I leave red box there and click okay, you'll see in my HTML, um, it's created this div tag, okay? And it's added some placeholder text for us. If I check in the source code, so under source code code, I've got this thing called div id, red box. Okay?
And then I've got the closing of the diviv. So there's the opening of the diviv, okay, named Red Box. And there's the closing of it and everything inside of it at the moment is only a bit of placeholder text content for id. Red box goes here. This is just placeholder text. You do not need to leave it there.
Um, it's just so that there's something on the screen while you're designing. So we've created in the HTML, now we need to style it in the CSS. And this is where it's, um, very similar to doing the fonts. I wanna make sure over here I've got my CSS selected. I'm gonna pick a selector and it's even defaulted to red box for me. If it doesn't, okay, you can go through and just type in, remember hash to identify, uh, an id, and then red box.
Great. I hit enter, I hit it twice. And now we're dealing with slightly different place down here. Earlier when we were doing fonts, we were dealing with the text part. We're gonna be dealing with this part here. Now, the first bit, the layout that's more applicable to a div tag, it gives us our width, our height, and things like color and those sorts of things.
So the width for this one I've decided is going to be in pixels. So pixels is how you'd style, um, diviv tags unless you start getting into more complicated things like responsive web design, which we will look at at a later tutorial. But for the moment, let's talk to, um, an absolute size. Okay? It's still very common in web design. So we'll get a width of 400 pixels, okay?
We're gonna have a height of pixels at 400, and I'm gonna enter, I'll zoom out and you'll see I've got now a box that is 400 pixels by 400 pixels. Great. Now I need to play around with the background color. So let's have a look, um, through, you can keep scrolling down until you find it. I know that it's under this one here. Okay, under background.
So we've used layout, we've used text before. Now we're gonna skip down to background. That just slides down the list. Now, in this one, it's the top one that I really want. It's this one that says background color. So click on that and then move your cursor.
Move the little circle. I'm clicking and dragging till it goes to the red. Hit enter and ta-da. We've got a red box that is 400 pixels by 400 pixels that has a center color of red. Let's check it out in CSS. So in my source code and my code, I've still got this, just this really simple thing called red box.
Okay, this Id called red box and a closing of the div tag. Red box, no sizings, no nothing. But in my CSS, that's all the work gets done. You can see the corresponding name, red box has a width and height and a background color. Great. So, um, it's a way of splitting these two apart and it means that, um, it keeps the code down to nice and small because what you can do is you can have red box on every single page.
Okay? So you might have red box as the top box on, uh, on all your pages. So you've got a hundred of them or a thousand of them. It means that you don't have to write red box once. And um, the red box class or the red box id styling in here needs to be only written once. Cut that last bit out.
That was dumb. Great. So now we've got these two, uh, this box created. Let's look at building our second box. So the second box is gonna be this blue one underneath. So we're gonna add a little extra complexity to it.
So we're gonna go to insert div or insert div, whichever one you prefer. Now this top one becomes more important. Okay? It says where to insert it. Okay? So at insertion point, it's gonna be wherever my cursor is, uh, flashing in my design view.
Now that can be tough because it's very hard to get the cursor flashing in the right tire or right place every time. So we're gonna at these ones before tag, after start of tag, before end of tag and after tag. Now, um, if I zoom out a little bit, um, we've got, We've got pretty much, we've got one option in this one, okay? So, um, we've got after tag. So what it means is I have the beginning and ending tags. So let me close that and come back at here and go to source view.
I, here's my beginning of tag and there's my close of my tag. If I want the blue box to appear after this one, I have to say after red box. Okay? If I want it to be inside the red box, I say after the start of red box, it'll start inside this guy here. So let's give that a go back to design view. I'm gonna go to insert div tag.
So at insertion point, I'm gonna say after tag Red box, I'd like to insert a new ID of Blue hyphen box and click okay. You'll see after red tag finishes, there is the blue box. Let's go to Cur view. You can see what happens. So there's the red open, there's the red close, and after the close of that tag, which is there, it's the after the, after the red box closes, the blue box starts. So it's right after it.
Now what we need to do is go back to design view and we're gonna style this one just like we did the red box. And to do it, we're going to make sure we're in red box. CSS. We are picking a selector. It's defaulted to blue box, but if it doesn't, don't worry. You can just type in.
Maybe we've gotta start with a hash and we're gonna start with blue box. Hit enter twice. Okay, I'm gonna start with layout. We're gonna do a width of this one is gonna be pixel width of 600 and a height of pixels 200. Great. So, so far we've got the shape kind of in there.
Now we'll do the background color, which is this little tab here, background color. I'll pick a blue and move this circle around clicking and dragging it and pick something that's blue, hit enter. Great. So we've got a red box and a blue box. So the last one we need to do is get that yellow box. Remember this guy, we need to get that yellow box inside the red box.
So let's give that a go. So to do that, I'm gonna insert a div tag. So it doesn't really matter where your cursor is. Okay, just hit insert diviv tag. Now, not at the insertion point. I wanted, if I did before start of red box, okay, before tag red box, it'd end up above the red box.
If I wanted it after red box, it would end up with the blue boxes. Okay, so I want this one that says after start of red box. So after the starting of it, I would like to put this new one cord, yellow box. Great. Let's click. Okay.
So we melt. So it's in the right place. Okay, but it has no styling yet, but there is my yellow box. Let's have a look at code view. You can see red box opens. Then before it closes, which is there, the yellow box starts and closes.
So he is tucked up inside this one. Great. I'll put a couple of returns in just to help you visualize it. Um, returns don't mean anything in code view. Okay? So you can kind of space things out nicely just to see, um, uh, just to see a little easier.
So red box opens, okay, and closes here. Inside of red box is yellow, box opens and closes. All right, let's go back to the design view and let's style this yellow box. So let's make sure in red box css, click on the plus button. It's defaulted to try and styling two of them. I just want to style just the yellow box.
And I'd like a width, okay, of 100 pixels And a height of 100 pixels. And I'd like to pick a background color of, let's use a yellow. So I'm gonna slide this up the hue slider, and then move into hip pick, enter. And fingers crossed, we, I've got a yellow box inside my red box. Now this text here is purely just placeholder text. I can delete all of that text in there and start adding my own content now.
Alright, so that's a kind of a basic in, uh, um, introduction to creating div tags. Now let's look at putting that into more practical use by actually building a website with div tags rather than just little boxes. Alright, I'll see you in the next tutorial.