Create website using div tags

Questions

Course info

34 lessons / 3 hours

Overview

Dreamweaver (and web design in general) is such a hard program to teach yourself. We know, because as Dreamweaver trainers we have all taught ourselves. We wish we had a resource like this when we were learning.

Hand coding a website from scratch is now a thing of the past. Web designers use tools like Dreamweaver to a lot of the heavy lifting. We imagine this is your first website build and we're glad we're here to help make this process a little less troublesome. 

Who should use this?

Anyone that is brand new to Dreamweaver and anyone brand new to web design in general. If you're reasonably experienced in web design you might find this course a little slow going.

What do you need?

  • You'll need a laptop (Mac or PC)
  • Dreamweaver CC installed. Dreamweaver can be downloaded from theAdobe website here.

Can I use this tutorial with Adobe Dreamweaver CS4, CS5 or CS6?

No. Unfortunately there were some fundamental changes in the Dreamweaver CC update that makes CC and previous versions very different.

Remember you can download Dreamweaver CC free for 30 days. Don't worry - after your free trial has expired your files will still be updatable using any other web design program.

If you like the tutorials we'd love you to like, share and tweet it. We'd be very grateful.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

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.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025