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!

Pre-Defined CSS Layout Options

  • Dreamweaver offers pre-defined CSS layouts that you can use
  • What is the difference between the various layouts?
  • Layout Options: Start by looking at the layout names, from left to right
    1. Number of Columns: Choose from 1, 2 or 3 column layouts
    2. Width of Page: The next decision is whether you want the width of the page to stay the same or adjust to the width of the users' browser window
      1. Fixed- page width is defined in pixels and does not ever change
      2. Liquid-page width changes based on the width of the browser viewing the page
    3. Header or Footer: Do you want a header or footer area on the page?
  • As you choose any of these options, you can view a preview of the page in the right column
  • Below the preview and description, you choose the doctype and how you want to work with CSS on this page
  • Default choices are HTML5 as the doctype and CSS rules on the same page as the HTML
  • Dreamweaver makes it easy to move your rules onto a separate style sheet should you decide to do so later

Pre-Defined CSS Layout Options

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
  • Course Files 0:21
  • Files in Files Panels 1:37
  • New Document 2:38
    • Page Type
    • Layout Options

Transcription: Pre-Defined CSS Layout Options

Welcome back to

What I want to do now is get our files set up for this chapter on Predefined CSS layouts.0003

And we created a site folder and define that site within Dreamweaver, so you want to make sure you have that set up within Dreamweaver.0011

Now, what I want to do is I have some chapter files for you that we are going to copy into that empty folder.0021

And I am going out to the chapter 6 course files, so within the Exercise files area, underneath this video, there is a tab.0029

Go ahead and download those course files for this particular chapter on Predefined CSS layouts, and we want to copy the information and all the files within the Predefined CSS layouts folder.0039

I am going to copy those into my other folder, that is completely empty, which I have defined within Dreamweaver.0055

So, I will go ahead and just do a Copy and paste to do that and there are my files, so I will close that up and we go out to Dreamweaver and take a look.0064

Now, I mentioned you should not be doing this type of thing, if you are moving files, you are renaming files for your website.0078

Since we did not have any files, within here, it is certainly possible to add them to your root folder without a problem through your files system, which is what we just did.0086

Let me show you what happens in the Files panel in Dreamweaver, I added these particular files and guess what?0097

They automatically appear within the Files panel for my Predefined CSS layout, root folder so, I had that predefined in Dreamweaver.0105

Now, the Files panel tends to auto refresh, most of the time.0118

In case you do not see these files, once you have moved it in -- and make sure you are looking in the same area -- you can always click the Refresh button, right here, within the Files panel and those files should show up in the Files panel.0122

In case they are not showing, you may not have copied them into the correct folder on your files system, so just make sure you take care of that before we begin.0139

The idea behind these files is that you have some information already set up as we go through the chapter.0149

We are going to take a look at some of these predefined CSS layouts, within Dreamweaver, that are available to you.0158

Let us go up to the File menu, within Dreamweaver, and take a look.0166

Go up to File new, and when you do that you get a rather overwhelming interface and I tend to find people get a bit confused through here, so the idea is start at the left and work your way right.0172

What we are going to do is take a look at a blank page, so the first one and the first column, we also going to take the first one in the second column, we want an HTML page type.0187

Now, the third column is where it gets interested, notice we have quite a few options listed within this area and if I click on them, what it does in the right hand side is show you a preview of what that page is going to look like.0201

Basically, the one column fixed centered layout, this is a preview of it so it is a single column page -- which is really not most webpages nowadays -- it is a fixed width, which is what the little lock means, 0217

+ICY-in other words, this page always remains the same within any browser and it is all so centered, in the Browser window, so will stay in the center, 0235

Your browser window may be this wide but your page will always stay in the middle.0245

So, that is the centered piece, so really just start at the left and work your way right in the layouts.0251

Do I want a one column structure, or do I want a two column, and you can see in the two column area there is quite a few options, or do you want a three column layout?0257

Now, within this layout area, everything that says one column to three columns is considered XHTML DocType, these two lower ones are going to give you an HTML5 DocType, by default.0272

If I click on these, this one is a 2 column fixed widths, so the width of the page versus the browser never changes, the browser page can get bigger, but my page stays the same.0289

This also has a left sidebar, so you can see this would be our Navigation area on the left hand side of the page and it also contains a Header and a Footer area.0302

So, you can see up at the top we have a Header and at the bottom we have the Footer area.0315

You can think of this as a wireframe of the page itself and the layout you are referencing.0321

Now, the other option is what is known as a Liquid layout and this was a hot type of layout some years ago, everybody was moving into a Liquid type layout.0328

What that does is allow the browser or your webpage to change based on the width of the browser, so if my browser is this wide that is how my page will be as the browser gets bigger, my page will also get bigger.0340

You have to decide if you want it to remain the same, no matter what, or if you want it to expand and contract based on the browser window and the user choosing it.0355

That can really mess up your page design, so the Liquid layout you really have to play on for that one, in terms of your overall design.0366

We have the two different HTML5 pieces, this is a 2 column fixed, right sidebar, instead of the left sidebar, we just looked at. 0376

This would be the HTML5 version of that 2 column fixed with the right sidebar, this would be an XHTML version of that same design and layout.0387

You can see the previews look identical, there is the 2 column fixed, right sidebar, and here is the same, but the code underneath would have a different DocType attached to it and that will differentiate those two pages.0399

That is an overview of the various options within the layout category and these are kind of known as starter pages, the idea is the pages laid out, there is some CSS attached to the page.0415

Basically, it is like a temple of page almost, where you have got it all laid out, now it is a matter of just dropping your content into the various areas of the page and then the page is fully usable.0432

It may be easier for you to start with those, so we are going to take a look at working with one of these layouts and the one we are going to take a look at is this HTML5: 2 column fixed, right sidebar with a header and footer.0446

We will do that in another lesson, I just wanted to give you an overview of what all of these means within the interface, so you know what is available as a starter page. 0462

In case you decide you do not want the 2 column, you do have a quite a few other options within this area.0473

So, those are the prebuilt CSS layouts, within Dreamweaver that are available for you to use, to create and use as a starter page, for your own website.0482

Those are the starter pages or prebuilt CSS layouts within Dreamweaver.0494