Accessibility
Sheri German

Sheri German

Community MX

Table of Contents

  1. Introduction
  2. CSS versus table-based layouts
  3. Defining the Dreamweaver site
  4. Floating and clearing images
  5. Adding DIVs
  6. Using absolute positioning to create side-by-side columns
  7. Using floats to create columns
  8. Clearing a floated column
  9. Adding background colors to DIVs
  10. Creating a new DIV
  11. Adjusting for margin collapsing
Created:
23 March 2009
User Level:
Beginner
Products:
Dreamweaver

From table-based to tableless web design with CSS – Part 1: CSS Basics

Everyone is urging you to make the switch from table-based layouts to tableless, CSS-positioned layouts. You've certainly been thinking about it, but CSS layouts seem so unintuitive. You've established a workflow with tables that, well, works. Why should you change? After all, browsers will always render tables, and you understand their methods and issues. All you have to do to get a design grid is fill out the Dreamweaver table dialog box. Would that it were so easy with CSS! Well, it can be—Dreamweaver includes CSS starter pages that provide a kind of CSS alternative to the table dialog box.

Part 1 of this tutorial gently guides you through the transition from tables to CSS, and demonstrates how in many ways CSS layouts are easier. You'll learn the basics of CSS layouts and see that there are many equivalencies between table and CSS concepts.

In Part 2 you'll learn to work with CSS starter pages as you convert a table-based design to a pure CSS design. You'll even get to add some "wow factor" to the design by using a Spry Accordion widget in the page.

The completed project sports a Spry Accordion widget at the bottom of the left side

Figure 1. The completed project sports a Spry Accordion widget at the bottom of the left side

Before you build the Yacht Club design shown in Figure 1, however, you'll learn about the advantages of the CSS approach. You'll also learn a few techniques that you can use to replace old school methods. Once you master a few core concepts, you will understand what goes on underneath the hood of most of the CSS starter pages.

Requirements

In order to make the most of this article, you need the following software and files:

Dreamweaver CS4

Sample files:

Prerequisite knowledge

Basic knowledge of Dreamweaver.

Creative Commons License
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

Page 1 of 11
Next Page

About the author

Sheri German teaches web standards development at the Government Printing Office Federal Institute for Printing and Electronic Publishing. She also teaches web technology and technology education at Montgomery College in Rockville, MD, and provides hands-on tutorials for the Washington Apple Pi MUG. In her own web design work, she concentrates on websites for people in the arts and has created many sites for dancers, musicians, and writers. Sheri is an Adobe Education Leader and Certified Dreamweaver MX 2004 Developer. Along with Kim Cavanaugh, she is the author of The Dreamweaver 8 Visual Encyclopedia (ISBN: 0471751766). Her other writing activities include contributing author to the Washington Apple Pi Journal, training materials for classes, and articles for Community MX, where she is the partner in charge of the JumpStarts (Dreamweaver standards templates) program. Sheri has an MA in Music, and when she is not developing websites or teaching, she listens to classical music or takes ballet classes. She lives in Maryland with her husband, two children, three cats, and a dog.