O'Reilly logo

Dreamweaver CC Digital Classroom by AGI Creative Team, Greg Heald, Michael Arguin

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Lesson 5: Creating Page Layouts with CSS

dw05.psd 

Now that you’ve used Cascading Style Sheets, you’ve seen how powerful they can be for styling a page. CSS is equally powerful as a layout tool, allowing you to freely position page content in ways not possible with HTML alone.

What you’ll learn in this lesson:

  • Understanding the CSS Box model
  • Creating and positioning Divs
  • Understanding absolute versus relative positioning
  • Styling Divs
  • Setting margins and borders

Starting up

Before starting, make sure that your tools and panels are consistent by resetting your workspace. See “Resetting the Dreamweaver workspace” in the Starting up section of this book.

You will work with several files from the dw05lessons folder in this lesson. Make sure that you have loaded the dwlessons folder onto your hard drive from www.digitalclassroombooks.com/epub/dreamweavercc. See “Loading lesson files” in the Starting up section of this book.

Before you begin, you need to create site settings that point to the dw05lessons folder. Go to Site > New Site, or, for details on creating a site, refer to Lesson 2, “Setting Up a New Site.”

The CSS Box model

CSS positions elements within a page using the Box model, which refers to the fact that all HTML elements have default boxes that you can choose to style. You can think of a box as a container for text, images, media, tables, and other content. In most cases, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required