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 Educator.com

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!

Controlling Content Boxes Using CSS

  • We are going to walk through the workflow process for creating a web page that is more typical of the basic layout of a web page
  • We will be creating 5 div tags, and assigning background colors and box sizes to them
  • Using Dreamweaver we can build the divs & ids at the same time
  • We will create the div tag and assign the ID and its properties at the same time using the Insert Div Tag in the Layout tab of the Insert Bar
  • The Insert dropdown in this interface allows you to create boxes relative to other boxes on the web page
  • Create a new page and name it div-id.html
  • Add divs by choosing the Insert div icon within the Layout tab in the Insert Bar
  • We will end up with 5 different IDs on the page: wrapper, header, left, right and footer

Controlling Content Boxes Using CSS

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:18
  • Creating Divs with Matching IDs 0:32
    • Insert Div Tag
    • New ID CSS Rule
    • Assign Properties
    • Insert Header Div Tag
    • Assign Properties
    • Add Text
  • Building Navigation Bar 6:50
    • Insert Div Tag
    • Set Insert Location
    • Assign Properties
    • Add Text
  • Create Content Area 9:07
    • Insert Div Tag
    • Assign Properties
  • Modify Header Style 11:01
  • Add Float Property 11:39
  • Add Padding Property 12:20
  • Add Margin-Left Property 13:11
  • Summary 13:47

Transcription: Controlling Content Boxes Using CSS

What we are going to do now is build a new HTML page from scratch, very similar to a more natural-looking or more normal-looking web page.0000

We are going to use Dreamweaver's interface to do it and manipulate the content.0013

Let's start with a brand-new page: Ctrl+N or Command+N; we will save this, and let's save as div-id.0018

This is creating divs with matching IDs that we can position.0033

Let's start building our div tags.0038

So, I am up in the Layout tab of the Insert bar; and the very first icon is how you insert a div tag.0041

I am also going to have my CSS Styles panel open; I like to have this open so I can see what is happening as these divs are built.0050

I'll click the first icon, Insert Div Tag; I am not going to worry about where to insert it, because this is my outermost tag.0061

So, I am going to create the ID for this div with a new rule; so I'll go out and choose the ID up in this area (it's an ID selector I'm creating).0072

I get to name it: this is going to be my outer wrapper ID; and you will end up using this one quite a bit to contain content on your pages.0086

This is going to go into this document only; I can always move it later if I decide to.0098

I'll click OK; now, I need to determine what I want this wrapper to be.0105

What I am going to do is simply assign a margin; let me set a width to the box, and I'm going to assign a rather strange margin feature.0112

Let's give it a width of 900 pixels; I'm going to go ahead and give it a height of 700; now, on your web pages, you probably won't be assigning heights like this--you'll let the content stretch it out--but I want to make sure that box remains open so that you can get a better feel for working with these boxes or divs with IDs, moving forward.0126

And then, we'll have some additional content as we build our other pages.0154

I'm going to set the background color; and this one is going to be #bffff...it's only 4...I want 5.0159

Now, if I click Apply, I'll be able to see what that color is; and that is a powder blue color.0173

I can always change these, so you really don't have to get too concerned about that right now.0180

In the box, I have a 900x700 box with a light blue background; I'll click OK; that is what should happen on my page once I click this next OK.0186

The thing you want to watch for here is: make sure that new ID you created shows up in the ID field.0199

It's easy to accidentally create a class instead of an ID, so always make sure it gets dropped in there first, before you click OK.0207

And you can see, it is definitely a big blue box.0217

Now, what I am going to do is put a big header up across the top of this box.0222

I will click Insert Div Tag; when I do that, I need to pay attention to this Insert piece, because I want to make sure it goes inside this wrapper box.0228

I am going to select within this area, and I am going to say after the start of my wrapper tag.0241

There is my wrapper tag; after start of tag...now, I'll create a new CSS rule: this is going to be an ID called header.0251

Instead of using the HTML5 header tag, I am going to work with divs and IDs.0264

The reason I am doing that for now is because that is still the common positioning piece for the Web; websites haven't transitioned into HTML5-type tags, so if you have to take over a website, more than likely it's divs and IDs you will need to understand.0271

That is why we are working this way.0293

I'll click OK: and now, I'm going to set my box to a width of 900 for my header; it's going to go all the way across the top of the page.0296

I will assign it a height for now; and I'll give it a height of 50--I can always add content and delete the height later.0309

I don't need any padding, and I want my margin to be 0; so I'm assigning a margin of 0 all the way down.0318

And let me give this a color so I can tell that it's there; I tend to do this as I build them--it's much easier to see--so I'll add a background color.0328

And actually, let me type in the background color: it's going to be #ffefbf: so, two f's, an ef, and a bf.0339

If I click Apply, you will be able to see the color; it's a light yellow--almost a peachy color.0352

We'll click OK; header should drop in in the ID area of the page; I'll click OK; and there is my header, all the way up across the top of the page.0359

Now, with this text highlighted, I am going to type in Wanderlust Travel.0371

You can see, it's way up in that top left corner; I don't have any padding right now, but I can always come back and modify those types of things later.0380

I am just going to get my boxes up in this area.0390

I think that could be a little bit taller; so let's go over here and set it to 60 instead.0394

There is my web page so far: I have an outer area, and within it, I have a header.0401

Now, what we are going to do is build a navigation bar on the left-hand side; so let's add that.0410

I'll insert a div tag; this time, I want it after another tag; and the tag I want it after is the header tag.0417

After my header tag, I want to create a new box for my navigation; I'll click New CSS Rule (make sure you change that to an ID--it's easy to forget that piece); and this one is going to be called Nav.0429

I'll place it in this document only, just like I've been doing so far, and click OK.0447

Now, my navigation bar--I think I'll make it 175 pixels wide; I will set a height for now, because I don't have content in it--I'll set it to 400 high.0454

I am going to set a margin of 0, so that it goes all the way against the side; and I am going to add a background color here; and my navigation is going to be #ffbfbf.0470

#ffbfbf; I'll click Apply; this is kind of a peachy pink color--you can see I'm in this pastel theme right now--I went from primaries to pastels.0487

Click OK; Nav pops in as my ID; I'll click OK, and this is where my navigation would go.0502

Right here, I am going to type in some text; I am going to say home, put a space, destinations, put a space, specials, space (notice it's all lowercase), about us, space, and contact us.0511

I will let CSS arrange those, put them in separate lines...do everything I need to for that piece.0532

There is my navigation piece; so our page is actually starting to look a bit like a web page.0539

Now, what I need to do next is add the content area for this middle section; so let me do that.0548

Here is my div tag; I am going to insert it after my nav tag.0556

There is my nav ID; and it is going to go after that, so it should end up over here.0563

I'll click New CSS Rule and add an ID here; this one is going to be content--so that will be my main content area (or at least in this example).0571

I'll click OK; and I'll make this one 650 wide; so I'll go down to box...0584

Now, notice, I am only putting positioning pieces into this; my height I will set up to 7...oh, let me do 600 for now; and I will set the margin to 0 here, as well.0593

That is just going to clear out any margin that might occur, based on other tags; and this background color is going to be #bfbfff.0614

I'll click Apply; this one is a purple--the pastel thing is happening.0628

Here is the ID, dropped in just fine; I'll click OK; there is my purple.0634

Now, my purple seems to have something interesting happening; but I'm just going to leave this content for ID...content goes here.0642

Now, notice, my div ended up down below my navigation bar; and we are going to fix that in a moment.0652

I'm going to set my Wanderlust Travel to a Header 1, and you can see that expanded the size; we can always add styles for that.0661

And when it expanded this size, notice how it pushed this piece down; I can fix that when I fix this text.0672

But so far, I don't have anything with regards to fonts in any of my ID's.0681

I tend to try and keep the font piece segregated out of the ID, so the ID just contains the positioning pieces--or at least, most of the time that is the case.0688

Now, what do I do about this situation here?0700

Well, I am going to have you add something to the page; and we will take a look at this again later, but I am going to have you go up to nav, and we are going to add a property called Float.0703

What I am going to do is float this one left, and look at what happened: it did a nice job of pulling my content up for my content area.0718

Now, I think both of these can be a little bit wider; so I'll set the width of my navigation ID a little bit wider; I should also add some padding in here, so I'll click Add Property and scroll down to Padding here; there we go.0731

And I'm going to set it to 15px for padding; you can see how that expanded the size of the box.0749

I'm going to do that same thing for content--I'm going to add some padding here: down to the Padding piece, add 15 pixels here; make sure you add those units in--the px is considered a unit.0758

And I also am going to set...let's see, let's make this a little bit wider; so my width is only 650 now--let's make it 750...make it just a little bit wider.0775

And I am also going to separate these columns; I am going to give this one a left margin to move it over.0791

Margin does not include the background color; so what that is going to do is move it over and allow the blue to show in between.0800

I am going to choose Margin Left, and I am going to add 50 pixels of margin to the left; when I do that, you can see how it popped this over.0808

Now, I really don't need the blue piece; I just have it there for you to be able to see what is going on.0820

But this gives you an idea of positioning; and I'm going to say this is Positioning with Divs and ID's.0827

There is our positioned page; we are well on our way to moving forward, setting up a web page.0839

I wanted to give you a feel for actually working with a page without content, because as soon as you add the content, it's not quite so easy to see what is going on.0847

But that is how you can position content with divs and ID's, working with the CSS Styles panel, the Layout tab with Dreamweaver, and this Design View.0859

And you can see how easy it is to be able to have access to all of those various CSS properties and ID's within your web pages, so you can modify and visually see what is going on at the same time.0873

Thank you for watching Educator.com; see you in the next lesson!0888