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!

How to Use CSS for Page Layout

  • The file called html-css-layout file.png is located in the extras folder within the course files
  • HTML and CSS work together in the browser to create page layouts
  • We are going to build a page layout so you can see how HTML and CSS combine to create these layouts
  • In order to work with page layouts using CSS, we use a combination of html div tags, a tag that represents a division of content, or we can use other HTML tags themselves
  • Styles get assigned to those divs or tags by assign a name to that content area or div
  • Once we have named an area of the page using an ID, we can then tell the browser where and how to display that content on the page
  • We are going to build a page layout from scratch
  • This takes 2 steps
    • HTML portion-Create the div tags and place content inside those divs
    • CSS portion-Give each div  on the page a unique name and create styles that tell the browser how to display each div

How to Use CSS for Page Layout

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
  • Page Layout Example 0:10
    • HTML Tasks
    • CSS Tasks
  • Code Examples 3:50
    • HTML Code Example
    • CSS Code Example

Transcription: How to Use CSS for Page Layout

Welcome back to

What we are going to talk about now is creating page layouts with HTML and CSS.0003

I have a little slide here to show you and give you an idea or a base on what the jobs are--what role each piece holds in creating our web page layout.0010

HTML has a job, and CSS has a job; and between the two of them, they work together to create our page layouts.0024

What I have here is an example of a page layout, and it is a very simple one, as you can see.0034

We have a basic outer wrapper, which is this piece here, all the way surrounding the content.0040

So, just think of that as a wrapper or a container for our content on our web page.0047

That is what this wrapper piece is referencing.0053

So, within that wrapper, we have four different areas of content, and each one of those is created in a particular way.0057

Let's take a look at the jobs of HTML, and then the job of CSS.0068

What are the HTML tasks that need to be done?--well, what HTML does is literally create each one of these boxes on the page; and what we have done is assigned a name to those boxes.0076

Now, the way you assign a name to the box is using an ID, and that ID is a selector in CSS.0090

Basically, the tag or the box of content has an HTML tag; and to that tag, we assign a name--that allows HTML and CSS to both understand what we are talking about.0100

Now, the tags you normally use for working with these boxes on the page--back in XHTML days, it was always a div, but HTML5 has some new tags to use, such as header, footer, article, section, aside--these are different regions of a page.0116

HTML5 gives us a few more tags to use for our boxes.0140

Up until this point, it was always a div tag; so that is the HTML side--we create our tags; then, using those tags, we allow CSS to hook into them with that ID.0146

What does CSS do?--it assigns format and positioning to those boxes.0161

It uses that ID; so we have an ID up here; we have an ID down here; it allows the two to communicate.0168

So, the ID assigned in the HTML tag becomes the CSS selector; and what the selector does is tell the page which content to style.0178

Which content?--in other words, what area of the page are we going to reference?--and then, once we understand what area of the page, what is it we are going to do to it?0193

Properties and values are the pieces that tell CSS what to do.0207

That is no different than our formatting piece: just remember, CSS is always added to HTML tags.0213

So, the HTML has to be there as our base and foundation in order to do that.0224

What I want to do is give you some code examples before we get started working in Dreamweaver, creating these boxes.0230

So, let's take a look at that.0238

What is the HTML code that needs to happen on our page?0241

So, here it is: this is an example of that code.0247

HTML code creates the boxes; now, I actually have two different versions here.0251

This left one is XTML code: notice, it uses div tags only; most of the time, those div tags are there.0258

The content goes inside the div tags, and you assign an ID to the div; so the div tag is just used over and over again.0267

You can see that a div, you can think of as a box of content.0278

In HTML5 code, it is not necessarily that way: notice, we are using an outer div as the outer wrapper for our page; however, we are using an HTML5 header tag, HTML5 nav tag (these are all new tags) is another header; here is another nav.0284

So, you have the ability to use whatever tags you want, and it is possible to use multiple header and multiple nav tags within your code.0309

Those need to be assigned an ID; and within that ID, that is how you can reference it; or you can just use the basic tag itself.0322

Since this is a tag, each one of these, I can assign an HTML tag as a selector.0334

Over here, what we are doing is assigning an ID as the selector.0342

Let's take a look at that code.0347

Here is the CSS side; notice, here is our wrapper ID (that was assigned to our box); here is our header (and that was assigned as a name referenced in an ID), and here is my nav.0351

We have a content ID, and we have a footer ID; so let's put this all together.0370

Here is my completed code.0379

So, we have our XHTML example here, or our HTML5 example; here is some CSS associated with the XHTML example.0381

What we are doing is: see, here is our footer, our content; footer goes with footer; content goes with content over here; they all line up.0396

Here is my nav; here is my nav; over here is an ID; here is my header ID; here is my header ID; and then we have the outer wrapper that goes around the entire piece of content.0408

That is creating page layouts with HTML and CSS.0424

Each of these technologies...HTML has its job; CSS has its job; and the two work together.0430

Just know that there has to be some kind of a connection between them, and that is all done at the code level, right in this area.0439

HTML and CSS work together, creating boxes of content on your page that you can then position using your various properties and values within CSS.0448

That is an overview of how HTML and CSS work together to create CSS page layouts.0463