Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Creating Boxes on the Page

  • We are going to take a look at how to create boxes with content areas that we can position
  • Dreamweaver makes creating boxes very easy
  • Create a new page called positioning-content.html
  • We will create our boxes using div tags so I can show you how this feature works in Dreamweaver
  • In order to create a box on the page using div tags, you use the Layout tab in the Insert bar and choose the first icon, insert div tag
  • You also must tell Dreamweaver where to place the div tag using the Insert dropdown in the Insert Div Tag dialog box

Creating Boxes on the Page

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Create New Page 0:07
  • Insert Div Tag Box 0:41
    • New ID CSS Rule
    • Assign Properties
  • Modify Box Properties 4:26
  • Insert Div Tag Box on Left 4:53
    • Set Insert Location
    • Assign Properties
  • Insert Div Tag Box on Right 7:13
    • New ID CSS Rule
    • Assign Properties
  • Code View of Boxes 9:14
  • Preview In Browser 10:00
  • Summary 10:43

Transcription: Creating Boxes on the Page

We are now going to take a look at working with positioning content on a web page using Dreamweaver.0000

We are going to create a new page to do it; so let's do our Ctrl or Command, N; and this is going to get a title of Positioning Content Using CSS.0007

I'll go ahead and save this as Positioning Content within my Wanderlust Travel website.0023

It is positioning-content, because we are using the dash as our standard for our site.0033

Let's create some boxes of content on our page, and then we can take a look at the code that Dreamweaver created when we use some of the Dreamweaver interface features to do this.0041

I am going to go over to the Layout tab in the Insert bar; so this upper area here--I have been ignoring it for a little bit, and I am going to move out and start using it a little bit more.0055

There is a Layout tab; so I have been in the Common tab on the other pages; I am actually going to choose Layout now, and the very first icon within this tab is the Insert Div Tag.0068

I am going to go ahead and click that: we are going to let Dreamweaver create these boxes for us.0083

Notice, it says Insert at Insertion Point, which is just fine; I have no content on the page; but I am going to click New CSS Rule.0090

Notice, this is going to insert a div tag, but if I use this particular feature and this button here, what it allows me to do is create the CSS for this specific div tag at the same time.0100

It is a bit of a shortcut than doing them separately; so I am going to put New CSS Rule.0117

I am going to choose an ID up at the top; it's an ID rule I want to create; and since it's an ID, I need to name it based on its page content.0124

What this is going to be is the outer wrapper layer that contains all of the other content on my pages; this is a pretty common name for that outer wrapper layer.0137

And we will put it on this document only, in terms of where we are going to place our rule.0149

You can see, I could start a new style sheet file and start adding rules there, but I am just going to keep it on this page.0156

Only this page will be using this specific CSS information.0164

I'll click OK, and now, notice, it says #wrapper; that is my ID--now I am going to assign properties to that.0170

I'm going to go down to the Box category on the left-hand side, and I'm going to set the width here to 300; I'm going to set the height to 300; and I'll leave the padding alone.0180

I'll go back up to the background color; and feel free to use whatever you want; what I am going to do is make the outer one bright yellow--make it very easy to see on the page.0197

I'll click OK; notice, now that I have that ID and created it, it is up in my Styles panel; it has also been assigned to this div tag, so I didn't have to do that separately.0211

I'll click OK; there is my box.0227

Now, any time you create a div within Dreamweaver, what Dreamweaver does is drop this default content inside here; and it is just text that shows you the name of the ID that controls that box.0230

The reason Dreamweaver adds that is because, if you end up not assigning a width or height to that box, this text will push the box open so you can get your cursor in there and start adding your content.0246

I'll go ahead and just leave the text inside there for now.0261

Now, this was only 300 wide; so now that I have created it, I can modify it however I like; I'm going to change this to 600.0266

You can see, it pops right open; I will also change the height to 600.0278

There is my outer wrapper: 600x600.0285

I'll do a save on the page; the next thing we are going to do is: I want to put two boxes inside this box itself.0290

And I don't really need this text in here, because what I am going to do is put two 300x300 boxes within this area.0301

I'll go ahead and delete the text, now that I have assigned a complete width and height.0311

On a normal HTML page, you wouldn't necessarily be assigning a height at all.0317

I'll delete that text just by highlighting it and hitting the Delete key, and you can see, my box remains.0323

Now, what I want to do is put two additional boxes inside this one; how do I go about doing that?0332

Well, I click Insert Div; it doesn't matter where my cursor is at all.0340

I'll click Insert Div; where do I want to place this div tag?0346

What I want to do is place it after the start of my wrapper div.0352

In other words, my outer box is going to be on the outside; this one is going to go inside it.0360

I'll create a new CSS rule for this new box of content; and that will be an ID, and I am going to name this one "left."0367

I'll place it in this document only and click OK; and now I can assign properties to this one.0380

I'll click in the Box category, and I am going to set this to 300x300; I'll go up to the Background and actually make this one bright red.0389

You may recognize these boxes I'm adding.0404

After the start of my wrapper tag, I am going to add a new box called left; and that is what I am telling Dreamweaver to do.0409

Let's see, when I click OK, if that is what happens; and it is.0419

Notice, here is my default content; since I have a width and a height assigned, I will go ahead and delete that information.0424

Now, I want to add one more div over here, in this area.0434

I want it inside my yellow wrapper box, but after my red left box.0439

How do I do that?--well, basically the same thing: I will select the Insert Div Tag; I don't want it at the insertion point; what I want is after start of tag; and I want it after the start of the wrapper tag, but I also want it after this entire left box.0448

I can't say "after start of tag"; what I can choose instead is to say, "I want this div after another tag," and that tag will be the left box.0475

What it is going to do is add another box over here, right after this one; I'll click New CSS Rule and create an ID for this one; this one I will call right; this document only; I'll keep all of the style rules on this page.0489

Click OK; now, I am going to go out and do the same thing here--make this 300x300; I'll go up to the Background, and I am going to choose a bright blue for this one.0511

That is my right box that is going to go after my left box.0534

Now, notice: this one comes down at the bottom of the page.0541

So, it did not pop up here in this area; it went underneath.0547

But let's take a look at the code that was created by Dreamweaver.0554

I'll turn over to Code View, and you can see: here is an outer div for our wrapper; here is the closing tag; and notice, my left and right boxes are sitting inside of that wrapper tag.0559

Now, the reason that the blue box ended up below the red box is because the div tag places each box in its own space.0576

In order to pull it up alongside another box, there are a few things you have to do; and we haven't talked about that yet.0587

I'm going to leave my red box above my blue box, just like this; and let's look at it in the various browsers.0595

I'll go ahead and save; I'll put it into Internet Explorer; now, this is Internet Explorer 8, a very old version that can tend to be a little quirky; and you can see, it displays exactly the same as it does in Dreamweaver.0603

Let's put it in Google Chrome; Google Chrome is really the most modern browser of them all; and you can see, it looks identical here.0621

Some of these basic positioning pieces really won't change in your browser for some of this type of stuff that we are doing; this has been supported for a long time.0631

All we did was create boxes of content, using a div with an ID; and we simply assigned very simple properties of background color, height, and width to those boxes.0643

The workflow is the piece that I wanted to show you.0658

And right now, we don't have any content on this page; but if I did, I could use the same workflow and use this Insert Div right here to our benefit.0662

So, we use the Insert Div; and you can see, you have a lot of options here for Dreamweaver creating things for you.0676

But that is how you can create boxes (cancel out of that) of content, with or without content, on your web page, using Dreamweaver.0685

Dreamweaver creates the HTML for us, and the CSS for us at the same time, so we don't have to do it manually.0698

That is the Insert Div Tag command within Dreamweaver to create boxes for us to position on our web pages.0707